cmat 0.0.78 → 0.0.80

package/fesm2022/cmat-components-highlight.mjs

@@ -6,42 +6,32 @@ import hljs from 'highlight.js';
 
 class CmatHighlightService {
     highlight(code, language) {
-        // Format the code
         code = this._format(code);
-        // Highlight and return the code
         return hljs.highlight(code, { language }).value;
     }
     _format(code) {
         let indentation = 0;
-        // Split the code into lines and store the lines
         const lines = code.split('\n');
-        // Trim the empty lines around the code block
         while (lines.length && lines[0].trim() === '') {
             lines.shift();
         }
         while (lines.length && lines[lines.length - 1].trim() === '') {
             lines.pop();
         }
-        // Iterate through the lines
         lines.filter(line => line.length)
             .forEach((line, index) => {
-            // Always get the indentation of the first line so we can
-            // have something to compare with
             if (index === 0) {
                 indentation = line.search(/\S|$/);
                 return;
             }
-            // Look at all the remaining lines to figure out the smallest indentation.
             indentation = Math.min(line.search(/\S|$/), indentation);
         });
-        // Iterate through the lines one more time, remove the extra
-        // indentation, join them together and return it
         return lines.map(line => line.substring(indentation)).join('\n');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatHighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatHighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -56,62 +46,46 @@ class CmatHighlightComponent {
         this._viewContainerRef = inject(ViewContainerRef);
     }
     ngOnChanges(changes) {
-        // Code & Lang
         if ('code' in changes || 'lang' in changes) {
-            // Return if the viewContainerRef is not available
             if (!this._viewContainerRef.length) {
                 return;
             }
-            // Highlight and insert the code
             this._highlightAndInsert();
         }
     }
     ngAfterViewInit() {
-        // Return if there is no language set
         if (!this.lang) {
             return;
         }
-        // If there is no code input, get the code from
-        // the textarea
         if (!this.code) {
-            // Get the code
             this.code = this._elementRef.nativeElement.value;
         }
-        // Highlight and insert
         this._highlightAndInsert();
     }
     _highlightAndInsert() {
-        // Return if the template reference is not available
         if (!this.templateRef) {
             return;
         }
-        // Return if the code or language is not defined
         if (!this.code || !this.lang) {
             return;
         }
-        // Destroy the component if there is already one
         if (this._viewRef) {
             this._viewRef.destroy();
             this._viewRef = null;
         }
-        // Highlight and sanitize the code just in case
         this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._cmatHighlightService.highlight(this.code, this.lang));
-        // Return if the highlighted code is null
         if (this.highlightedCode === null) {
             return;
         }
-        // Render and insert the template
         this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
             highlightedCode: this.highlightedCode,
             lang: this.lang
         });
-        // Detect the changes
-        this._viewRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatHighlightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
         }], propDecorators: { code: [{

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        // Format the code\r\n        code = this._format(code);\r\n\r\n        // Highlight and return the 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\r\n        // Split the code into lines and store the lines\r\n        const lines = code.split('\\n');\r\n\r\n        // Trim the empty lines around the code block\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\r\n        // Iterate through the lines\r\n        lines.filter(line => line.length)\r\n            .forEach((line, index) => {\r\n\r\n                // Always get the indentation of the first line so we can\r\n                // have something to compare with\r\n                if (index === 0) {\r\n                    indentation = line.search(/\\S|$/);\r\n                    return;\r\n                }\r\n\r\n                // Look at all the remaining lines to figure out the smallest indentation.\r\n                indentation = Math.min(line.search(/\\S|$/), indentation);\r\n            });\r\n\r\n        // Iterate through the lines one more time, remove the extra\r\n        // indentation, join them together and return it\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<any>;\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        // Code & Lang\r\n        if ('code' in changes || 'lang' in changes) {\r\n            // Return if the viewContainerRef is not available\r\n            if (!this._viewContainerRef.length) {\r\n                return;\r\n            }\r\n\r\n            // Highlight and insert the code\r\n            this._highlightAndInsert();\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit(): void {\r\n        // Return if there is no language set\r\n        if (!this.lang) {\r\n            return;\r\n        }\r\n\r\n        // If there is no code input, get the code from\r\n        // the textarea\r\n        if (!this.code) {\r\n            // Get the code\r\n            this.code = this._elementRef.nativeElement.value;\r\n        }\r\n\r\n        // Highlight and insert\r\n        this._highlightAndInsert();\r\n    }\r\n\r\n    private _highlightAndInsert(): void {\r\n        // Return if the template reference is not available\r\n        if (!this.templateRef) {\r\n            return;\r\n        }\r\n\r\n        // Return if the code or language is not defined\r\n        if (!this.code || !this.lang) {\r\n            return;\r\n        }\r\n\r\n        // Destroy the component if there is already one\r\n        if (this._viewRef) {\r\n            this._viewRef.destroy();\r\n            this._viewRef = null;\r\n        }\r\n\r\n        // Highlight and sanitize the code just in case\r\n        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._cmatHighlightService.highlight(this.code, this.lang));\r\n\r\n        // Return if the highlighted code is null\r\n        if (this.highlightedCode === null) {\r\n            return;\r\n        }\r\n\r\n        // Render and insert the template\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        // Detect the changes\r\n        this._viewRef.detectChanges();\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 { 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<any>;\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.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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"}

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, DOCUMENT, ChangeDetectorRef, booleanAttribute, HostListener, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ElementRef, signal, DOCUMENT, booleanAttribute, HostListener, ViewChild, Output, Input, 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,27 +9,17 @@ 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 = false;
-        this.previewVisible = false;
+        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._loadingPreview = false;
         this._closePreviewByEscape = false;
         this._document = inject(DOCUMENT);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._originalOverflow = null;
         this._zoomSettings = {
             default: 1,
@@ -74,7 +64,7 @@ class CmatImageComponent {
     }
     ;
     onKeydownHandler() {
-        if (this.previewVisible) {
+        if (this.previewVisible()) {
             this._enableBackgroundScroll();
             this.closePreview();
         }
@@ -82,10 +72,9 @@ class CmatImageComponent {
     onImageClick() {
         if (this.preview) {
             this._disableBackgroundScroll();
-            this.maskVisible = true;
-            this.previewVisible = true;
+            this.maskVisible.set(true);
+            this.previewVisible.set(true);
             this._loadingPreview = true;
-            this._changeDetectorRef.markForCheck();
             this.previewShowChange.emit(true);
         }
     }
@@ -135,12 +124,11 @@ class CmatImageComponent {
     }
     closePreview() {
         this._enableBackgroundScroll();
-        this.previewVisible = false;
+        this.previewVisible.set(false);
         this.rotate = 0;
         this.scale = this._zoomSettings.default;
         setTimeout(() => {
-            this.maskVisible = false;
-            this._changeDetectorRef.markForCheck();
+            this.maskVisible.set(false);
             this.previewShowChange.emit(false);
         }, 25);
     }
@@ -156,12 +144,12 @@ class CmatImageComponent {
         const body = this._document.body;
         body.style.overflow = this._originalOverflow ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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>", 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;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.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 .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@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: "21.2.9", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.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 .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@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.7", ngImport: i0, type: CmatImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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>", 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;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.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 .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@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"] }]
+            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;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.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 .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@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: [{

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    ChangeDetectorRef,\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} 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\r\n    @Input() imageClass: string | undefined;\r\n\r\n    @Input() imageStyle: Record<string, any> | 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     * 要附加对话框的目标元素，有效值是“body”或另一个元素的本地ng模板变量（注意：使用带括号的绑定来绑定模板变量，例如[appedTo]=“mydiv”用于变量名为#mydiv的div元素）。\r\n     */\r\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined;\r\n    /**\r\n     * 启动预览功能。\r\n     */\r\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\r\n    /**\r\n     * 监听预览显示/隐藏.\r\n     */\r\n    @Output() previewShowChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n    /**\r\n     * 如果加载图像文件时发生错误，则会触发此事件.\r\n     */\r\n    @Output() imageErrorEvent: EventEmitter<Event> = new EventEmitter<Event>();\r\n\r\n    el = inject(ElementRef);\r\n\r\n    maskVisible: boolean = false;\r\n\r\n    previewVisible: boolean = false;\r\n\r\n    rotate: number = 0;\r\n\r\n    scale: number = 1;\r\n\r\n    private _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\r\n    private _document = inject<Document>(DOCUMENT);\r\n    private _changeDetectorRef = inject(ChangeDetectorRef);\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 | undefined;\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 | undefined;\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 | undefined;\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 = true;\r\n            this.previewVisible = true;\r\n\r\n            this._loadingPreview = true;\r\n            this._changeDetectorRef.markForCheck();\r\n\r\n            this.previewShowChange.emit(true);\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 (typeof HTMLElement === 'object' ? this.appendTo instanceof HTMLElement : this.appendTo && typeof this.appendTo === 'object' && this.appendTo !== null)\r\n                    (this.appendTo as any).appendChild(this._mask);\r\n                else if ((this.appendTo as any)?.el?.nativeElement)\r\n                    (this.appendTo as any).el.nativeElement.appendChild(this.mask?.nativeElement);\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        this._enableBackgroundScroll();\r\n        this.previewVisible = false;\r\n        this.rotate = 0;\r\n        this.scale = this._zoomSettings.default;\r\n\r\n        setTimeout(() => {\r\n            this.maskVisible = false;\r\n\r\n            this._changeDetectorRef.markForCheck();\r\n            this.previewShowChange.emit(false);\r\n        }, 25);\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>","/**\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    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\r\n    @Input() imageClass: string | undefined;\r\n\r\n    @Input() imageStyle: Record<string, any> | 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 | TemplateRef<any> | 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);\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 _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\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 | undefined;\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 | undefined;\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 | undefined;\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.previewVisible.set(true);\r\n\r\n            this._loadingPreview = true;\r\n\r\n            this.previewShowChange.emit(true);\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 (typeof HTMLElement === 'object' ? this.appendTo instanceof HTMLElement : this.appendTo && typeof this.appendTo === 'object' && this.appendTo !== null)\r\n                    (this.appendTo as any).appendChild(this._mask);\r\n                else if ((this.appendTo as any)?.el?.nativeElement)\r\n                    (this.appendTo as any).el.nativeElement.appendChild(this.mask?.nativeElement);\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        this._enableBackgroundScroll();\r\n        this.previewVisible.set(false);\r\n        this.rotate = 0;\r\n        this.scale = this._zoomSettings.default;\r\n\r\n        setTimeout(() => {\r\n            this.maskVisible.set(false);\r\n            this.previewShowChange.emit(false);\r\n        }, 25);\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":";;;;;;;;;MA6Ba,kBAAkB,CAAA;AAR/B,IAAA,WAAA,GAAA;QAgC4C,IAAA,CAAA,OAAO,GAAY,KAAK;AAEtD,QAAA,IAAA,CAAA,iBAAiB,GAA0B,IAAI,YAAY,EAAW;AAEtE,QAAA,IAAA,CAAA,eAAe,GAAwB,IAAI,YAAY,EAAS;AAE1E,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,KAAK,kFAAC;AAE3B,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,KAAK,qFAAC;QAEvC,IAAA,CAAA,MAAM,GAAW,CAAC;QAElB,IAAA,CAAA,KAAK,GAAW,CAAC;QAET,IAAA,CAAA,eAAe,GAAY,KAAK;QAChC,IAAA,CAAA,qBAAqB,GAAY,KAAK;AACtC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAW,QAAQ,CAAC;QACtC,IAAA,CAAA,iBAAiB,GAAkB,IAAI;AAEvC,QAAA,IAAA,CAAA,aAAa,GAAG;AACpB,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,GAAG;AACR,YAAA,GAAG,EAAE;SACR;AAuJJ,IAAA;AArJG,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG;IACzE;AAEA,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG;IACzE;IAIA,IACI,IAAI,CAAC,KAA6C,EAAA;QAClD,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa;YAEhC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE;gBACpC,IAAI,CAAC,eAAe,EAAE;YAC1B;QACJ;IACJ;;IAIA,IACI,aAAa,CAAC,KAAgD,EAAA;QAC9D,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa;YAEzC,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,EAAE;AACnD,gBAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC3B,gBAAA,IAAI,CAAC,qBAAqB,GAAG,KAAK;YACtC;QACJ;IACJ;;IAIA,IACI,WAAW,CAAC,KAAgD,EAAA;QAC5D,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa;YAEvC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,EAAE;AAC3C,gBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AACzB,gBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;YAChC;QACJ;IACJ;;IAGA,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;YACvB,IAAI,CAAC,uBAAuB,EAAE;YAC9B,IAAI,CAAC,YAAY,EAAE;QACvB;IACJ;IAEA,YAAY,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,wBAAwB,EAAE;AAC/B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AAC1B,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;AAE7B,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAE3B,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC;IACJ;AAEA,IAAA,aAAa,CAAC,KAAoB,EAAA;AAC9B,QAAA,QAAQ,KAAK,CAAC,IAAI;AACd,YAAA,KAAK,QAAQ;gBACT,IAAI,CAAC,YAAY,EAAE;AACnB,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;gBACjC,KAAK,CAAC,cAAc,EAAE;gBACtB;AAEJ,YAAA;gBACI;;IAEZ;AAEA,IAAA,mBAAmB,CAAC,KAAiB,EAAA;QACjC,KAAK,CAAC,eAAe,EAAE;IAC3B;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE;IACrB;IAEA,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE;IACrB;IAEA,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI;IACrD;IAEA,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI;IACrD;AAEA,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;IAC3B;IAEA,eAAe,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;gBAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAoB,CAAC;iBACnF;AACD,gBAAA,IAAI,OAAO,WAAW,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,YAAY,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI;oBACpJ,IAAI,CAAC,QAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7C,qBAAA,IAAK,IAAI,CAAC,QAAgB,EAAE,EAAE,EAAE,aAAa;AAC7C,oBAAA,IAAI,CAAC,QAAgB,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC;YACrF;QAEJ;IACJ;IAEA,iBAAiB,GAAA;AACb,QAAA,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE;IACpF;IAEA,YAAY,GAAA;QACR,IAAI,CAAC,uBAAuB,EAAE;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO;QAEvC,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AAC3B,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,EAAE,EAAE,CAAC;IACV;AAEA,IAAA,UAAU,CAAC,KAAY,EAAA;AACnB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;IACpC;IAEQ,wBAAwB,GAAA;AAC5B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;QAChC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;IAClC;IAEQ,uBAAuB,GAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;QAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,IAAI,EAAE;IACtD;8GAxMS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,GAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,KAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAwBP,gBAAgB,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,yBAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrDxC,69EA0CA,ylDDjBc,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAI7C,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EAGb,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,CAAC,EAAA,eAAA,EACtC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,69EAAA,EAAA,MAAA,EAAA,CAAA,kiDAAA,CAAA,EAAA;;sBAIpC;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA;;sBAEA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC;;sBAEA;;sBAkCA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAanC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,eAAe,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAc5C,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,aAAa,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAY1C,YAAY;uBAAC,yBAAyB,EAAE,CAAC,QAAQ,CAAC;;;AElIvD;;AAEG;;;;"}

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

@@ -5,23 +5,14 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class CmatInlineLoadingComponent {
     constructor() {
-        /**
-         * 说明文字。
-         */
         this.message = '加载中...';
-        /**
-         * 圆环大小。
-         */
         this.diameter = 20;
-        /**
-         * 是否显示文字。
-         */
         this.showText = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: "21.2.9", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{

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     * 说明文字。\r\n     */\r\n    @Input() message = '加载中...';\r\n\r\n    /**\r\n     * 圆环大小。\r\n     */\r\n    @Input() diameter = 20;\r\n\r\n    /**\r\n     * 是否显示文字。\r\n     */\r\n    @Input() showText = 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;AAQI;;AAEG;QACM,IAAA,CAAA,OAAO,GAAG,QAAQ;AAE3B;;AAEG;QACM,IAAA,CAAA,QAAQ,GAAG,EAAE;AAEtB;;AAEG;QACM,IAAA,CAAA,QAAQ,GAAG,IAAI;AAC3B,IAAA;8GAfY,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,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;;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,sUAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;sBAMlC;;sBAKA;;sBAKA;;;AExBL;;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    \r\n    @Input() message = '加载中...';\r\n\r\n    \r\n    @Input() diameter = 20;\r\n\r\n    \r\n    @Input() showText = 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,GAAG,QAAQ;QAGlB,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGb,IAAA,CAAA,QAAQ,GAAG,IAAI;AAC3B,IAAA;8GATY,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,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;;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,sUAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;sBAIlC;;sBAGA;;sBAGA;;;AElBL;;AAEG;;;;"}

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ChangeDetectorRef, ViewChild, HostBinding, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ViewChild, HostBinding, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { createAjvValidator, parseJSONPath, createMultiSelection, isJSONContent, isKeySelection, stringifyJSONPath, isMultiSelection, createJSONEditor } from 'vanilla-jsoneditor';
 
 class CmatJsonEditorComponent {
@@ -14,7 +14,6 @@ class CmatJsonEditorComponent {
         };
         this._destroyed = false;
         this._document = inject(DOCUMENT);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
     }
     get darkTheme() {
         return this._isDarkTheme;
@@ -38,7 +37,6 @@ class CmatJsonEditorComponent {
             if (this._editor) {
                 void this._editor.update(this.content);
             }
-            this._changeDetectorRef.markForCheck();
         }
         if (changes.options) {
             if (this._editor) {
@@ -88,12 +86,10 @@ class CmatJsonEditorComponent {
     }
     _onSelect(selection) {
         if (isKeySelection(selection)) {
-            const st = stringifyJSONPath(selection.path);
-            this.pathChanged.emit(st);
+            this.pathChanged.emit(stringifyJSONPath(selection.path));
         }
         else if (isMultiSelection(selection)) {
-            const st = stringifyJSONPath(selection.anchorPath);
-            this.pathChanged.emit(st);
+            this.pathChanged.emit(stringifyJSONPath(selection.anchorPath));
         }
     }
     _initializeEditor() {
@@ -119,7 +115,6 @@ class CmatJsonEditorComponent {
                 onRenderMenu(items, 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 context) {
-                    // remove buttons for table-mode, transform, sort
                     items.splice(items.findIndex(i => i['text'] === 'table'), 1);
                     items.splice(items.findIndex(i => i['className'] === 'jse-sort'), 1);
                     items.splice(items.findIndex(i => i['className'] === 'jse-transform'), 1);
@@ -143,19 +138,19 @@ class CmatJsonEditorComponent {
                                 button.title = '切换到树模式(当前模式:树)';
                                 break;
                             case 'Format JSON: add proper indentation and new lines (Ctrl+I)':
-                                button.title = 'JSON格式化: 添加适当的缩进和新行 (Ctrl+I)';
+                                button.title = 'JSON格式化：添加适当的缩进和换行 (Ctrl+I)';
                                 break;
                             case 'Compact JSON: remove all white spacing and new lines (Ctrl+Shift+I)':
-                                button.title = '压缩JSON: 删除所有白色间距和新行 (Ctrl+Shift+I)';
+                                button.title = '压缩 JSON：删除所有空白间距和换行 (Ctrl+Shift+I)';
                                 break;
                             case 'Search (Ctrl+F)':
                                 button.title = '搜索 (Ctrl+F)';
                                 break;
                             case 'Undo (Ctrl+Z)':
-                                button.title = '撤回 (Ctrl+Z)';
+                                button.title = '撤销 (Ctrl+Z)';
                                 break;
                             case 'Redo (Ctrl+Shift+Z)':
-                                button.title = '重试 (Ctrl+Shift+Z)';
+                                button.title = '重做 (Ctrl+Shift+Z)';
                                 break;
                             case 'Expand all':
                                 button.title = '全部展开';
@@ -164,7 +159,7 @@ class CmatJsonEditorComponent {
                                 button.title = '全部折叠';
                                 break;
                             case 'Open context menu (Click here, right click on the selection, or use the context menu button or Ctrl+Q)':
-                                button.title = '打开内容菜单 (单击此处，右键单击所选内容，或使用内容菜单按钮或 Ctrl+Q)';
+                                button.title = '打开上下文菜单（单击此处、右键选择，或使用上下文菜单按钮，或 Ctrl+Q）';
                                 break;
                         }
                     });
@@ -173,10 +168,10 @@ class CmatJsonEditorComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, host: { properties: { "class.jse-theme-dark": "this.darkTheme" } }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true }], usesOnChanges: 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}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, host: { properties: { "class.jse-theme-dark": "this.darkTheme" } }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true }], usesOnChanges: 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}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"] }]
         }], propDecorators: { options: [{