@sumaris-net/ngx-components 2.7.3-rc25 → 2.7.3-rc26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -560,11 +560,11 @@ export class MatDateTime {
|
|
|
560
560
|
}
|
|
561
561
|
}
|
|
562
562
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, 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 });
|
|
563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\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: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.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: i5.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonRow, selector: "ion-row" }, { 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.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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i16.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i17.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\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: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.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: i5.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonRow, selector: "ion-row" }, { 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.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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i16.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i17.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
564
564
|
}
|
|
565
565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, decorators: [{
|
|
566
566
|
type: Component,
|
|
567
|
-
args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
567
|
+
args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
568
568
|
}], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{
|
|
569
569
|
type: Optional
|
|
570
570
|
}] }, { type: undefined, decorators: [{
|
|
@@ -8299,11 +8299,11 @@ class MatDateTime {
|
|
|
8299
8299
|
}
|
|
8300
8300
|
}
|
|
8301
8301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, 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 });
|
|
8302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.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: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.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: 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.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$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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { 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 });
|
|
8302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.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: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.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: 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.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$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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { 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 });
|
|
8303
8303
|
}
|
|
8304
8304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, decorators: [{
|
|
8305
8305
|
type: Component,
|
|
8306
|
-
args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
8306
|
+
args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n >\n <!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input\n matInput\n #matInput\n autocomplete=\"off\"\n type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\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 *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\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 *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly\n />\n <input\n matInput\n type=\"text\"\n [formControl]=\"formControl\"\n hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly\n />\n\n <button\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\"\n >\n <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\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>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input\n matInput\n #matInput\n type=\"text\"\n [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\"\n max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <input\n #matInput\n type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly\n />\n\n <!-- Hide the final (hidden) input -->\n <input\n matInput\n [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly\n />\n\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button\n matSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\"\n >\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker\n #timePicker\n [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\"\n >\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\"\n >\n <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error\n *ngIf=\"\n formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n let errorKey;\n else: parentError\n \"\n [ngSwitch]=\"errorKey\"\n >\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n </span>\n <span *ngSwitchCase=\"'dateIsBefore'\">\n {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n </span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">\n {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n </span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
8307
8307
|
}], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
8308
8308
|
type: Optional
|
|
8309
8309
|
}] }, { type: undefined, decorators: [{
|