@sumaris-net/ngx-components 2.0.0-rc8 → 2.0.0

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

@@ -6,21 +6,23 @@ import * as i2 from "@angular/material/form-field";
 import * as i3 from "@angular/material/icon";
 import * as i4 from "@angular/material/select";
 import * as i5 from "@angular/material/core";
-import * as i6 from "./badge.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "../../pipes/colors.pipe";
+import * as i6 from "@angular/material/badge";
+import * as i7 from "./badge.directive";
+import * as i8 from "@angular/common";
+import * as i9 from "../../pipes/colors.pipe";
 export class MatBadgeTestPage {
     constructor() {
         this.$icon = new BehaviorSubject('alert');
         this.$size = new BehaviorSubject('small');
         this.$fill = new BehaviorSubject('solid');
         this.$color = new BehaviorSubject('danger');
+        this.$hidden = new BehaviorSubject(false);
     }
 }
-MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: MatBadgeTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"false\">\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-select placeholder=\"appBadgeColor\"\n                    [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-select placeholder=\"ionBadgeIcon\"\n                    [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-select placeholder=\"appBadgeSize\"\n                    [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-select placeholder=\"matBadgeFill\"\n                    [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  </ion-row>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { 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: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeOverlap", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.MatColorPipe, name: "matColor" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: MatBadgeTestPage, decorators: [{
+MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatBadgeTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <p>Example:\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=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [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-select placeholder=\"ionBadgeIcon\"\n                    [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-select placeholder=\"appBadgeSize\"\n                    [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-select placeholder=\"matBadgeFill\"\n                    [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-select placeholder=\"appBadgeHidden\"\n                    [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  </ion-row>\n\n  <ion-row>\n    <ion-col>\n      <p>Example, using a matBadge :\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]=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { 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: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i7.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeOverlap", "appBadgeHidden", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.MatColorPipe, name: "matColor" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-badge-test', 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  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"false\">\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-select placeholder=\"appBadgeColor\"\n                    [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-select placeholder=\"ionBadgeIcon\"\n                    [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-select placeholder=\"appBadgeSize\"\n                    [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-select placeholder=\"matBadgeFill\"\n                    [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  </ion-row>\n\n</ion-content>\n" }]
+            args: [{ selector: 'mat-badge-test', 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  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <p>Example:\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=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [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-select placeholder=\"ionBadgeIcon\"\n                    [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-select placeholder=\"appBadgeSize\"\n                    [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-select placeholder=\"matBadgeFill\"\n                    [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-select placeholder=\"appBadgeHidden\"\n                    [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  </ion-row>\n\n  <ion-row>\n    <ion-col>\n      <p>Example, using a matBadge :\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]=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvc2hhcmVkL21hdGVyaWFsL2JhZGdlL2JhZGdlLnRlc3QudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC9iYWRnZS9iYWRnZS50ZXN0Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7Ozs7Ozs7O0FBU3JDLE1BQU0sT0FBTyxnQkFBZ0I7SUFKN0I7UUFNRSxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQVMsT0FBTyxDQUFDLENBQUM7UUFDN0MsVUFBSyxHQUFHLElBQUksZUFBZSxDQUFlLE9BQU8sQ0FBQyxDQUFDO1FBQ25ELFVBQUssR0FBRyxJQUFJLGVBQWUsQ0FBZSxPQUFPLENBQUMsQ0FBQztRQUNuRCxXQUFNLEdBQUcsSUFBSSxlQUFlLENBQVksUUFBUSxDQUFDLENBQUM7S0FDbkQ7OzZHQU5ZLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLHNEQ1Y3QixxeElBdUlBOzJGRDdIYSxnQkFBZ0I7a0JBSjVCLFNBQVM7K0JBQ0UsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtCZWhhdmlvclN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtNYXRCYWRnZUZpbGx9IGZyb20gJy4vYmFkZ2UuZGlyZWN0aXZlJztcbmltcG9ydCB7TWF0QmFkZ2VTaXplfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9iYWRnZSc7XG5pbXBvcnQge0FwcENvbG9yc30gZnJvbSAnLi4vLi4vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtYXQtYmFkZ2UtdGVzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS50ZXN0Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIE1hdEJhZGdlVGVzdFBhZ2Uge1xuXG4gICRpY29uID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KCdhbGVydCcpO1xuICAkc2l6ZSA9IG5ldyBCZWhhdmlvclN1YmplY3Q8TWF0QmFkZ2VTaXplPignc21hbGwnKTtcbiAgJGZpbGwgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PE1hdEJhZGdlRmlsbD4oJ3NvbGlkJyk7XG4gICRjb2xvciA9IG5ldyBCZWhhdmlvclN1YmplY3Q8QXBwQ29sb3JzPignZGFuZ2VyJyk7XG59XG4iLCJcbjxpb24taGVhZGVyPlxuICA8aW9uLXRvb2xiYXIgY29sb3I9XCJwcmltYXJ5XCI+XG5cbiAgICA8aW9uLWJ1dHRvbnMgc2xvdD1cInN0YXJ0XCI+XG4gICAgICA8aW9uLWJhY2stYnV0dG9uPjwvaW9uLWJhY2stYnV0dG9uPlxuICAgIDwvaW9uLWJ1dHRvbnM+XG5cbiAgICA8aW9uLXRpdGxlPm1hdEJhZGdlSWNvbiBkaXJlY3RpdmU8L2lvbi10aXRsZT5cbiAgPC9pb24tdG9vbGJhcj5cbjwvaW9uLWhlYWRlcj5cblxuPGlvbi1jb250ZW50IGNsYXNzPVwiaW9uLXBhZGRpbmdcIj5cblxuICA8IS0tIHNtYWxsIGJhZGdlIC0tPlxuICA8cD5cbiAgICA8aW9uLXRleHQgY29sb3I9XCJ0ZXJ0aWFyeVwiPlxuICAgICAgPHNwYW4gYXBwQmFkZ2VcbiAgICAgICAgICAgIGFwcEJhZGdlTWF0SWNvbj1cImNoZWNrXCJcbiAgICAgICAgICAgIGFwcEJhZGdlU2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIGFwcEJhZGdlQ29sb3I9XCJhY2NlbnRcIlxuICAgICAgICAgICAgYXBwQmFkZ2VPdmVybGFwPVwiZmFsc2VcIj5TbWFsbCBiYWRnZVxuICAgICAgICA8c3BhbiBjbGFzcz1cIm1hdC1iYWRnZS1jb250ZW50XCI+PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIDwvaW9uLXRleHQ+XG4gIDwvcD5cblxuICA8IS0tIG1lZGl1bSBiYWRnZSAtLT5cbiAgPHA+XG4gICAgPGlvbi10ZXh0IGFwcEJhZGdlIGFwcEJhZGdlTWF0SWNvbj1cImNoZWNrXCJcbiAgICAgICAgICAgICAgYXBwQmFkZ2VTaXplPVwibWVkaXVtXCJcbiAgICAgICAgICAgICAgW2FwcEJhZGdlQ29sb3JdPVwiJ3RlcnRpYXJ5J3xtYXRDb2xvclwiXG4gICAgICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCJcbiAgICA+TWVkaXVtIGJhZGdlPC9pb24tdGV4dD5cbiAgPC9wPlxuXG4gIDwhLS0gc21hbGwgYmFkZ2UgLS0+XG4gIDxwPlxuICAgIDxpb24tbGFiZWwgYXBwQmFkZ2UgYXBwQmFkZ2VNYXRJY29uPVwiY2xvc2VcIiBhcHBCYWRnZVNpemU9XCJsYXJnZVwiXG4gICAgICAgICAgYXBwQmFkZ2VPdmVybGFwPVwiZmFsc2VcIj5MYXJnZSBiYWRnZTwvaW9uLWxhYmVsPlxuICA8L3A+XG5cbiAgPCEtLSBkZWZhdWx0IHNpemUgYmFkZ2UgLS0+XG4gIDxwPlxuICAgIDxpb24tbGFiZWwgYXBwQmFkZ2UgYXBwQmFkZ2VNYXRJY29uPVwiY2hlY2tcIiBbYXBwQmFkZ2VDb2xvcl09XCInc3VjY2Vzcyd8bWF0Q29sb3JcIlxuICAgICAgICAgICAgYXBwQmFkZ2VPdmVybGFwPVwiZmFsc2VcIj5CYWRnZSAobm8gc2l6ZSwgbm8gY29sb3IpXG4gICAgPC9pb24tbGFiZWw+XG4gIDwvcD5cblxuICA8IS0tIGlvbiBpY29uIC0tPlxuICA8cD5cbiAgICA8aW9uLWxhYmVsIGFwcEJhZGdlXG4gICAgICAgICAgICAgICBhcHBCYWRnZUljb249XCJjaGVja21hcmtcIlxuICAgICAgICAgICAgICAgW2FwcEJhZGdlQ29sb3JdPVwiJ3N1Y2Nlc3MnfG1hdENvbG9yXCJcbiAgICAgICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCI+QmFkZ2Ugd2l0aCBpb24taWNvblxuICAgIDwvaW9uLWxhYmVsPlxuICA8L3A+XG5cbiAgPCEtLSBpb24gaWNvbiBjbGVhciAtLT5cbiAgPHA+XG4gICAgPGlvbi1sYWJlbCBhcHBCYWRnZVxuICAgICAgICAgICAgICAgYXBwQmFkZ2VJY29uPVwiY2hlY2ttYXJrLWNpcmNsZVwiXG4gICAgICAgICAgICAgICBbYXBwQmFkZ2VDb2xvcl09XCIndGVydGlhcnknfG1hdENvbG9yXCJcbiAgICAgICAgICAgICAgIGFwcEJhZGdlRmlsbD1cImNsZWFyXCJcbiAgICAgICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCI+QmFkZ2Ugd2l0aCBjbGVhciBpY29uXG4gICAgPC9pb24tbGFiZWw+XG4gIDwvcD5cblxuICA8aW9uLXJvdyBjbGFzcz1cImlvbi1uby1wYWRkaW5nXCI+XG4gICAgPGlvbi1jb2w+XG4gICAgICA8bWF0LWljb24gW3N0eWxlLmNvbG9yXT1cIid2YXIoLS1pb24tY29sb3Itc2Vjb25kYXJ5KSdcIlxuICAgICAgICAgICAgICAgIGFwcEJhZGdlXG4gICAgICAgICAgICAgICAgW2FwcEJhZGdlSWNvbl09XCIkaWNvbnxhc3luY1wiXG4gICAgICAgICAgICAgICAgW2FwcEJhZGdlQ29sb3JdPVwiJGNvbG9yfGFzeW5jfG1hdENvbG9yXCJcbiAgICAgICAgICAgICAgICBbYXBwQmFkZ2VGaWxsXT1cIiRmaWxsfGFzeW5jXCJcbiAgICAgICAgICAgICAgICBbYXBwQmFkZ2VTaXplXT1cIiRzaXplfGFzeW5jXCJcbiAgICAgICAgICAgICAgICBhcHBCYWRnZU92ZXJsYXA9XCJmYWxzZVwiPlxuICAgICAgICA8aW9uLWljb24gc2xvdD1cImljb24tb25seVwiXG4gICAgICAgICAgICAgICAgICBbY29sb3JdPVwiJ3NlY29uZGFyeSdcIlxuICAgICAgICAgICAgICAgICAgbmFtZT1cIm5hdmlnYXRlXCJcbiAgICAgICAgPjwvaW9uLWljb24+XG4gICAgICA8L21hdC1pY29uPlxuICAgIDwvaW9uLWNvbD5cblxuICAgIDxpb24tY29sPlxuICAgICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgICA8bWF0LXNlbGVjdCBwbGFjZWhvbGRlcj1cImFwcEJhZGdlQ29sb3JcIlxuICAgICAgICAgICAgICAgICAgICBbdmFsdWVdPVwiJGNvbG9yLnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJ0aGlzLiRjb2xvci5uZXh0KCRldmVudC52YWx1ZSlcIj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ3ByaW1hcnknXCI+cHJpbWFyeTwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ3NlY29uZGFyeSdcIj5zZWNvbmRhcnk8L21hdC1vcHRpb24+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIid0ZXJ0aWFyeSdcIj50ZXJ0aWFyeTwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ2RhbmdlcidcIj5kYW5nZXI8L21hdC1vcHRpb24+XG4gICAgICAgIDwvbWF0LXNlbGVjdD5cbiAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPC9pb24tY29sPlxuXG4gICAgPGlvbi1jb2w+XG4gICAgICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgICAgIDxtYXQtc2VsZWN0IHBsYWNlaG9sZGVyPVwiaW9uQmFkZ2VJY29uXCJcbiAgICAgICAgICAgICAgICAgICAgW3ZhbHVlXT1cIiRpY29uLnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJ0aGlzLiRpY29uLm5leHQoJGV2ZW50LnZhbHVlKVwiPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInY2hlY2ttYXJrLWNpcmNsZSdcIj5jaGVja21hcmstY2lyY2xlPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInYWxlcnQtY2lyY2xlJ1wiPmFsZXJ0LWNpcmNsZTwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ2FsZXJ0J1wiPmFsZXJ0PC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInZmxhZydcIj5mbGFnPC9tYXQtb3B0aW9uPlxuICAgICAgICA8L21hdC1zZWxlY3Q+XG4gICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDwvaW9uLWNvbD5cblxuICAgIDxpb24tY29sPlxuICAgICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgICA8bWF0LXNlbGVjdCBwbGFjZWhvbGRlcj1cImFwcEJhZGdlU2l6ZVwiXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCIkc2l6ZS52YWx1ZVwiXG4gICAgICAgICAgICAgICAgICAgIChzZWxlY3Rpb25DaGFuZ2UpPVwidGhpcy4kc2l6ZS5uZXh0KCRldmVudC52YWx1ZSlcIj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ2xhcmdlJ1wiPmxhcmdlPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInbWVkaXVtJ1wiPm1lZGl1bTwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ3NtYWxsJ1wiPnNtYWxsPC9tYXQtb3B0aW9uPlxuICAgICAgICA8L21hdC1zZWxlY3Q+XG4gICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDwvaW9uLWNvbD5cblxuICAgIDxpb24tY29sPlxuICAgICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgICA8bWF0LXNlbGVjdCBwbGFjZWhvbGRlcj1cIm1hdEJhZGdlRmlsbFwiXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCIkZmlsbC52YWx1ZVwiXG4gICAgICAgICAgICAgICAgICAgIChzZWxlY3Rpb25DaGFuZ2UpPVwidGhpcy4kZmlsbC5uZXh0KCRldmVudC52YWx1ZSlcIj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ2NsZWFyJ1wiPmNsZWFyPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInc29saWQnXCI+c29saWQ8L21hdC1vcHRpb24+XG4gICAgICAgIDwvbWF0LXNlbGVjdD5cbiAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPC9pb24tY29sPlxuICA8L2lvbi1yb3c+XG5cbjwvaW9uLWNvbnRlbnQ+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvc2hhcmVkL21hdGVyaWFsL2JhZGdlL2JhZGdlLnRlc3QudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC9iYWRnZS9iYWRnZS50ZXN0Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7Ozs7Ozs7OztBQVNyQyxNQUFNLE9BQU8sZ0JBQWdCO0lBSjdCO1FBTUUsVUFBSyxHQUFHLElBQUksZUFBZSxDQUFTLE9BQU8sQ0FBQyxDQUFDO1FBQzdDLFVBQUssR0FBRyxJQUFJLGVBQWUsQ0FBZSxPQUFPLENBQUMsQ0FBQztRQUNuRCxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQWUsT0FBTyxDQUFDLENBQUM7UUFDbkQsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFZLFFBQVEsQ0FBQyxDQUFDO1FBQ2xELFlBQU8sR0FBRyxJQUFJLGVBQWUsQ0FBVSxLQUFLLENBQUMsQ0FBQztLQUMvQzs7NkdBUFksZ0JBQWdCO2lHQUFoQixnQkFBZ0Isc0RDVjdCLG8yS0F1S0E7MkZEN0phLGdCQUFnQjtrQkFKNUIsU0FBUzsrQkFDRSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdH0gZnJvbSAncnhqcyc7XG5pbXBvcnQge01hdEJhZGdlRmlsbH0gZnJvbSAnLi9iYWRnZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHtNYXRCYWRnZVNpemV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2JhZGdlJztcbmltcG9ydCB7QXBwQ29sb3JzfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21hdC1iYWRnZS10ZXN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLnRlc3QuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTWF0QmFkZ2VUZXN0UGFnZSB7XG5cbiAgJGljb24gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4oJ2FsZXJ0Jyk7XG4gICRzaXplID0gbmV3IEJlaGF2aW9yU3ViamVjdDxNYXRCYWRnZVNpemU+KCdzbWFsbCcpO1xuICAkZmlsbCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8TWF0QmFkZ2VGaWxsPignc29saWQnKTtcbiAgJGNvbG9yID0gbmV3IEJlaGF2aW9yU3ViamVjdDxBcHBDb2xvcnM+KCdkYW5nZXInKTtcbiAgJGhpZGRlbiA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oZmFsc2UpO1xufVxuIiwiXG48aW9uLWhlYWRlcj5cbiAgPGlvbi10b29sYmFyIGNvbG9yPVwicHJpbWFyeVwiPlxuXG4gICAgPGlvbi1idXR0b25zIHNsb3Q9XCJzdGFydFwiPlxuICAgICAgPGlvbi1iYWNrLWJ1dHRvbj48L2lvbi1iYWNrLWJ1dHRvbj5cbiAgICA8L2lvbi1idXR0b25zPlxuXG4gICAgPGlvbi10aXRsZT5tYXRCYWRnZUljb24gZGlyZWN0aXZlPC9pb24tdGl0bGU+XG4gIDwvaW9uLXRvb2xiYXI+XG48L2lvbi1oZWFkZXI+XG5cbjxpb24tY29udGVudCBjbGFzcz1cImlvbi1wYWRkaW5nXCI+XG5cbiAgPCEtLSBzbWFsbCBiYWRnZSAtLT5cbiAgPHA+XG4gICAgPGlvbi10ZXh0IGNvbG9yPVwidGVydGlhcnlcIj5cbiAgICAgIDxzcGFuIGFwcEJhZGdlXG4gICAgICAgICAgICBhcHBCYWRnZU1hdEljb249XCJjaGVja1wiXG4gICAgICAgICAgICBhcHBCYWRnZVNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICBhcHBCYWRnZUNvbG9yPVwiYWNjZW50XCJcbiAgICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCI+U21hbGwgYmFkZ2VcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtYXQtYmFkZ2UtY29udGVudFwiPjwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICA8L2lvbi10ZXh0PlxuICA8L3A+XG5cbiAgPCEtLSBtZWRpdW0gYmFkZ2UgLS0+XG4gIDxwPlxuICAgIDxpb24tdGV4dCBhcHBCYWRnZSBhcHBCYWRnZU1hdEljb249XCJjaGVja1wiXG4gICAgICAgICAgICAgIGFwcEJhZGdlU2l6ZT1cIm1lZGl1bVwiXG4gICAgICAgICAgICAgIFthcHBCYWRnZUNvbG9yXT1cIid0ZXJ0aWFyeSd8bWF0Q29sb3JcIlxuICAgICAgICAgICAgICBhcHBCYWRnZU92ZXJsYXA9XCJmYWxzZVwiXG4gICAgPk1lZGl1bSBiYWRnZTwvaW9uLXRleHQ+XG4gIDwvcD5cblxuICA8IS0tIHNtYWxsIGJhZGdlIC0tPlxuICA8cD5cbiAgICA8aW9uLWxhYmVsIGFwcEJhZGdlIGFwcEJhZGdlTWF0SWNvbj1cImNsb3NlXCIgYXBwQmFkZ2VTaXplPVwibGFyZ2VcIlxuICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCI+TGFyZ2UgYmFkZ2U8L2lvbi1sYWJlbD5cbiAgPC9wPlxuXG4gIDwhLS0gZGVmYXVsdCBzaXplIGJhZGdlIC0tPlxuICA8cD5cbiAgICA8aW9uLWxhYmVsIGFwcEJhZGdlIGFwcEJhZGdlTWF0SWNvbj1cImNoZWNrXCIgW2FwcEJhZGdlQ29sb3JdPVwiJ3N1Y2Nlc3MnfG1hdENvbG9yXCJcbiAgICAgICAgICAgIGFwcEJhZGdlT3ZlcmxhcD1cImZhbHNlXCI+QmFkZ2UgKG5vIHNpemUsIG5vIGNvbG9yKVxuICAgIDwvaW9uLWxhYmVsPlxuICA8L3A+XG5cbiAgPCEtLSBpb24gaWNvbiAtLT5cbiAgPHA+XG4gICAgPGlvbi1sYWJlbCBhcHBCYWRnZVxuICAgICAgICAgICAgICAgYXBwQmFkZ2VJY29uPVwiY2hlY2ttYXJrXCJcbiAgICAgICAgICAgICAgIFthcHBCYWRnZUNvbG9yXT1cIidzdWNjZXNzJ3xtYXRDb2xvclwiXG4gICAgICAgICAgICAgICBhcHBCYWRnZU92ZXJsYXA9XCJmYWxzZVwiPkJhZGdlIHdpdGggaW9uLWljb25cbiAgICA8L2lvbi1sYWJlbD5cbiAgPC9wPlxuXG4gIDwhLS0gaW9uIGljb24gY2xlYXIgLS0+XG4gIDxwPlxuICAgIDxpb24tbGFiZWwgYXBwQmFkZ2VcbiAgICAgICAgICAgICAgIGFwcEJhZGdlSWNvbj1cImNoZWNrbWFyay1jaXJjbGVcIlxuICAgICAgICAgICAgICAgW2FwcEJhZGdlQ29sb3JdPVwiJ3RlcnRpYXJ5J3xtYXRDb2xvclwiXG4gICAgICAgICAgICAgICBhcHBCYWRnZUZpbGw9XCJjbGVhclwiXG4gICAgICAgICAgICAgICBhcHBCYWRnZU92ZXJsYXA9XCJmYWxzZVwiPkJhZGdlIHdpdGggY2xlYXIgaWNvblxuICAgIDwvaW9uLWxhYmVsPlxuICA8L3A+XG5cbiAgPGlvbi1yb3cgY2xhc3M9XCJpb24tbm8tcGFkZGluZ1wiPlxuICAgIDxpb24tY29sPlxuICAgICAgPHA+RXhhbXBsZTpcbiAgICAgICAgPG1hdC1pY29uIFtzdHlsZS5jb2xvcl09XCIndmFyKC0taW9uLWNvbG9yLXNlY29uZGFyeSknXCJcbiAgICAgICAgICAgICAgICAgIGFwcEJhZGdlXG4gICAgICAgICAgICAgICAgICBbYXBwQmFkZ2VJY29uXT1cIiRpY29ufGFzeW5jXCJcbiAgICAgICAgICAgICAgICAgIFthcHBCYWRnZUNvbG9yXT1cIiRjb2xvcnxhc3luY3xtYXRDb2xvclwiXG4gICAgICAgICAgICAgICAgICBbYXBwQmFkZ2VIaWRkZW5dPVwiJGhpZGRlbnxhc3luY1wiXG4gICAgICAgICAgICAgICAgICBbYXBwQmFkZ2VGaWxsXT1cIiRmaWxsfGFzeW5jXCJcbiAgICAgICAgICAgICAgICAgIFthcHBCYWRnZVNpemVdPVwiJHNpemV8YXN5bmNcIlxuICAgICAgICAgICAgICAgICAgYXBwQmFkZ2VPdmVybGFwPVwiZmFsc2VcIj5cbiAgICAgICAgICA8aW9uLWljb24gc2xvdD1cImljb24tb25seVwiXG4gICAgICAgICAgICAgICAgICAgIFtjb2xvcl09XCInc2Vjb25kYXJ5J1wiXG4gICAgICAgICAgICAgICAgICAgIG5hbWU9XCJuYXZpZ2F0ZVwiXG4gICAgICAgICAgPjwvaW9uLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgICA8L3A+XG4gICAgPC9pb24tY29sPlxuXG4gICAgPGlvbi1jb2w+XG4gICAgICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgICAgIDxtYXQtc2VsZWN0IHBsYWNlaG9sZGVyPVwiYXBwQmFkZ2VDb2xvclwiXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCIkY29sb3IudmFsdWVcIlxuICAgICAgICAgICAgICAgICAgICAoc2VsZWN0aW9uQ2hhbmdlKT1cInRoaXMuJGNvbG9yLm5leHQoJGV2ZW50LnZhbHVlKVwiPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCIncHJpbWFyeSdcIj5wcmltYXJ5PC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInc2Vjb25kYXJ5J1wiPnNlY29uZGFyeTwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8bWF0LW9wdGlvbiBbdmFsdWVdPVwiJ3RlcnRpYXJ5J1wiPnRlcnRpYXJ5PC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInZGFuZ2VyJ1wiPmRhbmdlcjwvbWF0LW9wdGlvbj5cbiAgICAgICAgPC9tYXQtc2VsZWN0PlxuICAgICAgPC9tYXQtZm9ybS1maWVsZD5cbiAgICA8L2lvbi1jb2w+XG5cbiAgICA8aW9uLWNvbD5cbiAgICAgIDxtYXQtZm9ybS1maWVsZD5cbiAgICAgICAgPG1hdC1zZWxlY3QgcGxhY2Vob2xkZXI9XCJpb25CYWRnZUljb25cIlxuICAgICAgICAgICAgICAgICAgICBbdmFsdWVdPVwiJGljb24udmFsdWVcIlxuICAgICAgICAgICAgICAgICAgICAoc2VsZWN0aW9uQ2hhbmdlKT1cInRoaXMuJGljb24ubmV4dCgkZXZlbnQudmFsdWUpXCI+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIidjaGVja21hcmstY2lyY2xlJ1wiPmNoZWNrbWFyay1jaXJjbGU8L21hdC1vcHRpb24+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIidhbGVydC1jaXJjbGUnXCI+YWxlcnQtY2lyY2xlPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInYWxlcnQnXCI+YWxlcnQ8L21hdC1vcHRpb24+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIidmbGFnJ1wiPmZsYWc8L21hdC1vcHRpb24+XG4gICAgICAgIDwvbWF0LXNlbGVjdD5cbiAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPC9pb24tY29sPlxuXG4gICAgPGlvbi1jb2w+XG4gICAgICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgICAgIDxtYXQtc2VsZWN0IHBsYWNlaG9sZGVyPVwiYXBwQmFkZ2VTaXplXCJcbiAgICAgICAgICAgICAgICAgICAgW3ZhbHVlXT1cIiRzaXplLnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJ0aGlzLiRzaXplLm5leHQoJGV2ZW50LnZhbHVlKVwiPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInbGFyZ2UnXCI+bGFyZ2U8L21hdC1vcHRpb24+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIidtZWRpdW0nXCI+bWVkaXVtPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInc21hbGwnXCI+c21hbGw8L21hdC1vcHRpb24+XG4gICAgICAgIDwvbWF0LXNlbGVjdD5cbiAgICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPC9pb24tY29sPlxuXG4gICAgPGlvbi1jb2w+XG4gICAgICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgICAgIDxtYXQtc2VsZWN0IHBsYWNlaG9sZGVyPVwibWF0QmFkZ2VGaWxsXCJcbiAgICAgICAgICAgICAgICAgICAgW3ZhbHVlXT1cIiRmaWxsLnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJ0aGlzLiRmaWxsLm5leHQoJGV2ZW50LnZhbHVlKVwiPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCInY2xlYXInXCI+Y2xlYXI8L21hdC1vcHRpb24+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cIidzb2xpZCdcIj5zb2xpZDwvbWF0LW9wdGlvbj5cbiAgICAgICAgPC9tYXQtc2VsZWN0PlxuICAgICAgPC9tYXQtZm9ybS1maWVsZD5cbiAgICA8L2lvbi1jb2w+XG5cbiAgICA8aW9uLWNvbD5cbiAgICAgIDxtYXQtZm9ybS1maWVsZD5cbiAgICAgICAgPG1hdC1zZWxlY3QgcGxhY2Vob2xkZXI9XCJhcHBCYWRnZUhpZGRlblwiXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCIkaGlkZGVuLnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJ0aGlzLiRoaWRkZW4ubmV4dCgkZXZlbnQudmFsdWUpXCI+XG4gICAgICAgICAgPG1hdC1vcHRpb24gW3ZhbHVlXT1cInRydWVcIj50cnVlPC9tYXQtb3B0aW9uPlxuICAgICAgICAgIDxtYXQtb3B0aW9uIFt2YWx1ZV09XCJmYWxzZVwiPmZhbHNlPC9tYXQtb3B0aW9uPlxuICAgICAgICA8L21hdC1zZWxlY3Q+XG4gICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDwvaW9uLWNvbD5cbiAgPC9pb24tcm93PlxuXG4gIDxpb24tcm93PlxuICAgIDxpb24tY29sPlxuICAgICAgPHA+RXhhbXBsZSwgdXNpbmcgYSBtYXRCYWRnZSA6XG4gICAgICAgIDxtYXQtaWNvbiBbc3R5bGUuY29sb3JdPVwiJ3ZhcigtLWlvbi1jb2xvci1zZWNvbmRhcnkpJ1wiXG4gICAgICAgICAgICAgICAgICBbbWF0QmFkZ2VdPVwiJyEnXCJcbiAgICAgICAgICAgICAgICAgIFttYXRCYWRnZUNvbG9yXT1cIiRjb2xvcnxhc3luY3xtYXRDb2xvclwiXG4gICAgICAgICAgICAgICAgICBbbWF0QmFkZ2VIaWRkZW5dPVwiJGhpZGRlbnxhc3luY1wiXG4gICAgICAgICAgICAgICAgICBbbWF0QmFkZ2VTaXplXT1cIiRzaXplfGFzeW5jXCJcbiAgICAgICAgICAgICAgICAgIFttYXRCYWRnZU92ZXJsYXBdPVwiZmFsc2VcIj5cbiAgICAgICAgICA8aW9uLWljb24gc2xvdD1cImljb24tb25seVwiXG4gICAgICAgICAgICAgICAgICAgIFtjb2xvcl09XCInc2Vjb25kYXJ5J1wiXG4gICAgICAgICAgICAgICAgICAgIG5hbWU9XCJuYXZpZ2F0ZVwiXG4gICAgICAgICAgPjwvaW9uLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgICA8L3A+XG4gICAgPC9pb24tY29sPlxuICA8L2lvbi1yb3c+XG5cbjwvaW9uLWNvbnRlbnQ+XG4iXX0=

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

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

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

@@ -182,15 +182,15 @@ export class MatBooleanField {
         this.cd.markForCheck();
     }
 }
-MatBooleanField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: MatBooleanField, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatBooleanField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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: [
+MatBooleanField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatBooleanField, deps: [{ token: i1.TranslateService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatBooleanField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"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      <ion-label>&nbsp;</ion-label>\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 === 'never' ? 'never' : '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]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button 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          <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                    (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 #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\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-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-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", "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: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { 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", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: MatBooleanField, decorators: [{
+    ], 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\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"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      <ion-label>&nbsp;</ion-label>\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 === 'never' ? 'never' : '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]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button 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          <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                    (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 #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\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-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-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", "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: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { 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", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatBooleanField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-boolean-field', providers: [
                         DEFAULT_VALUE_ACCESSOR
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"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      <ion-label>&nbsp;</ion-label>\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 === 'never' ? 'never' : '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]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button 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          <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                    (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 #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\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-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\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\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"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      <ion-label>&nbsp;</ion-label>\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 === 'never' ? 'never' : '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]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button 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          <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                    (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 #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\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-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-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"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { disabled: [{

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

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