@sumaris-net/ngx-components 18.3.16 → 18.3.17

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -11998,6 +11998,16 @@ class MatChipsField {
             return;
         }
     }
+    toggleShowPanel(event) {
+        if (this.isOpen) {
+            event?.preventDefault();
+            event?.stopPropagation();
+            this.closePanel();
+        }
+        else {
+            this.dropButtonClick.emit(event);
+        }
+    }
     /* -- private method -- */
     async suggest(value, filter) {
         // Trim string value before searching
@@ -12093,7 +12103,7 @@ class MatChipsField {
                 multi: true,
                 useExisting: forwardRef(() => MatChipsField),
             },
-        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"material-chips\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>{{ placeholder }}</mat-label>\n        }\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\" [disabled]=\"!readonly && disabled\">\n          @for (item of value; track item) {\n            <mat-chip-row\n              class=\"ion-no-margin\"\n              [removable]=\"!disabled\"\n              (removed)=\"remove(item)\"\n              [color]=\"chipColor\"\n              [highlighted]=\"true\"\n            >\n              {{ item | toString: displayWith }}\n              @if (enabled) {\n                <mat-icon matChipRemove>cancel</mat-icon>\n              }\n            </mat-chip-row>\n          }\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' && placeholder\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          [autoActiveFirstOption]=\"true\"\n          [hideSingleSelectionIndicator]=\"true\"\n          [displayWith]=\"displayWith\"\n          [class]=\"panelClass\"\n          [panelWidth]=\"panelWidth\"\n          [disableRipple]=\"disableRipple\"\n          (optionSelected)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            }\n          </ion-row>\n\n          @if (_$filteredItems | push: 'userBlocking'; as items) {\n            <!-- No item option -->\n            @if (items | isEmptyArray) {\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\" [title]=\"text.innerText\" class=\"ion-align-self-center\">\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"\n                            item\n                              | propertyGet: path\n                              | highlight: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | strLength) < suggestLengthThreshold) {\n            <!-- Need more characters -->\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          } @else {\n            <!-- Loading spinner -->\n            <mat-option class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          }\n\n          <!-- footer -->\n          @if (itemCount; as count) {\n            <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\">\n                  <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n          }\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (formControl.hasError('entity')) {\n          <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n        }\n        <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        <!-- Hints -->\n        @if (!formControl.invalid) {\n          <mat-hint>\n            <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-no-padding\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle || '' | translate\"\n  >\n    <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n  </button>\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"clearButtonTitle || '' | translate\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"material-chips\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>{{ placeholder }}</mat-label>\n        }\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\" [disabled]=\"!readonly && disabled\">\n          @for (item of value; track item) {\n            <mat-chip-row\n              class=\"ion-no-margin\"\n              [removable]=\"!disabled\"\n              (removed)=\"remove(item)\"\n              [color]=\"chipColor\"\n              [highlighted]=\"true\"\n            >\n              {{ item | toString: displayWith }}\n              @if (enabled) {\n                <mat-icon matChipRemove>cancel</mat-icon>\n              }\n            </mat-chip-row>\n          }\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' && placeholder\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          [autoActiveFirstOption]=\"true\"\n          [hideSingleSelectionIndicator]=\"true\"\n          [displayWith]=\"displayWith\"\n          [class]=\"panelClass\"\n          [panelWidth]=\"panelWidth\"\n          [disableRipple]=\"disableRipple\"\n          (optionSelected)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            }\n          </ion-row>\n\n          @if (_$filteredItems | push: 'userBlocking'; as items) {\n            <!-- No item option -->\n            @if (items | isEmptyArray) {\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\" [title]=\"text.innerText\" class=\"ion-align-self-center\">\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"\n                            item\n                              | propertyGet: path\n                              | highlight: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | strLength) < suggestLengthThreshold) {\n            <!-- Need more characters -->\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          } @else {\n            <!-- Loading spinner -->\n            <mat-option class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          }\n\n          <!-- footer -->\n          @if (itemCount; as count) {\n            <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\">\n                  <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n          }\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (formControl.hasError('entity')) {\n          <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n        }\n        <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        <!-- Hints -->\n        @if (!formControl.invalid) {\n          <mat-hint>\n            <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-no-padding\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle || '' | translate\"\n  >\n    <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n  </button>\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"clearButtonTitle || '' | translate\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5$1.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
@@ -12103,7 +12113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => MatChipsField),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"material-chips\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>{{ placeholder }}</mat-label>\n        }\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\" [disabled]=\"!readonly && disabled\">\n          @for (item of value; track item) {\n            <mat-chip-row\n              class=\"ion-no-margin\"\n              [removable]=\"!disabled\"\n              (removed)=\"remove(item)\"\n              [color]=\"chipColor\"\n              [highlighted]=\"true\"\n            >\n              {{ item | toString: displayWith }}\n              @if (enabled) {\n                <mat-icon matChipRemove>cancel</mat-icon>\n              }\n            </mat-chip-row>\n          }\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' && placeholder\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          [autoActiveFirstOption]=\"true\"\n          [hideSingleSelectionIndicator]=\"true\"\n          [displayWith]=\"displayWith\"\n          [class]=\"panelClass\"\n          [panelWidth]=\"panelWidth\"\n          [disableRipple]=\"disableRipple\"\n          (optionSelected)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            }\n          </ion-row>\n\n          @if (_$filteredItems | push: 'userBlocking'; as items) {\n            <!-- No item option -->\n            @if (items | isEmptyArray) {\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\" [title]=\"text.innerText\" class=\"ion-align-self-center\">\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"\n                            item\n                              | propertyGet: path\n                              | highlight: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | strLength) < suggestLengthThreshold) {\n            <!-- Need more characters -->\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          } @else {\n            <!-- Loading spinner -->\n            <mat-option class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          }\n\n          <!-- footer -->\n          @if (itemCount; as count) {\n            <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\">\n                  <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n          }\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (formControl.hasError('entity')) {\n          <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n        }\n        <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        <!-- Hints -->\n        @if (!formControl.invalid) {\n          <mat-hint>\n            <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-no-padding\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle || '' | translate\"\n  >\n    <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n  </button>\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"clearButtonTitle || '' | translate\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"subscriptSizing\"\n        class=\"material-chips\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        @if (floatLabel !== 'never' && !!placeholder) {\n          <mat-label>{{ placeholder }}</mat-label>\n        }\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\" [disabled]=\"!readonly && disabled\">\n          @for (item of value; track item) {\n            <mat-chip-row\n              class=\"ion-no-margin\"\n              [removable]=\"!disabled\"\n              (removed)=\"remove(item)\"\n              [color]=\"chipColor\"\n              [highlighted]=\"true\"\n            >\n              {{ item | toString: displayWith }}\n              @if (enabled) {\n                <mat-icon matChipRemove>cancel</mat-icon>\n              }\n            </mat-chip-row>\n          }\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' && placeholder\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          [autoActiveFirstOption]=\"true\"\n          [hideSingleSelectionIndicator]=\"true\"\n          [displayWith]=\"displayWith\"\n          [class]=\"panelClass\"\n          [panelWidth]=\"panelWidth\"\n          [disableRipple]=\"disableRipple\"\n          (optionSelected)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            }\n          </ion-row>\n\n          @if (_$filteredItems | push: 'userBlocking'; as items) {\n            <!-- No item option -->\n            @if (items | isEmptyArray) {\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\" [title]=\"text.innerText\" class=\"ion-align-self-center\">\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"\n                            item\n                              | propertyGet: path\n                              | highlight: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | strLength) < suggestLengthThreshold) {\n            <!-- Need more characters -->\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          } @else {\n            <!-- Loading spinner -->\n            <mat-option class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          }\n\n          <!-- footer -->\n          @if (itemCount; as count) {\n            <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\">\n                  <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n          }\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        @if (formControl.hasError('required')) {\n          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n        }\n\n        @if (formControl.hasError('entity')) {\n          <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n        }\n        <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        <!-- Hints -->\n        @if (!formControl.invalid) {\n          <mat-hint>\n            <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-no-padding\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle || '' | translate\"\n  >\n    <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n  </button>\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"clearButtonTitle || '' | translate\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { equals: [{