@elderbyte/ngx-starter 13.6.0 → 13.7.0

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -2227,6 +2227,9 @@ class CollectionUtil {
         }
         return true;
     }
+    static hasElements(list) {
+        return list !== null && list !== undefined && list.length > 0;
+    }
 }
 CollectionUtil.logger = LoggerFactory.getLogger('CollectionUtil');
 
@@ -21009,7 +21012,7 @@ class ElderSelectComponent extends ElderSelectBase {
      *                                                                         *
      **************************************************************************/
     set entity(entity) {
-        this.entity$.next(entity); // TODO Set entity$ when set directly via value / writeValue
+        this.entity$.next(entity);
         this.writeValueInternal(this.entityToValue(entity));
     }
     get entity() {
@@ -21346,67 +21349,121 @@ class ElderMultiSelectBase extends ElderSelectBase {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._valueIds = null;
-        this.valueIdsChange = this.valueChange.pipe(map(values => {
-            if (values) {
-                return values.map(v => this.getEntityId(v));
-            }
-            else {
-                return null;
-            }
-        }));
+        this.entities$ = new BehaviorSubject([]);
+        this.entityIdsChange = this.valueChange.pipe(map(values => this.entityIdsFromValues(values)));
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Select the value with the given id.
-     * @param ids
-     */
-    set valueIds(ids) {
-        if (!this.equalIds(ids, this._valueIds)) {
-            this._valueIds = ids;
-            this.selectValuesByIds(ids);
-        }
+    set entities(entities) {
+        this.entities$.next(entities);
+        this.writeValueInternal(this.entitiesToValues(entities));
     }
-    get valueIds() {
-        if (this.value) {
-            return this.getValueIds(this.value);
+    get entities() {
+        return this.entities$.getValue();
+    }
+    set entityIds(ids) {
+        if (this.valueAsId) {
+            this.writeValueInternal(ids);
         }
         else {
-            return this._valueIds;
+            this.selectEntitiesByIds(ids);
         }
     }
+    get entityIds() {
+        return this.entityIdsFromValues(this.value);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    updateValueByEntities(entities) {
+        this.updateValue(this.entitiesToValues(entities));
+    }
     /***************************************************************************
      *                                                                         *
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
     onSuggestionsDcChanged(data) {
-        if (this._valueIds) {
-            this.selectValuesByIds(this._valueIds);
+        if (this.valueAsId) {
+            this.selectEntitiesByIds(this.entityIds);
+        }
+    }
+    /**
+     * This method is invoked after a value has been written to this control.
+     *
+     */
+    writeToControl(value) {
+        if (this.valueAsId) {
+            const entityIds = value;
+            // Value was written as entity ids, ensure we select entity by id
+            this.logger.debug('writeToControl: value was written as ids: ' + entityIds, value);
+            this.selectEntitiesByIds(entityIds);
+        }
+        else {
+            // Value was written as entity, ensure entity is updated
+            const currentEntities = this.entities;
+            const newEntities = value;
+            this.logger.debug('writeToControl: value was written as entities (size): ' + newEntities?.length, value);
+            if (!this.equalEntities(currentEntities, newEntities)) {
+                this.entities$.next(newEntities);
+            }
+            else {
+                this.logger.warn('Ignored written entities as they are already set to entities$!');
+            }
         }
+        super.writeToControl(value);
     }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    getValueIds(values) {
+    entityIdsFromValues(values) {
+        return values?.map(v => this.entityIdFromValue(v));
+    }
+    entityIdFromValue(value) {
+        if (this.valueAsId) {
+            return value;
+        }
+        else {
+            const entity = value;
+            return this.getEntityId(entity);
+        }
+    }
+    entitiesToValues(entities) {
+        return entities?.map(e => this.entityToValue(e));
+    }
+    entityToValue(entity) {
+        if (this.valueAsId) {
+            const id = this.getEntityId(entity);
+            return id;
+        }
+        else {
+            return entity;
+        }
+    }
+    getEntityIds(values) {
         return values.map(v => this.getEntityId(v));
     }
     equalIds(idsA, idsB) {
         return Sets.equalContent(idsA, idsB);
     }
-    selectValuesByIds(ids) {
-        if (this.value && this.equalIds(this.getValueIds(this.value), ids)) {
-            return; // Already selected
+    equalEntities(entitiesA, entitiesB) {
+        return this.equalIds(this.getEntityIds(entitiesA), this.getEntityIds(entitiesB));
+    }
+    selectEntitiesByIds(ids) {
+        const currentEntities = this.entities;
+        if (currentEntities && this.equalIds(this.getEntityIds(currentEntities), ids)) {
+            return; // Entities already loaded
         }
-        if (ids === null || ids === undefined || ids.length === 0) {
-            if (this.value !== null && this.value !== undefined && this.value.length !== 0) {
-                this.writeValueInternal([]); // TODO Or write empty list?? []
+        if (!CollectionUtil.hasElements(ids)) {
+            if (CollectionUtil.hasElements(currentEntities)) {
+                this.writeValueInternal([]);
             }
         }
         else {
@@ -21418,8 +21475,8 @@ class ElderMultiSelectBase extends ElderSelectBase {
                     loaded.forEach((v, k) => existing.set(k, v));
                     return existing;
                 }), map(allValuesMap => Array.from(allValuesMap.values())) // TODO Sort?
-                ).subscribe(values => {
-                    this.writeValueInternal(values);
+                ).subscribe(entities => {
+                    this.entities = entities;
                 });
             }
             else {
@@ -21433,6 +21490,7 @@ class ElderMultiSelectBase extends ElderSelectBase {
             this.updateState(ElderSelectComponentState.error(err));
             return of([]);
         }), map(values => {
+            this.logger.debug('Loaded entities by id:', values);
             const valueMap = new Map();
             values.forEach(v => valueMap.set(this.getEntityId(v), v));
             return valueMap;
@@ -21451,12 +21509,14 @@ class ElderMultiSelectBase extends ElderSelectBase {
     }
 }
 ElderMultiSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ElderMultiSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectBase, inputs: { valueIds: "valueIds" }, outputs: { valueIdsChange: "valueIdsChange" }, usesInheritance: true, ngImport: i0 });
+ElderMultiSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectBase, inputs: { entities: "entities", entityIds: "entityIds" }, outputs: { entityIdsChange: "entityIdsChange" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { valueIdsChange: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { entityIdsChange: [{
                 type: Output
-            }], valueIds: [{
+            }], entities: [{
+                type: Input
+            }], entityIds: [{
                 type: Input
             }] } });
 
@@ -21475,7 +21535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 
-class ValueChip {
+class SelectChip {
     constructor(value, displayText, color, removeable) {
         this.value = value;
         this.displayText = displayText;
@@ -21500,13 +21560,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         this.chipColorResolver$ = new BehaviorSubject((value) => undefined);
         this.selectable = true;
         this.allowRemove = true;
-        this.valuesWrapped$ = combineLatest([
-            this.value$,
+        this.selectChips$ = combineLatest([
+            this.entities$,
             this.displayPropertyResolver$,
             this.chipColorResolver$
         ]).pipe(map(([values, dPR, cCR]) => {
             if (values) {
-                return values.map(v => new ValueChip(v, dPR(v), cCR(v), this.allowRemove));
+                return values.map(v => new SelectChip(v, dPR(v), cCR(v), this.allowRemove));
             }
             else {
                 return [];
@@ -21575,19 +21635,19 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         }
     }
     addLabels(labels) {
-        const current = this.value ? this.value : [];
+        const current = this.entities ? this.entities : [];
         this.replaceWith([...current, ...labels]);
     }
     addLabel(label) {
         this.addLabels([label]);
     }
     removeLabel(toRemove) {
-        const remaining = this.value
+        const remaining = this.entities
             .filter(l => !this.isEqual(l, toRemove));
         this.replaceWith(remaining);
     }
-    replaceWith(labels) {
-        this.updateValue(labels);
+    replaceWith(entities) {
+        this.updateValueByEntities(entities);
     }
     /***************************************************************************
      *                                                                         *
@@ -21595,8 +21655,8 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
      *                                                                         *
      **************************************************************************/
     isAlreadyPresent(queryValue) {
-        if (this.value) {
-            return this.value.some(v => this.isEqual(v, queryValue));
+        if (this.entities) {
+            return this.entities.some(v => this.isEqual(v, queryValue));
         }
         else {
             return false;
@@ -21612,10 +21672,10 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     }
 }
 ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipColorResolver: "chipColorResolver" }, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["chipInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(valuesWrapped$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipColorResolver: "chipColorResolver" }, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["chipInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), template: "<mat-form-field *ngIf=\"(valuesWrapped$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
+            args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), template: "<mat-form-field *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { allowRemove: [{
                 type: Input
             }], inputControl: [{