@sumaris-net/ngx-components 2.7.3-rc46 → 2.7.3-rc48
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/esm2022/src/app/shared/material/boolean/material.boolean.mjs +3 -3
- package/esm2022/src/app/shared/material/boolean/testing/boolean.test.page.mjs +3 -2
- package/esm2022/src/app/shared/material/testing/common.test.mjs +4 -1
- package/fesm2022/sumaris-net.ngx-components.mjs +7 -3
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/manifest.json +1 -1
- package/src/theme/_material.globals.scss +0 -36
- package/src/theme/_material.scss +8 -0
- package/src/theme/_ngx-components.forms.scss +0 -7
|
@@ -5434,11 +5434,11 @@ class MatBooleanField {
|
|
|
5434
5434
|
this.cd.markForCheck();
|
|
5435
5435
|
}
|
|
5436
5436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatBooleanField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: "readonly", required: "required", compact: "compact", style: "style", buttonsColCount: "buttonsColCount", classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: "showButtonIcons", yesIcon: "yesIcon", noIcon: "noIcon", tabindex: "tabindex", value: "value" }, outputs: { onPressEnter: "keyup.enter", onBlur: "onBlur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "yesButton", first: true, predicate: ["yesButton"], descendants: true }, { propertyName: "noButton", first: true, predicate: ["noButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }, { propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }], ngImport: i0, template: "<mat-form-field\n *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n class=\"mat-form-field-disabled {{ classList }}\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [placeholder]=\"placeholder\" [formControl]=\"formControl\" />\n <ion-text>{{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<ng-template #writable>\n <ng-container [ngSwitch]=\"style\">\n <!-- Radio -->\n <mat-form-field\n *ngSwitchCase=\"'radio'\"\n [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" [title]=\"placeholder\">\n {{ placeholder }}\n <span [hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\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 [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group [hidden]=\"!showRadio\" [formControl]=\"formControl\" (change)=\"onRadioValueChanged($event)\">\n <mat-radio-button #yesButton [value]=\"true\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noButton [value]=\"false\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n\n <!-- Checkbox -->\n <mat-form-field\n *ngSwitchCase=\"'checkbox'\"\n floatLabel=\"always\"\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 <input\n matInput\n #matInput\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n (change)=\"onCheckboxValueChanged($event)\"\n [indeterminate]=\"value === null || value === undefined\"\n [hidden]=\"!showRadio\"\n [tabindex]=\"tabindex\"\n ></mat-checkbox>\n\n <mat-label *ngIf=\"placeholder; else noPlaceHolder\" [title]=\"placeholder\">\n {{ placeholder }}\n </mat-label>\n <ng-template #noPlaceHolder>\n <mat-label> </mat-label>\n </ng-template>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n\n <!-- Buttons -->\n <mat-form-field\n *ngSwitchCase=\"'button'\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-boolean-field mat-boolean-field-button {{ classList }}\"\n >\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input\n matInput\n type=\"text\"\n hidden\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n <div\n class=\"mat-form-field-buttons\"\n [style.--buttons-col-count]=\"buttonsColCount\"\n *ngIf=\"!formControl.disabled; else disabledLabel\"\n >\n <!-- yes -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n (click)=\"writeValue(false, $event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ noLabel | translate }}\n </ion-button>\n </div>\n <ng-template #disabledLabel>\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n </ng-template>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n </ng-container>\n</ng-template>\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{--flex-basis: calc(100% / var(--buttons-col-count, 2) - 4px);flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);white-space:normal;padding:0 2px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], 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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: MatBooleanField, selector: "mat-boolean-field", inputs: { disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: "readonly", required: "required", compact: "compact", style: "style", buttonsColCount: "buttonsColCount", classList: ["class", "classList"], yesLabel: "yesLabel", noLabel: "noLabel", showButtonIcons: "showButtonIcons", yesIcon: "yesIcon", noIcon: "noIcon", tabindex: "tabindex", value: "value" }, outputs: { onPressEnter: "keyup.enter", onBlur: "onBlur" }, providers: [DEFAULT_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "yesButton", first: true, predicate: ["yesButton"], descendants: true }, { propertyName: "noButton", first: true, predicate: ["noButton"], descendants: true }, { propertyName: "checkboxButton", first: true, predicate: ["checkboxButton"], descendants: true }, { propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }], ngImport: i0, template: "@if (readonly) {\n<mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n class=\"mat-form-field-disabled {{ classList }}\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [placeholder]=\"placeholder\" [formControl]=\"formControl\" />\n <ion-text>{{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n}\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 class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" [title]=\"placeholder\">\n {{ placeholder }}\n <span [hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\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 [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group [hidden]=\"!showRadio\" [formControl]=\"formControl\" (change)=\"onRadioValueChanged($event)\">\n <mat-radio-button #yesButton [value]=\"true\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noButton [value]=\"false\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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=\"always\"\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 <input\n matInput\n #matInput\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n (change)=\"onCheckboxValueChanged($event)\"\n [indeterminate]=\"value === null || value === undefined\"\n [hidden]=\"!showRadio\"\n [tabindex]=\"tabindex\"\n ></mat-checkbox>\n\n <mat-label *ngIf=\"placeholder; else noPlaceHolder\" [title]=\"placeholder\">\n {{ placeholder }}\n </mat-label>\n <ng-template #noPlaceHolder>\n <mat-label> </mat-label>\n </ng-template>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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]=\"'always'\"\n [appearance]=\"appearance\"\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(placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n } @else {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n type=\"text\"\n hidden\n [formControl]=\"formControl\"\n [required]=\"required\"\n />\n @if (formControl.disabled) {\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n }\n @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n (click)=\"writeValue(false, $event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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{--flex-basis: calc(100% / var(--buttons-col-count, 2) - 4px);flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);white-space:normal;padding:0 2px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], 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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5438
5438
|
}
|
|
5439
5439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatBooleanField, decorators: [{
|
|
5440
5440
|
type: Component,
|
|
5441
|
-
args: [{ selector: 'mat-boolean-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n
|
|
5441
|
+
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 class=\"mat-form-field-disabled {{ classList }}\"\n>\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <input matInput hidden type=\"text\" readonly [placeholder]=\"placeholder\" [formControl]=\"formControl\" />\n <ion-text>{{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}</ion-text>\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n}\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 class=\"mat-boolean-field mat-boolean-field-radio {{ classList }}\"\n >\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" [title]=\"placeholder\">\n {{ placeholder }}\n <span [hidden]=\"showRadio\">({{ yesLabel | translate }}/{{ noLabel | translate }})</span>\n </mat-label>\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 [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- radio button -->\n <mat-radio-group [hidden]=\"!showRadio\" [formControl]=\"formControl\" (change)=\"onRadioValueChanged($event)\">\n <mat-radio-button #yesButton [value]=\"true\">\n <span>{{ yesLabel | translate }}</span>\n </mat-radio-button>\n \n <mat-radio-button #noButton [value]=\"false\">\n <span>{{ noLabel | translate }}</span>\n </mat-radio-button>\n </mat-radio-group>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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=\"always\"\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 <input\n matInput\n #matInput\n [formControl]=\"formControl\"\n (focus)=\"onFocusFakeInput($event)\"\n [required]=\"required\"\n [class.cdk-visually-hidden]=\"showRadio\"\n [tabindex]=\"tabindex\"\n />\n\n <!-- checkbox, when compact -->\n <mat-checkbox\n #checkboxButton\n [formControl]=\"formControl\"\n (change)=\"onCheckboxValueChanged($event)\"\n [indeterminate]=\"value === null || value === undefined\"\n [hidden]=\"!showRadio\"\n [tabindex]=\"tabindex\"\n ></mat-checkbox>\n\n <mat-label *ngIf=\"placeholder; else noPlaceHolder\" [title]=\"placeholder\">\n {{ placeholder }}\n </mat-label>\n <ng-template #noPlaceHolder>\n <mat-label> </mat-label>\n </ng-template>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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]=\"'always'\"\n [appearance]=\"appearance\"\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(placeholder) {\n <mat-label [title]=\"placeholder\">{{ placeholder }}</mat-label>\n } @else {\n <mat-label> </mat-label>\n }\n\n <input\n matInput\n type=\"text\"\n hidden\n [formControl]=\"formControl\"\n [required]=\"required\"\n />\n @if (formControl.disabled) {\n <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n }\n @else {\n <div class=\"mat-form-field-buttons\" [style.--buttons-col-count]=\"buttonsColCount\">\n <!-- yes -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex\"\n (click)=\"writeValue(true, $event)\"\n (keyup.enter)=\"writeValue(true, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ yesLabel | translate }}\n </ion-button>\n\n <!-- No button -->\n <ion-button\n class=\"mat-form-field-button\"\n [tabindex]=\"_tabindex !== undefined ? _tabindex + 1 : undefined\"\n (click)=\"writeValue(false, $event)\"\n (keyup.enter)=\"writeValue(false, $event)\"\n [color]=\"_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'\"\n >\n <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n {{ noLabel | translate }}\n </ion-button>\n </div>\n }\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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{--flex-basis: calc(100% / var(--buttons-col-count, 2) - 4px);flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);white-space:normal;padding:0 2px;height:40px}\n"] }]
|
|
5442
5442
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
5443
5443
|
type: Optional
|
|
5444
5444
|
}] }], propDecorators: { yesButton: [{
|
|
@@ -38878,6 +38878,9 @@ class MatCommonTestPage {
|
|
|
38878
38878
|
enable: toDateISOString(now),
|
|
38879
38879
|
disable: now.clone(),
|
|
38880
38880
|
readonly: now.clone(),
|
|
38881
|
+
select: null,
|
|
38882
|
+
boolean: null,
|
|
38883
|
+
date: null,
|
|
38881
38884
|
};
|
|
38882
38885
|
this.form.setValue(data);
|
|
38883
38886
|
this.log('[test-page] Data loaded: ' + JSON.stringify(data));
|
|
@@ -38925,7 +38928,8 @@ class BooleanTestPage extends AppForm {
|
|
|
38925
38928
|
formBuilder;
|
|
38926
38929
|
cd;
|
|
38927
38930
|
stringify = JSON.stringify;
|
|
38928
|
-
mode = 'radio';
|
|
38931
|
+
//mode: 'radio' | 'checkbox' | 'button' = 'radio';
|
|
38932
|
+
mode = 'button';
|
|
38929
38933
|
styles = ['radio', 'checkbox', 'button'];
|
|
38930
38934
|
constructor(injector, formBuilder, cd) {
|
|
38931
38935
|
super(injector);
|