cmat 0.0.87 → 0.0.88

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-highlight.mjs","sources":["../../../projects/cmat/components/highlight/highlight.service.ts","../../../projects/cmat/components/highlight/highlight.component.ts","../../../projects/cmat/components/highlight/highlight.component.html","../../../projects/cmat/components/highlight/cmat-components-highlight.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport hljs from 'highlight.js';\r\n\r\n@Injectable({\r\n    providedIn: 'root'\r\n})\r\nexport class CmatHighlightService {\r\n    highlight(code: string, language: string): string {\r\n        code = this._format(code);\r\n        return hljs.highlight(code, { language }).value;\r\n    }\r\n\r\n    private _format(code: string): string {\r\n        let indentation = 0;\r\n        const lines = code.split('\\n');\r\n        while (lines.length && lines[0].trim() === '') {\r\n            lines.shift();\r\n        }\r\n\r\n        while (lines.length && lines[lines.length - 1].trim() === '') {\r\n            lines.pop();\r\n        }\r\n        lines.filter(line => line.length)\r\n            .forEach((line, index) => {\r\n                if (index === 0) {\r\n                    indentation = line.search(/\\S|$/);\r\n                    return;\r\n                }\r\n                indentation = Math.min(line.search(/\\S|$/), indentation);\r\n            });\r\n        return lines.map(line => line.substring(indentation)).join('\\n');\r\n    }\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, inject } from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { CmatHighlightService } from './highlight.service';\r\n\r\n@Component({\r\n    selector: 'textarea[cmat-highlight]',\r\n    templateUrl: './highlight.component.html',\r\n    styleUrls: ['./highlight.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatHighlight',\r\n    imports: [NgClass]\r\n})\r\nexport class CmatHighlightComponent implements OnChanges, AfterViewInit {\r\n\r\n\r\n    @Input() code: string;\r\n    @Input() lang: string;\r\n    @ViewChild(TemplateRef) templateRef: TemplateRef<unknown>;\r\n\r\n    highlightedCode: string | null;\r\n    private _viewRef: EmbeddedViewRef<any> | null;\r\n    private _domSanitizer = inject(DomSanitizer);\r\n    private _elementRef = inject(ElementRef);\r\n    private _cmatHighlightService = inject(CmatHighlightService);\r\n    private _viewContainerRef = inject(ViewContainerRef);\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if ('code' in changes || 'lang' in changes) {\r\n            if (!this._viewContainerRef.length) {\r\n                return;\r\n            }\r\n            this._highlightAndInsert();\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit(): void {\r\n        if (!this.lang) {\r\n            return;\r\n        }\r\n        if (!this.code) {\r\n            this.code = (this._elementRef.nativeElement as HTMLTextAreaElement).value ?? '';\r\n        }\r\n        this._highlightAndInsert();\r\n    }\r\n\r\n    private _highlightAndInsert(): void {\r\n        if (!this.templateRef) {\r\n            return;\r\n        }\r\n        if (!this.code || !this.lang) {\r\n            return;\r\n        }\r\n        if (this._viewRef) {\r\n            this._viewRef.destroy();\r\n            this._viewRef = null;\r\n        }\r\n        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._cmatHighlightService.highlight(this.code, this.lang));\r\n        if (this.highlightedCode === null) {\r\n            return;\r\n        }\r\n        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {\r\n            highlightedCode: this.highlightedCode,\r\n            lang: this.lang\r\n        });\r\n    }\r\n}\r\n","<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>","/**\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-highlight.mjs","sources":["../../../projects/cmat/components/highlight/highlight.service.ts","../../../projects/cmat/components/highlight/highlight.component.ts","../../../projects/cmat/components/highlight/highlight.component.html","../../../projects/cmat/components/highlight/cmat-components-highlight.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport hljs from 'highlight.js';\r\n\r\n@Injectable({\r\n    providedIn: 'root'\r\n})\r\nexport class CmatHighlightService {\r\n    highlight(code: string, language: string): string {\r\n        code = this._format(code);\r\n        return hljs.highlight(code, { language }).value;\r\n    }\r\n\r\n    private _format(code: string): string {\r\n        let indentation = 0;\r\n        const lines = code.split('\\n');\r\n        while (lines.length && lines[0].trim() === '') {\r\n            lines.shift();\r\n        }\r\n\r\n        while (lines.length && lines[lines.length - 1].trim() === '') {\r\n            lines.pop();\r\n        }\r\n        lines.filter(line => line.length)\r\n            .forEach((line, index) => {\r\n                if (index === 0) {\r\n                    indentation = line.search(/\\S|$/);\r\n                    return;\r\n                }\r\n                indentation = Math.min(line.search(/\\S|$/), indentation);\r\n            });\r\n        return lines.map(line => line.substring(indentation)).join('\\n');\r\n    }\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  EmbeddedViewRef,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n  ViewEncapsulation,\r\n  effect,\r\n  inject,\r\n  input,\r\n  signal,\r\n  SecurityContext,\r\n  viewChild,\r\n  untracked,\r\n} from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { CmatHighlightService } from './highlight.service';\r\n\r\n@Component({\r\n  selector: 'textarea[cmat-highlight]',\r\n  templateUrl: './highlight.component.html',\r\n  styleUrls: ['./highlight.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  exportAs: 'cmatHighlight',\r\n  imports: [NgClass],\r\n})\r\nexport class CmatHighlightComponent {\r\n  readonly code = input<string>();\r\n  readonly lang = input<string>();\r\n\r\n  private readonly templateRef = viewChild.required(TemplateRef);\r\n\r\n  private readonly _highlightedCode = signal<string | null>(null);\r\n\r\n  private _viewRef: EmbeddedViewRef<any> | null = null;\r\n\r\n  private readonly _domSanitizer = inject(DomSanitizer);\r\n  private readonly _elementRef = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\r\n  private readonly _cmatHighlightService = inject(CmatHighlightService);\r\n  private readonly _viewContainerRef = inject(ViewContainerRef);\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const codeInput = this.code();\r\n      const lang = this.lang();\r\n\r\n      if (!lang) {\r\n        return;\r\n      }\r\n\r\n      untracked(() => {\r\n        let codeToHighlight = codeInput;\r\n        codeToHighlight ??= this._elementRef.nativeElement.value ?? '';\r\n\r\n        if (!codeToHighlight) {\r\n          this._clearView();\r\n          return;\r\n        }\r\n\r\n        this._processHighlight(codeToHighlight, lang);\r\n      });\r\n    });\r\n  }\r\n\r\n  private _processHighlight(code: string, lang: string): void {\r\n    if (!this.templateRef()) {\r\n      return;\r\n    }\r\n\r\n    const highlighted = this._cmatHighlightService.highlight(code, lang);\r\n    const sanitizedCode = this._domSanitizer.sanitize(SecurityContext.HTML, highlighted);\r\n\r\n    if (sanitizedCode === null) {\r\n      this._clearView();\r\n      return;\r\n    }\r\n\r\n    this._highlightedCode.set(sanitizedCode);\r\n\r\n    if (this._viewRef) {\r\n      this._viewRef.destroy();\r\n      this._viewRef = null;\r\n    }\r\n\r\n    this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef(), {\r\n      highlightedCode: sanitizedCode,\r\n      lang: lang,\r\n    });\r\n  }\r\n\r\n  private _clearView(): void {\r\n    if (this._viewRef) {\r\n      this._viewRef.destroy();\r\n      this._viewRef = null;\r\n    }\r\n    this._highlightedCode.set(null);\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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, signal, DOCUMENT, booleanAttribute, HostListener, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, signal, computed, inject, DOCUMENT, effect, ElementRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
@@ -9,19 +9,64 @@ import { MatIconModule } from '@angular/material/icon';
 
 class CmatImageComponent {
     constructor() {
-        this.preview = false;
-        this.previewShowChange = new EventEmitter();
-        this.imageErrorEvent = new EventEmitter();
-        this.el = inject(ElementRef);
-        this.maskVisible = signal(false, ...(ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []));
-        this.previewVisible = signal(false, ...(ngDevMode ? [{ debugName: "previewVisible" }] : /* istanbul ignore next */ []));
-        this.rotate = 0;
-        this.scale = 1;
+        this.maskRef = viewChild('mask', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maskRef" }] : /* istanbul ignore next */ []));
+        this.previewButtonRef = viewChild('previewButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewButtonRef" }] : /* istanbul ignore next */ []));
+        this.closeButtonRef = viewChild('closeButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeButtonRef" }] : /* istanbul ignore next */ []));
+        this.imageClass = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageClass" }] : /* istanbul ignore next */ []));
+        this.imageStyle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageStyle" }] : /* istanbul ignore next */ []));
+        this.src = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.srcSet = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "srcSet" }] : /* istanbul ignore next */ []));
+        this.previewImageSrc = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewImageSrc" }] : /* istanbul ignore next */ []));
+        this.previewImageSrcSet = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewImageSrcSet" }] : /* istanbul ignore next */ []));
+        this.alt = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        this.width = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.loading = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.appendTo = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+        this.preview = input(false, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.previewShowChange = output();
+        this.imageErrorEvent = output();
+        this.maskVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []));
+        this.previewVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewVisible" }] : /* istanbul ignore next */ []));
+        this.rotate = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []));
+        this.scale = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+        this.isZoomOutDisabled = computed(() => {
+            return this.scale() - this._zoomSettings.step <= this._zoomSettings.min;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isZoomOutDisabled" }] : /* istanbul ignore next */ []));
+        this.isZoomInDisabled = computed(() => {
+            return this.scale() + this._zoomSettings.step >= this._zoomSettings.max;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isZoomInDisabled" }] : /* istanbul ignore next */ []));
+        this.imagePreviewStyle = computed(() => {
+            return {
+                transform: `rotate(${this.rotate()}deg) scale(${this.scale()})`
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imagePreviewStyle" }] : /* istanbul ignore next */ []));
+        this._document = inject(DOCUMENT);
         this._animationDuration = 150;
         this._loadingPreview = false;
         this._closePreviewByEscape = false;
         this._closePreviewTimeoutId = null;
-        this._document = inject(DOCUMENT);
         this._originalOverflow = null;
         this._zoomSettings = {
             default: 1,
@@ -29,42 +74,27 @@ class CmatImageComponent {
             max: 1.5,
             min: 0.5
         };
-    }
-    get isZoomOutDisabled() {
-        return this.scale - this._zoomSettings.step <= this._zoomSettings.min;
-    }
-    get isZoomInDisabled() {
-        return this.scale + this._zoomSettings.step >= this._zoomSettings.max;
-    }
-    set mask(value) {
-        if (value) {
-            this._mask = value.nativeElement;
-            if (this._mask && this._loadingPreview) {
-                this.appendContainer();
+        effect(() => {
+            const maskEl = this.maskRef();
+            if (maskEl && this._loadingPreview) {
+                this.appendContainer(maskEl);
             }
-        }
-    }
-    ;
-    set previewButton(value) {
-        if (value) {
-            this._previewButton = value.nativeElement;
-            if (this._previewButton && this._closePreviewByEscape) {
-                this._previewButton.focus();
+        });
+        effect(() => {
+            const btn = this.previewButtonRef();
+            if (btn && this._closePreviewByEscape) {
+                btn.focus();
                 this._closePreviewByEscape = false;
             }
-        }
-    }
-    ;
-    set closeButton(value) {
-        if (value) {
-            this._closeButton = value.nativeElement;
-            if (this._closeButton && this._loadingPreview) {
-                this._closeButton.focus();
+        });
+        effect(() => {
+            const btn = this.closeButtonRef();
+            if (btn && this._loadingPreview) {
+                btn.focus();
                 this._loadingPreview = false;
             }
-        }
+        });
     }
-    ;
     onKeydownHandler() {
         if (this.previewVisible()) {
             this._enableBackgroundScroll();
@@ -72,7 +102,7 @@ class CmatImageComponent {
         }
     }
     onImageClick() {
-        if (this.preview) {
+        if (this.preview()) {
             this._disableBackgroundScroll();
             this.maskVisible.set(true);
             this._loadingPreview = true;
@@ -97,44 +127,48 @@ class CmatImageComponent {
         event.stopPropagation();
     }
     rotateRight() {
-        this.rotate += 90;
+        // 使用 update 方法基于当前值计算新值
+        this.rotate.update(r => r + 90);
     }
     rotateLeft() {
-        this.rotate -= 90;
+        this.rotate.update(r => r - 90);
     }
     zoomIn() {
-        this.scale = this.scale + this._zoomSettings.step;
+        this.scale.update(s => s + this._zoomSettings.step);
     }
     zoomOut() {
-        this.scale = this.scale - this._zoomSettings.step;
+        this.scale.update(s => s - this._zoomSettings.step);
     }
     handleToolbarClick(event) {
         event.stopPropagation();
     }
-    appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                this._document.body.appendChild(this._mask);
+    appendContainer(maskElement) {
+        const elToAppend = maskElement ?? this.maskRef();
+        if (!elToAppend)
+            return;
+        const target = this.appendTo();
+        if (target) {
+            if (target === 'body') {
+                this._document.body.appendChild(elToAppend);
+            }
             else {
-                if (this.appendTo instanceof HTMLElement) {
-                    this.appendTo.appendChild(this._mask);
+                let nativeElement = null;
+                if (target instanceof HTMLElement) {
+                    nativeElement = target;
+                }
+                else if (target instanceof ElementRef) {
+                    nativeElement = target.nativeElement;
                 }
-                else if (this.appendTo instanceof ElementRef) {
-                    this.appendTo.nativeElement.appendChild(this._mask);
+                else if (typeof target === 'object' && target !== null && 'el' in target) {
+                    const customTarget = target;
+                    nativeElement = customTarget.el?.nativeElement ?? null;
                 }
-                else if (typeof this.appendTo === 'object' && this.appendTo !== null && 'el' in this.appendTo) {
-                    const target = this.appendTo;
-                    const nativeElement = target.el?.nativeElement;
-                    if (nativeElement) {
-                        nativeElement.appendChild(this._mask);
-                    }
+                if (nativeElement) {
+                    nativeElement.appendChild(elToAppend);
                 }
             }
         }
     }
-    imagePreviewStyle() {
-        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
-    }
     closePreview() {
         if (this._closePreviewTimeoutId !== null) {
             clearTimeout(this._closePreviewTimeoutId);
@@ -144,8 +178,9 @@ class CmatImageComponent {
         this.previewVisible.set(false);
         this._closePreviewTimeoutId = window.setTimeout(() => {
             this.maskVisible.set(false);
-            this.rotate = 0;
-            this.scale = this._zoomSettings.default;
+            // 重置 signal 状态
+            this.rotate.set(0);
+            this.scale.set(this._zoomSettings.default);
             this.previewShowChange.emit(false);
             this._closePreviewTimeoutId = null;
         }, this._animationDuration);
@@ -162,51 +197,13 @@ class CmatImageComponent {
         const body = this._document.body;
         body.style.overflow = this._originalOverflow ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\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            <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\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", 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.2", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: "21.2.11", ngImport: i0, type: CmatImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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 [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\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            <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\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", 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"] }]
-        }], propDecorators: { imageClass: [{
-                type: Input
-            }], imageStyle: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], srcSet: [{
-                type: Input
-            }], previewImageSrc: [{
-                type: Input
-            }], previewImageSrcSet: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], preview: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], previewShowChange: [{
-                type: Output
-            }], imageErrorEvent: [{
-                type: Output
-            }], mask: [{
-                type: ViewChild,
-                args: ['mask', { static: false }]
-            }], previewButton: [{
-                type: ViewChild,
-                args: ['previewButton', { static: false }]
-            }], closeButton: [{
-                type: ViewChild,
-                args: ['closeButton', { static: false }]
-            }], onKeydownHandler: [{
+            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: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
             }] } });

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-image-viewer.mjs","sources":["../../../projects/cmat/components/image-viewer/image-viewer.component.ts","../../../projects/cmat/components/image-viewer/image-viewer.component.html","../../../projects/cmat/components/image-viewer/cmat-components-image-viewer.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Input,\r\n    Output,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n    booleanAttribute,\r\n    DOCUMENT,\r\n    inject,\r\n    HostListener,\r\n    signal,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SafeUrl } from '@angular/platform-browser';\r\n\r\n@Component({\r\n    selector: 'cmat-image',\r\n    templateUrl: './image-viewer.component.html',\r\n    styleUrls: ['./image-viewer.component.scss'],\r\n    imports: [CommonModule, MatButtonModule, MatIconModule],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None\r\n})\r\nexport class CmatImageComponent {\r\n    @Input() imageClass: string | undefined;\r\n\r\n    @Input() imageStyle: Record<string, string> | null | undefined;\r\n\r\n    @Input() src: SafeUrl | undefined;\r\n\r\n    @Input() srcSet: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrc: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrcSet: SafeUrl | undefined;\r\n\r\n    @Input() alt: string | undefined;\r\n\r\n    @Input() width: number | undefined;\r\n\r\n    @Input() height: number | undefined;\r\n\r\n    @Input() loading: 'lazy' | 'eager' | undefined;\r\n    \r\n    @Input() appendTo: HTMLElement | ElementRef<HTMLElement> | TemplateRef<unknown> | string | null | undefined;\r\n    \r\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\r\n    \r\n    @Output() previewShowChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n    \r\n    @Output() imageErrorEvent: EventEmitter<Event> = new EventEmitter<Event>();\r\n\r\n    el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n    readonly maskVisible = signal(false);\r\n\r\n    readonly previewVisible = signal(false);\r\n\r\n    rotate: number = 0;\r\n\r\n    scale: number = 1;\r\n    \r\n    private readonly _animationDuration = 150;\r\n    private _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\r\n    private _closePreviewTimeoutId: number | null = null;\r\n    private _document = inject<Document>(DOCUMENT);\r\n    private _originalOverflow: string | null = null;\r\n\r\n    private _zoomSettings = {\r\n        default: 1,\r\n        step: 0.1,\r\n        max: 1.5,\r\n        min: 0.5\r\n    };\r\n\r\n    get isZoomOutDisabled(): boolean {\r\n        return this.scale - this._zoomSettings.step <= this._zoomSettings.min;\r\n    }\r\n\r\n    get isZoomInDisabled(): boolean {\r\n        return this.scale + this._zoomSettings.step >= this._zoomSettings.max;\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _mask?: HTMLDivElement;\r\n    @ViewChild('mask', { static: false })\r\n    set mask(value: ElementRef<HTMLDivElement> | undefined) {\r\n        if (value) {\r\n            this._mask = value.nativeElement;\r\n\r\n            if (this._mask && this._loadingPreview) {\r\n                this.appendContainer();\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _previewButton?: HTMLButtonElement;\r\n    @ViewChild('previewButton', { static: false })\r\n    set previewButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._previewButton = value.nativeElement;\r\n\r\n            if (this._previewButton && this._closePreviewByEscape) {\r\n                this._previewButton.focus();\r\n                this._closePreviewByEscape = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _closeButton?: HTMLButtonElement;\r\n    @ViewChild('closeButton', { static: false })\r\n    set closeButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._closeButton = value.nativeElement;\r\n\r\n            if (this._closeButton && this._loadingPreview) {\r\n                this._closeButton.focus();\r\n                this._loadingPreview = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible()) {\r\n            this._enableBackgroundScroll();\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview) {\r\n            this._disableBackgroundScroll();\r\n            this.maskVisible.set(true);\r\n            this._loadingPreview = true;\r\n\r\n            requestAnimationFrame(() => {\r\n                this.previewVisible.set(true);\r\n                this.previewShowChange.emit(true);\r\n            });\r\n        }\r\n    }\r\n\r\n    onMaskKeydown(event: KeyboardEvent): void {\r\n        switch (event.code) {\r\n            case 'Escape':\r\n                this.closePreview();\r\n                this._closePreviewByEscape = true;\r\n                event.preventDefault();\r\n                break;\r\n\r\n            default:\r\n                break;\r\n        }\r\n    }\r\n\r\n    onPreviewImageClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    rotateRight(): void {\r\n        this.rotate += 90;\r\n    }\r\n\r\n    rotateLeft(): void {\r\n        this.rotate -= 90;\r\n    }\r\n\r\n    zoomIn(): void {\r\n        this.scale = this.scale + this._zoomSettings.step;\r\n    }\r\n\r\n    zoomOut(): void {\r\n        this.scale = this.scale - this._zoomSettings.step;\r\n    }\r\n\r\n    handleToolbarClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    appendContainer(): void {\r\n        if (this.appendTo) {\r\n            if (this.appendTo === 'body') this._document.body.appendChild(this._mask as HTMLElement);\r\n            else {\r\n                if (this.appendTo instanceof HTMLElement) {\r\n                    this.appendTo.appendChild(this._mask as HTMLElement);\r\n                } else if (this.appendTo instanceof ElementRef) {\r\n                    this.appendTo.nativeElement.appendChild(this._mask as HTMLElement);\r\n                } else if (typeof this.appendTo === 'object' && this.appendTo !== null && 'el' in this.appendTo) {\r\n                    const target = this.appendTo as { el?: { nativeElement?: HTMLElement } };\r\n                    const nativeElement = target.el?.nativeElement;\r\n\r\n                    if (nativeElement) {\r\n                        nativeElement.appendChild(this._mask as HTMLElement);\r\n                    }\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n\r\n    imagePreviewStyle(): { transform: string; } {\r\n        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };\r\n    }\r\n\r\n    closePreview(): void {\r\n        if (this._closePreviewTimeoutId !== null) {\r\n            clearTimeout(this._closePreviewTimeoutId);\r\n            this._closePreviewTimeoutId = null;\r\n        }\r\n\r\n        this._enableBackgroundScroll();\r\n        this.previewVisible.set(false);\r\n\r\n        this._closePreviewTimeoutId = window.setTimeout(() => {\r\n            this.maskVisible.set(false);\r\n            this.rotate = 0;\r\n            this.scale = this._zoomSettings.default;\r\n            this.previewShowChange.emit(false);\r\n            this._closePreviewTimeoutId = null;\r\n        }, this._animationDuration);\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\r\n    }\r\n\r\n    private _disableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        this._originalOverflow = body.style.overflow;\r\n        body.style.overflow = 'hidden';\r\n    }\r\n\r\n    private _enableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        body.style.overflow = this._originalOverflow ?? '';\r\n    }\r\n}\r\n","<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\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            <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\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\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-image-viewer.mjs","sources":["../../../projects/cmat/components/image-viewer/image-viewer.component.ts","../../../projects/cmat/components/image-viewer/image-viewer.component.html","../../../projects/cmat/components/image-viewer/cmat-components-image-viewer.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    inject,\r\n    ViewEncapsulation,\r\n    booleanAttribute,\r\n    DOCUMENT,\r\n    HostListener,\r\n    signal,\r\n    input,\r\n    output,\r\n    viewChild,\r\n    effect,\r\n    computed, // 引入 computed\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SafeUrl } from '@angular/platform-browser';\r\n\r\n@Component({\r\n    selector: 'cmat-image',\r\n    templateUrl: './image-viewer.component.html',\r\n    styleUrls: ['./image-viewer.component.scss'],\r\n    imports: [CommonModule, MatButtonModule, MatIconModule],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None\r\n})\r\nexport class CmatImageComponent {\r\n    readonly maskRef = viewChild<HTMLDivElement>('mask');\r\n    readonly previewButtonRef = viewChild<HTMLButtonElement>('previewButton');\r\n    readonly closeButtonRef = viewChild<HTMLButtonElement>('closeButton');\r\n\r\n    readonly imageClass = input<string | undefined>(undefined);\r\n    readonly imageStyle = input<Record<string, string> | null | undefined>(undefined);\r\n    readonly src = input<SafeUrl | undefined>(undefined);\r\n    readonly srcSet = input<SafeUrl | undefined>(undefined);\r\n    readonly previewImageSrc = input<SafeUrl | undefined>(undefined);\r\n    readonly previewImageSrcSet = input<SafeUrl | undefined>(undefined);\r\n    readonly alt = input<string | undefined>(undefined);\r\n    readonly width = input<number | undefined>(undefined);\r\n    readonly height = input<number | undefined>(undefined);\r\n    readonly loading = input<'lazy' | 'eager' | undefined>(undefined);\r\n\r\n    readonly appendTo = input<HTMLElement | ElementRef<HTMLElement> | string | null | undefined>(undefined);\r\n\r\n    readonly preview = input<boolean, boolean | string>(false, { transform: booleanAttribute });\r\n\r\n    readonly previewShowChange = output<boolean>();\r\n    readonly imageErrorEvent = output<Event>();\r\n\r\n    readonly maskVisible = signal(false);\r\n    readonly previewVisible = signal(false);\r\n\r\n    readonly rotate = signal(0);\r\n    readonly scale = signal(1);\r\n\r\n    readonly isZoomOutDisabled = computed(() => {\r\n        return this.scale() - this._zoomSettings.step <= this._zoomSettings.min;\r\n    });\r\n\r\n    readonly isZoomInDisabled = computed(() => {\r\n        return this.scale() + this._zoomSettings.step >= this._zoomSettings.max;\r\n    });\r\n\r\n    readonly imagePreviewStyle = computed(() => {\r\n        return {\r\n            transform: `rotate(${this.rotate()}deg) scale(${this.scale()})`\r\n        };\r\n    });\r\n\r\n    private readonly _document = inject<Document>(DOCUMENT);\r\n\r\n    private readonly _animationDuration = 150;\r\n    private _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\r\n    private _closePreviewTimeoutId: number | null = null;\r\n    private _originalOverflow: string | null = null;\r\n\r\n    private _zoomSettings = {\r\n        default: 1,\r\n        step: 0.1,\r\n        max: 1.5,\r\n        min: 0.5\r\n    };\r\n\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            const maskEl = this.maskRef();\r\n            if (maskEl && this._loadingPreview) {\r\n                this.appendContainer(maskEl);\r\n            }\r\n        });\r\n\r\n        effect(() => {\r\n            const btn = this.previewButtonRef();\r\n            if (btn && this._closePreviewByEscape) {\r\n                btn.focus();\r\n                this._closePreviewByEscape = false;\r\n            }\r\n        });\r\n\r\n        effect(() => {\r\n            const btn = this.closeButtonRef();\r\n            if (btn && this._loadingPreview) {\r\n                btn.focus();\r\n                this._loadingPreview = false;\r\n            }\r\n        });\r\n    }\r\n\r\n    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible()) {\r\n            this._enableBackgroundScroll();\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview()) {\r\n            this._disableBackgroundScroll();\r\n            this.maskVisible.set(true);\r\n            this._loadingPreview = true;\r\n\r\n            requestAnimationFrame(() => {\r\n                this.previewVisible.set(true);\r\n                this.previewShowChange.emit(true);\r\n            });\r\n        }\r\n    }\r\n\r\n    onMaskKeydown(event: KeyboardEvent): void {\r\n        switch (event.code) {\r\n            case 'Escape':\r\n                this.closePreview();\r\n                this._closePreviewByEscape = true;\r\n                event.preventDefault();\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n    }\r\n\r\n    onPreviewImageClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    rotateRight(): void {\r\n        // 使用 update 方法基于当前值计算新值\r\n        this.rotate.update(r => r + 90);\r\n    }\r\n\r\n    rotateLeft(): void {\r\n        this.rotate.update(r => r - 90);\r\n    }\r\n\r\n    zoomIn(): void {\r\n        this.scale.update(s => s + this._zoomSettings.step);\r\n    }\r\n\r\n    zoomOut(): void {\r\n        this.scale.update(s => s - this._zoomSettings.step);\r\n    }\r\n\r\n    handleToolbarClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    appendContainer(maskElement?: HTMLElement): void {\r\n        const elToAppend = maskElement ?? this.maskRef();\r\n        if (!elToAppend) return;\r\n\r\n        const target = this.appendTo();\r\n\r\n        if (target) {\r\n            if (target === 'body') {\r\n                this._document.body.appendChild(elToAppend);\r\n            } else {\r\n                let nativeElement: HTMLElement | null = null;\r\n\r\n                if (target instanceof HTMLElement) {\r\n                    nativeElement = target;\r\n                } else if (target instanceof ElementRef) {\r\n                    nativeElement = target.nativeElement;\r\n                } else if (typeof target === 'object' && target !== null && 'el' in target) {\r\n                    const customTarget = target as { el?: { nativeElement?: HTMLElement } };\r\n                    nativeElement = customTarget.el?.nativeElement ?? null;\r\n                }\r\n\r\n                if (nativeElement) {\r\n                    nativeElement.appendChild(elToAppend);\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    closePreview(): void {\r\n        if (this._closePreviewTimeoutId !== null) {\r\n            clearTimeout(this._closePreviewTimeoutId);\r\n            this._closePreviewTimeoutId = null;\r\n        }\r\n\r\n        this._enableBackgroundScroll();\r\n        this.previewVisible.set(false);\r\n\r\n        this._closePreviewTimeoutId = window.setTimeout(() => {\r\n            this.maskVisible.set(false);\r\n            // 重置 signal 状态\r\n            this.rotate.set(0);\r\n            this.scale.set(this._zoomSettings.default);\r\n            this.previewShowChange.emit(false);\r\n            this._closePreviewTimeoutId = null;\r\n        }, this._animationDuration);\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\r\n    }\r\n\r\n    private _disableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        this._originalOverflow = body.style.overflow;\r\n        body.style.overflow = 'hidden';\r\n    }\r\n\r\n    private _enableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        body.style.overflow = this._originalOverflow ?? '';\r\n    }\r\n}","<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            <!-- 绑定 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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,27 +1,24 @@
 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/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class CmatInlineLoadingComponent {
     constructor() {
-        this.message = '加载中...';
-        this.diameter = 20;
-        this.showText = true;
+        this.message = input('加载中...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        this.diameter = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
+        this.showText = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showText" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatInlineLoadingComponent, isStandalone: true, selector: "cmat-inline-loading", inputs: { message: "message", diameter: "diameter", showText: "showText" }, 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.2", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: "21.2.11", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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: Input
-            }], diameter: [{
-                type: Input
-            }], showText: [{
-                type: Input
-            }] } });
+            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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-inline-loading.mjs","sources":["../../../projects/cmat/components/inline-loading/inline-loading.component.ts","../../../projects/cmat/components/inline-loading/inline-loading.component.html","../../../projects/cmat/components/inline-loading/cmat-components-inline-loading.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@Component({\r\n    selector: 'cmat-inline-loading',\r\n    templateUrl: './inline-loading.component.html',\r\n    styleUrls: ['./inline-loading.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [MatProgressSpinnerModule]\r\n})\r\nexport class CmatInlineLoadingComponent {\r\n    \r\n    @Input() message:string = '加载中...';\r\n\r\n    \r\n    @Input() diameter: number = 20;\r\n\r\n    \r\n    @Input() showText: boolean = true;\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAUa,0BAA0B,CAAA;AAPvC,IAAA,WAAA,GAAA;QASa,IAAA,CAAA,OAAO,GAAU,QAAQ;QAGzB,IAAA,CAAA,QAAQ,GAAW,EAAE;QAGrB,IAAA,CAAA,QAAQ,GAAY,IAAI;AACpC,IAAA;+GATY,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVvC,sUAMA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEc,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEzB,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,wBAAwB,CAAC,EAAA,QAAA,EAAA,sUAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;sBAIlC;;sBAGA;;sBAGA;;;AElBL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-inline-loading.mjs","sources":["../../../projects/cmat/components/inline-loading/inline-loading.component.ts","../../../projects/cmat/components/inline-loading/inline-loading.component.html","../../../projects/cmat/components/inline-loading/cmat-components-inline-loading.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@Component({\r\n    selector: 'cmat-inline-loading',\r\n    templateUrl: './inline-loading.component.html',\r\n    styleUrls: ['./inline-loading.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [MatProgressSpinnerModule]\r\n})\r\nexport class CmatInlineLoadingComponent {\r\n    readonly message=input<string>('加载中...');\r\n    readonly diameter=input<number>(20);\r\n    readonly showText=input<boolean>(true);\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAUa,0BAA0B,CAAA;AAPvC,IAAA,WAAA,GAAA;QAQa,IAAA,CAAA,OAAO,GAAC,KAAK,CAAS,QAAQ;oFAAC;QAC/B,IAAA,CAAA,QAAQ,GAAC,KAAK,CAAS,EAAE;qFAAC;QAC1B,IAAA,CAAA,QAAQ,GAAC,KAAK,CAAU,IAAI;qFAAC;AACzC,IAAA;8GAJY,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVvC,4UAMA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEc,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEzB,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,wBAAwB,CAAC,EAAA,QAAA,EAAA,4UAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;;AERvC;;AAEG;;;;"}