D-Net

          <div class="uk-grid uk-grid-divider uk-padding-small" uk-grid>

            <div class="uk-width-expand@m uk-width-1-1">

              <result-preview [properties]="properties" [showOrganizations]="true"

                              [externalUrl]="contentProviderUrl">

              </result-preview>

            </div>

                    [totalResults]="openaireSearchUtils.totalResults">

    </no-load-paging>

  </ng-container>

          <div class="uk-grid uk-grid-divider uk-padding-small" uk-grid>

            <div class="uk-width-expand@m uk-width-1-1">

              <result-preview [properties]="properties" [showOrganizations]="true"

                              [externalUrl]="projectUrl">

              </result-preview>

            </div>

  selector: 'border',

  template: `

    <div class="uk-grid uk-margin-remove">

      <div class="uk-width-small uk-padding-remove-left">

        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />

      </div>

    </div>

    <div class="uk-grid uk-margin-remove">

      <div class="uk-width-small uk-padding-remove-left">

        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />

      </div>

                     label="Dark background color"

                     (colorChange)=

                       " draftCustomizationOptions.backgrounds.dark.color = $event;"></color>

              <color [color]="draftCustomizationOptions.backgrounds.light.color"

                     label="Light background color"

                     (colorChange)=

                       " draftCustomizationOptions.backgrounds.light.color = $event;"></color>

            </div>

            <div class="uk-margin-large-top uk-margin-small-bottom uk-text-bold" >Buttons

              <a *ngIf="hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons)"

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {DomSanitizer, Title} from '@angular/platform-browser';

import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';

import {LayoutService} from '../../openaireLibrary/services/layout.service';

import {AlertModal} from '../../openaireLibrary/utils/modal/alert';

  menuSelected = 'identity';

  color = 'white';

  defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();

  publishedCustomizationOptions: CustomizationOptions = null;

  draftCustomizationOptions: CustomizationOptions = null;

  appliedCustomizationOptions: CustomizationOptions = null;

  previewCustomization = null;

  buttonDarkBackgroundPreview;

  buttonLightBackgroundPreview;

  public showLoading = true;

  public errorMessage = '';

  public successfulSaveMessage = '';

        this.errorMessage = '';

        this.successfulSaveMessage = '';

        this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {

          this.initializeCustomizationOptions(true);

        }, error => {

          this.publishedCustomizationOptions = new CustomizationOptions();

        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}

      });

    }

      this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);

      this.successfulSaveMessage = "Customization Options saved!"

    }, error => {

  initializeCustomizationOptions(updatePreviewUrl) {

    this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);

    this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);

    if(updatePreviewUrl){

      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));

    }

  }

  applyLayout() {

    });

  }

}