@sumaris-net/ngx-components 4.0.0-rc13 → 4.0.0-rc15

package/esm2022/src/app/shared/material/badge/badge.test.mjs

@@ -32,10 +32,10 @@ export class MatBadgeTestPage {
         this.matBadgeContent = event.target.value;
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label appBadge\n                        appBadgeIcon=\"checkmark-circle\"\n                        [appBadgeColor]=\"'tertiary'|matColor\"\n                        appBadgeFill=\"clear\"\n                        appBadgeOverlap=\"false\">{{userText}}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeHidden]=\"$hidden|async\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"true\"\n                appBadgePosition=\"above before\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              appBadgeOverlap=\"true\"\n              appBadgePosition=\"below after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              class=\"ion-no-padding\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                [matBadge]=\"'!'\"\n                [matBadgeColor]=\"$color|async|matColor\"\n                [matBadgeHidden]=\"$hidden|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"true\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"after\">\n            {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label appBadge\n                        appBadgeIcon=\"checkmark-circle\"\n                        [appBadgeColor]=\"'tertiary'|matColor\"\n                        appBadgeFill=\"clear\"\n                        appBadgeOverlap=\"false\">{{userText}}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeHidden]=\"$hidden|async\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"true\"\n                appBadgePosition=\"above before\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              appBadgeOverlap=\"true\"\n              appBadgePosition=\"below after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              class=\"ion-no-padding\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                [matBadge]=\"'!'\"\n                [matBadgeColor]=\"$color|async|matColor\"\n                [matBadgeHidden]=\"$hidden|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"true\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"after\">\n            {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBadgeTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label appBadge\n                        appBadgeIcon=\"checkmark-circle\"\n                        [appBadgeColor]=\"'tertiary'|matColor\"\n                        appBadgeFill=\"clear\"\n                        appBadgeOverlap=\"false\">{{userText}}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeHidden]=\"$hidden|async\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"true\"\n                appBadgePosition=\"above before\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              appBadgeOverlap=\"true\"\n              appBadgePosition=\"below after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              class=\"ion-no-padding\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                [matBadge]=\"'!'\"\n                [matBadgeColor]=\"$color|async|matColor\"\n                [matBadgeHidden]=\"$hidden|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"true\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"after\">\n            {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });

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

@@ -16,8 +16,8 @@ import { MatBooleanField2 } from './material-boolean2';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatBooleanModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatBooleanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: SharedMatBooleanModule, declarations: [MatBooleanField,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatBooleanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SharedMatBooleanModule, declarations: [MatBooleanField,
             MatBooleanField2], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
@@ -29,7 +29,7 @@ export class SharedMatBooleanModule {
             MatCheckboxModule,
             NgxMaterialTimepickerModule, i1.TranslateModule, SharedDirectivesModule], exports: [MatBooleanField,
             MatBooleanField2] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatBooleanModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatBooleanModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -42,7 +42,7 @@ export class SharedMatBooleanModule {
             TranslateModule.forChild(),
             SharedDirectivesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatBooleanModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatBooleanModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/material/boolean/material-boolean2.mjs

@@ -198,10 +198,10 @@ export class MatBooleanField2 {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBooleanField2, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MatBooleanField2, selector: "mat-boolean2-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], 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-boolean2-field mat-boolean2-field-radio {{ classList }}\"\n    >\n      <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\">\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        &nbsp;\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-boolean2-field mat-boolean2-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\">\n        {{ placeholder }}\n      </mat-label>\n      <ng-template #noPlaceHolder>\n        <mat-label>&nbsp;</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-boolean2-field mat-boolean2-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));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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.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: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.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.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBooleanField2, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatBooleanField2, selector: "mat-boolean2-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], 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-boolean2-field mat-boolean2-field-radio {{ classList }}\"\n    >\n      <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\">\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        &nbsp;\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-boolean2-field mat-boolean2-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\">\n        {{ placeholder }}\n      </mat-label>\n      <ng-template #noPlaceHolder>\n        <mat-label>&nbsp;</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-boolean2-field mat-boolean2-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));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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.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: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.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.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBooleanField2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBooleanField2, decorators: [{
             type: Component,
             args: [{ selector: 'mat-boolean2-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, 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-boolean2-field mat-boolean2-field-radio {{ classList }}\"\n    >\n      <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\">\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        &nbsp;\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-boolean2-field mat-boolean2-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\">\n        {{ placeholder }}\n      </mat-label>\n      <ng-template #noPlaceHolder>\n        <mat-label>&nbsp;</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-boolean2-field mat-boolean2-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));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);white-space:normal;padding:0 2px;height:40px}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2.FormGroupDirective, decorators: [{

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

@@ -199,12 +199,12 @@ export class MatBooleanField {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBooleanField, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBooleanField, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", 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
         ], 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  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel | asFloatLabelType\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [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\n    <!-- Radio -->\n    <mat-form-field *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      <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">\n        {{placeholder}}\n        <span [hidden]=\"showRadio\">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #fakeInput type=\"text\" readonly=\"true\"\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <!-- radio button -->\n      <mat-radio-group [hidden]=\"!showRadio\"\n                       [formControl]=\"formControl\"\n                       (change)=\"onRadioValueChanged($event)\">\n        <mat-radio-button #yesButton [value]=\"true\">\n          <span>{{yesLabel|translate}}</span>\n        </mat-radio-button>&nbsp;\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 *ngSwitchCase=\"'checkbox'\"\n                    [floatLabel]=\"floatLabel | asFloatLabelType\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder && !showRadio\">\n        {{placeholder}}\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #matInput\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <mat-label *ngIf=\"placeholder; else noPlaceHolder\">\n        {{ placeholder }}\n      </mat-label>\n      <ng-template #noPlaceHolder>\n        <ion-label>&nbsp;</ion-label>\n      </ng-template>\n\n      <!-- checkbox, when compact -->\n      <mat-checkbox #checkboxButton\n                    [formControl]=\"formControl\"\n                    (change)=\"onCheckboxValueChanged($event)\"\n                    [indeterminate]=\"value===null\"\n                    [hidden]=\"!showRadio\"\n                    [tabindex]=\"tabindex\">\n      </mat-checkbox>\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 *ngSwitchCase=\"'button'\"\n                    [floatLabel]=\"(floatLabel | asFloatLabelType) || 'always'\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-button {{classList}}\">\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput type=\"text\" hidden\n             [formControl]=\"formControl\"\n             [placeholder]=\"floatLabel !== 'never' ? placeholder : undefined\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           *ngIf=\"formControl.enabled || (formControl.value != null); else emptyLabel\"\n           [style.--buttons-col-count]=\"buttonsColCount\">\n        <!-- yes -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex\"\n                    [disabled]=\"formControl.disabled\"\n                    (click)=\"writeValue(true, $event)\"\n                    (keyup.enter)=\"writeValue(true, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'\">\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 class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex !== undefined ? (_tabindex + 1) : undefined\"\n                    [disabled]=\"formControl.disabled\"\n                    (click)=\"writeValue(false, $event)\"\n                    (keyup.enter)=\"writeValue(false, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'\">\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 #emptyLabel>\n          <ion-label translate>COMMON.EMPTY_OPTION</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\n    </mat-form-field>\n  </ng-container>\n\n</ng-template>\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-boolean-field-radio{margin-top:-2px}.mat-mdc-form-field.mat-boolean-field-button{margin-top:-4px}.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: 2px;--flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:40px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.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: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.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.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatBooleanField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatBooleanField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-boolean-field', providers: [
                         DEFAULT_VALUE_ACCESSOR

package/esm2022/src/app/shared/material/boolean/testing/boolean.test.page.mjs

@@ -44,10 +44,10 @@ export class BooleanTestPage extends AppForm {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, 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>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode==='radio'\"\n       (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='checkbox'\"\n       (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='button'\"\n       (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container\">\n\n    <ng-container\n      *ngFor=\"let style of styles\"\n      [ngTemplateOutlet]=\"components\"\n      [ngTemplateOutletContext]=\"{ style: style }\"\n    >\n\n    </ng-container>\n\n    <ng-template #components let-style=\"style\">\n    <ion-grid *ngIf=\"style === mode\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i6.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: i7.MatBooleanField2, selector: "mat-boolean2-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BooleanTestPage, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: BooleanTestPage, selector: "app-boolean-test-page", usesInheritance: true, 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>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode==='radio'\"\n       (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='checkbox'\"\n       (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='button'\"\n       (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container\">\n\n    <ng-container\n      *ngFor=\"let style of styles\"\n      [ngTemplateOutlet]=\"components\"\n      [ngTemplateOutletContext]=\"{ style: style }\"\n    >\n\n    </ng-container>\n\n    <ng-template #components let-style=\"style\">\n    <ion-grid *ngIf=\"style === mode\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i6.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: i7.MatBooleanField2, selector: "mat-boolean2-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: BooleanTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BooleanTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-boolean-test-page', 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>Boolean field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode==='radio'\"\n       (click)=\"toggleMode('radio')\">\n      <mat-label>Radio</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='checkbox'\"\n       (click)=\"toggleMode('checkbox')\">\n      <mat-label>Checkbox</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='button'\"\n       (click)=\"toggleMode('button')\">\n      <mat-label>Button</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel [formGroup]=\"form\" class=\"form-container\">\n\n    <ng-container\n      *ngFor=\"let style of styles\"\n      [ngTemplateOutlet]=\"components\"\n      [ngTemplateOutletContext]=\"{ style: style }\"\n    >\n\n    </ng-container>\n\n    <ng-template #components let-style=\"style\">\n    <ion-grid *ngIf=\"style === mode\">\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.disabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"disabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledEmpty\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledFalse\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean-field>\n              <mat-boolean2-field\n                [style]=\"style\"\n                formControlName=\"enabledTrue\"\n                placeholder=\"Placeholder\"\n              ></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled empty (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledEmpty?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledEmpty\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled false (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledFalse?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledFalse\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"4\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Enabled true (no placeholder)</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: break-spaces\">{{ stringify(form.controls.enabledTrue?.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-boolean-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean-field>\n              <mat-boolean2-field [style]=\"style\" formControlName=\"enabledTrue\"></mat-boolean2-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n    </ng-template>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });

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

@@ -17,8 +17,8 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatChipsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: SharedMatChipsModule, declarations: [MatChipsField], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SharedMatChipsModule, declarations: [MatChipsField], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -31,7 +31,7 @@ export class SharedMatChipsModule {
             MatButtonModule,
             MatSelectModule,
             MatChipsModule, i1.TranslateModule], exports: [MatChipsField] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatChipsModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatChipsModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -46,7 +46,7 @@ export class SharedMatChipsModule {
             MatChipsModule,
             TranslateModule.forChild()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: SharedMatChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedMatChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -600,14 +600,14 @@ export class MatChipsField {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", suggestFn: "suggestFn", required: "required", mobile: "mobile", readonly: "readonly", clearable: "clearable", debounceTime: "debounceTime", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: "highlightAccent", showAllOnFocus: "showAllOnFocus", showPanelOnFocus: "showPanelOnFocus", autofocus: "autofocus", config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", classList: ["class", "classList"], panelWidth: "panelWidth", matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: "suggestLengthThreshold", showLoadingSpinner: "showLoadingSpinner", chipColor: "chipColor", debug: "debug", filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", suggestFn: "suggestFn", required: "required", mobile: "mobile", readonly: "readonly", clearable: "clearable", debounceTime: "debounceTime", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: "highlightAccent", showAllOnFocus: "showAllOnFocus", showPanelOnFocus: "showPanelOnFocus", autofocus: "autofocus", config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", classList: ["class", "classList"], panelWidth: "panelWidth", matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: "suggestLengthThreshold", showLoadingSpinner: "showLoadingSpinner", chipColor: "chipColor", debug: "debug", filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => MatChipsField)
             }], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\"\n                      [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n        <mat-chip-grid #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\">\n          <mat-chip-row class=\"ion-no-margin\"\n                        *ngFor=\"let item of value\"\n                        [removable]=\"!disabled\"\n                        (removed)=\"remove(item)\"\n                        [color]=\"chipColor\"\n                        [highlighted]=\"true\"\n          >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip-row>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <!-- Options -->\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\"\n                         [title]=\"text.innerText\">\n                  <ion-text><span #text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent }\"></span></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\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          </ng-template>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </ion-col>\n          </ion-row>\n\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\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\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:#00000078;font-size:150%}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 26px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: i5.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: i12.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i14.HighlightPipe, name: "highlight" }, { kind: "pipe", type: i15.EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: i16.StrLengthPipe, name: "strLength" }, { kind: "pipe", type: i17.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MatChipsField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-chips-field', providers: [{
                             provide: NG_VALUE_ACCESSOR,