cmat 0.0.76 → 0.0.78

package/fesm2022/cmat-components-opt-input.mjs

@@ -415,10 +415,10 @@ class CmatOtpInputComponent {
             this.onInputChange.next(val);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatOtpInputComponent, isStandalone: true, selector: "cmat-otp-input", inputs: { id: "id", config: "config", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { onBlur: "onBlur", onInputChange: "onInputChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], exportAs: ["cmatOtpInput"], usesOnChanges: true, ngImport: i0, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width:767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width:420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatOtpInputComponent, isStandalone: true, selector: "cmat-otp-input", inputs: { id: "id", config: "config", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { onBlur: "onBlur", onInputChange: "onInputChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], exportAs: ["cmatOtpInput"], usesOnChanges: true, ngImport: i0, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width:767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width:420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatOtpInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatOtpInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-otp-input', exportAs: 'cmatOtpInput', imports: [CommonModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width:767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width:420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{

package/fesm2022/cmat-components-org-chart.mjs

@@ -26,10 +26,10 @@ class CmatChartNodeComponent {
             this.containerClass = `cmat-org-connector-${this.direction} `;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartNode', imports: [NgClass, MatIconModule, MatButtonModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"] }]
         }], propDecorators: { node: [{
@@ -63,10 +63,10 @@ class CmatChartDesignerComponent {
             this.chartNodeClass = `cmat-org-${this.direction}`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostClass", "style.width": "this.hostWidthClass" } }, exportAs: ["cmatOrgChartDesigner"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostClass", "style.width": "this.hostWidthClass" } }, exportAs: ["cmatOrgChartDesigner"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart-designer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartDesigner', imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"] }]
         }], propDecorators: { node: [{
@@ -96,10 +96,10 @@ class CmatOrgChartComponent {
         this.detailsBtnTitle = '查看详细';
         this.detailsBtnClick = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: "nodes", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: "nodes", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChart', imports: [CmatChartDesignerComponent], template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"] }]
         }], propDecorators: { nodes: [{

package/fesm2022/cmat-components-page-header.mjs

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class CmatPageHeaderComponent {
+    constructor() {
+        /**
+         * 标题。
+         */
+        this.title = '页面标题';
+        /**
+         * 副标题说明。
+         */
+        this.description = '';
+        /**
+         * 眉头说明。
+         */
+        this.eyebrow = '';
+        /**
+         * 是否显示底部分割线。
+         */
+        this.divider = true;
+        /**
+         * 内容对齐方式。
+         */
+        this.align = 'start';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatPageHeaderComponent, isStandalone: true, selector: "cmat-page-header", inputs: { title: "title", description: "description", eyebrow: "eyebrow", divider: "divider", align: "align" }, ngImport: i0, template: "@if (align === 'center') {\r\n    <section class=\"flex flex-col items-center gap-4 border-b border-default pb-4 text-center\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center justify-center gap-2\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n} @else {\r\n    <section class=\"flex flex-col gap-4 border-b border-default pb-4 md:flex-row md:items-end md:justify-between\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2 md:ml-auto\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n}\r\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@if (align === 'center') {\r\n    <section class=\"flex flex-col items-center gap-4 border-b border-default pb-4 text-center\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center justify-center gap-2\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n} @else {\r\n    <section class=\"flex flex-col gap-4 border-b border-default pb-4 md:flex-row md:items-end md:justify-between\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2 md:ml-auto\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], eyebrow: [{
+                type: Input
+            }], divider: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatPageHeaderComponent };
+//# sourceMappingURL=cmat-components-page-header.mjs.map

package/fesm2022/cmat-components-page-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cmat-components-page-header.mjs","sources":["../../../projects/cmat/components/page-header/page-header.component.ts","../../../projects/cmat/components/page-header/page-header.component.html","../../../projects/cmat/components/page-header/cmat-components-page-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'cmat-page-header',\r\n    templateUrl: './page-header.component.html',\r\n    styleUrls: ['./page-header.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: []\r\n})\r\nexport class CmatPageHeaderComponent {\r\n    /**\r\n     * 标题。\r\n     */\r\n    @Input() title = '页面标题';\r\n\r\n    /**\r\n     * 副标题说明。\r\n     */\r\n    @Input() description = '';\r\n\r\n    /**\r\n     * 眉头说明。\r\n     */\r\n    @Input() eyebrow = '';\r\n\r\n    /**\r\n     * 是否显示底部分割线。\r\n     */\r\n    @Input() divider = true;\r\n\r\n    /**\r\n     * 内容对齐方式。\r\n     */\r\n    @Input() align: 'start' | 'center' = 'start';\r\n}\r\n","@if (align === 'center') {\r\n    <section class=\"flex flex-col items-center gap-4 border-b border-default pb-4 text-center\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center justify-center gap-2\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n} @else {\r\n    <section class=\"flex flex-col gap-4 border-b border-default pb-4 md:flex-row md:items-end md:justify-between\">\r\n        <div class=\"min-w-0\">\r\n            @if (eyebrow) {\r\n                <p class=\"text-xs font-semibold uppercase tracking-[0.2em] text-primary\">{{ eyebrow }}</p>\r\n            }\r\n\r\n            <h1 class=\"mt-1 text-2xl font-semibold text-default\">{{ title }}</h1>\r\n\r\n            @if (description) {\r\n                <p class=\"mt-2 max-w-3xl text-sm leading-6 text-secondary\">{{ description }}</p>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2 md:ml-auto\">\r\n            <ng-content select=\"[cmatPageHeaderActions]\"></ng-content>\r\n        </div>\r\n    </section>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;AAQI;;AAEG;QACM,IAAA,CAAA,KAAK,GAAG,MAAM;AAEvB;;AAEG;QACM,IAAA,CAAA,WAAW,GAAG,EAAE;AAEzB;;AAEG;QACM,IAAA,CAAA,OAAO,GAAG,EAAE;AAErB;;AAEG;QACM,IAAA,CAAA,OAAO,GAAG,IAAI;AAEvB;;AAEG;QACM,IAAA,CAAA,KAAK,GAAuB,OAAO;AAC/C,IAAA;8GAzBY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,4LCTpC,mhDAqCA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FD5Ba,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,WACtC,EAAE,EAAA,QAAA,EAAA,mhDAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;sBAMV;;sBAKA;;sBAKA;;sBAKA;;sBAKA;;;AEjCL;;AAEG;;;;"}

package/fesm2022/cmat-components-pagination.mjs

@@ -92,10 +92,10 @@ class CmatPaginationService {
         }
         return target;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -271,10 +271,10 @@ class CmatPaginationDirective {
             return i;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -320,10 +320,10 @@ class CmatPaginationComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPagination', imports: [CmatPaginationDirective, MatIconModule, NgStyle, MatFormFieldModule, MatInputModule, CmatDigitOnlyDirective, MatSelectModule, DecimalPipe, MatButtonModule], template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>" }]
         }], propDecorators: { pageChange: [{
@@ -428,10 +428,10 @@ class CmatPaginatePipe {
         }
         return state.slice.every((element, index) => element === collection[start + index]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginate',

package/fesm2022/cmat-components-password-strength.mjs

@@ -19,10 +19,10 @@ class CmatPassToggleVisibilityComponent {
     get type() {
         return this.isVisible ? 'text' : 'password';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: "isVisible", tabindex: "tabindex" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex ? tabindex : null\" (click)=\"isVisible = !isVisible\">\r\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: "isVisible", tabindex: "tabindex" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex ? tabindex : null\" (click)=\"isVisible = !isVisible\">\r\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-pass-toggle-visibility', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatPassToggleVisibility', imports: [MatButtonModule, MatRippleModule, MatIconModule], template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex ? tabindex : null\" (click)=\"isVisible = !isVisible\">\r\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>" }]
         }], propDecorators: { isVisible: [{
@@ -256,10 +256,10 @@ class CmatPasswordStrengthComponent {
         this.calculatePasswordStrength();
         this.passwordConfirmationFormControl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: "password", externalError: "externalError", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", warnThreshold: "warnThreshold", accentThreshold: "accentThreshold" }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: "password", externalError: "externalError", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", warnThreshold: "warnThreshold", accentThreshold: "accentThreshold" }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-password-strength', exportAs: 'cmatPasswordStrength', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressBarModule], template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>" }]
         }], propDecorators: { password: [{
@@ -362,10 +362,10 @@ class CmatPasswordStrengthInfoComponent {
         }
         return enabledItems.length - enabledItems.findIndex(j => j === itemType) - 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPasswordStrengthInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatPasswordStrengthInfoComponent, isStandalone: true, selector: "cmat-password-strength-info", inputs: { passwordComponent: "passwordComponent", enableScoreInfo: "enableScoreInfo", lowerCaseCriteriaMsg: "lowerCaseCriteriaMsg", upperCaseCriteriaMsg: "upperCaseCriteriaMsg", digitsCriteriaMsg: "digitsCriteriaMsg", specialCharsCriteriaMsg: "specialCharsCriteriaMsg", customCharsCriteriaMsg: "customCharsCriteriaMsg", minCharsCriteriaMsg: "minCharsCriteriaMsg" }, exportAs: ["cmatPasswordStrengthInfo"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent.enableLowerCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent.containAtLeastOneLowerCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableUpperCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent.containAtLeastOneUpperCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableDigitRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent.containAtLeastOneDigit) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableSpecialCharRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent.containAtLeastOneSpecialChar) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableLengthRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent.containAtLeastMinChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{minCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.customValidator) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent.containAtCustomChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent.strength === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>\u5BC6\u7801\u5F3A\u5EA6= {{passwordComponent.strength}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n</mat-card>", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPasswordStrengthInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatPasswordStrengthInfoComponent, isStandalone: true, selector: "cmat-password-strength-info", inputs: { passwordComponent: "passwordComponent", enableScoreInfo: "enableScoreInfo", lowerCaseCriteriaMsg: "lowerCaseCriteriaMsg", upperCaseCriteriaMsg: "upperCaseCriteriaMsg", digitsCriteriaMsg: "digitsCriteriaMsg", specialCharsCriteriaMsg: "specialCharsCriteriaMsg", customCharsCriteriaMsg: "customCharsCriteriaMsg", minCharsCriteriaMsg: "minCharsCriteriaMsg" }, exportAs: ["cmatPasswordStrengthInfo"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent.enableLowerCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent.containAtLeastOneLowerCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableUpperCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent.containAtLeastOneUpperCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableDigitRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent.containAtLeastOneDigit) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableSpecialCharRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent.containAtLeastOneSpecialChar) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableLengthRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent.containAtLeastMinChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{minCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.customValidator) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent.containAtCustomChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent.strength === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>\u5BC6\u7801\u5F3A\u5EA6= {{passwordComponent.strength}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n</mat-card>", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPasswordStrengthInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPasswordStrengthInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-password-strength-info', exportAs: 'cmatPasswordStrengthInfo', encapsulation: ViewEncapsulation.None, imports: [MatCardModule, MatIconModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent.enableLowerCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent.containAtLeastOneLowerCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableUpperCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent.containAtLeastOneUpperCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableDigitRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent.containAtLeastOneDigit) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableSpecialCharRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent.containAtLeastOneSpecialChar) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableLengthRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent.containAtLeastMinChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{minCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.customValidator) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent.containAtCustomChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent.strength === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>\u5BC6\u7801\u5F3A\u5EA6= {{passwordComponent.strength}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n</mat-card>", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"] }]
         }], propDecorators: { passwordComponent: [{

package/fesm2022/cmat-components-popover.mjs

@@ -319,10 +319,10 @@ class CmatPopoverComponent {
         this.classList['cmat-popover-below-center'] = pos[0] === 'below' && pos[1] === 'center';
         this.classList['cmat-popover-below-after'] = pos[0] === 'below' && pos[1] === 'after';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CmatPopoverComponent, isStandalone: true, selector: "cmat-popover", inputs: { popoverPanelStyles: "popoverPanelStyles", popoverArrowStyles: "popoverArrowStyles", popoverContentStyles: "popoverContentStyles", position: "position", triggerEvent: "triggerEvent", scrollStrategy: "scrollStrategy", enterDelay: "enterDelay", leaveDelay: "leaveDelay", xOffset: "xOffset", yOffset: "yOffset", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", closeOnPanelClick: "closeOnPanelClick", closeOnBackdropClick: "closeOnBackdropClick", disableAnimation: "disableAnimation", focusTrapEnabled: "focusTrapEnabled", focusTrapAutoCaptureEnabled: "focusTrapAutoCaptureEnabled", panelClass: "panelClass" }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "this.role" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatPopover"], ngImport: i0, template: "<ng-template>\r\n    <div class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        [class.zoom-in-animation]=\"!disableAnimation\" (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\"\r\n        (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\">\r\n        <div class=\"cmat-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n        <div class=\"cmat-popover-content\" [ngStyle]=\"popoverContentStyles\" [cdkTrapFocus]=\"focusTrapEnabled\"\r\n            [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatPopoverComponent, isStandalone: true, selector: "cmat-popover", inputs: { popoverPanelStyles: "popoverPanelStyles", popoverArrowStyles: "popoverArrowStyles", popoverContentStyles: "popoverContentStyles", position: "position", triggerEvent: "triggerEvent", scrollStrategy: "scrollStrategy", enterDelay: "enterDelay", leaveDelay: "leaveDelay", xOffset: "xOffset", yOffset: "yOffset", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", closeOnPanelClick: "closeOnPanelClick", closeOnBackdropClick: "closeOnBackdropClick", disableAnimation: "disableAnimation", focusTrapEnabled: "focusTrapEnabled", focusTrapAutoCaptureEnabled: "focusTrapAutoCaptureEnabled", panelClass: "panelClass" }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "this.role" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatPopover"], ngImport: i0, template: "<ng-template>\r\n    <div class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        [class.zoom-in-animation]=\"!disableAnimation\" (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\"\r\n        (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\">\r\n        <div class=\"cmat-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n        <div class=\"cmat-popover-content\" [ngStyle]=\"popoverContentStyles\" [cdkTrapFocus]=\"focusTrapEnabled\"\r\n            [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPopover', imports: [NgStyle, NgClass, A11yModule], template: "<ng-template>\r\n    <div class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        [class.zoom-in-animation]=\"!disableAnimation\" (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\"\r\n        (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\">\r\n        <div class=\"cmat-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n        <div class=\"cmat-popover-content\" [ngStyle]=\"popoverContentStyles\" [cdkTrapFocus]=\"focusTrapEnabled\"\r\n            [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { closed: [{
@@ -770,10 +770,10 @@ class CmatPopoverTriggerDirective {
         }
         this.popover.setCurrentStyles();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CmatPopoverTriggerDirective, isStandalone: true, selector: "[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]", inputs: { popover: ["cmatPopoverTriggerFor", "popover"], targetElement: ["cmatPopoverTargetAt", "targetElement"], triggerEvent: ["cmatPopoverTriggerOn", "triggerEvent"] }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.aria-haspopup": "this.ariaHaspopup" } }, exportAs: ["cmatPopoverTrigger"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatPopoverTriggerDirective, isStandalone: true, selector: "[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]", inputs: { popover: ["cmatPopoverTriggerFor", "popover"], targetElement: ["cmatPopoverTargetAt", "targetElement"], triggerEvent: ["cmatPopoverTriggerOn", "triggerEvent"] }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.aria-haspopup": "this.ariaHaspopup" } }, exportAs: ["cmatPopoverTrigger"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]',
@@ -814,10 +814,10 @@ class CmatPopoverTargetDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'cmat-popover-target, [cmatPopoverTarget]',

package/fesm2022/cmat-components-progress-bar.mjs

@@ -47,10 +47,10 @@ class CmatProgressBarComponent {
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CmatProgressBarComponent, isStandalone: true, selector: "cmat-progress-bar", inputs: { autoMode: "autoMode" }, exportAs: ["cmatProgressBar"], usesOnChanges: true, ngImport: i0, template: "@if (show) {\r\n  <mat-progress-bar\r\n    [mode]=\"mode\"\r\n  [value]=\"progress\"></mat-progress-bar>\r\n}\r\n", styles: ["cmat-progress-bar{position:fixed;top:0;left:0;z-index:999;width:100%;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatProgressBarComponent, isStandalone: true, selector: "cmat-progress-bar", inputs: { autoMode: "autoMode" }, exportAs: ["cmatProgressBar"], usesOnChanges: true, ngImport: i0, template: "@if (show) {\r\n  <mat-progress-bar\r\n    [mode]=\"mode\"\r\n  [value]=\"progress\"></mat-progress-bar>\r\n}\r\n", styles: ["cmat-progress-bar{position:fixed;top:0;left:0;z-index:999;width:100%;height:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-progress-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatProgressBar', imports: [MatProgressBarModule], template: "@if (show) {\r\n  <mat-progress-bar\r\n    [mode]=\"mode\"\r\n  [value]=\"progress\"></mat-progress-bar>\r\n}\r\n", styles: ["cmat-progress-bar{position:fixed;top:0;left:0;z-index:999;width:100%;height:6px}\n"] }]
         }], propDecorators: { autoMode: [{

package/fesm2022/cmat-components-qrcode.mjs

@@ -224,10 +224,10 @@ class CmatQRCodeComponent {
             console.error('生成QRCode错误:', e.message);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatQRCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CmatQRCodeComponent, isStandalone: true, selector: "cmat-qrcode", inputs: { allowEmptyString: "allowEmptyString", cssClass: "cssClass", elementType: "elementType", errorCorrectionLevel: "errorCorrectionLevel", imageSrc: "imageSrc", imageHeight: "imageHeight", imageWidth: "imageWidth", margin: "margin", qrdata: "qrdata", scale: "scale", width: "width", alt: "alt", ariaLabel: "ariaLabel", title: "title" }, outputs: { qrCodeURL: "qrCodeURL" }, viewQueries: [{ propertyName: "qrcElement", first: true, predicate: ["qrcElement"], descendants: true, static: true }], exportAs: ["cmatQRCode"], usesOnChanges: true, ngImport: i0, template: '<div #qrcElement [class]="cssClass"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatQRCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatQRCodeComponent, isStandalone: true, selector: "cmat-qrcode", inputs: { allowEmptyString: "allowEmptyString", cssClass: "cssClass", elementType: "elementType", errorCorrectionLevel: "errorCorrectionLevel", imageSrc: "imageSrc", imageHeight: "imageHeight", imageWidth: "imageWidth", margin: "margin", qrdata: "qrdata", scale: "scale", width: "width", alt: "alt", ariaLabel: "ariaLabel", title: "title" }, outputs: { qrCodeURL: "qrCodeURL" }, viewQueries: [{ propertyName: "qrcElement", first: true, predicate: ["qrcElement"], descendants: true, static: true }], exportAs: ["cmatQRCode"], usesOnChanges: true, ngImport: i0, template: '<div #qrcElement [class]="cssClass"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmatQRCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatQRCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-qrcode',