cmat 0.0.29 → 0.0.31

package/fesm2022/cmat-components-fullscreen.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { DOCUMENT, Input, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { inject, DOCUMENT, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
@@ -9,8 +9,8 @@ import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 class CmatFullscreenComponent {
-    constructor(_document) {
-        this._document = _document;
+    constructor() {
+        this._document = inject(DOCUMENT);
     }
     toggleFullscreen() {
         if (!this._document.fullscreenEnabled) {
@@ -28,16 +28,13 @@ class CmatFullscreenComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatFullscreenComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { iconTpl: [{
+        }], propDecorators: { iconTpl: [{
                 type: Input
             }], tooltip: [{
                 type: Input

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-fullscreen.mjs","sources":["../../../projects/cmat/components/fullscreen/fullscreen.component.ts","../../../projects/cmat/components/fullscreen/fullscreen.component.html","../../../projects/cmat/components/fullscreen/cmat-components-fullscreen.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation, DOCUMENT } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@Component({\r\n    selector: 'cmat-fullscreen',\r\n    templateUrl: './fullscreen.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatFullscreen',\r\n    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule]\r\n})\r\nexport class CmatFullscreenComponent {\r\n    @Input() iconTpl: TemplateRef<any>;\r\n    @Input() tooltip: string;\r\n\r\n    constructor(@Inject(DOCUMENT) private _document: Document) { }\r\n\r\n    toggleFullscreen(): void\r\n    {\r\n        if (!this._document.fullscreenEnabled)\r\n        {\r\n            console.log('Fullscreen is not available in this browser.');\r\n            return;\r\n        }\r\n\r\n        const fullScreen = this._document.fullscreenElement;\r\n\r\n        if (fullScreen)\r\n        {\r\n            void this._document.exitFullscreen();\r\n        }\r\n        else\r\n        {\r\n            this._document.documentElement.requestFullscreen()\r\n                .catch(() =>\r\n                {\r\n                    console.error('Entering fullscreen mode failed.');\r\n                });\r\n        }\r\n    }\r\n}\r\n","<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '切换全屏'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAca,uBAAuB,CAAA;AAIhC,IAAA,WAAA,CAAsC,SAAmB,EAAA;QAAnB,IAAS,CAAA,SAAA,GAAT,SAAS;;IAE/C,gBAAgB,GAAA;AAEZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EACrC;AACI,YAAA,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC;YAC3D;;AAGJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB;QAEnD,IAAI,UAAU,EACd;AACI,YAAA,KAAK,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;;aAGxC;AACI,YAAA,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,iBAAiB;iBAC3C,KAAK,CAAC,MAAK;AAER,gBAAA,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC;AACrD,aAAC,CAAC;;;AA1BL,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,kBAIZ,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAJnB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpC,yZAQc,EDIA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,qNAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAEnE,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,iBAEZ,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,gBAAgB,EACjB,OAAA,EAAA,CAAC,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,yZAAA,EAAA;;0BAMhE,MAAM;2BAAC,QAAQ;yCAHnB,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;;;AEhBL;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-fullscreen.mjs","sources":["../../../projects/cmat/components/fullscreen/fullscreen.component.ts","../../../projects/cmat/components/fullscreen/fullscreen.component.html","../../../projects/cmat/components/fullscreen/cmat-components-fullscreen.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation, DOCUMENT, inject } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\n@Component({\r\n    selector: 'cmat-fullscreen',\r\n    templateUrl: './fullscreen.component.html',\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    exportAs: 'cmatFullscreen',\r\n    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule]\r\n})\r\nexport class CmatFullscreenComponent {\r\n    @Input() iconTpl: TemplateRef<any>;\r\n    @Input() tooltip: string;\r\n\r\n    private _document = inject<Document>(DOCUMENT);\r\n\r\n\r\n    toggleFullscreen(): void {\r\n        if (!this._document.fullscreenEnabled) {\r\n            console.log('Fullscreen is not available in this browser.');\r\n            return;\r\n        }\r\n\r\n        const fullScreen = this._document.fullscreenElement;\r\n\r\n        if (fullScreen) {\r\n            void this._document.exitFullscreen();\r\n        }\r\n        else {\r\n            this._document.documentElement.requestFullscreen()\r\n                .catch(() => {\r\n                    console.error('Entering fullscreen mode failed.');\r\n                });\r\n        }\r\n    }\r\n}\r\n","<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '切换全屏'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAca,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;AAYY,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAW,QAAQ,CAAC;AAqBjD;IAlBG,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE;AACnC,YAAA,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC;YAC3D;;AAGJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB;QAEnD,IAAI,UAAU,EAAE;AACZ,YAAA,KAAK,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;;aAEnC;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,iBAAiB;iBAC3C,KAAK,CAAC,MAAK;AACR,gBAAA,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC;AACrD,aAAC,CAAC;;;8GAtBL,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpC,yZAQc,EDIA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,qNAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAEnE,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,iBAEZ,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,gBAAgB,EACjB,OAAA,EAAA,CAAC,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,yZAAA,EAAA;8BAGpE,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;;;AEhBL;;AAEG;;;;"}

package/fesm2022/cmat-components-highlight.mjs

@@ -1,7 +1,7 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, SecurityContext, TemplateRef, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import * as i1 from '@angular/platform-browser';
+import { Injectable, inject, ElementRef, ViewContainerRef, SecurityContext, TemplateRef, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import hljs from 'highlight.js';
 
 class CmatHighlightService {
@@ -38,10 +38,10 @@ class CmatHighlightService {
         // 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: "20.0.0", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -49,11 +49,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class CmatHighlightComponent {
-    constructor(_domSanitizer, _elementRef, _cmatHighlightService, _viewContainerRef) {
-        this._domSanitizer = _domSanitizer;
-        this._elementRef = _elementRef;
-        this._cmatHighlightService = _cmatHighlightService;
-        this._viewContainerRef = _viewContainerRef;
+    constructor() {
+        this._domSanitizer = inject(DomSanitizer);
+        this._elementRef = inject(ElementRef);
+        this._cmatHighlightService = inject(CmatHighlightService);
+        this._viewContainerRef = inject(ViewContainerRef);
     }
     ngOnChanges(changes) {
         // Code & Lang
@@ -108,13 +108,13 @@ class CmatHighlightComponent {
         // Detect the changes
         this._viewRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHighlightComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: CmatHighlightService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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: "20.0.2", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", 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: "20.0.0", ngImport: i0, type: CmatHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHighlightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: CmatHighlightService }, { type: i0.ViewContainerRef }], propDecorators: { code: [{
+        }], propDecorators: { code: [{
                 type: Input
             }], lang: [{
                 type: Input

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 {\r\n    AfterViewInit,\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    EmbeddedViewRef,\r\n    Input,\r\n    OnChanges,\r\n    SecurityContext,\r\n    SimpleChanges,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewContainerRef,\r\n    ViewEncapsulation\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 implements OnChanges, AfterViewInit {\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\r\n    constructor(\r\n        private _domSanitizer: DomSanitizer,\r\n        private _elementRef: ElementRef,\r\n        private _cmatHighlightService: CmatHighlightService,\r\n        private _viewContainerRef: ViewContainerRef\r\n    ) {\r\n    }\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":["i2.CmatHighlightService"],"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        // 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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"}

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

@@ -2,17 +2,14 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, DOCUMENT, booleanAttribute, HostListener, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ElementRef, DOCUMENT, ChangeDetectorRef, 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';
 import { MatIconModule } from '@angular/material/icon';
 
 class CmatImageComponent {
-    constructor(_document, _changeDetectorRef, el) {
-        this._document = _document;
-        this._changeDetectorRef = _changeDetectorRef;
-        this.el = el;
+    constructor() {
         /**
          * 启动预览功能。
          */
@@ -33,10 +30,13 @@ class CmatImageComponent {
          * 如果加载图像文件时发生错误，则会触发此事件.
          */
         this.imageErrorEvent = new EventEmitter();
+        this.el = inject(ElementRef);
         this.maskVisible = false;
         this.previewVisible = false;
         this.rotate = 0;
         this.scale = 1;
+        this._document = inject(DOCUMENT);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._zoomSettings = {
             default: 1,
             step: 0.1,
@@ -153,15 +153,15 @@ class CmatImageComponent {
     imageError(event) {
         this.imageErrorEvent.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatImageComponent, deps: [{ token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, 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 mat-icon-button>\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 image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n        (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button mat-icon-button (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [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 mat-icon-button (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\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\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 .cmat-image-mask{display:flex;align-items:center;justify-content:center}cmat-image .cmat-image-preview-container{position:relative;display:inline-block;line-height:0}cmat-image .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 .cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}cmat-image .cmat-image-preview-container>img{cursor:pointer}cmat-image .cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}cmat-image .cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}cmat-image .image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}cmat-image .image-overlay-enter{animation:image-overlay-enter-animation .15s forwards}cmat-image .image-overlay-leave{animation:image-overlay-leave-animation .15s forwards}@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"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, 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 mat-icon-button>\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 image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n        (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button mat-icon-button (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [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 mat-icon-button (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\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\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 .cmat-image-mask{display:flex;align-items:center;justify-content:center}cmat-image .cmat-image-preview-container{position:relative;display:inline-block;line-height:0}cmat-image .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 .cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}cmat-image .cmat-image-preview-container>img{cursor:pointer}cmat-image .cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}cmat-image .cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}cmat-image .image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}cmat-image .image-overlay-enter{animation:image-overlay-enter-animation .15s forwards}cmat-image .image-overlay-leave{animation:image-overlay-leave-animation .15s forwards}@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"] }], animations: [
             trigger('animation', [
                 transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
                 transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-image', animations: [
                         trigger('animation', [
@@ -169,10 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                             transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
                         ])
                     ], 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 mat-icon-button>\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 image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n        (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button mat-icon-button (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [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 mat-icon-button (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\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\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 .cmat-image-mask{display:flex;align-items:center;justify-content:center}cmat-image .cmat-image-preview-container{position:relative;display:inline-block;line-height:0}cmat-image .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 .cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}cmat-image .cmat-image-preview-container>img{cursor:pointer}cmat-image .cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}cmat-image .cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}cmat-image .image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}cmat-image .image-overlay-enter{animation:image-overlay-enter-animation .15s forwards}cmat-image .image-overlay-leave{animation:image-overlay-leave-animation .15s forwards}@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: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { imageClass: [{
+        }], propDecorators: { imageClass: [{
                 type: Input
             }], imageStyle: [{
                 type: Input

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 { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    ChangeDetectorRef,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    HostListener,\r\n    Inject,\r\n    Input,\r\n    Output,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n    booleanAttribute,\r\n    DOCUMENT\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    animations: [\r\n        trigger('animation', [\r\n            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\r\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\r\n        ])\r\n    ],\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: string | SafeUrl | undefined;\r\n\r\n    @Input() srcSet: string | SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrc: string | SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrcSet: string | 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    @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\r\n    /**\r\n     * 切换时隐藏动画\r\n     */\r\n    @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\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    @ViewChild('mask') mask: ElementRef | undefined;\r\n\r\n    @ViewChild('previewButton') previewButton: ElementRef | undefined;\r\n\r\n    @ViewChild('closeButton') closeButton: ElementRef | undefined;\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    container: HTMLElement | void | null | undefined;\r\n\r\n    wrapper: HTMLElement | void | null | undefined;\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    constructor(\r\n        @Inject(DOCUMENT) private _document: Document,\r\n        private _changeDetectorRef: ChangeDetectorRef,\r\n        public el: ElementRef\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    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible) {\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview) {\r\n            this.maskVisible = true;\r\n            this.previewVisible = true;\r\n\r\n            this._changeDetectorRef.markForCheck();\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                setTimeout(() => {\r\n                    this.previewButton?.nativeElement && document.activeElement !== this.previewButton?.nativeElement && this.previewButton?.nativeElement.focus();\r\n                }, 25);\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    onAnimationStart(event: AnimationEvent): void {\r\n        switch (event.toState) {\r\n            case 'visible':\r\n                this.container = event.element;\r\n                this.wrapper = this.container?.parentElement;\r\n                this.appendContainer();\r\n\r\n                setTimeout(() => {\r\n                    this.closeButton?.nativeElement && document.activeElement !== this.closeButton?.nativeElement && this.closeButton?.nativeElement.focus();\r\n                }, 25);\r\n                break;\r\n\r\n            case 'void':\r\n                if (this.wrapper) {\r\n                    if (this.wrapper.classList) this.wrapper.classList.add('image-overlay-leave');\r\n                    else this.wrapper.className += ' image-overlay-leave ';\r\n                }\r\n                break;\r\n        }\r\n    }\r\n\r\n    onAnimationEnd(event: AnimationEvent): void {\r\n        switch (event.toState) {\r\n            case 'void':\r\n                if (this.wrapper) {\r\n                    this.wrapper.style.zIndex = '';\r\n                }\r\n\r\n                this.maskVisible = false;\r\n                this.container = null;\r\n                this.wrapper = null;\r\n                this._changeDetectorRef.markForCheck();\r\n                this.previewShowChange.emit(false);\r\n\r\n                break;\r\n            case 'visible':\r\n                this.previewShowChange.emit(true);\r\n                break;\r\n        }\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.wrapper 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.wrapper);\r\n                else if ((this.appendTo as any)?.el?.nativeElement)\r\n                    (this.appendTo as any).el.nativeElement.appendChild(this.wrapper);\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.previewVisible = false;\r\n        this.rotate = 0;\r\n        this.scale = this._zoomSettings.default;\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\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 mat-icon-button>\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 image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n        (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button mat-icon-button (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [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 mat-icon-button (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\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\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":";;;;;;;;;;MAoCa,kBAAkB,CAAA;AAuE3B,IAAA,WAAA,CAC8B,SAAmB,EACrC,kBAAqC,EACtC,EAAc,EAAA;QAFK,IAAS,CAAA,SAAA,GAAT,SAAS;QAC3B,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB;QACnB,IAAE,CAAA,EAAA,GAAF,EAAE;AAjDb;;AAEG;QACqC,IAAO,CAAA,OAAA,GAAY,KAAK;AAChE;;AAEG;QACM,IAAqB,CAAA,qBAAA,GAAW,kCAAkC;AAC3E;;AAEG;QACM,IAAqB,CAAA,qBAAA,GAAW,kCAAkC;AAC3E;;AAEG;AACO,QAAA,IAAA,CAAA,iBAAiB,GAA0B,IAAI,YAAY,EAAW;AAChF;;AAEG;AACO,QAAA,IAAA,CAAA,eAAe,GAAwB,IAAI,YAAY,EAAS;QAQ1E,IAAW,CAAA,WAAA,GAAY,KAAK;QAE5B,IAAc,CAAA,cAAA,GAAY,KAAK;QAE/B,IAAM,CAAA,MAAA,GAAW,CAAC;QAElB,IAAK,CAAA,KAAA,GAAW,CAAC;AAMT,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;;AAQD,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG;;AAGzE,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG;;IAIzE,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,YAAY,EAAE;;;IAI3B,YAAY,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAE1B,YAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;;;AAI9C,IAAA,aAAa,CAAC,KAAoB,EAAA;AAC9B,QAAA,QAAQ,KAAK,CAAC,IAAI;AACd,YAAA,KAAK,QAAQ;gBACT,IAAI,CAAC,YAAY,EAAE;gBACnB,UAAU,CAAC,MAAK;oBACZ,IAAI,CAAC,aAAa,EAAE,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,EAAE,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,KAAK,EAAE;iBACjJ,EAAE,EAAE,CAAC;gBACN,KAAK,CAAC,cAAc,EAAE;gBACtB;AAEJ,YAAA;gBACI;;;AAIZ,IAAA,mBAAmB,CAAC,KAAgB,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;;IAG3B,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE;;IAGrB,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE;;IAGrB,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI;;IAGrD,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI;;AAGrD,IAAA,gBAAgB,CAAC,KAAqB,EAAA;AAClC,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,SAAS;AACV,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO;gBAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa;gBAC5C,IAAI,CAAC,eAAe,EAAE;gBAEtB,UAAU,CAAC,MAAK;oBACZ,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,KAAK,EAAE;iBAC3I,EAAE,EAAE,CAAC;gBACN;AAEJ,YAAA,KAAK,MAAM;AACP,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,oBAAA,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS;wBAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC;;AACxE,wBAAA,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,uBAAuB;;gBAE1D;;;AAIZ,IAAA,cAAc,CAAC,KAAqB,EAAA;AAChC,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,MAAM;AACP,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;oBACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;;AAGlC,gBAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,gBAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;AACtC,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;gBAElC;AACJ,YAAA,KAAK,SAAS;AACV,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;gBACjC;;;AAIZ,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;;IAG3B,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,OAAsB,CAAC;iBACrF;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,OAAO,CAAC;AAC/C,qBAAA,IAAK,IAAI,CAAC,QAAgB,EAAE,EAAE,EAAE,aAAa;AAC7C,oBAAA,IAAI,CAAC,QAAgB,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;;;IAKjF,iBAAiB,GAAA;AACb,QAAA,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE;;IAGpF,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO;;AAG3C,IAAA,UAAU,CAAC,KAAY,EAAA;AACnB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;;AA5M3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,kBAwEf,QAAQ,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAxEX,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,EA4BP,gBAAgB,CAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,uBAAA,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,EChExC,mmFA2CO,EAAA,MAAA,EAAA,CAAA,+wCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXO,YAAY,EAAE,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,EAAA,eAAe,EAAE,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,EAAA,aAAa,EAN1C,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,UAAA,EAAA;YACR,OAAO,CAAC,WAAW,EAAE;gBACjB,UAAU,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;gBACpH,UAAU,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;aACtH;AACJ,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAKQ,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAd9B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAGV,UAAA,EAAA;wBACR,OAAO,CAAC,WAAW,EAAE;4BACjB,UAAU,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;4BACpH,UAAU,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;yBACtH;AACJ,qBAAA,EAAA,OAAA,EACQ,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,CAAC,EACtC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,mmFAAA,EAAA,MAAA,EAAA,CAAA,+wCAAA,CAAA,EAAA;;0BA0EhC,MAAM;2BAAC,QAAQ;kGAtEX,UAAU,EAAA,CAAA;sBAAlB;gBAEQ,UAAU,EAAA,CAAA;sBAAlB;gBAEQ,GAAG,EAAA,CAAA;sBAAX;gBAEQ,MAAM,EAAA,CAAA;sBAAd;gBAEQ,eAAe,EAAA,CAAA;sBAAvB;gBAEQ,kBAAkB,EAAA,CAAA;sBAA1B;gBAEQ,GAAG,EAAA,CAAA;sBAAX;gBAEQ,KAAK,EAAA,CAAA;sBAAb;gBAEQ,MAAM,EAAA,CAAA;sBAAd;gBAEQ,OAAO,EAAA,CAAA;sBAAf;gBAIQ,QAAQ,EAAA,CAAA;sBAAhB;gBAIuC,OAAO,EAAA,CAAA;sBAA9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAI7B,qBAAqB,EAAA,CAAA;sBAA7B;gBAIQ,qBAAqB,EAAA,CAAA;sBAA7B;gBAIS,iBAAiB,EAAA,CAAA;sBAA1B;gBAIS,eAAe,EAAA,CAAA;sBAAxB;gBAEkB,IAAI,EAAA,CAAA;sBAAtB,SAAS;uBAAC,MAAM;gBAEW,aAAa,EAAA,CAAA;sBAAxC,SAAS;uBAAC,eAAe;gBAEA,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa;gBAoCxB,gBAAgB,EAAA,CAAA;sBADf,YAAY;uBAAC,yBAAyB,EAAE,CAAC,QAAQ,CAAC;;;AEzHvD;;AAEG;;;;"}
+{"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 { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, DOCUMENT, inject } 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    animations: [\r\n        trigger('animation', [\r\n            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\r\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\r\n        ])\r\n    ],\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: string | SafeUrl | undefined;\r\n\r\n    @Input() srcSet: string | SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrc: string | SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrcSet: string | 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    @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\r\n    /**\r\n     * 切换时隐藏动画\r\n     */\r\n    @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\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    @ViewChild('mask') mask: ElementRef | undefined;\r\n\r\n    @ViewChild('previewButton') previewButton: ElementRef | undefined;\r\n\r\n    @ViewChild('closeButton') closeButton: ElementRef | undefined;\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    container: HTMLElement | void | null | undefined;\r\n\r\n    wrapper: HTMLElement | void | null | undefined;\r\n\r\n    private _document = inject<Document>(DOCUMENT);\r\n    private _changeDetectorRef = inject(ChangeDetectorRef);\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    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    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible) {\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview) {\r\n            this.maskVisible = true;\r\n            this.previewVisible = true;\r\n\r\n            this._changeDetectorRef.markForCheck();\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                setTimeout(() => {\r\n                    this.previewButton?.nativeElement && document.activeElement !== this.previewButton?.nativeElement && this.previewButton?.nativeElement.focus();\r\n                }, 25);\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    onAnimationStart(event: AnimationEvent): void {\r\n        switch (event.toState) {\r\n            case 'visible':\r\n                this.container = event.element;\r\n                this.wrapper = this.container?.parentElement;\r\n                this.appendContainer();\r\n\r\n                setTimeout(() => {\r\n                    this.closeButton?.nativeElement && document.activeElement !== this.closeButton?.nativeElement && this.closeButton?.nativeElement.focus();\r\n                }, 25);\r\n                break;\r\n\r\n            case 'void':\r\n                if (this.wrapper) {\r\n                    if (this.wrapper.classList) this.wrapper.classList.add('image-overlay-leave');\r\n                    else this.wrapper.className += ' image-overlay-leave ';\r\n                }\r\n                break;\r\n        }\r\n    }\r\n\r\n    onAnimationEnd(event: AnimationEvent): void {\r\n        switch (event.toState) {\r\n            case 'void':\r\n                if (this.wrapper) {\r\n                    this.wrapper.style.zIndex = '';\r\n                }\r\n\r\n                this.maskVisible = false;\r\n                this.container = null;\r\n                this.wrapper = null;\r\n                this._changeDetectorRef.markForCheck();\r\n                this.previewShowChange.emit(false);\r\n\r\n                break;\r\n            case 'visible':\r\n                this.previewShowChange.emit(true);\r\n                break;\r\n        }\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.wrapper 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.wrapper);\r\n                else if ((this.appendTo as any)?.el?.nativeElement)\r\n                    (this.appendTo as any).el.nativeElement.appendChild(this.wrapper);\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.previewVisible = false;\r\n        this.rotate = 0;\r\n        this.scale = this._zoomSettings.default;\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\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 mat-icon-button>\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 image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n        (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button mat-icon-button (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button mat-icon-button [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 mat-icon-button (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\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\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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"}

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

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ChangeDetectorRef, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { createJSONEditor, createAjvValidator, parseJSONPath, createMultiSelection, isJSONContent, isKeySelection, stringifyJSONPath, isMultiSelection } from 'vanilla-jsoneditor';
 
 class CmatJsonEditorComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
         this.contentChanged = new EventEmitter();
         this.pathChanged = new EventEmitter();
         this.id = 'cmatjsoneditor' + Math.floor(Math.random() * 1000000);
@@ -12,6 +11,7 @@ class CmatJsonEditorComponent {
             text: undefined,
             json: {}
         };
+        this._changeDetectorRef = inject(ChangeDetectorRef);
     }
     ngOnInit() {
         if (!this.jsonEditorContainer.nativeElement) {
@@ -156,13 +156,13 @@ class CmatJsonEditorComponent {
             this.pathChanged.emit(st);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatJsonEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', isInline: true, 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: "20.0.2", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', isInline: true, 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: "20.0.0", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-json-editor', template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { jsonEditorContainer: [{
+        }], propDecorators: { jsonEditorContainer: [{
                 type: ViewChild,
                 args: ['jsonEditorContainer', { static: true }]
             }], options: [{

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-json-editor.mjs","sources":["../../../projects/cmat/components/json-editor/json-editor.component.ts","../../../projects/cmat/components/json-editor/cmat-components-json-editor.ts"],"sourcesContent":["import {\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    OnInit,\r\n    OnDestroy,\r\n    ViewChild,\r\n    Output,\r\n    EventEmitter,\r\n    ChangeDetectionStrategy,\r\n    ViewEncapsulation,\r\n    OnChanges,\r\n    SimpleChanges,\r\n    ChangeDetectorRef,\r\n} from '@angular/core';\r\nimport {\r\n    stringifyJSONPath,\r\n    Content,\r\n    MenuItem,\r\n    createAjvValidator,\r\n    parseJSONPath,\r\n    JSONEditorSelection,\r\n    isKeySelection,\r\n    isJSONContent,\r\n    JSONContent,\r\n    isMultiSelection,\r\n    createMultiSelection,\r\n    MenuButton,\r\n    TextContent,\r\n    createJSONEditor,\r\n    JsonEditor,\r\n} from 'vanilla-jsoneditor';\r\n\r\n@Component({\r\n    selector: 'cmat-json-editor',\r\n    template: '<div class=\"cmat-jsoneditor\" [id]=\"id\" #jsonEditorContainer></div>',\r\n    preserveWhitespaces: false,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    styleUrls: ['./json-editor.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    imports: []\r\n})\r\nexport class CmatJsonEditorComponent implements OnInit, OnChanges, OnDestroy {\r\n    @ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer!: ElementRef;\r\n    @Input() options: any;\r\n    @Input() data: any;\r\n\r\n    @Output() contentChanged: EventEmitter<any> = new EventEmitter<any>();\r\n    @Output() pathChanged: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n    public id = 'cmatjsoneditor' + Math.floor(Math.random() * 1000000);\r\n    content: Content = {\r\n        text: undefined,\r\n        json: {}\r\n    };\r\n\r\n    private _editor: JsonEditor;\r\n\r\n    constructor(private _changeDetectorRef: ChangeDetectorRef) { }\r\n\r\n    ngOnInit(): void {\r\n        if (!this.jsonEditorContainer.nativeElement) {\r\n            console.error('Can\\'t find the ElementRef reference for jsoneditor)');\r\n        }\r\n        this._editor = createJSONEditor({\r\n            target: this.jsonEditorContainer.nativeElement,\r\n            props: {\r\n                ...this.options,\r\n                content: this.content,\r\n                onChange: (\r\n                    updatedContent: Content,\r\n                    previousContent: any,\r\n                    { contentErrors, patchResult }: any\r\n                ): void => {\r\n                    console.log('onChange', {\r\n                        updatedContent,\r\n                        previousContent,\r\n                        contentErrors,\r\n                        patchResult,\r\n                    });\r\n                    this.content = updatedContent;\r\n                    this.contentChanged.emit(updatedContent);\r\n                },\r\n                onSelect: this._onSelect.bind(this),\r\n                onRenderMenu(\r\n                    items: MenuItem[],\r\n                    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n                    context: { mode: 'tree' | 'text' | 'table'; modal: boolean }\r\n                ): MenuItem[] | undefined {\r\n                    // remove buttons for table-mode, transform, sort\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['text'] === 'table'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['className'] === 'jse-sort'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['className'] === 'jse-transform'),\r\n                        1\r\n                    );\r\n\r\n                    items.forEach((item) => {\r\n                        const button = item as MenuButton;\r\n                        switch (button['title']) {\r\n                            case 'Switch to text mode (current mode: text)':\r\n                                button.text = '文本';\r\n                                button.title = '切换到文本模式(当前模式:文本)';\r\n                                break;\r\n                            case 'Switch to tree mode (current mode: text)':\r\n                                button.text = '树';\r\n                                button.title = '切换到树模式(当前模式:文本)';\r\n                                break;\r\n                            case 'Switch to text mode (current mode: tree)':\r\n                                button.text = '文本';\r\n                                button.title = '切换到文本模式(当前模式:树)';\r\n                                break;\r\n                            case 'Switch to tree mode (current mode: tree)':\r\n                                button.text = '树';\r\n                                button.title = '切换到树模式(当前模式:树)';\r\n                                break;\r\n                            case 'Format JSON: add proper indentation and new lines (Ctrl+I)':\r\n                                button.title = 'JSON格式化: 添加适当的缩进和新行 (Ctrl+I)';\r\n                                break;\r\n                            case 'Compact JSON: remove all white spacing and new lines (Ctrl+Shift+I)':\r\n                                button.title = '压缩JSON: 删除所有白色间距和新行 (Ctrl+Shift+I)';\r\n                                break;\r\n                            case 'Search (Ctrl+F)':\r\n                                button.title = '搜索 (Ctrl+F)';\r\n                                break;\r\n                            case 'Undo (Ctrl+Z)':\r\n                                button.title = '撤回 (Ctrl+Z)';\r\n                                break;\r\n                            case 'Redo (Ctrl+Shift+Z)':\r\n                                button.title = '重试 (Ctrl+Shift+Z)';\r\n                                break;\r\n                            case 'Expand all':\r\n                                button.title = '全部展开';\r\n                                break;\r\n                            case 'Collapse all':\r\n                                button.title = '全部折叠';\r\n                                break;\r\n                            case 'Open context menu (Click here, right click on the selection, or use the context menu button or Ctrl+Q)':\r\n                                button.title = '打开内容菜单 (单击此处，右键单击所选内容，或使用内容菜单按钮或 Ctrl+Q)';\r\n                                break;\r\n                        }\r\n                    });\r\n                    return items;\r\n                },\r\n            },\r\n        });\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes.data) {\r\n            this.content = {\r\n                text: undefined,\r\n                json: this.data\r\n            };\r\n\r\n            if (this._editor) {\r\n                void this._editor.update(this.content);\r\n            }\r\n\r\n            this._changeDetectorRef.markForCheck();\r\n        }\r\n\r\n        if(changes.options){\r\n            if(this._editor){\r\n                void this._editor?.updateProps(this.options);\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        void this._editor?.destroy();\r\n    }\r\n\r\n    setSchema(schema: any): void {\r\n        const validator = createAjvValidator({ schema });\r\n        void this._editor?.updateProps({ validator: validator });\r\n    }\r\n\r\n    setSelectionToPath(pathString: string): void {\r\n        const path = parseJSONPath(pathString);\r\n        const selection = createMultiSelection(path, path);\r\n\r\n        try {\r\n            void this._editor?.select(selection);\r\n        } catch (error) {\r\n            console.warn('Set selection to path not possible:', pathString, error);\r\n        }\r\n        this.pathChanged.emit(pathString);\r\n    }\r\n\r\n    get(): JSON | undefined {\r\n        if (this._editor) {\r\n            const content: Content = this._editor.get();\r\n            if (isJSONContent(content)) {\r\n                const j: any = (this._editor.get() as JSONContent).json;\r\n                return j;\r\n            } else {\r\n                const t: any = (this._editor.get() as TextContent).text;\r\n                const j: JSON = JSON.parse(t);\r\n                return j;\r\n            }\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    set(json: any): void {\r\n        const value: JSONContent = {\r\n            json: json,\r\n        };\r\n\r\n        void this._editor?.set(value);\r\n    }\r\n\r\n    private _onSelect(selection: JSONEditorSelection | undefined): void {\r\n        if (isKeySelection(selection)) {\r\n            const st = stringifyJSONPath((selection as any).path);\r\n            this.pathChanged.emit(st);\r\n        } else if (isMultiSelection(selection)) {\r\n            const st = stringifyJSONPath((selection as any).anchorPath);\r\n            this.pathChanged.emit(st);\r\n        }\r\n    }\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-json-editor.mjs","sources":["../../../projects/cmat/components/json-editor/json-editor.component.ts","../../../projects/cmat/components/json-editor/cmat-components-json-editor.ts"],"sourcesContent":["import { Component, ElementRef, Input, OnInit, OnDestroy, ViewChild, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, OnChanges, SimpleChanges, ChangeDetectorRef, inject } from '@angular/core';\r\nimport {\r\n    stringifyJSONPath,\r\n    Content,\r\n    MenuItem,\r\n    createAjvValidator,\r\n    parseJSONPath,\r\n    JSONEditorSelection,\r\n    isKeySelection,\r\n    isJSONContent,\r\n    JSONContent,\r\n    isMultiSelection,\r\n    createMultiSelection,\r\n    MenuButton,\r\n    TextContent,\r\n    createJSONEditor,\r\n    JsonEditor,\r\n} from 'vanilla-jsoneditor';\r\n\r\n@Component({\r\n    selector: 'cmat-json-editor',\r\n    template: '<div class=\"cmat-jsoneditor\" [id]=\"id\" #jsonEditorContainer></div>',\r\n    preserveWhitespaces: false,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    styleUrls: ['./json-editor.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    imports: []\r\n})\r\nexport class CmatJsonEditorComponent implements OnInit, OnChanges, OnDestroy {\r\n    @ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer!: ElementRef;\r\n    @Input() options: any;\r\n    @Input() data: any;\r\n\r\n    @Output() contentChanged: EventEmitter<any> = new EventEmitter<any>();\r\n    @Output() pathChanged: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n    public id = 'cmatjsoneditor' + Math.floor(Math.random() * 1000000);\r\n    content: Content = {\r\n        text: undefined,\r\n        json: {}\r\n    };\r\n\r\n    private _editor: JsonEditor;\r\n    private _changeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n    ngOnInit(): void {\r\n        if (!this.jsonEditorContainer.nativeElement) {\r\n            console.error('Can\\'t find the ElementRef reference for jsoneditor)');\r\n        }\r\n        this._editor = createJSONEditor({\r\n            target: this.jsonEditorContainer.nativeElement,\r\n            props: {\r\n                ...this.options,\r\n                content: this.content,\r\n                onChange: (\r\n                    updatedContent: Content,\r\n                    previousContent: any,\r\n                    { contentErrors, patchResult }: any\r\n                ): void => {\r\n                    console.log('onChange', {\r\n                        updatedContent,\r\n                        previousContent,\r\n                        contentErrors,\r\n                        patchResult,\r\n                    });\r\n                    this.content = updatedContent;\r\n                    this.contentChanged.emit(updatedContent);\r\n                },\r\n                onSelect: this._onSelect.bind(this),\r\n                onRenderMenu(\r\n                    items: MenuItem[],\r\n                    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n                    context: { mode: 'tree' | 'text' | 'table'; modal: boolean }\r\n                ): MenuItem[] | undefined {\r\n                    // remove buttons for table-mode, transform, sort\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['text'] === 'table'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['className'] === 'jse-sort'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex(i => (i as MenuButton)['className'] === 'jse-transform'),\r\n                        1\r\n                    );\r\n\r\n                    items.forEach((item) => {\r\n                        const button = item as MenuButton;\r\n                        switch (button['title']) {\r\n                            case 'Switch to text mode (current mode: text)':\r\n                                button.text = '文本';\r\n                                button.title = '切换到文本模式(当前模式:文本)';\r\n                                break;\r\n                            case 'Switch to tree mode (current mode: text)':\r\n                                button.text = '树';\r\n                                button.title = '切换到树模式(当前模式:文本)';\r\n                                break;\r\n                            case 'Switch to text mode (current mode: tree)':\r\n                                button.text = '文本';\r\n                                button.title = '切换到文本模式(当前模式:树)';\r\n                                break;\r\n                            case 'Switch to tree mode (current mode: tree)':\r\n                                button.text = '树';\r\n                                button.title = '切换到树模式(当前模式:树)';\r\n                                break;\r\n                            case 'Format JSON: add proper indentation and new lines (Ctrl+I)':\r\n                                button.title = 'JSON格式化: 添加适当的缩进和新行 (Ctrl+I)';\r\n                                break;\r\n                            case 'Compact JSON: remove all white spacing and new lines (Ctrl+Shift+I)':\r\n                                button.title = '压缩JSON: 删除所有白色间距和新行 (Ctrl+Shift+I)';\r\n                                break;\r\n                            case 'Search (Ctrl+F)':\r\n                                button.title = '搜索 (Ctrl+F)';\r\n                                break;\r\n                            case 'Undo (Ctrl+Z)':\r\n                                button.title = '撤回 (Ctrl+Z)';\r\n                                break;\r\n                            case 'Redo (Ctrl+Shift+Z)':\r\n                                button.title = '重试 (Ctrl+Shift+Z)';\r\n                                break;\r\n                            case 'Expand all':\r\n                                button.title = '全部展开';\r\n                                break;\r\n                            case 'Collapse all':\r\n                                button.title = '全部折叠';\r\n                                break;\r\n                            case 'Open context menu (Click here, right click on the selection, or use the context menu button or Ctrl+Q)':\r\n                                button.title = '打开内容菜单 (单击此处，右键单击所选内容，或使用内容菜单按钮或 Ctrl+Q)';\r\n                                break;\r\n                        }\r\n                    });\r\n                    return items;\r\n                },\r\n            },\r\n        });\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes.data) {\r\n            this.content = {\r\n                text: undefined,\r\n                json: this.data\r\n            };\r\n\r\n            if (this._editor) {\r\n                void this._editor.update(this.content);\r\n            }\r\n\r\n            this._changeDetectorRef.markForCheck();\r\n        }\r\n\r\n        if (changes.options) {\r\n            if (this._editor) {\r\n                void this._editor?.updateProps(this.options);\r\n            }\r\n        }\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        void this._editor?.destroy();\r\n    }\r\n\r\n    setSchema(schema: any): void {\r\n        const validator = createAjvValidator({ schema });\r\n        void this._editor?.updateProps({ validator: validator });\r\n    }\r\n\r\n    setSelectionToPath(pathString: string): void {\r\n        const path = parseJSONPath(pathString);\r\n        const selection = createMultiSelection(path, path);\r\n\r\n        try {\r\n            void this._editor?.select(selection);\r\n        } catch (error) {\r\n            console.warn('Set selection to path not possible:', pathString, error);\r\n        }\r\n        this.pathChanged.emit(pathString);\r\n    }\r\n\r\n    get(): JSON | undefined {\r\n        if (this._editor) {\r\n            const content: Content = this._editor.get();\r\n            if (isJSONContent(content)) {\r\n                const j: any = (this._editor.get() as JSONContent).json;\r\n                return j;\r\n            } else {\r\n                const t: any = (this._editor.get() as TextContent).text;\r\n                const j: JSON = JSON.parse(t);\r\n                return j;\r\n            }\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    set(json: any): void {\r\n        const value: JSONContent = {\r\n            json: json,\r\n        };\r\n\r\n        void this._editor?.set(value);\r\n    }\r\n\r\n    private _onSelect(selection: JSONEditorSelection | undefined): void {\r\n        if (isKeySelection(selection)) {\r\n            const st = stringifyJSONPath((selection as any).path);\r\n            this.pathChanged.emit(st);\r\n        } else if (isMultiSelection(selection)) {\r\n            const st = stringifyJSONPath((selection as any).anchorPath);\r\n            this.pathChanged.emit(st);\r\n        }\r\n    }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,21 +1,16 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, DOCUMENT, HostListener, Input, Output, HostBinding, ViewChild, Optional, Self, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { EventEmitter, inject, DOCUMENT, Renderer2, ChangeDetectorRef, ElementRef, HostListener, Input, Output, HostBinding, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { isNil } from 'lodash-es';
 import { Subject } from 'rxjs';
-import * as i1 from '@angular/forms';
 
 /* eslint-disable @typescript-eslint/member-ordering */
 let NEXT_ID = 0;
 class CmatKnobInputComponent {
-    constructor(ngControl, _document, _renderer, _changeDetectorRef, _el) {
-        this.ngControl = ngControl;
-        this._document = _document;
-        this._renderer = _renderer;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._el = _el;
+    constructor() {
         this.id = `cmat-knob-input-${NEXT_ID++}`;
         this.valueColor = 'var(--cmat-primary)';
         this.rangeColor = 'var(--cmat-border)';
@@ -36,6 +31,11 @@ class CmatKnobInputComponent {
         this.stateChanges = new Subject();
         this.focused = false;
         this.touched = false;
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this._document = inject(DOCUMENT);
+        this._renderer = inject(Renderer2);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._el = inject(ElementRef);
         this._placeholder = '';
         this._required = false;
         this._disabled = false;
@@ -322,24 +322,17 @@ class CmatKnobInputComponent {
     valueToDisplay() {
         return this.valueTemplate.replace('{value}', this.value.toString());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatKnobInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
             { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
         ], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-knob-input', providers: [
                         { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
                     ], exportAs: 'cmatKnobInput', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _knobElementRef: [{
+        }], ctorParameters: () => [], propDecorators: { _knobElementRef: [{
                 type: ViewChild,
                 args: ['knob', { static: false }]
             }], id: [{