cmat 0.0.86 → 0.0.88

package/fesm2022/cmat-components-file-preview.mjs

@@ -1,38 +1,32 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { CmatImageComponent } from 'cmat/components/image-viewer';
 
 class CmatFilePreviewComponent {
     constructor() {
-        this.name = '';
-        this.description = '';
-        this.fileType = 'file';
-        this.size = '';
-        this.src = '';
-        this.previewImage = true;
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.fileType = input('file', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileType" }] : /* istanbul ignore next */ []));
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.src = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.previewImage = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewImage" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatFilePreviewComponent, isStandalone: true, selector: "cmat-file-preview", inputs: { name: "name", description: "description", fileType: "fileType", size: "size", src: "src", previewImage: "previewImage" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage && src) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src\" [alt]=\"name\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name }}</div>\r\n            @if (description) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType }}</span>\r\n            }\r\n            @if (size) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CmatImageComponent, selector: "cmat-image", inputs: ["imageClass", "imageStyle", "src", "srcSet", "previewImageSrc", "previewImageSrcSet", "alt", "width", "height", "loading", "appendTo", "preview"], outputs: ["previewShowChange", "imageErrorEvent"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatFilePreviewComponent, isStandalone: true, selector: "cmat-file-preview", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, previewImage: { classPropertyName: "previewImage", publicName: "previewImage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage() && src()) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src()\" [alt]=\"name()\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name() }}</div>\r\n\r\n            @if (description()) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description() }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType()) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType() }}</span>\r\n            }\r\n            @if (size()) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size() }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CmatImageComponent, selector: "cmat-image", inputs: ["imageClass", "imageStyle", "src", "srcSet", "previewImageSrc", "previewImageSrcSet", "alt", "width", "height", "loading", "appendTo", "preview"], outputs: ["previewShowChange", "imageErrorEvent"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CmatImageComponent, MatIconModule], template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage && src) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src\" [alt]=\"name\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name }}</div>\r\n            @if (description) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType }}</span>\r\n            }\r\n            @if (size) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], fileType: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], previewImage: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CmatImageComponent, MatIconModule], template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage() && src()) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src()\" [alt]=\"name()\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name() }}</div>\r\n\r\n            @if (description()) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description() }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType()) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType() }}</span>\r\n            }\r\n            @if (size()) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size() }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], previewImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImage", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/cmat-components-file-preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-file-preview.mjs","sources":["../../../projects/cmat/components/file-preview/file-preview.component.ts","../../../projects/cmat/components/file-preview/file-preview.component.html","../../../projects/cmat/components/file-preview/cmat-components-file-preview.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { CmatImageComponent } from 'cmat/components/image-viewer';\r\n\r\n@Component({\r\n    selector: 'cmat-file-preview',\r\n    templateUrl: './file-preview.component.html',\r\n    styleUrls: ['./file-preview.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule, CmatImageComponent, MatIconModule]\r\n})\r\nexport class CmatFilePreviewComponent {\r\n    \r\n    @Input() name:string = '';\r\n\r\n    \r\n    @Input() description:string = '';\r\n\r\n    \r\n    @Input() fileType:string = 'file';\r\n\r\n    \r\n    @Input() size = '';\r\n\r\n    \r\n    @Input() src: string = '';\r\n\r\n    \r\n    @Input() previewImage: boolean = true;\r\n}","<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage && src) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src\" [alt]=\"name\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name }}</div>\r\n            @if (description) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType }}</span>\r\n            }\r\n            @if (size) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QASa,IAAA,CAAA,IAAI,GAAU,EAAE;QAGhB,IAAA,CAAA,WAAW,GAAU,EAAE;QAGvB,IAAA,CAAA,QAAQ,GAAU,MAAM;QAGxB,IAAA,CAAA,IAAI,GAAG,EAAE;QAGT,IAAA,CAAA,GAAG,GAAW,EAAE;QAGhB,IAAA,CAAA,YAAY,GAAY,IAAI;AACxC,IAAA;+GAlBY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,iNCZrC,oyCA2BM,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDjBQ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,qQAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEhD,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;+BACI,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,YAAY,EAAE,kBAAkB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,oyCAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;sBAIzD;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;sBAGA;;;AE7BL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-file-preview.mjs","sources":["../../../projects/cmat/components/file-preview/file-preview.component.ts","../../../projects/cmat/components/file-preview/file-preview.component.html","../../../projects/cmat/components/file-preview/cmat-components-file-preview.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { CmatImageComponent } from 'cmat/components/image-viewer';\r\n\r\n@Component({\r\n    selector: 'cmat-file-preview',\r\n    templateUrl: './file-preview.component.html',\r\n    styleUrls: ['./file-preview.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule, CmatImageComponent, MatIconModule]\r\n})\r\nexport class CmatFilePreviewComponent {\r\n    readonly name = input<string>('');\r\n    readonly description = input<string>('');\r\n    readonly fileType = input<string>('file');\r\n    readonly size = input<string>('');\r\n    readonly src = input<string>('');\r\n    readonly previewImage = input<boolean>(true);\r\n}","<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n    <div\r\n        class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n        @if (previewImage() && src()) {\r\n        <cmat-image class=\"h-full w-full object-cover\" [src]=\"src()\" [alt]=\"name()\" [preview]=\"true\"></cmat-image>\r\n        } @else {\r\n        <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"min-w-0 flex-1\">\r\n        <div class=\"flex flex-col gap-1\">\r\n            <div class=\"truncate text-base font-semibold\">{{ name() }}</div>\r\n\r\n            @if (description()) {\r\n            <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description() }}</div>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n            @if (fileType()) {\r\n            <span class=\"rounded-full bg-slate-100 dark:bg-slate-600  px-2 py-0.5\">{{ fileType() }}</span>\r\n            }\r\n            @if (size()) {\r\n            <span class=\" text-slate-500 dark:text-slate-300\">{{ size() }}</span>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QAQa,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;QACxB,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE;wFAAC;QAC/B,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,MAAM;qFAAC;QAChC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;QACxB,IAAA,CAAA,GAAG,GAAG,KAAK,CAAS,EAAE;gFAAC;QACvB,IAAA,CAAA,YAAY,GAAG,KAAK,CAAU,IAAI;yFAAC;AAC/C,IAAA;8GAPY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,60BCZrC,8zCA4BM,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlBQ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,qQAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEhD,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;+BACI,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,YAAY,EAAE,kBAAkB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,8zCAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AEV9D;;AAEG;;;;"}

package/fesm2022/cmat-components-filter-toolbar.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, DestroyRef, HostBinding, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, inject, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -15,26 +15,36 @@ import { MatInputModule } from '@angular/material/input';
 
 class CmatFilterToolbarComponent {
     constructor() {
-        this.title = '';
-        this.description = '';
-        this.searchPlaceholder = '搜索';
-        this.showSearch = true;
-        this.searchText = '';
-        this.clearable = true;
-        this.searchTextChange = new EventEmitter();
-        this.clear = new EventEmitter();
-        this.searchSubmit = new EventEmitter();
-        this.hostClass = 'block';
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input('搜索', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.showSearch = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+        this.searchText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+        this.clearable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+        this.searchTextChange = output();
+        this.clear = output();
+        this.searchSubmit = output();
         this.searchControl = new FormControl('');
         this._destroyRef = inject(DestroyRef);
+        effect(() => {
+            const externalText = this.searchText();
+            const currentControlValue = this.searchControl.value;
+            if (externalText !== currentControlValue) {
+                this.searchControl.setValue(externalText, { emitEvent: false });
+            }
+        });
     }
     ngOnInit() {
-        this.searchControl.setValue(this.searchText, { emitEvent: false });
         this.searchControl.valueChanges
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((value) => {
             const text = value ?? '';
-            this.searchText = text;
             this.searchTextChange.emit(text);
         });
     }
@@ -45,34 +55,15 @@ class CmatFilterToolbarComponent {
         this.searchControl.setValue('', { emitEvent: true });
         this.clear.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilterToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatFilterToolbarComponent, isStandalone: true, selector: "cmat-filter-toolbar", inputs: { title: "title", description: "description", searchPlaceholder: "searchPlaceholder", showSearch: "showSearch", searchText: "searchText", clearable: "clearable" }, outputs: { searchTextChange: "searchTextChange", clear: "clear", searchSubmit: "searchSubmit" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title }}</h3>\r\n        }\r\n\r\n        @if (description) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilterToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatFilterToolbarComponent, isStandalone: true, selector: "cmat-filter-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", clear: "clear", searchSubmit: "searchSubmit" }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title()) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title() }}</h3>\r\n        }\r\n\r\n        @if (description()) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch()) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder()\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable() && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" class=\"mx-2\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFilterToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFilterToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-filter-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title }}</h3>\r\n        }\r\n\r\n        @if (description) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], showSearch: [{
-                type: Input
-            }], searchText: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], searchTextChange: [{
-                type: Output
-            }], clear: [{
-                type: Output
-            }], searchSubmit: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'cmat-filter-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule], host: {
+                        'class': 'block'
+                    }, template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title()) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title() }}</h3>\r\n        }\r\n\r\n        @if (description()) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch()) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder()\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable() && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" class=\"mx-2\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchSubmit: [{ type: i0.Output, args: ["searchSubmit"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/cmat-components-filter-toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-filter-toolbar.mjs","sources":["../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.ts","../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.html","../../../projects/cmat/components/filter-toolbar/cmat-components-filter-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, HostBinding, Input, OnInit, Output, inject } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\n\r\n@Component({\r\n    selector: 'cmat-filter-toolbar',\r\n    templateUrl: './filter-toolbar.component.html',\r\n    styleUrls: ['./filter-toolbar.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule]\r\n})\r\nexport class CmatFilterToolbarComponent implements OnInit {\r\n    \r\n    @Input() title:string = '';\r\n\r\n    \r\n    @Input() description:string = '';\r\n\r\n    \r\n    @Input() searchPlaceholder:string = '搜索';\r\n\r\n    \r\n    @Input() showSearch: boolean = true;\r\n\r\n    \r\n    @Input() searchText:string = '';\r\n\r\n    \r\n    @Input() clearable: boolean = true;\r\n\r\n    \r\n    @Output() searchTextChange = new EventEmitter<string>();\r\n\r\n    \r\n    @Output() clear = new EventEmitter<void>();\r\n\r\n    \r\n    @Output() searchSubmit = new EventEmitter<string>();\r\n\r\n    @HostBinding('class') hostClass = 'block';\r\n\r\n    searchControl = new FormControl('');\r\n\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n    \r\n    ngOnInit(): void {\r\n        this.searchControl.setValue(this.searchText, { emitEvent: false });\r\n\r\n        this.searchControl.valueChanges\r\n            .pipe(takeUntilDestroyed(this._destroyRef))\r\n            .subscribe((value) => {\r\n                const text = value ?? '';\r\n                this.searchText = text;\r\n                this.searchTextChange.emit(text);\r\n            });\r\n    }\r\n\r\n    \r\n    \r\n    submitSearch(): void {\r\n        this.searchSubmit.emit(this.searchControl.value ?? '');\r\n    }\r\n\r\n    \r\n    clearSearch(): void {\r\n        this.searchControl.setValue('', { emitEvent: true });\r\n        this.clear.emit();\r\n    }\r\n}\r\n","<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title }}</h3>\r\n        }\r\n\r\n        @if (description) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" aria-label=\"清空搜索\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cmat-components-filter-toolbar.mjs","sources":["../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.ts","../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.html","../../../projects/cmat/components/filter-toolbar/cmat-components-filter-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    DestroyRef,\r\n    effect,\r\n    inject,\r\n    input,\r\n    output,\r\n    OnInit,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\n\r\n@Component({\r\n    selector: 'cmat-filter-toolbar',\r\n    templateUrl: './filter-toolbar.component.html',\r\n    styleUrls: ['./filter-toolbar.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],\r\n    host: {\r\n        'class': 'block'\r\n    }\r\n})\r\nexport class CmatFilterToolbarComponent implements OnInit {\r\n    readonly title = input<string>('');\r\n    readonly description = input<string>('');\r\n    readonly searchPlaceholder = input<string>('搜索');\r\n    readonly showSearch = input<boolean>(true);\r\n    readonly searchText = input<string>('');\r\n    readonly clearable = input<boolean>(true);\r\n\r\n\r\n    readonly searchTextChange = output<string>();\r\n    readonly clear = output<void>();\r\n    readonly searchSubmit = output<string>();\r\n\r\n\r\n    readonly searchControl = new FormControl<string>('');\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            const externalText = this.searchText();\r\n            const currentControlValue = this.searchControl.value;\r\n            \r\n            if (externalText !== currentControlValue) {\r\n                this.searchControl.setValue(externalText, { emitEvent: false });\r\n            }\r\n        });\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this.searchControl.valueChanges\r\n            .pipe(takeUntilDestroyed(this._destroyRef))\r\n            .subscribe((value) => {\r\n                const text = value ?? '';\r\n                this.searchTextChange.emit(text);\r\n            });\r\n    }\r\n\r\n\r\n    submitSearch(): void {\r\n        this.searchSubmit.emit(this.searchControl.value ?? '');\r\n    }\r\n\r\n    clearSearch(): void {\r\n        this.searchControl.setValue('', { emitEvent: true });\r\n        this.clear.emit();\r\n    }\r\n}","<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n    <div class=\"flex flex-col gap-1\">\r\n        @if (title()) {\r\n            <h3 class=\"text-lg font-semibold text-default\">{{ title() }}</h3>\r\n        }\r\n\r\n        @if (description()) {\r\n            <p class=\"text-sm leading-6 text-secondary\">{{ description() }}</p>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"flex-1\">\r\n            @if (showSearch()) {\r\n                <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n                    <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n                    <input matInput [placeholder]=\"searchPlaceholder()\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n                    @if (clearable() && searchControl.value) {\r\n                        <button mat-icon-button matSuffix type=\"button\" class=\"mx-2\" aria-label=\"清空搜索\" (click)=\"clearSearch()\">\r\n                            <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n                        </button>\r\n                    }\r\n                </mat-form-field>\r\n            }\r\n        </div>\r\n\r\n        <div class=\"flex items-center gap-2\">\r\n            <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-form-actions.mjs

@@ -1,23 +1,23 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class CmatFormActionsComponent {
     constructor() {
-        this.align = 'end';
-        this.divider = true;
+        this.align = input('end', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.divider = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatFormActionsComponent, isStandalone: true, selector: "cmat-form-actions", inputs: { align: "align", divider: "divider" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3 border-default pt-4\" [class.border-t]=\"divider\" [class.items-start]=\"align === 'start'\" [class.items-center]=\"align === 'center'\" [class.items-end]=\"align === 'end'\">\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatFormActionsComponent, isStandalone: true, selector: "cmat-form-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-3 border-default pt-4\"\r\n    [ngClass]=\"{'border-t':divider(),'items-start':align() === 'start','items-center':align() === 'center','items-end':align() === 'end'}\">\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFormActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFormActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"flex flex-col gap-3 border-default pt-4\" [class.border-t]=\"divider\" [class.items-start]=\"align === 'start'\" [class.items-center]=\"align === 'center'\" [class.items-end]=\"align === 'end'\">\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { align: [{
-                type: Input
-            }], divider: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, A11yModule], template: "<div class=\"flex flex-col gap-3 border-default pt-4\"\r\n    [ngClass]=\"{'border-t':divider(),'items-start':align() === 'start','items-center':align() === 'center','items-end':align() === 'end'}\">\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/cmat-components-form-actions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-form-actions.mjs","sources":["../../../projects/cmat/components/form-actions/form-actions.component.ts","../../../projects/cmat/components/form-actions/form-actions.component.html","../../../projects/cmat/components/form-actions/cmat-components-form-actions.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'cmat-form-actions',\r\n    templateUrl: './form-actions.component.html',\r\n    styleUrls: ['./form-actions.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule]\r\n})\r\nexport class CmatFormActionsComponent {\r\n    \r\n    @Input() align: 'start' | 'center' | 'end' = 'end';\r\n\r\n    \r\n    @Input() divider:boolean = true;\r\n}\r\n","<div class=\"flex flex-col gap-3 border-default pt-4\" [class.border-t]=\"divider\" [class.items-start]=\"align === 'start'\" [class.items-center]=\"align === 'center'\" [class.items-end]=\"align === 'end'\">\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QASa,IAAA,CAAA,KAAK,GAA+B,KAAK;QAGzC,IAAA,CAAA,OAAO,GAAW,IAAI;AAClC,IAAA;+GANY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,ouBASA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDDc,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEb,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAGZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,ouBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;sBAItB;;sBAGA;;;AEfL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-form-actions.mjs","sources":["../../../projects/cmat/components/form-actions/form-actions.component.ts","../../../projects/cmat/components/form-actions/form-actions.component.html","../../../projects/cmat/components/form-actions/cmat-components-form-actions.ts"],"sourcesContent":["import { A11yModule } from '@angular/cdk/a11y';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'cmat-form-actions',\r\n    templateUrl: './form-actions.component.html',\r\n    styleUrls: ['./form-actions.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [CommonModule, A11yModule]\r\n})\r\nexport class CmatFormActionsComponent {\r\n    readonly align = input<'start' | 'center' | 'end'>('end');\r\n    readonly divider = input<boolean>(true);\r\n}","<div class=\"flex flex-col gap-3 border-default pt-4\"\r\n    [ngClass]=\"{'border-t':divider(),'items-start':align() === 'start','items-center':align() === 'center','items-end':align() === 'end'}\">\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap gap-2\"\r\n        [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n        <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n    </div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAWa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QAQa,IAAA,CAAA,KAAK,GAAG,KAAK,CAA6B,KAAK;kFAAC;QAChD,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,IAAI;oFAAC;AAC1C,IAAA;8GAHY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrC,6tBAWM,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDFQ,YAAY,4HAAE,UAAU,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEzB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;+BACI,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,WACtC,CAAC,YAAY,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,6tBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;AETvC;;AAEG;;;;"}

package/fesm2022/cmat-components-fullscreen.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { input, inject, DOCUMENT, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
@@ -10,6 +10,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 class CmatFullscreenComponent {
     constructor() {
+        this.iconTpl = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconTpl" }] : /* istanbul ignore next */ []));
+        this.tooltip = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
         this._document = inject(DOCUMENT);
     }
     toggleFullscreen() {
@@ -28,17 +32,13 @@ class CmatFullscreenComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n", 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: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "22.0.2", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: { classPropertyName: "iconTpl", publicName: "iconTpl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip() || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl() || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n", 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: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.10", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { iconTpl: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip() || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl() || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { iconTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTpl", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/cmat-components-fullscreen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-fullscreen.mjs","sources":["../../../projects/cmat/components/fullscreen/fullscreen.component.ts","../../../projects/cmat/components/fullscreen/fullscreen.component.html","../../../projects/cmat/components/fullscreen/cmat-components-fullscreen.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation, DOCUMENT, inject } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@Component({\r\n    selector: 'cmat-fullscreen',\r\n    templateUrl: './fullscreen.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatFullscreen',\r\n    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule]\r\n})\r\nexport class CmatFullscreenComponent {\r\n    @Input() iconTpl: TemplateRef<unknown>;\r\n    @Input() tooltip: string;\r\n\r\n    private _document = inject<Document>(DOCUMENT);\r\n\r\n\r\n    toggleFullscreen(): void {\r\n        if (!this._document.fullscreenEnabled) {\r\n            console.warn('Fullscreen is not available in this browser.');\r\n            return;\r\n        }\r\n\r\n        const fullScreen = this._document.fullscreenElement;\r\n\r\n        if (fullScreen) {\r\n            void this._document.exitFullscreen();\r\n        }\r\n        else {\r\n            this._document.documentElement.requestFullscreen()\r\n                .catch((): void => {\r\n                    console.error('Entering fullscreen mode failed.');\r\n                });\r\n        }\r\n    }\r\n}","\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip || '切换全屏'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAca,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;AAYY,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAW,QAAQ,CAAC;AAqBjD,IAAA;IAlBG,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,8CAA8C,CAAC;YAC5D;QACJ;AAEA,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB;QAEnD,IAAI,UAAU,EAAE;AACZ,YAAA,KAAK,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;QACxC;aACK;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,iBAAiB;iBAC3C,KAAK,CAAC,MAAW;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC;AACrD,YAAA,CAAC,CAAC;QACV;IACJ;+GAxBS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpC,wXASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGc,eAAe,qNAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAEnE,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,iBAEZ,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,wXAAA,EAAA;;sBAG5E;;sBACA;;;AEhBL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-fullscreen.mjs","sources":["../../../projects/cmat/components/fullscreen/fullscreen.component.ts","../../../projects/cmat/components/fullscreen/fullscreen.component.html","../../../projects/cmat/components/fullscreen/cmat-components-fullscreen.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    TemplateRef,\r\n    ViewEncapsulation,\r\n    DOCUMENT,\r\n    inject,\r\n    input,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@Component({\r\n    selector: 'cmat-fullscreen',\r\n    templateUrl: './fullscreen.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatFullscreen',\r\n    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule]\r\n})\r\nexport class CmatFullscreenComponent {\r\n    readonly iconTpl = input<TemplateRef<unknown>>();\r\n    readonly tooltip = input<string>();\r\n\r\n    private _document = inject<Document>(DOCUMENT);\r\n\r\n\r\n    toggleFullscreen(): void {\r\n        if (!this._document.fullscreenEnabled) {\r\n            console.warn('Fullscreen is not available in this browser.');\r\n            return;\r\n        }\r\n\r\n        const fullScreen = this._document.fullscreenElement;\r\n\r\n        if (fullScreen) {\r\n            void this._document.exitFullscreen();\r\n        }\r\n        else {\r\n            this._document.documentElement.requestFullscreen()\r\n                .catch((): void => {\r\n                    console.error('Entering fullscreen mode failed.');\r\n                });\r\n        }\r\n    }\r\n}","\r\n<button type=\"button\" matIconButton  [matTooltip]=\"tooltip() || '切换全屏'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl() || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-highlight.mjs

@@ -1,6 +1,6 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, ViewContainerRef, SecurityContext, TemplateRef, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { Injectable, input, viewChild, TemplateRef, signal, inject, ElementRef, ViewContainerRef, effect, untracked, SecurityContext, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import hljs from 'highlight.js';
 
@@ -28,10 +28,10 @@ class CmatHighlightService {
         });
         return lines.map(line => line.substring(indentation)).join('\n');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -40,62 +40,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 
 class CmatHighlightComponent {
     constructor() {
+        this.code = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
+        this.lang = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "lang" }] : /* istanbul ignore next */ []));
+        this.templateRef = viewChild.required(TemplateRef);
+        this._highlightedCode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_highlightedCode" }] : /* istanbul ignore next */ []));
+        this._viewRef = null;
         this._domSanitizer = inject(DomSanitizer);
         this._elementRef = inject(ElementRef);
         this._cmatHighlightService = inject(CmatHighlightService);
         this._viewContainerRef = inject(ViewContainerRef);
-    }
-    ngOnChanges(changes) {
-        if ('code' in changes || 'lang' in changes) {
-            if (!this._viewContainerRef.length) {
+        effect(() => {
+            const codeInput = this.code();
+            const lang = this.lang();
+            if (!lang) {
                 return;
             }
-            this._highlightAndInsert();
-        }
-    }
-    ngAfterViewInit() {
-        if (!this.lang) {
-            return;
-        }
-        if (!this.code) {
-            this.code = this._elementRef.nativeElement.value ?? '';
-        }
-        this._highlightAndInsert();
+            untracked(() => {
+                let codeToHighlight = codeInput;
+                codeToHighlight ??= this._elementRef.nativeElement.value ?? '';
+                if (!codeToHighlight) {
+                    this._clearView();
+                    return;
+                }
+                this._processHighlight(codeToHighlight, lang);
+            });
+        });
     }
-    _highlightAndInsert() {
-        if (!this.templateRef) {
+    _processHighlight(code, lang) {
+        if (!this.templateRef()) {
             return;
         }
-        if (!this.code || !this.lang) {
+        const highlighted = this._cmatHighlightService.highlight(code, lang);
+        const sanitizedCode = this._domSanitizer.sanitize(SecurityContext.HTML, highlighted);
+        if (sanitizedCode === null) {
+            this._clearView();
             return;
         }
+        this._highlightedCode.set(sanitizedCode);
         if (this._viewRef) {
             this._viewRef.destroy();
             this._viewRef = null;
         }
-        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._cmatHighlightService.highlight(this.code, this.lang));
-        if (this.highlightedCode === null) {
-            return;
-        }
-        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
-            highlightedCode: this.highlightedCode,
-            lang: this.lang
+        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef(), {
+            highlightedCode: sanitizedCode,
+            lang: lang,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _clearView() {
+        if (this._viewRef) {
+            this._viewRef.destroy();
+            this._viewRef = null;
+        }
+        this._highlightedCode.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["cmatHighlight"], ngImport: i0, template: "<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n  <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n    <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n  </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
-        }], propDecorators: { code: [{
-                type: Input
-            }], lang: [{
-                type: Input
-            }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+            args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n  <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n    <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n  </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.