@sumaris-net/ngx-components 18.23.58 → 18.23.59

package/esm2022/src/app/shared/material/chips/material.chips.mjs

@@ -677,8 +677,8 @@ export class MatChipsField {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], chipColor: "chipColor", debug: ["debug", "debug", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], colSizes: "colSizes", separatorKeysCodes: "separatorKeysCodes", showChips: ["showChips", "showChips", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", classList: ["class", "classList"], filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], chipColor: "chipColor", debug: ["debug", "debug", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], colSizes: "colSizes", separatorKeysCodes: "separatorKeysCodes", showChips: ["showChips", "showChips", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", classList: ["class", "classList"], filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -686,7 +686,7 @@ export class 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 [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"'dynamic'\"\n        [hideRequiredMarker]=\"hideRequiredMarker\"\n        [class.mat-form-field-disabled]=\"formControl.disabled\"\n        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\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\n        <mat-chip-grid\n          #chipList\n          (focus)=\"filterChipsFocusEvent($event)\"\n          [disabled]=\"!readonly && disabled\"\n          [required]=\"required\"\n          [errorStateMatcher]=\"_errorStateMatcher\"\n        >\n          @if (showChips) {\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 : null\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\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            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\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\n                      [size]=\"displayColumnSizes[i]\"\n                      [title]=\"!showTooltip ? text.innerText : ''\"\n                      [matTooltip]=\"showTooltip ? text.innerText : ''\"\n                      class=\"ion-align-self-center\"\n                    >\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        <!-- Hints -->\n        @if (!formControl?.invalid) {\n          <mat-hint>\n            <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n          </mat-hint>\n        }\n      </mat-form-field>\n\n      <!-- Do the same as MatFormField since angular 15 (see component source)-->\n      <div\n        class=\"mat-mdc-form-field-subscript-wrapper\"\n        [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n        [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n      >\n        @if (formControl.touched && formControl.errors; as errors) {\n          <!-- errors -->\n          <div class=\"mat-mdc-form-field-error-wrapper\">\n            @if (errors | mapKeys | arrayFirst; as errorKey) {\n              @switch (errorKey) {\n                @case ('required') {\n                  <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n                }\n                @case ('entity') {\n                  <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n                }\n                @default {\n                  <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </ion-col>\n    <ion-col [size]=\"colSizes?.[1]\" 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    [class.hidden]=\"disabled\"\n    [title]=\"!showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n    [matTooltip]=\"showTooltip ? (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      [class.hidden]=\"disabled || !formControl.value\"\n      [title]=\"!showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (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;visibility:hidden}.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)}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mdc-filled-text-field-error-label-text-color, var(--mat-app-error))}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{color:var(--mdc-filled-text-field-error-label-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: i5.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i12.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i14.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i15.HighlightPipe, name: "highlight" }, { kind: "pipe", type: i16.EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: i16.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i17.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i18.ToStringPipe, name: "toString" }, { kind: "pipe", type: i18.StrLengthPipe, name: "strLength" }, { kind: "pipe", type: i19.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i20.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatChipsField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-chips-field', providers: [
                         {

package/esm2022/src/app/shared/material/chips/testing/chips.test.mjs

@@ -141,10 +141,10 @@ export class ChipsTestPage {
     stringify(value) {
         return JSON.stringify(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipsTestPage, selector: "app-chips-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Suggest() function</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"entity\"\n                      placeholder=\"A chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                      [logPrefix]=\"'[mat-chips-empty] '\"\n                      chipColor=\"accent\"\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\" />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Required</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>required: true</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"requiredEntity\"\n                      placeholder=\"A required chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-items')\"\n                      [logPrefix]=\"'[mat-chips-required] '\"\n                      chipColor=\"accent\"\n                      required\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another required field</mat-label>\n                      <input matInput type=\"text\" required />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest() function with initial value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entityInitial\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                placeholder=\"A suggestFn field\"\n                [logPrefix]=\"'[mat-chips-initialized] '\"\n                chipColor=\"primary\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entityInitial.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"disableEntity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A disabled field\"\n                [logPrefix]=\"'[mat-chips-disabled] '\"\n                chipColor=\"warn\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.disableEntity.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A readonly field\"\n                [logPrefix]=\"'[mat-chips-readonly] '\"\n                [readonly]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest with length threshold</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                    >\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                placeholder=\"Entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                [suggestLengthThreshold]=\"3\"\n                [logPrefix]=\"'[mat-chips-suggestLengthThreshold] '\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Deported chips</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              @for (item of form.controls.entity?.value; track item.id) {\n                <ion-item>\n                  {{ item.name }}\n                  <ion-button slot=\"end\" color=\"danger\" (click)=\"deportedChipsField.remove(item)\">X</ion-button>\n                </ion-item>\n              }\n              <mat-chips-field\n                #deportedChipsField\n                formControlName=\"entity\"\n                [showChips]=\"false\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"Chips not shown here\"\n                [logPrefix]=\"'[mat-chips-deported] '\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", 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"] }, { kind: "component", type: i5.MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "pipe", type: i6.JsonPipe, name: "json" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChipsTestPage, selector: "app-chips-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Suggest() function</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"entity\"\n                      placeholder=\"A chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                      [logPrefix]=\"'[mat-chips-empty] '\"\n                      chipColor=\"accent\"\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\" />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Required</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>required: true</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"requiredEntity\"\n                      placeholder=\"A required chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-items')\"\n                      [logPrefix]=\"'[mat-chips-required] '\"\n                      chipColor=\"accent\"\n                      required\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another required field</mat-label>\n                      <input matInput type=\"text\" required />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest() function with initial value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entityInitial\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                placeholder=\"A suggestFn field\"\n                [logPrefix]=\"'[mat-chips-initialized] '\"\n                chipColor=\"primary\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entityInitial.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"disableEntity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A disabled field\"\n                [logPrefix]=\"'[mat-chips-disabled] '\"\n                chipColor=\"warn\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.disableEntity.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A readonly field\"\n                [logPrefix]=\"'[mat-chips-readonly] '\"\n                [readonly]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest with length threshold</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                    >\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                placeholder=\"Entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                [suggestLengthThreshold]=\"3\"\n                [logPrefix]=\"'[mat-chips-suggestLengthThreshold] '\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Deported chips</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              @for (item of form.controls.entity?.value; track item.id) {\n                <ion-item>\n                  {{ item.name }}\n                  <ion-button slot=\"end\" color=\"danger\" (click)=\"deportedChipsField.remove(item)\">X</ion-button>\n                </ion-item>\n              }\n              <mat-chips-field\n                #deportedChipsField\n                formControlName=\"entity\"\n                [showChips]=\"false\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"Chips not shown here\"\n                [logPrefix]=\"'[mat-chips-deported] '\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", 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"] }, { kind: "component", type: i5.MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "pipe", type: i6.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-chips-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Suggest() function</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"entity\"\n                      placeholder=\"A chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                      [logPrefix]=\"'[mat-chips-empty] '\"\n                      chipColor=\"accent\"\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\" />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">Required</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>required: true</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field\n                      formControlName=\"requiredEntity\"\n                      placeholder=\"A required chip field\"\n                      [appearance]=\"appearance\"\n                      [config]=\"autocompleteFields.get('entity-items')\"\n                      [logPrefix]=\"'[mat-chips-required] '\"\n                      chipColor=\"accent\"\n                      required\n                      [debug]=\"true\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another required field</mat-label>\n                      <input matInput type=\"text\" required />\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    {{ form.controls.entity.value | json }}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest() function with initial value</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entityInitial\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                placeholder=\"A suggestFn field\"\n                [logPrefix]=\"'[mat-chips-initialized] '\"\n                chipColor=\"primary\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entityInitial.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"disableEntity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A disabled field\"\n                [logPrefix]=\"'[mat-chips-disabled] '\"\n                chipColor=\"warn\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.disableEntity.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly control</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"A readonly field\"\n                [logPrefix]=\"'[mat-chips-readonly] '\"\n                [readonly]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Suggest with length threshold</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                    >\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field\n                formControlName=\"entity\"\n                placeholder=\"Entity\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                [suggestLengthThreshold]=\"3\"\n                [logPrefix]=\"'[mat-chips-suggestLengthThreshold] '\"\n                [debug]=\"true\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Deported chips</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              @for (item of form.controls.entity?.value; track item.id) {\n                <ion-item>\n                  {{ item.name }}\n                  <ion-button slot=\"end\" color=\"danger\" (click)=\"deportedChipsField.remove(item)\">X</ion-button>\n                </ion-item>\n              }\n              <mat-chips-field\n                #deportedChipsField\n                formControlName=\"entity\"\n                [showChips]=\"false\"\n                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                [equals]=\"equals\"\n                placeholder=\"Chips not shown here\"\n                [logPrefix]=\"'[mat-chips-deported] '\"\n              ></mat-chips-field>\n              {{ form.controls.entity?.value | json }}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }] });

package/esm2022/src/app/shared/material/datetime/datetime.module.mjs

@@ -21,8 +21,8 @@ import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatDateTimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDateTimeModule, declarations: [MatDate, MatDateTime, MatDateShort], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDateTimeModule, declarations: [MatDate, MatDateTime, MatDateShort], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -36,7 +36,7 @@ export class SharedMatDateTimeModule {
             MaskitoDirective, i1.TranslateModule, SharedDirectivesModule,
             NgxMatTimepickerModule,
             MatAutocompleteTrigger], exports: [MatIconModule, MatDate, MatDateTime, MatDateShort] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDateTimeModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDateTimeModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -51,7 +51,7 @@ export class SharedMatDateTimeModule {
             SharedDirectivesModule,
             NgxMatTimepickerModule, MatIconModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/material/datetime/material.date.mjs

@@ -415,10 +415,10 @@ export class MatDate {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatDate, selector: "mat-date-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", timezone: "timezone", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_onBlur()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\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\n  <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i7.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"] }, { 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: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDate, selector: "mat-date-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", timezone: "timezone", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_onBlur()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\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\n  <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i7.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"] }, { 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: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_onBlur()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\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\n  <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{

package/esm2022/src/app/shared/material/datetime/material.dateshort.mjs

@@ -401,10 +401,10 @@ export class MatDateShort {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatDateShort, selector: "mat-date-short-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: yearPattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_checkIfTouched()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\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\n  <mat-datepicker\n    #datePicker\n    startView=\"multi-year\"\n    [touchUi]=\"mobile\"\n    [disabled]=\"disabled\"\n    (yearSelected)=\"_closeDatePicker($event)\"\n    panelClass=\"mat-date-short-panel\"\n    [startAt]=\"startDate\"\n  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i7.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"] }, { 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: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDateShort, selector: "mat-date-short-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: yearPattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_checkIfTouched()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\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\n  <mat-datepicker\n    #datePicker\n    startView=\"multi-year\"\n    [touchUi]=\"mobile\"\n    [disabled]=\"disabled\"\n    (yearSelected)=\"_closeDatePicker($event)\"\n    panelClass=\"mat-date-short-panel\"\n    [startAt]=\"startDate\"\n  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i7.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"] }, { 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: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDateShort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDateShort, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-short-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\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    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: yearPattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_checkIfTouched()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\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\n  <mat-datepicker\n    #datePicker\n    startView=\"multi-year\"\n    [touchUi]=\"mobile\"\n    [disabled]=\"disabled\"\n    (yearSelected)=\"_closeDatePicker($event)\"\n    panelClass=\"mat-date-short-panel\"\n    [startAt]=\"startDate\"\n  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    }\n  </mat-datepicker>\n}\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\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{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{