cmat 0.0.89 → 0.0.91

package/fesm2022/cmat-components-image-viewer.mjs

@@ -197,10 +197,10 @@ class CmatImageComponent {
         const body = this._document.body;
         body.style.overflow = this._originalOverflow ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "maskRef", first: true, predicate: ["mask"], descendants: true, isSignal: true }, { propertyName: "previewButtonRef", first: true, predicate: ["previewButton"], descendants: true, isSignal: true }, { propertyName: "closeButtonRef", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview() }\">\r\n    <img \r\n        [attr.src]=\"src()\" \r\n        [attr.srcset]=\"srcSet()\" \r\n        [attr.alt]=\"alt()\" \r\n        [attr.width]=\"width()\" \r\n        [attr.height]=\"height()\"\r\n        [attr.loading]=\"loading()\" \r\n        [ngStyle]=\"imageStyle()\" \r\n        [class]=\"imageClass()\" \r\n        (error)=\"imageError($event)\" />\r\n    \r\n    @if(preview()){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <!-- \u7ED1\u5B9A computed signals -->\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled()\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled()\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" \r\n                [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\r\n                [attr.srcset]=\"previewImageSrcSet()\" \r\n                [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\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: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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.8", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "maskRef", first: true, predicate: ["mask"], descendants: true, isSignal: true }, { propertyName: "previewButtonRef", first: true, predicate: ["previewButton"], descendants: true, isSignal: true }, { propertyName: "closeButtonRef", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview() }\">\r\n    <img \r\n        [attr.src]=\"src()\" \r\n        [attr.srcset]=\"srcSet()\" \r\n        [attr.alt]=\"alt()\" \r\n        [attr.width]=\"width()\" \r\n        [attr.height]=\"height()\"\r\n        [attr.loading]=\"loading()\" \r\n        [ngStyle]=\"imageStyle()\" \r\n        [class]=\"imageClass()\" \r\n        (error)=\"imageError($event)\" />\r\n    \r\n    @if(preview()){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <!-- \u7ED1\u5B9A computed signals -->\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled()\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled()\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" \r\n                [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\r\n                [attr.srcset]=\"previewImageSrcSet()\" \r\n                [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\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: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "22.0.6", ngImport: i0, type: CmatImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-image', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview() }\">\r\n    <img \r\n        [attr.src]=\"src()\" \r\n        [attr.srcset]=\"srcSet()\" \r\n        [attr.alt]=\"alt()\" \r\n        [attr.width]=\"width()\" \r\n        [attr.height]=\"height()\"\r\n        [attr.loading]=\"loading()\" \r\n        [ngStyle]=\"imageStyle()\" \r\n        [class]=\"imageClass()\" \r\n        (error)=\"imageError($event)\" />\r\n    \r\n    @if(preview()){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <!-- \u7ED1\u5B9A computed signals -->\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled()\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled()\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" \r\n                [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\r\n                [attr.srcset]=\"previewImageSrcSet()\" \r\n                [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { maskRef: [{ type: i0.ViewChild, args: ['mask', { isSignal: true }] }], previewButtonRef: [{ type: i0.ViewChild, args: ['previewButton', { isSignal: true }] }], closeButtonRef: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }], imageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageClass", required: false }] }], imageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageStyle", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcSet", required: false }] }], previewImageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrc", required: false }] }], previewImageSrcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrcSet", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], previewShowChange: [{ type: i0.Output, args: ["previewShowChange"] }], imageErrorEvent: [{ type: i0.Output, args: ["imageErrorEvent"] }], onKeydownHandler: [{

package/fesm2022/cmat-components-inline-loading.mjs

@@ -12,10 +12,10 @@ class CmatInlineLoadingComponent {
         this.showText = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showText" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatInlineLoadingComponent, isStandalone: true, selector: "cmat-inline-loading", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 rounded-full bg-hover px-3 py-1 text-sm text-secondary\">\r\n    <mat-progress-spinner mode=\"indeterminate\" color=\"primary\" [diameter]=\"diameter()\" [strokeWidth]=\"2\"></mat-progress-spinner>\r\n    @if (showText()) {\r\n        <span>{{ message() }}</span>\r\n    }\r\n</div>\r\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatInlineLoadingComponent, isStandalone: true, selector: "cmat-inline-loading", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 rounded-full bg-hover px-3 py-1 text-sm text-secondary\">\r\n    <mat-progress-spinner mode=\"indeterminate\" color=\"primary\" [diameter]=\"diameter()\" [strokeWidth]=\"2\"></mat-progress-spinner>\r\n    @if (showText()) {\r\n        <span>{{ message() }}</span>\r\n    }\r\n</div>\r\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-inline-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinnerModule], template: "<div class=\"inline-flex items-center gap-2 rounded-full bg-hover px-3 py-1 text-sm text-secondary\">\r\n    <mat-progress-spinner mode=\"indeterminate\" color=\"primary\" [diameter]=\"diameter()\" [strokeWidth]=\"2\"></mat-progress-spinner>\r\n    @if (showText()) {\r\n        <span>{{ message() }}</span>\r\n    }\r\n</div>\r\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }] } });

package/fesm2022/cmat-components-json-editor.mjs

@@ -215,10 +215,10 @@ class CmatJsonEditorComponent {
         });
         this._editorSignal.set(editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-json-editor', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { jsonEditorContainer: [{ type: i0.ViewChild, args: ['jsonEditorContainer', { isSignal: true }] }], contentChanged: [{ type: i0.Output, args: ["contentChanged"] }], pathChanged: [{ type: i0.Output, args: ["pathChanged"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });

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

@@ -376,12 +376,12 @@ class CmatKnobInputComponent {
     valueToDisplay() {
         return this.valueTemplate().replace('{value}', this.value.toString());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "id" } }, providers: [
             { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },
         ], viewQueries: [{ propertyName: "knobElementRef", first: true, predicate: ["knob"], descendants: true, isSignal: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div\r\n  #knob\r\n  tabindex=\"-1\"\r\n  [attr.data-refresh]=\"refreshVersion()\"\r\n  [class.cmat-knob-disabled]=\"disabled\"\r\n  (focusin)=\"onFocusIn()\"\r\n  (focusout)=\"onFocusOut($event)\"\r\n>\r\n  <svg\r\n    viewBox=\"0 0 100 100\"\r\n    role=\"slider\"\r\n    [style.width]=\"size() + 'px'\"\r\n    [style.height]=\"size() + 'px'\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (click)=\"onClick($event)\"\r\n    (keydown.enter)=\"onKeyDown($event)\"\r\n    (keydown.space)=\"onKeyDown($event)\"\r\n  >\r\n    <path\r\n      class=\"knob-range\"\r\n      [attr.d]=\"rangePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"rangeColor()\"\r\n    ></path>\r\n    <path\r\n      class=\"knob-value\"\r\n      [attr.d]=\"valuePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"valueColor()\"\r\n    ></path>\r\n    @if (showValue()) {\r\n      <text\r\n        text-anchor=\"middle\"\r\n        class=\"knob-text\"\r\n        [attr.x]=\"50\"\r\n        [attr.y]=\"57\"\r\n        [attr.fill]=\"textColor()\"\r\n        [attr.name]=\"name()\"\r\n      >\r\n        {{ valueToDisplay() }}\r\n      </text>\r\n    }\r\n  </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-knob-input', providers: [
                         { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },

package/fesm2022/cmat-components-masonry.mjs

@@ -25,10 +25,10 @@ class CmatMasonryComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "distributedColumns" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: { classPropertyName: "columnsTemplate", publicName: "columnsTemplate", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatMasonry"], ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate(); context: { $implicit: distributedColumns() }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: { classPropertyName: "columnsTemplate", publicName: "columnsTemplate", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatMasonry"], ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate(); context: { $implicit: distributedColumns() }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMasonryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatMasonryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-masonry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMasonry', imports: [NgTemplateOutlet], template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate(); context: { $implicit: distributedColumns() }\"></ng-container>\r\n</div>" }]
         }], propDecorators: { columnsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsTemplate", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });

package/fesm2022/cmat-components-material-color-picker.mjs

@@ -141,10 +141,10 @@ class CmatMaterialColorPickerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor().color\">\r\n  <mat-select \r\n    value=\"init\" \r\n    panelClass=\"min-w-64 overflow-hidden!\" \r\n    [disableOptionCentering]=\"true\" \r\n    [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly()\" \r\n    (openedChange)=\"onMenuOpen($event)\">\r\n    \r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n      <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view() === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title()}}</span>\r\n      <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view()) {\r\n        @case ('palettes') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (palette of palettes(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedPalette()\">\r\n                @if (selectedColor().color === palette + '-' + selectedHue()) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue()\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        @case ('hues') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (hue of hues(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedHue()\">\r\n                @if (selectedColor().color === selectedPalette() + '-' + hue) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette() + '-' + hue\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.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: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor().color\">\r\n  <mat-select \r\n    value=\"init\" \r\n    panelClass=\"min-w-64 overflow-hidden!\" \r\n    [disableOptionCentering]=\"true\" \r\n    [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly()\" \r\n    (openedChange)=\"onMenuOpen($event)\">\r\n    \r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n      <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view() === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title()}}</span>\r\n      <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view()) {\r\n        @case ('palettes') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (palette of palettes(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedPalette()\">\r\n                @if (selectedColor().color === palette + '-' + selectedHue()) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue()\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        @case ('hues') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (hue of hues(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedHue()\">\r\n                @if (selectedColor().color === selectedPalette() + '-' + hue) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette() + '-' + hue\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.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: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-material-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMaterialColorPicker', providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], imports: [NgClass, MatSelectModule, MatIconModule, MatButtonModule, MatTooltipModule], template: "<div class=\"rounded\" [ngClass]=\"selectedColor().color\">\r\n  <mat-select \r\n    value=\"init\" \r\n    panelClass=\"min-w-64 overflow-hidden!\" \r\n    [disableOptionCentering]=\"true\" \r\n    [hideSingleSelectionIndicator]=\"true\"\r\n    [disabled]=\"readonly()\" \r\n    (openedChange)=\"onMenuOpen($event)\">\r\n    \r\n    <mat-select-trigger class=\"flex p-1\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n    </mat-select-trigger>\r\n\r\n    <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n      <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n        [class.invisible]=\"view() === 'palettes'\" (click)=\"goToPalettesView()\">\r\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n      </button>\r\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title()}}</span>\r\n      <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n        matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"flex flex-wrap w-60 m-2\">\r\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n      <div>\r\n        @switch (view()) {\r\n        @case ('palettes') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (palette of palettes(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedPalette()\">\r\n                @if (selectedColor().color === palette + '-' + selectedHue()) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue()\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        @case ('hues') {\r\n        <div>\r\n          <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n            @for (hue of hues(); track $index) {\r\n            <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n              <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n                [value]=\"selectedHue()\">\r\n                @if (selectedColor().color === selectedPalette() + '-' + hue) {\r\n                <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n                }\r\n                <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette() + '-' + hue\"></span>\r\n              </mat-option>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }] } });