@sumaris-net/ngx-components 18.16.1 → 18.16.3
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.
- package/doc/changelog.md +4 -0
- package/esm2022/src/app/core/graphql/graphql.service.mjs +13 -2
- package/esm2022/src/app/core/services/network.service.mjs +35 -3
- package/esm2022/src/app/shared/material/autocomplete/material.autocomplete.mjs +8 -15
- package/esm2022/src/app/shared/material/boolean/material.boolean.mjs +4 -4
- package/esm2022/src/app/shared/material/datetime/material.datetime.mjs +25 -8
- package/esm2022/src/app/shared/material/datetime/testing/mat-date-time.test.mjs +4 -4
- package/fesm2022/sumaris-net.ngx-components.mjs +87 -35
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/core/services/network.service.d.ts +5 -0
- package/src/app/shared/material/boolean/material.boolean.d.ts +2 -2
- package/src/app/shared/material/datetime/material.datetime.d.ts +1 -2
- package/src/app/shared/material/datetime/testing/mat-date-time.test.d.ts +1 -1
- package/src/assets/manifest.json +1 -1
|
@@ -6193,7 +6193,7 @@ function parseDuration(input, maxDecimals, placeholderChar) {
|
|
|
6193
6193
|
return Math.trunc(value * powDecimal + 0.5) / powDecimal;
|
|
6194
6194
|
}
|
|
6195
6195
|
|
|
6196
|
-
const DEFAULT_VALUE_ACCESSOR$
|
|
6196
|
+
const DEFAULT_VALUE_ACCESSOR$6 = {
|
|
6197
6197
|
provide: NG_VALUE_ACCESSOR,
|
|
6198
6198
|
useExisting: forwardRef(() => MatDuration),
|
|
6199
6199
|
multi: true,
|
|
@@ -6413,11 +6413,11 @@ class MatDuration {
|
|
|
6413
6413
|
this.cd.markForCheck();
|
|
6414
6414
|
}
|
|
6415
6415
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDuration, deps: [{ token: i2$1.Platform }, { token: i2.DateAdapter }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
6416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDuration, selector: "mat-duration-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], maxDecimals: "maxDecimals", placeholderChar: "placeholderChar", tabindex: "tabindex", clearable: "clearable" }, providers: [DEFAULT_VALUE_ACCESSOR$
|
|
6416
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDuration, selector: "mat-duration-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], maxDecimals: "maxDecimals", placeholderChar: "placeholderChar", tabindex: "tabindex", clearable: "clearable" }, providers: [DEFAULT_VALUE_ACCESSOR$6], viewQueries: [{ propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | duration }}</ion-text>\n </mat-form-field>\n} @else {\n <!-- writable -->\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n <input\n matInput\n #matInput\n type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n <!-- errors -->\n @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n <mat-error translate>\n ERROR.FIELD_NOT_VALID_PATTERN\n </mat-error>\n }\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl.hasError('min')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n </mat-error>\n }\n @if (formControl.hasError('max')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n </mat-error>\n }\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n}\n\n<!-- writable -->\n<ng-template #writable>\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n <input\n matInput\n #matInput\n type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <!-- errors -->\n @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n <mat-error translate>\n ERROR.FIELD_NOT_VALID_PATTERN\n </mat-error>\n }\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl.hasError('min')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n </mat-error>\n }\n @if (formControl.hasError('max')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n </mat-error>\n }\n\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6417
6417
|
}
|
|
6418
6418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDuration, decorators: [{
|
|
6419
6419
|
type: Component,
|
|
6420
|
-
args: [{ selector: 'mat-duration-field', providers: [DEFAULT_VALUE_ACCESSOR$
|
|
6420
|
+
args: [{ selector: 'mat-duration-field', providers: [DEFAULT_VALUE_ACCESSOR$6], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ formControl.value | duration }}</ion-text>\n </mat-form-field>\n} @else {\n <!-- writable -->\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n <input\n matInput\n #matInput\n type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n <!-- errors -->\n @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n <mat-error translate>\n ERROR.FIELD_NOT_VALID_PATTERN\n </mat-error>\n }\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl.hasError('min')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n </mat-error>\n }\n @if (formControl.hasError('max')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n </mat-error>\n }\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n}\n\n<!-- writable -->\n<ng-template #writable>\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label translate>COMMON.TIME</mat-label>\n }\n\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n <input\n matInput\n #matInput\n type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n />\n\n <!-- errors -->\n @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n <mat-error translate>\n ERROR.FIELD_NOT_VALID_PATTERN\n </mat-error>\n }\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl.hasError('min')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n </mat-error>\n }\n @if (formControl.hasError('max')) {\n <mat-error>\n {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n </mat-error>\n }\n\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"] }]
|
|
6421
6421
|
}], ctorParameters: () => [{ type: i2$1.Platform }, { type: i2.DateAdapter }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
6422
6422
|
type: Optional
|
|
6423
6423
|
}] }], propDecorators: { disabled: [{
|
|
@@ -6864,7 +6864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6864
6864
|
}]
|
|
6865
6865
|
}] });
|
|
6866
6866
|
|
|
6867
|
-
const DEFAULT_VALUE_ACCESSOR$
|
|
6867
|
+
const DEFAULT_VALUE_ACCESSOR$5 = {
|
|
6868
6868
|
provide: NG_VALUE_ACCESSOR,
|
|
6869
6869
|
useExisting: forwardRef(() => MatBooleanField),
|
|
6870
6870
|
multi: true,
|
|
@@ -6942,7 +6942,7 @@ class MatBooleanField {
|
|
|
6942
6942
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix,@angular-eslint/no-output-rename
|
|
6943
6943
|
keyupEnter = new EventEmitter();
|
|
6944
6944
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
6945
|
-
|
|
6945
|
+
focused = new EventEmitter();
|
|
6946
6946
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
6947
6947
|
blurred = new EventEmitter();
|
|
6948
6948
|
constructor(cd, formGroupDir) {
|
|
@@ -7128,11 +7128,11 @@ class MatBooleanField {
|
|
|
7128
7128
|
.concat(this.fakeInput ? [this.fakeInput.nativeElement] : []);
|
|
7129
7129
|
}
|
|
7130
7130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
7131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberOrNilAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberOrNilAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focussed: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-form-field-disabled {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n} @else {\n @switch (style) {\n <!-- Radio -->\n @case ('radio') {\n <mat-form-field\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">\n {{ placeholder }}\n <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input\n matInput\n #fakeInput\n type=\"text\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n (blur)=\"onBlurInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [appAutofocus]=\"autofocus\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group\n [class.cdk-visually-hidden]=\"!showRadio\"\n [formControl]=\"formControl\"\n (change)=\"onRadioValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Checkbox -->\n @case ('checkbox') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Add a empty label, for layout alignment -->\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n #fakeInput\n readonly=\"true\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n [indeterminate]=\"value | isNil\"\n [class.cdk-visually-hidden]=\"!showRadio\"\n [labelPosition]=\"labelPosition\"\n [title]=\"placeholder || ''\"\n [tabIndex]=\"-1\"\n (change)=\"onCheckboxValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n {{ placeholder || '' }}\n }\n </mat-checkbox>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Buttons -->\n @case ('button') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n }\n\n <input\n #fakeInput\n matInput\n type=\"text\"\n class=\"cdk-visually-hidden\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [tabindex]=\"_tabindex\"\n />\n @if (formControl.disabled) {\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n } @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n #yesButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && yesIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n #noButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(false, $event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && noIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <ion-button\n matSuffix\n fill=\"clear\"\n size=\"small\"\n color=\"medium\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n [class.cdk-visually-hidden]=\"_value | isNil\"\n >\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n }\n}\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: "component", type: i6$1.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: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], style: "style", buttonsColCount: ["buttonsColCount", "buttonsColCount", numberOrNilAttribute], classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: ["showButtonIcons", "showButtonIcons", booleanAttribute], yesIcon: "yesIcon", noIcon: "noIcon", clearable: ["clearable", "clearable", booleanAttribute], labelPosition: "labelPosition", tabindex: ["tabindex", "tabindex", numberOrNilAttribute], showRadio: ["showRadio", "showRadio", booleanAttribute], value: "value" }, outputs: { keyupEnter: "keyup.enter", focused: "focus", blurred: "blur" }, providers: [DEFAULT_VALUE_ACCESSOR$5], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "yesRadioButton", first: true, predicate: ["yesRadioButton"], descendants: true }, { propertyName: "noRadioButton", first: true, predicate: ["noRadioButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }], ngImport: i0, template: "@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-form-field-disabled {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n} @else {\n @switch (style) {\n <!-- Radio -->\n @case ('radio') {\n <mat-form-field\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">\n {{ placeholder }}\n <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input\n matInput\n #fakeInput\n type=\"text\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n (blur)=\"onBlurInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [appAutofocus]=\"autofocus\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group\n [class.cdk-visually-hidden]=\"!showRadio\"\n [formControl]=\"formControl\"\n (change)=\"onRadioValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Checkbox -->\n @case ('checkbox') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Add a empty label, for layout alignment -->\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n #fakeInput\n readonly=\"true\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n [indeterminate]=\"value | isNil\"\n [class.cdk-visually-hidden]=\"!showRadio\"\n [labelPosition]=\"labelPosition\"\n [title]=\"placeholder || ''\"\n [tabIndex]=\"-1\"\n (change)=\"onCheckboxValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n {{ placeholder || '' }}\n }\n </mat-checkbox>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Buttons -->\n @case ('button') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n }\n\n <input\n #fakeInput\n matInput\n type=\"text\"\n class=\"cdk-visually-hidden\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [tabindex]=\"_tabindex\"\n />\n @if (formControl.disabled) {\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n } @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n #yesButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && yesIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n #noButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(false, $event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && noIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <ion-button\n matSuffix\n fill=\"clear\"\n size=\"small\"\n color=\"medium\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n [class.cdk-visually-hidden]=\"_value | isNil\"\n >\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n }\n}\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: "component", type: i6$1.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: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7132
7132
|
}
|
|
7133
7133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatBooleanField, decorators: [{
|
|
7134
7134
|
type: Component,
|
|
7135
|
-
args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-form-field-disabled {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n} @else {\n @switch (style) {\n <!-- Radio -->\n @case ('radio') {\n <mat-form-field\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">\n {{ placeholder }}\n <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input\n matInput\n #fakeInput\n type=\"text\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n (blur)=\"onBlurInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [appAutofocus]=\"autofocus\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group\n [class.cdk-visually-hidden]=\"!showRadio\"\n [formControl]=\"formControl\"\n (change)=\"onRadioValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Checkbox -->\n @case ('checkbox') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Add a empty label, for layout alignment -->\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n #fakeInput\n readonly=\"true\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n [indeterminate]=\"value | isNil\"\n [class.cdk-visually-hidden]=\"!showRadio\"\n [labelPosition]=\"labelPosition\"\n [title]=\"placeholder || ''\"\n [tabIndex]=\"-1\"\n (change)=\"onCheckboxValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n {{ placeholder || '' }}\n }\n </mat-checkbox>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Buttons -->\n @case ('button') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n }\n\n <input\n #fakeInput\n matInput\n type=\"text\"\n class=\"cdk-visually-hidden\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [tabindex]=\"_tabindex\"\n />\n @if (formControl.disabled) {\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n } @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n #yesButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && yesIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n #noButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(false, $event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && noIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <ion-button\n matSuffix\n fill=\"clear\"\n size=\"small\"\n color=\"medium\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n [class.cdk-visually-hidden]=\"_value | isNil\"\n >\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n }\n}\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
|
|
7135
|
+
args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$5], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-form-field-disabled {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n} @else {\n @switch (style) {\n <!-- Radio -->\n @case ('radio') {\n <mat-form-field\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">\n {{ placeholder }}\n <span [class.cdk-visually-hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\n }\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input\n matInput\n #fakeInput\n type=\"text\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n (blur)=\"onBlurInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [appAutofocus]=\"autofocus\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group\n [class.cdk-visually-hidden]=\"!showRadio\"\n [formControl]=\"formControl\"\n (change)=\"onRadioValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n <mat-radio-button #yesRadioButton [value]=\"true\" tabIndex=\"-1\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noRadioButton [value]=\"false\" tabIndex=\"-1\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Checkbox -->\n @case ('checkbox') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-checkbox {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Add a empty label, for layout alignment -->\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n #fakeInput\n readonly=\"true\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n [indeterminate]=\"value | isNil\"\n [class.cdk-visually-hidden]=\"!showRadio\"\n [labelPosition]=\"labelPosition\"\n [title]=\"placeholder || ''\"\n [tabIndex]=\"-1\"\n (change)=\"onCheckboxValueChanged($event)\"\n (blur)=\"onBlurInput($event)\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n {{ placeholder || '' }}\n }\n </mat-checkbox>\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"_value | isNil\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n\n <!-- Buttons -->\n @case ('button') {\n <mat-form-field\n [floatLabel]=\"!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n }\n\n <input\n #fakeInput\n matInput\n type=\"text\"\n class=\"cdk-visually-hidden\"\n readonly=\"true\"\n [formControl]=\"formControl\"\n [appAutofocus]=\"autofocus\"\n (focus)=\"onFocusFakeInput($event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.arrowLeft)=\"toggleValue($event)\"\n (keyup.arrowRight)=\"toggleValue($event)\"\n (keyup.arrowUp)=\"toggleValue($event)\"\n (keyup.arrowDown)=\"toggleValue($event)\"\n [required]=\"required\"\n [tabindex]=\"_tabindex\"\n />\n @if (formControl.disabled) {\n <ion-text>\n {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}\n </ion-text>\n } @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n #yesButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && yesIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n #noButton\n class=\"mat-form-field-button\"\n [tabIndex]=\"-1\"\n (click)=\"writeValue(false, $event)\"\n (keydown.space)=\"toggleValue($event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n @if (showButtonIcons && noIcon; as icon) {\n <ion-icon slot=\"start\" [name]=\"icon\"></ion-icon>\n }\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n @if (formControl.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n\n @if (clearable) {\n <ion-button\n matSuffix\n fill=\"clear\"\n size=\"small\"\n color=\"medium\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n [class.cdk-visually-hidden]=\"_value | isNil\"\n >\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n }\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n }\n }\n}\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.mat-mdc-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-mdc-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end: 4px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;margin:0!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:var(--mat-mdc-form-field-height, 40px)}\n"] }]
|
|
7136
7136
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
7137
7137
|
type: Optional
|
|
7138
7138
|
}] }], propDecorators: { fakeInput: [{
|
|
@@ -7209,7 +7209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7209
7209
|
}], keyupEnter: [{
|
|
7210
7210
|
type: Output,
|
|
7211
7211
|
args: ['keyup.enter']
|
|
7212
|
-
}],
|
|
7212
|
+
}], focused: [{
|
|
7213
7213
|
type: Output,
|
|
7214
7214
|
args: ['focus']
|
|
7215
7215
|
}], blurred: [{
|
|
@@ -8624,6 +8624,11 @@ class MatAutocompleteFieldUtils {
|
|
|
8624
8624
|
}
|
|
8625
8625
|
|
|
8626
8626
|
const noop$6 = () => { };
|
|
8627
|
+
const DEFAULT_VALUE_ACCESSOR$4 = {
|
|
8628
|
+
provide: NG_VALUE_ACCESSOR,
|
|
8629
|
+
useExisting: forwardRef(() => MatAutocompleteField),
|
|
8630
|
+
multi: true,
|
|
8631
|
+
};
|
|
8627
8632
|
class MatAutocompleteField {
|
|
8628
8633
|
injector;
|
|
8629
8634
|
el;
|
|
@@ -9697,23 +9702,11 @@ class MatAutocompleteField {
|
|
|
9697
9702
|
this.toggleFavorite.emit({ source: this.matSelect || this.autocomplete, value: value });
|
|
9698
9703
|
}
|
|
9699
9704
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatAutocompleteField, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.ModalController }, { token: i0.Renderer2 }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
9700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], reloadItemsOnFocus: ["reloadItemsOnFocus", "reloadItemsOnFocus", booleanAttribute], clearInvalidValueOnBlur: ["clearInvalidValueOnBlur", "clearInvalidValueOnBlur", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", multiple: ["multiple", "multiple", booleanAttribute], fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], debug: ["debug", "debug", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], stickySearchBar: ["stickySearchBar", "stickySearchBar", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], splitSearchText: ["splitSearchText", "splitSearchText", booleanAttribute], selectInputContentOnFocus: ["selectInputContentOnFocus", "selectInputContentOnFocus", booleanAttribute], selectInputContentOnFocusDelay: ["selectInputContentOnFocusDelay", "selectInputContentOnFocusDelay", numberAttribute], previewImplicitValue: ["previewImplicitValue", "previewImplicitValue", booleanAttribute], showFavorites: "showFavorites", toggleFavoriteTitle: "toggleFavoriteTitle", favoriteItems: "favoriteItems", colSizes: "colSizes", classList: ["class", "classList"], filter: "filter", readonly: ["readonly", "readonly", booleanAttribute], tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keydownBackspace: "keydown.backspace", keyupEnter: "keyup.enter", selectionChange: "selectionChange", openedChange: "openedChange", toggleFavorite: "toggleFavorite" }, providers: [
|
|
9701
|
-
{
|
|
9702
|
-
provide: NG_VALUE_ACCESSOR,
|
|
9703
|
-
multi: true,
|
|
9704
|
-
useExisting: forwardRef(() => MatAutocompleteField),
|
|
9705
|
-
},
|
|
9706
|
-
], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "ionSearchbar", first: true, predicate: ["ionSearchbar"], descendants: true }, { propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding field-container\">\n <ion-row>\n <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n <!-- readonly -->\n @if (_readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n class=\"mat-form-field-disabled\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ value | toString: displayWith }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n <!-- hints -->\n @if (!formControl.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n } @else {\n @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n [hideRequiredMarker]=\"hideRequiredMarker\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if ((label || placeholder) && floatLabel !== 'never') {\n <mat-label>{{ label || placeholder }}</mat-label>\n }\n <!-- Mobile or Multiple (use <mat-select>) -->\n @if (mobile || multiple) {\n <mat-select\n #matSelect\n hideSingleSelectionIndicator\n disableOptionCentering\n [disableRipple]=\"disableRipple\"\n [formControl]=\"formControl\"\n [tabindex]=\"_tabindex\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n (focus)=\"filterMatSelectFocusEvent($event)\"\n (blur)=\"filterMatSelectBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (openedChange)=\"openedChange.emit($event)\"\n [compareWith]=\"equals\"\n [multiple]=\"multiple\"\n [typeaheadDebounceInterval]=\"debounceTime * 10\"\n [required]=\"required\"\n [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n >\n <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n <!-- Search bar -->\n @if (showSearchBar) {\n <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n <ion-searchbar\n #ionSearchbar\n inputmode=\"search\"\n autocomplete=\"off\"\n animated=\"false\"\n showClearButton=\"true\"\n [debounce]=\"debounceTime\"\n (ionClear)=\"markAsLoading()\"\n (ionInput)=\"ionSearchBarChanged($event)\"\n [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n ></ion-searchbar>\n </mat-optgroup>\n }\n <!-- Headers -->\n <ion-row\n class=\"mat-select-header column ion-no-padding\"\n [class.multiple]=\"multiple\"\n [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n <!-- attribute headers -->\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n\n <!-- None option -->\n @if (!required && !multiple && !clearable) {\n <mat-option class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <ion-col class=\"ion-no-padding\">\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ion-col>\n </ion-row>\n </mat-option>\n }\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\">\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n }\n </ion-col>\n }\n\n <!-- attribute columns -->\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n <ion-label\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n \"\n ></ion-label>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- need more character -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n <!-- footer -->\n @if (itemCount; as count) {\n <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </mat-option>\n }\n </mat-select>\n } @else {\n <!-- desktop (use mat-autocomplete) -->\n <input\n matInput\n #matInputText\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"formControl\"\n [placeholder]=\"(label || floatLabel === 'never') && placeholder\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keydown.backspace)=\"onBackspace($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n />\n <!-- autocomplete -->\n <mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n [autoActiveFirstOption]=\"true\"\n [hideSingleSelectionIndicator]=\"true\"\n [displayWith]=\"displayWith\"\n [class]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n [disableRipple]=\"disableRipple\"\n (optionSelected)=\"onOptionSelected($event)\"\n (opened)=\"openedChange.emit(true)\"\n (closed)=\"openedChange.emit(false)\"\n >\n <!-- Headers -->\n <ion-row\n class=\"mat-autocomplete-header column ion-no-padding\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n <mat-option\n [value]=\"item\"\n class=\"ion-no-padding\"\n [class.mdc-list-item--selected]=\"item === _selectedItem\"\n [class.mdc-list-item--favorite]=\"isFavorite\"\n >\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col\n matPrefix\n size=\"auto\"\n class=\"favorite-col\"\n (click)=\"toggleFavoriteClick($event, item)\"\n >\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n } @else if (toggleFavorite.observed) {\n <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n }\n </ion-col>\n }\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col\n [size]=\"displayColumnSizes[j]\"\n [title]=\"text.innerText\"\n class=\"ion-align-self-center\"\n >\n <ion-text>\n <span\n #text\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight\n : {\n search: matInputText.value,\n withAccent: highlightAccent,\n }\n \"\n ></span>\n </ion-text>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- Need more characters -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- Loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n\n <!-- footer -->\n @if (itemCount; as count) {\n <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </ion-col>\n </ion-row>\n }\n </mat-autocomplete>\n }\n <!--\n NOTE :\n - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n -->\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n @if (formControl?.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl?.hasError('entity')) {\n <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n }\n <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n <!-- Hints -->\n @if (!formControl?.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n }\n </ion-col>\n <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n @if (!mobile) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"toggleShowPanel($event)\"\n [hidden]=\"disabled\"\n [title]=\"dropButtonTitle || '' | translate\"\n >\n <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n }\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\"\n [title]=\"clearButtonTitle || '' | translate\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayIncludesPipe, name: "arrayIncludes" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], reloadItemsOnFocus: ["reloadItemsOnFocus", "reloadItemsOnFocus", booleanAttribute], clearInvalidValueOnBlur: ["clearInvalidValueOnBlur", "clearInvalidValueOnBlur", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", multiple: ["multiple", "multiple", booleanAttribute], fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], debug: ["debug", "debug", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], stickySearchBar: ["stickySearchBar", "stickySearchBar", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], splitSearchText: ["splitSearchText", "splitSearchText", booleanAttribute], selectInputContentOnFocus: ["selectInputContentOnFocus", "selectInputContentOnFocus", booleanAttribute], selectInputContentOnFocusDelay: ["selectInputContentOnFocusDelay", "selectInputContentOnFocusDelay", numberAttribute], previewImplicitValue: ["previewImplicitValue", "previewImplicitValue", booleanAttribute], showFavorites: "showFavorites", toggleFavoriteTitle: "toggleFavoriteTitle", favoriteItems: "favoriteItems", colSizes: "colSizes", classList: ["class", "classList"], filter: "filter", readonly: ["readonly", "readonly", booleanAttribute], tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keydownBackspace: "keydown.backspace", keyupEnter: "keyup.enter", selectionChange: "selectionChange", openedChange: "openedChange", toggleFavorite: "toggleFavorite" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "ionSearchbar", first: true, predicate: ["ionSearchbar"], descendants: true }, { propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding field-container\">\n <ion-row>\n <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n <!-- readonly -->\n @if (_readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n class=\"mat-form-field-disabled\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ value | toString: displayWith }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n <!-- hints -->\n @if (!formControl.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n } @else {\n @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n [hideRequiredMarker]=\"hideRequiredMarker\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if ((label || placeholder) && floatLabel !== 'never') {\n <mat-label>{{ label || placeholder }}</mat-label>\n }\n <!-- Mobile or Multiple (use <mat-select>) -->\n @if (mobile || multiple) {\n <mat-select\n #matSelect\n hideSingleSelectionIndicator\n disableOptionCentering\n [disableRipple]=\"disableRipple\"\n [formControl]=\"formControl\"\n [tabindex]=\"_tabindex\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n (focus)=\"filterMatSelectFocusEvent($event)\"\n (blur)=\"filterMatSelectBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (openedChange)=\"openedChange.emit($event)\"\n [compareWith]=\"equals\"\n [multiple]=\"multiple\"\n [typeaheadDebounceInterval]=\"debounceTime * 10\"\n [required]=\"required\"\n [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n >\n <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n <!-- Search bar -->\n @if (showSearchBar) {\n <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n <ion-searchbar\n #ionSearchbar\n inputmode=\"search\"\n autocomplete=\"off\"\n animated=\"false\"\n showClearButton=\"true\"\n [debounce]=\"debounceTime\"\n (ionClear)=\"markAsLoading()\"\n (ionInput)=\"ionSearchBarChanged($event)\"\n [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n ></ion-searchbar>\n </mat-optgroup>\n }\n <!-- Headers -->\n <ion-row\n class=\"mat-select-header column ion-no-padding\"\n [class.multiple]=\"multiple\"\n [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n <!-- attribute headers -->\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n\n <!-- None option -->\n @if (!required && !multiple && !clearable) {\n <mat-option class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <ion-col class=\"ion-no-padding\">\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ion-col>\n </ion-row>\n </mat-option>\n }\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\">\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n }\n </ion-col>\n }\n\n <!-- attribute columns -->\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n <ion-label\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n \"\n ></ion-label>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- need more character -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n <!-- footer -->\n @if (itemCount; as count) {\n <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </mat-option>\n }\n </mat-select>\n } @else {\n <!-- desktop (use mat-autocomplete) -->\n <input\n matInput\n #matInputText\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"formControl\"\n [placeholder]=\"(label || floatLabel === 'never') && placeholder\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keydown.backspace)=\"onBackspace($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n />\n <!-- autocomplete -->\n <mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n [autoActiveFirstOption]=\"true\"\n [hideSingleSelectionIndicator]=\"true\"\n [displayWith]=\"displayWith\"\n [class]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n [disableRipple]=\"disableRipple\"\n (optionSelected)=\"onOptionSelected($event)\"\n (opened)=\"openedChange.emit(true)\"\n (closed)=\"openedChange.emit(false)\"\n >\n <!-- Headers -->\n <ion-row\n class=\"mat-autocomplete-header column ion-no-padding\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n <mat-option\n [value]=\"item\"\n class=\"ion-no-padding\"\n [class.mdc-list-item--selected]=\"item === _selectedItem\"\n [class.mdc-list-item--favorite]=\"isFavorite\"\n >\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col\n matPrefix\n size=\"auto\"\n class=\"favorite-col\"\n (click)=\"toggleFavoriteClick($event, item)\"\n >\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n } @else if (toggleFavorite.observed) {\n <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n }\n </ion-col>\n }\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col\n [size]=\"displayColumnSizes[j]\"\n [title]=\"text.innerText\"\n class=\"ion-align-self-center\"\n >\n <ion-text>\n <span\n #text\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight\n : {\n search: matInputText.value,\n withAccent: highlightAccent,\n }\n \"\n ></span>\n </ion-text>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- Need more characters -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- Loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n\n <!-- footer -->\n @if (itemCount; as count) {\n <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </ion-col>\n </ion-row>\n }\n </mat-autocomplete>\n }\n <!--\n NOTE :\n - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n -->\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n @if (formControl?.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl?.hasError('entity')) {\n <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n }\n <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n <!-- Hints -->\n @if (!formControl?.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n }\n </ion-col>\n <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n @if (!mobile) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"toggleShowPanel($event)\"\n [hidden]=\"disabled\"\n [title]=\"dropButtonTitle || '' | translate\"\n >\n <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n }\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\"\n [title]=\"clearButtonTitle || '' | translate\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayIncludesPipe, name: "arrayIncludes" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9707
9706
|
}
|
|
9708
9707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatAutocompleteField, decorators: [{
|
|
9709
9708
|
type: Component,
|
|
9710
|
-
args: [{ selector: 'mat-autocomplete-field', providers: [
|
|
9711
|
-
{
|
|
9712
|
-
provide: NG_VALUE_ACCESSOR,
|
|
9713
|
-
multi: true,
|
|
9714
|
-
useExisting: forwardRef(() => MatAutocompleteField),
|
|
9715
|
-
},
|
|
9716
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding field-container\">\n <ion-row>\n <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n <!-- readonly -->\n @if (_readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n class=\"mat-form-field-disabled\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ value | toString: displayWith }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n <!-- hints -->\n @if (!formControl.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n } @else {\n @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n [hideRequiredMarker]=\"hideRequiredMarker\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if ((label || placeholder) && floatLabel !== 'never') {\n <mat-label>{{ label || placeholder }}</mat-label>\n }\n <!-- Mobile or Multiple (use <mat-select>) -->\n @if (mobile || multiple) {\n <mat-select\n #matSelect\n hideSingleSelectionIndicator\n disableOptionCentering\n [disableRipple]=\"disableRipple\"\n [formControl]=\"formControl\"\n [tabindex]=\"_tabindex\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n (focus)=\"filterMatSelectFocusEvent($event)\"\n (blur)=\"filterMatSelectBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (openedChange)=\"openedChange.emit($event)\"\n [compareWith]=\"equals\"\n [multiple]=\"multiple\"\n [typeaheadDebounceInterval]=\"debounceTime * 10\"\n [required]=\"required\"\n [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n >\n <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n <!-- Search bar -->\n @if (showSearchBar) {\n <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n <ion-searchbar\n #ionSearchbar\n inputmode=\"search\"\n autocomplete=\"off\"\n animated=\"false\"\n showClearButton=\"true\"\n [debounce]=\"debounceTime\"\n (ionClear)=\"markAsLoading()\"\n (ionInput)=\"ionSearchBarChanged($event)\"\n [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n ></ion-searchbar>\n </mat-optgroup>\n }\n <!-- Headers -->\n <ion-row\n class=\"mat-select-header column ion-no-padding\"\n [class.multiple]=\"multiple\"\n [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n <!-- attribute headers -->\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n\n <!-- None option -->\n @if (!required && !multiple && !clearable) {\n <mat-option class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <ion-col class=\"ion-no-padding\">\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ion-col>\n </ion-row>\n </mat-option>\n }\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\">\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n }\n </ion-col>\n }\n\n <!-- attribute columns -->\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n <ion-label\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n \"\n ></ion-label>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- need more character -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n <!-- footer -->\n @if (itemCount; as count) {\n <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </mat-option>\n }\n </mat-select>\n } @else {\n <!-- desktop (use mat-autocomplete) -->\n <input\n matInput\n #matInputText\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"formControl\"\n [placeholder]=\"(label || floatLabel === 'never') && placeholder\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keydown.backspace)=\"onBackspace($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n />\n <!-- autocomplete -->\n <mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n [autoActiveFirstOption]=\"true\"\n [hideSingleSelectionIndicator]=\"true\"\n [displayWith]=\"displayWith\"\n [class]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n [disableRipple]=\"disableRipple\"\n (optionSelected)=\"onOptionSelected($event)\"\n (opened)=\"openedChange.emit(true)\"\n (closed)=\"openedChange.emit(false)\"\n >\n <!-- Headers -->\n <ion-row\n class=\"mat-autocomplete-header column ion-no-padding\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n <mat-option\n [value]=\"item\"\n class=\"ion-no-padding\"\n [class.mdc-list-item--selected]=\"item === _selectedItem\"\n [class.mdc-list-item--favorite]=\"isFavorite\"\n >\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col\n matPrefix\n size=\"auto\"\n class=\"favorite-col\"\n (click)=\"toggleFavoriteClick($event, item)\"\n >\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n } @else if (toggleFavorite.observed) {\n <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n }\n </ion-col>\n }\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col\n [size]=\"displayColumnSizes[j]\"\n [title]=\"text.innerText\"\n class=\"ion-align-self-center\"\n >\n <ion-text>\n <span\n #text\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight\n : {\n search: matInputText.value,\n withAccent: highlightAccent,\n }\n \"\n ></span>\n </ion-text>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- Need more characters -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- Loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n\n <!-- footer -->\n @if (itemCount; as count) {\n <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </ion-col>\n </ion-row>\n }\n </mat-autocomplete>\n }\n <!--\n NOTE :\n - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n -->\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n @if (formControl?.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl?.hasError('entity')) {\n <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n }\n <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n <!-- Hints -->\n @if (!formControl?.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n }\n </ion-col>\n <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n @if (!mobile) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"toggleShowPanel($event)\"\n [hidden]=\"disabled\"\n [title]=\"dropButtonTitle || '' | translate\"\n >\n <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n }\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\"\n [title]=\"clearButtonTitle || '' | translate\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"] }]
|
|
9709
|
+
args: [{ selector: 'mat-autocomplete-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding field-container\">\n <ion-row>\n <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n <!-- readonly -->\n @if (_readonly) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n class=\"mat-form-field-disabled\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n <ion-text>{{ value | toString: displayWith }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n <!-- hints -->\n @if (!formControl.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n } @else {\n @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [title]=\"_displayValue || ''\"\n [hideRequiredMarker]=\"hideRequiredMarker\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n @if ((label || placeholder) && floatLabel !== 'never') {\n <mat-label>{{ label || placeholder }}</mat-label>\n }\n <!-- Mobile or Multiple (use <mat-select>) -->\n @if (mobile || multiple) {\n <mat-select\n #matSelect\n hideSingleSelectionIndicator\n disableOptionCentering\n [disableRipple]=\"disableRipple\"\n [formControl]=\"formControl\"\n [tabindex]=\"_tabindex\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n (focus)=\"filterMatSelectFocusEvent($event)\"\n (blur)=\"filterMatSelectBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (openedChange)=\"openedChange.emit($event)\"\n [compareWith]=\"equals\"\n [multiple]=\"multiple\"\n [typeaheadDebounceInterval]=\"debounceTime * 10\"\n [required]=\"required\"\n [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n >\n <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n <!-- Search bar -->\n @if (showSearchBar) {\n <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n <ion-searchbar\n #ionSearchbar\n inputmode=\"search\"\n autocomplete=\"off\"\n animated=\"false\"\n showClearButton=\"true\"\n [debounce]=\"debounceTime\"\n (ionClear)=\"markAsLoading()\"\n (ionInput)=\"ionSearchBarChanged($event)\"\n [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n ></ion-searchbar>\n </mat-optgroup>\n }\n <!-- Headers -->\n <ion-row\n class=\"mat-select-header column ion-no-padding\"\n [class.multiple]=\"multiple\"\n [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n <!-- attribute headers -->\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n\n <!-- None option -->\n @if (!required && !multiple && !clearable) {\n <mat-option class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <ion-col class=\"ion-no-padding\">\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ion-col>\n </ion-row>\n </mat-option>\n }\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\">\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n }\n </ion-col>\n }\n\n <!-- attribute columns -->\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n <ion-label\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n \"\n ></ion-label>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- need more character -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n <!-- footer -->\n @if (itemCount; as count) {\n <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </mat-option>\n }\n </mat-select>\n } @else {\n <!-- desktop (use mat-autocomplete) -->\n <input\n matInput\n #matInputText\n type=\"text\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"matAutocompletePosition\"\n [formControl]=\"formControl\"\n [placeholder]=\"(label || floatLabel === 'never') && placeholder\"\n [appAutofocus]=\"autofocus\"\n [tabindex]=\"_tabindex\"\n [required]=\"required\"\n (click)=\"clicked.emit($event)\"\n (focus)=\"filterInputTextFocusEvent($event)\"\n (blur)=\"filterInputTextBlurEvent($event)\"\n (keydown.escape)=\"keydownEscape.emit($event)\"\n (keydown.backspace)=\"onBackspace($event)\"\n (keyup.enter)=\"keyupEnter.emit($event)\"\n (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n />\n <!-- autocomplete -->\n <mat-autocomplete\n #autocomplete=\"matAutocomplete\"\n [autoActiveFirstOption]=\"true\"\n [hideSingleSelectionIndicator]=\"true\"\n [displayWith]=\"displayWith\"\n [class]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n [disableRipple]=\"disableRipple\"\n (optionSelected)=\"onOptionSelected($event)\"\n (opened)=\"openedChange.emit(true)\"\n (closed)=\"openedChange.emit(false)\"\n >\n <!-- Headers -->\n <ion-row\n class=\"mat-autocomplete-header column ion-no-padding\"\n [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n >\n <!-- favorite spacer -->\n @if (hasFavorites) {\n <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n }\n @for (attr of displayAttributes; track attr; let i = $index) {\n <ion-col [size]=\"displayColumnSizes[i]\">\n <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n </ion-col>\n }\n </ion-row>\n @if (_$filteredItems | push: 'userBlocking'; as items) {\n <!-- No item option -->\n @if (items | isEmptyArray) {\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n <i>{{ noResultMessage | translate }}</i>\n </ion-label>\n </mat-option>\n } @else {\n <!-- Options -->\n @for (item of items; track i; let i = $index) {\n @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n <mat-option\n [value]=\"item\"\n class=\"ion-no-padding\"\n [class.mdc-list-item--selected]=\"item === _selectedItem\"\n [class.mdc-list-item--favorite]=\"isFavorite\"\n >\n <ion-row [classList]=\"item.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n <!-- favorite icon -->\n @if (hasFavorites) {\n <ion-col\n matPrefix\n size=\"auto\"\n class=\"favorite-col\"\n (click)=\"toggleFavoriteClick($event, item)\"\n >\n @if (isFavorite) {\n <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n } @else if (toggleFavorite.observed) {\n <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n }\n </ion-col>\n }\n @for (path of displayAttributes; track j; let j = $index) {\n <ion-col\n [size]=\"displayColumnSizes[j]\"\n [title]=\"text.innerText\"\n class=\"ion-align-self-center\"\n >\n <ion-text>\n <span\n #text\n [innerHTML]=\"\n item\n | propertyGet: path\n | highlight\n : {\n search: matInputText.value,\n withAccent: highlightAccent,\n }\n \"\n ></span>\n </ion-text>\n </ion-col>\n }\n </ion-row>\n </mat-option>\n }\n }\n <!-- More item -->\n @if (_moreItemsCount) {\n <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n <!-- Need more characters -->\n <mat-option class=\"ion-padding text-italic\" disabled>\n <ion-label>\n {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n </ion-label>\n </mat-option>\n } @else {\n <!-- Loading spinner -->\n <mat-option class=\"ion-padding\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </mat-option>\n }\n\n <!-- footer -->\n @if (itemCount; as count) {\n <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n <ion-col>\n <ion-text class=\"ion-float-end ion-padding-end\">\n <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n </ion-text>\n </ion-col>\n </ion-row>\n }\n </mat-autocomplete>\n }\n <!--\n NOTE :\n - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n -->\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n @if (formControl?.hasError('required')) {\n <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n }\n @if (formControl?.hasError('entity')) {\n <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n }\n <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n <!-- Hints -->\n @if (!formControl?.invalid) {\n <mat-hint>\n <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n </mat-hint>\n }\n </mat-form-field>\n }\n </ion-col>\n <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\n <ng-content select=\"[matAfter]\"></ng-content>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n @if (!mobile) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"toggleShowPanel($event)\"\n [hidden]=\"disabled\"\n [title]=\"dropButtonTitle || '' | translate\"\n >\n <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n </button>\n }\n @if (clearable) {\n <button\n matSuffix\n mat-icon-button\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"clearValue($event)\"\n [hidden]=\"disabled || !formControl.value\"\n [title]=\"clearButtonTitle || '' | translate\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"] }]
|
|
9717
9710
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.ModalController }, { type: i0.Renderer2 }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
9718
9711
|
type: Optional
|
|
9719
9712
|
}] }], propDecorators: { equals: [{
|
|
@@ -10464,7 +10457,6 @@ class MatDateTime {
|
|
|
10464
10457
|
maskitoTimeOptions;
|
|
10465
10458
|
datePlaceholder;
|
|
10466
10459
|
timePlaceholder;
|
|
10467
|
-
timePickerReady = false;
|
|
10468
10460
|
logPrefix = '[mat-date-time]';
|
|
10469
10461
|
placeholder;
|
|
10470
10462
|
floatLabel = 'auto';
|
|
@@ -10846,8 +10838,18 @@ class MatDateTime {
|
|
|
10846
10838
|
}
|
|
10847
10839
|
filterInputTextFocusEvent(event) {
|
|
10848
10840
|
if (!event || event.defaultPrevented) {
|
|
10849
|
-
|
|
10850
|
-
|
|
10841
|
+
// DEBUG
|
|
10842
|
+
//if (this.debug) console.debug(this.logPrefix + ' calling filterInputTextFocusEvent - event.defaultPrevented');
|
|
10843
|
+
return false;
|
|
10844
|
+
}
|
|
10845
|
+
// Ignore event from internal inputs
|
|
10846
|
+
if (event.relatedTarget instanceof HTMLElement && this._matInputs.some((item) => item.nativeElement === event.relatedTarget)) {
|
|
10847
|
+
event.preventDefault();
|
|
10848
|
+
if (event.stopPropagation)
|
|
10849
|
+
event.stopPropagation();
|
|
10850
|
+
event.returnValue = false;
|
|
10851
|
+
// DEBUG
|
|
10852
|
+
//if (this.debug) console.debug(this.logPrefix + ' Cancelling focus event');
|
|
10851
10853
|
return false;
|
|
10852
10854
|
}
|
|
10853
10855
|
// Already focused
|
|
@@ -10855,8 +10857,7 @@ class MatDateTime {
|
|
|
10855
10857
|
return false;
|
|
10856
10858
|
this._focused = true;
|
|
10857
10859
|
// DEBUG
|
|
10858
|
-
if (this.debug)
|
|
10859
|
-
console.debug(this.logPrefix + ' Emit focus event');
|
|
10860
|
+
//if (this.debug) console.debug(this.logPrefix + ' Emit focus event');
|
|
10860
10861
|
// Need a delay to prevent early focus event, just after a blur event
|
|
10861
10862
|
setTimeout(() => {
|
|
10862
10863
|
if (!this._focused)
|
|
@@ -10868,9 +10869,18 @@ class MatDateTime {
|
|
|
10868
10869
|
filterInputTextBlurEvent(event) {
|
|
10869
10870
|
if (!event || event.defaultPrevented)
|
|
10870
10871
|
return;
|
|
10872
|
+
// Ignore event from internal inputs
|
|
10873
|
+
if (event.relatedTarget instanceof HTMLElement && this._matInputs.some((item) => item.nativeElement === event.relatedTarget)) {
|
|
10874
|
+
event.preventDefault();
|
|
10875
|
+
if (event.stopPropagation)
|
|
10876
|
+
event.stopPropagation();
|
|
10877
|
+
event.returnValue = false;
|
|
10878
|
+
// DEBUG
|
|
10879
|
+
//if (this.debug) console.debug(this.logPrefix + ' Cancelling blur event');
|
|
10880
|
+
return false;
|
|
10881
|
+
}
|
|
10871
10882
|
// DEBUG
|
|
10872
|
-
if (this.debug)
|
|
10873
|
-
console.debug(this.logPrefix + ' filterInputTextBlurEvent', event);
|
|
10883
|
+
//if (this.debug) console.debug(this.logPrefix + ' filterInputTextBlurEvent', event);
|
|
10874
10884
|
// Already blurred: skip
|
|
10875
10885
|
if (!this._focused)
|
|
10876
10886
|
return;
|
|
@@ -20093,12 +20103,43 @@ class NetworkService extends StartableObservableService {
|
|
|
20093
20103
|
this._timerSubscription.add(() => console.debug('[network] Refresh timer stopped'));
|
|
20094
20104
|
}
|
|
20095
20105
|
async getText(path, opts) {
|
|
20096
|
-
return HttpUtils.getText(this.http, this.getUri(path), opts);
|
|
20106
|
+
return HttpUtils.getText(this.http, this.getUri(path), this.addVersionHeader(opts));
|
|
20097
20107
|
}
|
|
20098
20108
|
get(path, opts) {
|
|
20099
|
-
return HttpUtils.getJson(this.http, this.getUri(path), opts);
|
|
20109
|
+
return HttpUtils.getJson(this.http, this.getUri(path), this.addVersionHeader(opts));
|
|
20100
20110
|
}
|
|
20101
20111
|
/* -- Protected methods -- */
|
|
20112
|
+
addVersionHeader(opts) {
|
|
20113
|
+
const updatedOpts = { ...opts };
|
|
20114
|
+
if (!updatedOpts.headers) {
|
|
20115
|
+
updatedOpts.headers = {};
|
|
20116
|
+
}
|
|
20117
|
+
// Handle HttpHeaders instance
|
|
20118
|
+
if (updatedOpts.headers instanceof HttpHeaders) {
|
|
20119
|
+
let headers = updatedOpts.headers;
|
|
20120
|
+
// Add application version header
|
|
20121
|
+
if (this.environment.version) {
|
|
20122
|
+
headers = headers.append('X-App-Version', this.environment.version);
|
|
20123
|
+
}
|
|
20124
|
+
// Add application name header
|
|
20125
|
+
if (this.environment.defaultAppName) {
|
|
20126
|
+
headers = headers.append('X-App-Name', this.environment.defaultAppName);
|
|
20127
|
+
}
|
|
20128
|
+
updatedOpts.headers = headers;
|
|
20129
|
+
}
|
|
20130
|
+
else {
|
|
20131
|
+
// Handle plain object headers
|
|
20132
|
+
// Add application version header
|
|
20133
|
+
if (this.environment.version) {
|
|
20134
|
+
updatedOpts.headers['X-App-Version'] = this.environment.version;
|
|
20135
|
+
}
|
|
20136
|
+
// Add application name header
|
|
20137
|
+
if (this.environment.defaultAppName) {
|
|
20138
|
+
updatedOpts.headers['X-App-Name'] = this.environment.defaultAppName;
|
|
20139
|
+
}
|
|
20140
|
+
}
|
|
20141
|
+
return updatedOpts;
|
|
20142
|
+
}
|
|
20102
20143
|
getUri(path) {
|
|
20103
20144
|
let uri = path;
|
|
20104
20145
|
// If path is not an URI: prepend with peer URL
|
|
@@ -20713,7 +20754,18 @@ class GraphqlService extends StartableService {
|
|
|
20713
20754
|
if (this.connectionParams.authBasic) {
|
|
20714
20755
|
authorization.push(`Basic ${this.connectionParams.authBasic}`);
|
|
20715
20756
|
}
|
|
20716
|
-
|
|
20757
|
+
let headers = new HttpHeaders();
|
|
20758
|
+
if (authorization.length > 0) {
|
|
20759
|
+
headers = headers.append('Authorization', authorization);
|
|
20760
|
+
}
|
|
20761
|
+
// Add application version header
|
|
20762
|
+
if (this.environment.version) {
|
|
20763
|
+
headers = headers.append('X-App-Version', this.environment.version);
|
|
20764
|
+
}
|
|
20765
|
+
// Add application name header
|
|
20766
|
+
if (this.environment.defaultAppName) {
|
|
20767
|
+
headers = headers.append('X-App-Name', this.environment.defaultAppName);
|
|
20768
|
+
}
|
|
20717
20769
|
// Use the setContext method to set the HTTP headers.
|
|
20718
20770
|
operation.setContext({
|
|
20719
20771
|
...operation.getContext(),
|
|
@@ -45638,7 +45690,7 @@ class DateTimeTestPage {
|
|
|
45638
45690
|
memoryHide = false;
|
|
45639
45691
|
memoryMobile = true;
|
|
45640
45692
|
memoryTimer;
|
|
45641
|
-
|
|
45693
|
+
hasFocus = false;
|
|
45642
45694
|
form;
|
|
45643
45695
|
mode = 'mobile';
|
|
45644
45696
|
appearance = 'fill';
|
|
@@ -45741,11 +45793,11 @@ class DateTimeTestPage {
|
|
|
45741
45793
|
}
|
|
45742
45794
|
stringify = JSON.stringify;
|
|
45743
45795
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$1.Platform }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
45744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n <!-- debugging something -->\n @if (mode === 'temp') {\n <ion-row>\n <ion-col>\n <ion-text><h4>Required, but allow no time</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-label>\n <small>\n <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ tempFocus }}\n </pre>\n </small>\n </ion-label>\n <mat-date-time-field #tempField\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [debug]=\"true\"\n (focus)=\"tempFocus=true\"\n (blur)=\"tempFocus=false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n }\n\n <!-- debugging memory leak -->\n @if (mode === 'memory') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n }\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n @if (!memoryHide) {\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty value + required -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"mobileReadonlyField.readonly = $event.checked\"\n [checked]=\"mobileReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #mobileReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showHint.checked && !hintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showHint.checked && hintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n @if (showLogPanel) {\n <ion-col size=\"10\">\n <ion-text color=\"primary\">\n Log:\n <br />\n </ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value (No time)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{\n stringify(form.controls.noTime.value) +\n ' noTime:' +\n (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45796
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n <!-- debugging something -->\n @if (mode === 'temp') {\n <ion-row>\n <ion-col>\n <ion-text><h4>Required, but allow no time</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-label>\n <small>\n <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n </pre>\n </small>\n </ion-label>\n <mat-date-time-field #tempField\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [debug]=\"true\"\n (focus)=\"hasFocus=true\"\n (blur)=\"hasFocus=false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n }\n\n <!-- debugging memory leak -->\n @if (mode === 'memory') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n }\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n @if (!memoryHide) {\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty value + required -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"mobileReadonlyField.readonly = $event.checked\"\n [checked]=\"mobileReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #mobileReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showHint.checked && !hintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showHint.checked && hintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n @if (showLogPanel) {\n <ion-col size=\"10\">\n <ion-text color=\"primary\">\n Log:\n <br />\n </ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value (No time)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{\n stringify(form.controls.noTime.value) +\n ' noTime:' +\n (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45745
45797
|
}
|
|
45746
45798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, decorators: [{
|
|
45747
45799
|
type: Component,
|
|
45748
|
-
args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n <!-- debugging something -->\n @if (mode === 'temp') {\n <ion-row>\n <ion-col>\n <ion-text><h4>Required, but allow no time</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-label>\n <small>\n <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ tempFocus }}\n </pre>\n </small>\n </ion-label>\n <mat-date-time-field #tempField\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [debug]=\"true\"\n (focus)=\"tempFocus=true\"\n (blur)=\"tempFocus=false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n }\n\n <!-- debugging memory leak -->\n @if (mode === 'memory') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n }\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n @if (!memoryHide) {\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty value + required -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"mobileReadonlyField.readonly = $event.checked\"\n [checked]=\"mobileReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #mobileReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showHint.checked && !hintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showHint.checked && hintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n @if (showLogPanel) {\n <ion-col size=\"10\">\n <ion-text color=\"primary\">\n Log:\n <br />\n </ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value (No time)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{\n stringify(form.controls.noTime.value) +\n ' noTime:' +\n (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n" }]
|
|
45800
|
+
args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n <!-- debugging something -->\n @if (mode === 'temp') {\n <ion-row>\n <ion-col>\n <ion-text><h4>Required, but allow no time</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-label>\n <small>\n <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n </pre>\n </small>\n </ion-label>\n <mat-date-time-field #tempField\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [debug]=\"true\"\n (focus)=\"hasFocus=true\"\n (blur)=\"hasFocus=false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n }\n\n <!-- debugging memory leak -->\n @if (mode === 'memory') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n }\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n @if (!memoryHide) {\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty value + required -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"mobileReadonlyField.readonly = $event.checked\"\n [checked]=\"mobileReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #mobileReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showHint.checked && !hintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showHint.checked && hintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n @if (showLogPanel) {\n <ion-col size=\"10\">\n <ion-text color=\"primary\">\n Log:\n <br />\n </ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.empty.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value + required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value (No time)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{\n stringify(form.controls.noTime.value) +\n ' noTime:' +\n (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopReadonlyHint.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Start date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">End date time</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n <mat-hint align=\"end\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value,\n } | dateDiffDuration\n }}\n </mat-hint>\n }\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Hint</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.hint.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n Align end ?\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-time-field\n formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n <mat-hint>Some hint</mat-hint>\n } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n <mat-hint align=\"end\">End hint</mat-hint>\n }\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Compact mode -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field\n formControlName=\"empty\"\n floatLabel=\"never\"\n [mobile]=\"false\"\n [compact]=\"true\"\n ></mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n" }]
|
|
45749
45801
|
}], ctorParameters: () => [{ type: i2$1.Platform }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
|
|
45750
45802
|
|
|
45751
45803
|
class DateTestPage {
|