@sumaris-net/ngx-components 18.24.22 → 18.24.24

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

@@ -10860,9 +10860,10 @@ class MatDate {
         this._disabling = false;
         this.markForCheck();
     }
-    openDatePicker() {
+    openDatePicker(event) {
         if (!this.datePicker)
             return;
+        this._preventEvent(event);
         if (!this.datePicker.opened) {
             // DEBUG
             //console.debug('[mat-date] Opening date picker...');
@@ -10922,7 +10923,7 @@ class MatDate {
         //console.debug('[mat-date] Preparing to open date picker... ');
         this._preventEvent(event);
         // Open the picker
-        this.openDatePicker();
+        this.openDatePicker(event);
     }
     _onBlur() {
         if (this.textControl.touched) {
@@ -11062,11 +11063,11 @@ class MatDate {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.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$3], 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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "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: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.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: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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$3], 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($event)\"\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($event)\" [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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "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: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.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: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR$3], 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"] }]
+            args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR$3], 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($event)\"\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($event)\" [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: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -18239,11 +18240,11 @@ class FilesUtils {
         const modal = await popoverController.create({
             component: UploadFilePopover,
             componentProps: opts,
-            backdropDismiss: false,
-            keyboardClose: false,
+            backdropDismiss: opts?.backdropDismiss ?? false,
+            keyboardClose: opts?.keyboardClose ?? false,
             event,
-            translucent: true,
-            cssClass: 'popover-large',
+            translucent: opts?.translucent ?? true,
+            cssClass: opts?.cssClass ?? 'popover-large',
         });
         await modal.present();
         const { data, role } = await modal.onDidDismiss();