cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component.ts

@@ -0,0 +1,240 @@
+import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {HttpResponse, HttpStatusCode} from '@angular/common/http';
+import {ControlledFieldDataService} from '../../service/controlled-field-data.service';
+import {MessageHandlerService} from '../../service/message-handler.service';
+import {MatFileUploadService} from '../file-uploader/mat-file-upload/mat-file-upload.service';
+import {Subject} from 'rxjs';
+import {SampleTemplatesService} from '../sample-templates/sample-templates.service';
+import {takeUntil} from 'rxjs/operators';
+import {JsonSchema} from '../../models/json-schema.model';
+import {HandlerContext} from '../../util/handler-context';
+import {ActiveComponentRegistryService} from '../../service/active-component-registry.service';
+import {MultiInstanceObjectHandler} from '../../handler/multi-instance-object.handler';
+import {environment} from "../../../../../environments/environment";
+import {LocalSettingsService} from "../../service/local-settings.service";
+import {TranslateService} from "@ngx-translate/core";
+
+@Component({
+  selector: 'app-cedar-embeddable-metadata-editor-wrapper',
+  templateUrl: './cedar-embeddable-metadata-editor-wrapper.component.html',
+  styleUrls: ['./cedar-embeddable-metadata-editor-wrapper.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarEmbeddableMetadataEditorWrapperComponent implements OnInit, OnDestroy {
+
+  static TEMPLATE_LOCATION_PREFIX = 'sampleTemplateLocationPrefix';
+  static LOAD_SAMPLE_TEMPLATE_NAME = 'loadSampleTemplateName';
+  static TERMINOLOGY_PROXY_URL = 'terminologyProxyUrl';
+  static SHOW_SPINNER_BEFORE_INIT = 'showSpinnerBeforeInit';
+  static TEMPLATE_UPLOAD_BASE_URL = 'templateUploadBaseUrl';
+  static TEMPLATE_DOWNLOAD_ENDPOINT = 'templateDownloadEndpoint';
+  static TEMPLATE_DOWNLOAD_PARAM_NAME = 'templateDownloadParamName';
+  static TEMPLATE_JSON = 'templateJSON';
+  static INSTANCE_JSON = 'instanceJSON';
+
+  innerConfig: object = null;
+  private initialized = false;
+  private configSet = false;
+
+  public templateJson: object = null;
+  sampleTemplateLoaderObject = null;
+  showSpinnerBeforeInit = true;
+  protected _onDestroy = new Subject<void>();
+  externalTemplateInfo: object;
+  handlerContext: HandlerContext = null;
+  private instanceJson = null;
+
+
+  constructor(
+    private controlledFieldDataService: ControlledFieldDataService,
+    private messageHandlerService: MessageHandlerService,
+    private matFileUploadService: MatFileUploadService,
+    private sampleTemplateService: SampleTemplatesService,
+    private activeComponentRegistry: ActiveComponentRegistryService,
+    private localSettings: LocalSettingsService,
+    private translateService: TranslateService
+  ) {
+    this.sampleTemplateLoaderObject = this;
+
+    // this language will be used as a fallback when a translation isn't found in the current language
+    this.translateService.setDefaultLang(environment.fallbackLanguage);
+
+    // the lang to use, if the lang isn't available, it will use the current loader to get them
+    let currentLanguage = this.localSettings.getLanguage();
+    if (currentLanguage == null) {
+      currentLanguage = environment.defaultLanguage;
+    }
+    this.translateService.use(currentLanguage);
+  }
+
+  ngOnInit(): void {
+
+    this.sampleTemplateService.templateJson$
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(templateJson => {
+        if (templateJson) {
+          this.templateJson = Object.values(templateJson)[0];
+        }
+      });
+    this.matFileUploadService.uploadedFile$
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(fileInfo => {
+        if (fileInfo && fileInfo['event'] instanceof HttpResponse) {
+          const statusCode = fileInfo['event']['status'];
+
+          if (statusCode === HttpStatusCode.Created &&
+            this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_UPLOAD_BASE_URL) &&
+            this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_DOWNLOAD_ENDPOINT) &&
+            this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_DOWNLOAD_PARAM_NAME)) {
+            const filename = fileInfo['event']['body']['filename'];
+            const templateUrl = this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_UPLOAD_BASE_URL] +
+              this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_DOWNLOAD_ENDPOINT] + '?' +
+              this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_DOWNLOAD_PARAM_NAME] + '=' + filename;
+            this.sampleTemplateService.loadTemplateFromURL(templateUrl);
+          }
+        }
+      });
+    this.initialized = true;
+    this.doInitialize();
+  }
+
+  handlerContextChanged(event): void {
+    this.handlerContext = event;
+  }
+
+  @Input() get currentMetadata(): object {
+    if (this.handlerContext) {
+      return JSON.parse(JSON.stringify(this.handlerContext.dataContext.instanceFullData));
+    }
+    return {};
+  }
+
+  @Input() set metadata(meta: object) {
+    const instanceFullData = JSON.parse(JSON.stringify(meta));
+    const instanceExtractData = JSON.parse(JSON.stringify(meta));
+    this.deleteContext(instanceExtractData);
+    if (this.handlerContext) {
+      const dataContext = this.handlerContext.dataContext;
+      dataContext.instanceFullData = instanceFullData;
+      dataContext.instanceExtractData = instanceExtractData;
+      const multiInstanceObjectService: MultiInstanceObjectHandler = this.handlerContext.multiInstanceObjectService;
+
+      dataContext.multiInstanceData = multiInstanceObjectService.buildNewOrFromMetadata(
+        dataContext.templateRepresentation, instanceExtractData);
+
+      if (dataContext.templateRepresentation != null && dataContext.templateRepresentation.children != null) {
+        for (const childComponent of dataContext.templateRepresentation.children) {
+          this.activeComponentRegistry.updateViewToModel(childComponent, this.handlerContext);
+        }
+      }
+    }
+  }
+
+  @Input() set templateInfo(templateInfo: object) {
+    this.externalTemplateInfo = templateInfo;
+  }
+
+  @Input() set templateObject(template: object) {
+    this.templateJson = template;
+  }
+
+  @Input() set instanceObject(instance: object) {
+    this.metadata = instance;
+  }
+
+  @Input() loadConfigFromURL(jsonURL, successHandler = null, errorHandler = null): void {
+    const that = this;
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === HttpStatusCode.Ok) {
+          const jsonConfig = JSON.parse(xhr.responseText);
+          that.config = jsonConfig;
+
+          if (successHandler) {
+            successHandler(jsonConfig);
+          }
+        } else {
+          if (errorHandler) {
+            errorHandler(xhr);
+          }
+        }
+      }
+    };
+    xhr.open('GET', jsonURL, true);
+    xhr.send();
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+  @Input() set config(value: object) {
+    this.messageHandlerService.traceObject('CEDAR Embeddable Editor config set to:', value);
+
+    if (value != null) {
+      this.innerConfig = value;
+      this.configSet = true;
+      this.doInitialize();
+    }
+  }
+
+  @Input() set eventHandler(value: object) {
+    this.messageHandlerService.injectEventHandler(value);
+  }
+
+  private deleteContext(obj): void {
+    Object.keys(obj).forEach(key => {
+      delete obj[JsonSchema.atContext];
+
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        this.deleteContext(obj[key]);
+      }
+    });
+  }
+
+  private doInitialize(): void {
+    if (this.initialized && this.configSet) {
+      if (this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.LOAD_SAMPLE_TEMPLATE_NAME)) {
+        this.sampleTemplateService.loadTemplate(
+          this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TEMPLATE_LOCATION_PREFIX],
+          this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.LOAD_SAMPLE_TEMPLATE_NAME]);
+      }
+      if (this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.TERMINOLOGY_PROXY_URL)) {
+        const proxyUrl = this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.TERMINOLOGY_PROXY_URL];
+        this.controlledFieldDataService.setTerminologyProxyUrl(proxyUrl);
+      }
+      if (this.innerConfig.hasOwnProperty(CedarEmbeddableMetadataEditorWrapperComponent.SHOW_SPINNER_BEFORE_INIT)) {
+        this.showSpinnerBeforeInit = this.innerConfig[CedarEmbeddableMetadataEditorWrapperComponent.SHOW_SPINNER_BEFORE_INIT];
+      }
+    }
+  }
+
+  // used only for debugging of restoring metadata
+  private restoreMetadataFromURL(metaUrl, successHandler = null, errorHandler = null): void {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === 200) {
+          const jsonMeta = JSON.parse(xhr.responseText);
+          this.metadata = jsonMeta;
+
+          if (successHandler) {
+            successHandler(jsonMeta);
+          }
+        } else {
+          if (errorHandler) {
+            errorHandler(xhr);
+          }
+        }
+      }
+    };
+    xhr.open('GET', metaUrl, true);
+    xhr.send();
+  }
+
+  editorDataReady(): boolean {
+    return this.innerConfig != null && this.templateJson != null;
+  }
+}

package/src/app/modules/shared/components/cedar-multi-pager/cedar-multi-pager.component.html

@@ -0,0 +1,35 @@
+<div *ngIf="component && currentMultiInfo" [ngClass]="isAlignedUp? 'aligned-up' : 'pager-container'">
+  <div class="pager-chips">
+    <mat-chip-list tabIndex="0" aria-label="Allows multi values.">
+      <mat-chip selectable="false" disabled="true" *ngIf="!hasMultiInstances()" aria-label="No values yet">{{'Multi.NoInstancesYet' | translate}}</mat-chip>
+      <mat-chip *ngFor="let pageNumber of pageNumbers"
+                [selected]="pageNumber == currentMultiInfo.currentIndex"
+                (click)="chipClicked(pageNumber)"
+                selectable="true"
+      >{{pageNumber + 1}}</mat-chip>
+    </mat-chip-list>
+  </div>
+  <div>
+    <button mat-icon-button tabindex="0" [disabled]="!isEnabledAdd()" (click)="clickedAdd()" aria-label="Add empty after current">
+      <mat-icon [tabIndex]="-1" matTooltip="{{'Multi.AddEmptyAfter' | translate}}">note_add</mat-icon>
+    </button>
+    <button mat-icon-button tabindex="0" [disabled]="!isEnabledCopy()" (click)="clickedCopy()" aria-label="Add clone after current">
+      <mat-icon [tabIndex]="-1" matTooltip="{{'Multi.AddCloneAfter' | translate}}">content_copy</mat-icon>
+    </button>
+    <button mat-icon-button tabindex="0" [disabled]="!isEnabledDelete()" (click)="clickedDelete()" aria-label="Delete current">
+      <mat-icon [tabIndex]="-1" matTooltip="{{'Multi.DeleteCurrent' | translate}}">delete</mat-icon>
+    </button>
+  </div>
+  <div class="pager-pager">
+    <mat-paginator
+      *ngIf="getInstanceCount()>1" [length]="length"
+                   [pageSize]="pageSize"
+                   [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions: []"
+                   [pageIndex]="pageIndex"
+                   [hidePageSize]="hidePageSize"
+                   (page)="paginatorChanged($event)">
+    </mat-paginator>
+  </div>
+</div>
+<div *ngIf="component && currentMultiInfo && multiInstanceValue" class="info-box"
+     [innerHTML]="multiInstanceValue | keepHtml"></div>

package/src/app/modules/shared/components/cedar-multi-pager/cedar-multi-pager.component.scss

@@ -0,0 +1,41 @@
+.multiinfo-index {
+  background: #777777;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  color: #ffffff;
+  display: inline-block;
+  font-weight: 400;
+  width: 20px;
+  line-height: 20px;
+  margin-right: 5px;
+  margin-left: 10px;
+  text-align: center;
+  opacity: 60%;
+}
+
+.not-first-multiinfo-index {
+  margin-left: 15px;
+}
+
+.current-multiinfo-index {
+  opacity: 100%;
+}
+
+.mat-icon {
+  font-size: 18px;
+}
+
+.small-chip {
+  height:24px;
+}
+
+.aligned-up {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: right;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 15px;
+  margin-top: -50px;
+}

package/src/app/modules/shared/components/cedar-multi-pager/cedar-multi-pager.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CedarMultiPagerComponent } from './cedar-multi-pager.component';
+
+describe('CedarMultiPagerComponent', () => {
+  let component: CedarMultiPagerComponent;
+  let fixture: ComponentFixture<CedarMultiPagerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CedarMultiPagerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarMultiPagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/cedar-multi-pager/cedar-multi-pager.component.ts

@@ -0,0 +1,282 @@
+import {Component, DoCheck, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {MultiComponent} from '../../models/component/multi-component.model';
+import {PageEvent} from '@angular/material/paginator';
+import {ActiveComponentRegistryService} from '../../service/active-component-registry.service';
+import {MultiInstanceObjectInfo} from '../../models/info/multi-instance-object-info.model';
+import {HandlerContext} from '../../util/handler-context';
+import {ComponentTypeHandler} from '../../handler/component-type.handler';
+import {JsonSchema} from '../../models/json-schema.model';
+import {MultiFieldComponent} from '../../models/field/multi-field-component.model';
+import {InputType} from '../../models/input-type.model';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-cedar-multi-pager',
+    templateUrl: './cedar-multi-pager.component.html',
+    styleUrls: ['./cedar-multi-pager.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CedarMultiPagerComponent implements OnInit, DoCheck {
+
+    static readonly MAX_CHARACTERS_MULTI_VALUE = 30;
+
+    component: MultiComponent;
+    currentMultiInfo: MultiInstanceObjectInfo;
+    activeComponentRegistry: ActiveComponentRegistryService;
+    translateService: TranslateService;
+    @Input() handlerContext: HandlerContext;
+    @Input() isAlignedUp: boolean;
+
+    length = 0;
+    pageSize = 5;
+    pageIndex = 0;
+    pageSizeOptions: number[] = [1, 2, 5, 10, 25];
+
+    firstIndex = 0;
+    lastIndex = -1;
+    pageNumbers: number[] = [];
+    showPageSizeOptions = false;
+    hidePageSize = true;
+
+    multiInstanceValue: string;
+
+    constructor(
+        activeComponentRegistry: ActiveComponentRegistryService,
+        translateService: TranslateService
+    ) {
+        this.activeComponentRegistry = activeComponentRegistry;
+        this.translateService = translateService;
+    }
+
+    ngOnInit(): void {
+        this.recomputeNumbers();
+    }
+
+    ngDoCheck(): void {
+        this.multiInstanceValue = this.getMultiInstanceDataValueInfo();
+    }
+
+    getMultiInstanceDataValueInfo(): string {
+        if (!ComponentTypeHandler.isField(this.component)) {
+            return '';
+        }
+        const parentNodeInfo = this.handlerContext.getParentDataObjectNodeByPath(this.component.path);
+        const nodeInfo = this.handlerContext.getDataObjectNodeByPath(this.component.path);
+        let info = '';
+        const infoArray = [];
+        const inputType = (this.component as MultiFieldComponent).basicInfo.inputType;
+
+        (nodeInfo as Array<any>).forEach((fieldName, index) => {
+            const numStr = '<span class="multiinfo-index' + ((index > 0) ? ' not-first-multiinfo-index' : '') +
+                ((index === this.currentMultiInfo.currentIndex) ? ' current-multiinfo-index' : '') + '">' + (index + 1) + '</span> ';
+
+            if (typeof fieldName === 'string') {
+                infoArray.push(numStr + fieldName + '=' + this.shortValue(inputType, parentNodeInfo[fieldName][JsonSchema.atValue]));
+            } else if (typeof fieldName === 'object') {
+                if (fieldName.hasOwnProperty(JsonSchema.atValue)) {
+                    infoArray.push(numStr + (this.shortValue(inputType, fieldName[JsonSchema.atValue]) || 'null'));
+                } else if (fieldName.hasOwnProperty(JsonSchema.atId)) {
+                    // controlled field
+                    infoArray.push(numStr + (this.shortValue(inputType, fieldName[JsonSchema.rdfsLabel]) || 'null'));
+                }
+            }
+        });
+
+        info = infoArray.join('');
+
+        if (info) {
+            info = '<b>' + this.translateService.instant('Generic.AllValues') + ':</b> ' + info;
+        }
+        return info || '';
+    }
+
+    @Input() set componentToRender(componentToRender: MultiComponent) {
+        this.component = componentToRender;
+        this.activeComponentRegistry.registerMultiPagerComponent(this.component, this);
+    }
+
+    private shortValue(inputType: string, value: string): string {
+        let val = value;
+
+        if (value && [InputType.text, InputType.textarea].includes(inputType) &&
+            value.length > CedarMultiPagerComponent.MAX_CHARACTERS_MULTI_VALUE) {
+            val = value.substr(0, CedarMultiPagerComponent.MAX_CHARACTERS_MULTI_VALUE);
+            let ind = CedarMultiPagerComponent.MAX_CHARACTERS_MULTI_VALUE;
+            // make sure we cut off on a whole word rather than a fragment
+            while (!this.isEmptySpace(value[ind]) && ind < value.length) {
+                val += value[ind];
+                ind++;
+            }
+
+            if (val.trim().length < value.trim().length) {
+                val += '...';
+            }
+        }
+        return val;
+    }
+
+    private isEmptySpace(text: string): boolean {
+        return text == null || text.match(/^\s*$/) !== null;
+    }
+
+    private recomputeNumbers(): void {
+        this.setCurrentMultiInfo();
+        this.computeFirstIndex();
+        this.computeLastIndex();
+        this.updatePageNumbers();
+    }
+
+    private setCurrentMultiInfo(): void {
+        if (this.component != null && this.handlerContext.multiInstanceObjectService != null) {
+            this.currentMultiInfo = this.handlerContext.multiInstanceObjectService.getMultiInstanceInfoForComponent(this.component);
+        }
+    }
+
+    paginatorChanged($event: PageEvent): void {
+        if ($event.pageSize !== this.pageSize) {
+            this.pageSizeChanged($event);
+        } else {
+            this.pageChanged($event);
+        }
+    }
+
+    private pageSizeChanged($event: PageEvent): void {
+        this.pageSize = $event.pageSize;
+        this.computeFirstIndex();
+        this.computeLastIndex();
+        this.updatePageNumbers();
+    }
+
+    private pageChanged($event: PageEvent): void {
+        this.pageSize = $event.pageSize;
+        this.firstIndex = $event.pageIndex * $event.pageSize;
+        this.handlerContext.setCurrentIndex(this.component, this.firstIndex);
+        this.computeLastIndex();
+        this.updatePageNumbers();
+        this.activeComponentRegistry.updateViewToModel(this.component, this.handlerContext);
+    }
+
+    private updatePageNumbers(): void {
+        this.pageNumbers = [];
+        if (this.length > 0) {
+            for (let idx = this.firstIndex; idx <= this.lastIndex; idx++) {
+                this.pageNumbers.push(idx);
+            }
+        }
+    }
+
+    private computeFirstIndex(): void {
+        this.pageIndex = Math.floor(this.currentMultiInfo.currentIndex / this.pageSize);
+        this.firstIndex = this.pageIndex * this.pageSize;
+    }
+
+    private computeLastIndex(): void {
+        this.length = this.currentMultiInfo.currentCount;
+        if (this.length > 0) {
+            this.lastIndex = this.firstIndex + this.pageSize - 1;
+            if (this.lastIndex > this.length - 1) {
+                this.lastIndex = this.length - 1;
+            }
+        } else {
+            this.lastIndex = -1;
+        }
+    }
+
+    chipClicked(chipIdx: number): void {
+        // this call was causing the entire dateTimeParsed object to reset
+        // after the timezone input was set
+        // see cedar-input-datetime.component.ts:
+        // this.timezone = {
+        //   id: this.datetimeParsed.timezoneOffset,
+        //   label: this.datetimeParsed.timezoneName
+        // };
+        // this.activeComponentRegistry.updateViewToModel(this.component, this.handlerContext);
+
+        // nothing has changed, the same page number is clicked
+        if (chipIdx === this.currentMultiInfo.currentIndex) {
+            return;
+        }
+        this.handlerContext.setCurrentIndex(this.component, chipIdx);
+        this.recomputeNumbers();
+        const that = this;
+        setTimeout(() => {
+            that.activeComponentRegistry.updateViewToModel(that.component, that.handlerContext);
+        }, 0);
+    }
+
+    clickedAdd(): void {
+        this.handlerContext.addMultiInstance(this.component);
+        this.recomputeNumbers();
+        const that = this;
+        // The component will be null if the count was 0 before
+        // We need to wait for it to be available
+        setTimeout(() => {
+            that.activeComponentRegistry.updateViewToModel(that.component, that.handlerContext);
+        }, 0);
+    }
+
+    clickedCopy(): void {
+        this.handlerContext.copyMultiInstance(this.component);
+        this.recomputeNumbers();
+        const that = this;
+        setTimeout(() => {
+            that.activeComponentRegistry.updateViewToModel(that.component, that.handlerContext);
+        }, 0);
+    }
+
+    clickedDelete(): void {
+        this.handlerContext.deleteMultiInstance(this.component);
+        this.recomputeNumbers();
+        const that = this;
+
+        setTimeout(() => {
+            that.activeComponentRegistry.deleteCurrentValue(that.component);
+        }, 0);
+
+        if (this.currentMultiInfo.currentCount > 0) {
+            setTimeout(() => {
+                that.activeComponentRegistry.updateViewToModel(that.component, that.handlerContext);
+            }, 0);
+        }
+    }
+
+    isEnabledDelete(): boolean {
+        if (this.currentMultiInfo.currentCount === 0) {
+            return false;
+        }
+        if (this.component.multiInfo.minItems != null) {
+            if (this.currentMultiInfo.currentCount <= this.component.multiInfo.minItems) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    isEnabledCopy(): boolean {
+        if (this.currentMultiInfo.currentCount === 0) {
+            return false;
+        }
+        return this.isEnabledAdd();
+    }
+
+    isEnabledAdd(): boolean {
+        if (this.component.multiInfo.minItems != null) {
+            if (this.currentMultiInfo.currentCount >= this.component.multiInfo.maxItems) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    updatePagingUI(): void {
+        this.recomputeNumbers();
+    }
+
+    hasMultiInstances(): boolean {
+        return this.currentMultiInfo.currentCount > 0;
+    }
+
+    getInstanceCount(): number {
+        return this.currentMultiInfo.currentCount;
+    }
+}

package/src/app/modules/shared/components/date-picker/date-picker.component.html

@@ -0,0 +1,46 @@
+<ng-container *ngIf="dateFormat === yearFormat">
+  <mat-form-field>
+<!--    <mat-label>Select Year</mat-label>-->
+    <input matInput
+           [matDatepicker]="dp"
+           [formControl]="dateMonthYear"
+           attr.aria-label="{{'Generic.SelectYear' | translate}}">
+    <mat-error align="start" *ngIf="dateMonthYear.getError('required')" class="mat-error">{{'Error.ValueRequired' | translate}}</mat-error>
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp
+                    (yearSelected)="chosenYearHandler($event, dp)"
+                    startView="multi-year"
+                    panelClass="year-month-picker"
+    ></mat-datepicker>
+  </mat-form-field>
+</ng-container>
+<ng-container *ngIf="dateFormat === yearMonthFormat">
+  <mat-form-field>
+<!--    <mat-label>Select Year and Month</mat-label>-->
+    <input matInput
+           [matDatepicker]="dp"
+           [formControl]="dateMonthYear"
+           attr.aria-label="{{'Generic.SelectYearAndMonth' | translate}}">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp
+                    (yearSelected)="chosenYearHandler($event, dp)"
+                    (monthSelected)="chosenMonthHandler($event, dp)"
+                    startView="multi-year"
+                    panelClass="year-month-picker"
+    ></mat-datepicker>
+  </mat-form-field>
+</ng-container>
+<ng-container *ngIf="dateFormat === yearMonthDayFormat">
+  <mat-form-field>
+<!--    <mat-label>Select Date</mat-label>-->
+    <input matInput
+           [matDatepicker]="dp"
+           [formControl]="dateMonthYear"
+           (dateChange)="chosenDateHandler($event)"
+           attr.aria-label="{{'Generic.SelectDate' | translate}}">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp
+                    (opened)="chosenDateHandler($event)"
+    ></mat-datepicker>
+  </mat-form-field>
+</ng-container>

package/src/app/modules/shared/components/date-picker/date-picker.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .year-month-picker .mat-calendar-period-button {
+  pointer-events: none !important;
+}
+
+::ng-deep .year-month-picker .mat-calendar-arrow {
+  display: none !important;
+}