cmat 0.0.81 → 0.0.83

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

@@ -17,8 +17,10 @@ class CmatImageComponent {
         this.previewVisible = signal(false, ...(ngDevMode ? [{ debugName: "previewVisible" }] : /* istanbul ignore next */ []));
         this.rotate = 0;
         this.scale = 1;
+        this._animationDuration = 150;
         this._loadingPreview = false;
         this._closePreviewByEscape = false;
+        this._closePreviewTimeoutId = null;
         this._document = inject(DOCUMENT);
         this._originalOverflow = null;
         this._zoomSettings = {
@@ -73,9 +75,11 @@ class CmatImageComponent {
         if (this.preview) {
             this._disableBackgroundScroll();
             this.maskVisible.set(true);
-            this.previewVisible.set(true);
             this._loadingPreview = true;
-            this.previewShowChange.emit(true);
+            requestAnimationFrame(() => {
+                this.previewVisible.set(true);
+                this.previewShowChange.emit(true);
+            });
         }
     }
     onMaskKeydown(event) {
@@ -112,10 +116,19 @@ class CmatImageComponent {
             if (this.appendTo === 'body')
                 this._document.body.appendChild(this._mask);
             else {
-                if (typeof HTMLElement === 'object' ? this.appendTo instanceof HTMLElement : this.appendTo && typeof this.appendTo === 'object' && this.appendTo !== null)
+                if (this.appendTo instanceof HTMLElement) {
                     this.appendTo.appendChild(this._mask);
-                else if (this.appendTo?.el?.nativeElement)
-                    this.appendTo.el.nativeElement.appendChild(this.mask?.nativeElement);
+                }
+                else if (this.appendTo instanceof ElementRef) {
+                    this.appendTo.nativeElement.appendChild(this._mask);
+                }
+                else if (typeof this.appendTo === 'object' && this.appendTo !== null && 'el' in this.appendTo) {
+                    const target = this.appendTo;
+                    const nativeElement = target.el?.nativeElement;
+                    if (nativeElement) {
+                        nativeElement.appendChild(this._mask);
+                    }
+                }
             }
         }
     }
@@ -123,14 +136,19 @@ class CmatImageComponent {
         return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
     }
     closePreview() {
+        if (this._closePreviewTimeoutId !== null) {
+            clearTimeout(this._closePreviewTimeoutId);
+            this._closePreviewTimeoutId = null;
+        }
         this._enableBackgroundScroll();
         this.previewVisible.set(false);
-        this.rotate = 0;
-        this.scale = this._zoomSettings.default;
-        setTimeout(() => {
+        this._closePreviewTimeoutId = window.setTimeout(() => {
             this.maskVisible.set(false);
+            this.rotate = 0;
+            this.scale = this._zoomSettings.default;
             this.previewShowChange.emit(false);
-        }, 25);
+            this._closePreviewTimeoutId = null;
+        }, this._animationDuration);
     }
     imageError(event) {
         this.imageErrorEvent.emit(event);
@@ -145,11 +163,11 @@ class CmatImageComponent {
         body.style.overflow = this._originalOverflow ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-image', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"] }]
+            args: [{ selector: 'cmat-image', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"] }]
         }], propDecorators: { imageClass: [{
                 type: Input
             }], imageStyle: [{

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

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-image-viewer.mjs","sources":["../../../projects/cmat/components/image-viewer/image-viewer.component.ts","../../../projects/cmat/components/image-viewer/image-viewer.component.html","../../../projects/cmat/components/image-viewer/cmat-components-image-viewer.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Input,\r\n    Output,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n    booleanAttribute,\r\n    DOCUMENT,\r\n    inject,\r\n    HostListener,\r\n    signal,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SafeUrl } from '@angular/platform-browser';\r\n\r\n@Component({\r\n    selector: 'cmat-image',\r\n    templateUrl: './image-viewer.component.html',\r\n    styleUrls: ['./image-viewer.component.scss'],\r\n    imports: [CommonModule, MatButtonModule, MatIconModule],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None\r\n})\r\nexport class CmatImageComponent {\r\n\r\n    @Input() imageClass: string | undefined;\r\n\r\n    @Input() imageStyle: Record<string, any> | null | undefined;\r\n\r\n    @Input() src: SafeUrl | undefined;\r\n\r\n    @Input() srcSet: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrc: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrcSet: SafeUrl | undefined;\r\n\r\n    @Input() alt: string | undefined;\r\n\r\n    @Input() width: number | undefined;\r\n\r\n    @Input() height: number | undefined;\r\n\r\n    @Input() loading: 'lazy' | 'eager' | undefined;\r\n    \r\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined;\r\n    \r\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\r\n    \r\n    @Output() previewShowChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n    \r\n    @Output() imageErrorEvent: EventEmitter<Event> = new EventEmitter<Event>();\r\n\r\n    el = inject(ElementRef);\r\n\r\n    readonly maskVisible = signal(false);\r\n\r\n    readonly previewVisible = signal(false);\r\n\r\n    rotate: number = 0;\r\n\r\n    scale: number = 1;\r\n\r\n    private _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\r\n    private _document = inject<Document>(DOCUMENT);\r\n    private _originalOverflow: string | null = null;\r\n\r\n    private _zoomSettings = {\r\n        default: 1,\r\n        step: 0.1,\r\n        max: 1.5,\r\n        min: 0.5\r\n    };\r\n\r\n    get isZoomOutDisabled(): boolean {\r\n        return this.scale - this._zoomSettings.step <= this._zoomSettings.min;\r\n    }\r\n\r\n    get isZoomInDisabled(): boolean {\r\n        return this.scale + this._zoomSettings.step >= this._zoomSettings.max;\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _mask?: HTMLDivElement | undefined;\r\n    @ViewChild('mask', { static: false })\r\n    set mask(value: ElementRef<HTMLDivElement> | undefined) {\r\n        if (value) {\r\n            this._mask = value.nativeElement;\r\n\r\n            if (this._mask && this._loadingPreview) {\r\n                this.appendContainer();\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _previewButton?: HTMLButtonElement | undefined;\r\n    @ViewChild('previewButton', { static: false })\r\n    set previewButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._previewButton = value.nativeElement;\r\n\r\n            if (this._previewButton && this._closePreviewByEscape) {\r\n                this._previewButton.focus();\r\n                this._closePreviewByEscape = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _closeButton?: HTMLButtonElement | undefined;\r\n    @ViewChild('closeButton', { static: false })\r\n    set closeButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._closeButton = value.nativeElement;\r\n\r\n            if (this._closeButton && this._loadingPreview) {\r\n                this._closeButton.focus();\r\n                this._loadingPreview = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible()) {\r\n            this._enableBackgroundScroll();\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview) {\r\n            this._disableBackgroundScroll();\r\n            this.maskVisible.set(true);\r\n            this.previewVisible.set(true);\r\n\r\n            this._loadingPreview = true;\r\n\r\n            this.previewShowChange.emit(true);\r\n        }\r\n    }\r\n\r\n    onMaskKeydown(event: KeyboardEvent): void {\r\n        switch (event.code) {\r\n            case 'Escape':\r\n                this.closePreview();\r\n                this._closePreviewByEscape = true;\r\n                event.preventDefault();\r\n                break;\r\n\r\n            default:\r\n                break;\r\n        }\r\n    }\r\n\r\n    onPreviewImageClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    rotateRight(): void {\r\n        this.rotate += 90;\r\n    }\r\n\r\n    rotateLeft(): void {\r\n        this.rotate -= 90;\r\n    }\r\n\r\n    zoomIn(): void {\r\n        this.scale = this.scale + this._zoomSettings.step;\r\n    }\r\n\r\n    zoomOut(): void {\r\n        this.scale = this.scale - this._zoomSettings.step;\r\n    }\r\n\r\n    handleToolbarClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    appendContainer(): void {\r\n        if (this.appendTo) {\r\n            if (this.appendTo === 'body') this._document.body.appendChild(this._mask as HTMLElement);\r\n            else {\r\n                if (typeof HTMLElement === 'object' ? this.appendTo instanceof HTMLElement : this.appendTo && typeof this.appendTo === 'object' && this.appendTo !== null)\r\n                    (this.appendTo as any).appendChild(this._mask);\r\n                else if ((this.appendTo as any)?.el?.nativeElement)\r\n                    (this.appendTo as any).el.nativeElement.appendChild(this.mask?.nativeElement);\r\n            }\r\n\r\n        }\r\n    }\r\n\r\n    imagePreviewStyle(): { transform: string; } {\r\n        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };\r\n    }\r\n\r\n    closePreview(): void {\r\n        this._enableBackgroundScroll();\r\n        this.previewVisible.set(false);\r\n        this.rotate = 0;\r\n        this.scale = this._zoomSettings.default;\r\n\r\n        setTimeout(() => {\r\n            this.maskVisible.set(false);\r\n            this.previewShowChange.emit(false);\r\n        }, 25);\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\r\n    }\r\n\r\n    private _disableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        this._originalOverflow = body.style.overflow;\r\n        body.style.overflow = 'hidden';\r\n    }\r\n\r\n    private _enableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        body.style.overflow = this._originalOverflow ?? '';\r\n    }\r\n}\r\n","<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cmat-components-image-viewer.mjs","sources":["../../../projects/cmat/components/image-viewer/image-viewer.component.ts","../../../projects/cmat/components/image-viewer/image-viewer.component.html","../../../projects/cmat/components/image-viewer/cmat-components-image-viewer.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Input,\r\n    Output,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n    booleanAttribute,\r\n    DOCUMENT,\r\n    inject,\r\n    HostListener,\r\n    signal,\r\n} from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SafeUrl } from '@angular/platform-browser';\r\n\r\n@Component({\r\n    selector: 'cmat-image',\r\n    templateUrl: './image-viewer.component.html',\r\n    styleUrls: ['./image-viewer.component.scss'],\r\n    imports: [CommonModule, MatButtonModule, MatIconModule],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None\r\n})\r\nexport class CmatImageComponent {\r\n    @Input() imageClass: string | undefined;\r\n\r\n    @Input() imageStyle: Record<string, string> | null | undefined;\r\n\r\n    @Input() src: SafeUrl | undefined;\r\n\r\n    @Input() srcSet: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrc: SafeUrl | undefined;\r\n\r\n    @Input() previewImageSrcSet: SafeUrl | undefined;\r\n\r\n    @Input() alt: string | undefined;\r\n\r\n    @Input() width: number | undefined;\r\n\r\n    @Input() height: number | undefined;\r\n\r\n    @Input() loading: 'lazy' | 'eager' | undefined;\r\n    \r\n    @Input() appendTo: HTMLElement | ElementRef<HTMLElement> | TemplateRef<unknown> | string | null | undefined;\r\n    \r\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\r\n    \r\n    @Output() previewShowChange: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n    \r\n    @Output() imageErrorEvent: EventEmitter<Event> = new EventEmitter<Event>();\r\n\r\n    el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n    readonly maskVisible = signal(false);\r\n\r\n    readonly previewVisible = signal(false);\r\n\r\n    rotate: number = 0;\r\n\r\n    scale: number = 1;\r\n    \r\n    private readonly _animationDuration = 150;\r\n    private _loadingPreview: boolean = false;\r\n    private _closePreviewByEscape: boolean = false;\r\n    private _closePreviewTimeoutId: number | null = null;\r\n    private _document = inject<Document>(DOCUMENT);\r\n    private _originalOverflow: string | null = null;\r\n\r\n    private _zoomSettings = {\r\n        default: 1,\r\n        step: 0.1,\r\n        max: 1.5,\r\n        min: 0.5\r\n    };\r\n\r\n    get isZoomOutDisabled(): boolean {\r\n        return this.scale - this._zoomSettings.step <= this._zoomSettings.min;\r\n    }\r\n\r\n    get isZoomInDisabled(): boolean {\r\n        return this.scale + this._zoomSettings.step >= this._zoomSettings.max;\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _mask?: HTMLDivElement;\r\n    @ViewChild('mask', { static: false })\r\n    set mask(value: ElementRef<HTMLDivElement> | undefined) {\r\n        if (value) {\r\n            this._mask = value.nativeElement;\r\n\r\n            if (this._mask && this._loadingPreview) {\r\n                this.appendContainer();\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _previewButton?: HTMLButtonElement;\r\n    @ViewChild('previewButton', { static: false })\r\n    set previewButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._previewButton = value.nativeElement;\r\n\r\n            if (this._previewButton && this._closePreviewByEscape) {\r\n                this._previewButton.focus();\r\n                this._closePreviewByEscape = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    // eslint-disable-next-line @typescript-eslint/member-ordering\r\n    private _closeButton?: HTMLButtonElement;\r\n    @ViewChild('closeButton', { static: false })\r\n    set closeButton(value: ElementRef<HTMLButtonElement> | undefined) {\r\n        if (value) {\r\n            this._closeButton = value.nativeElement;\r\n\r\n            if (this._closeButton && this._loadingPreview) {\r\n                this._closeButton.focus();\r\n                this._loadingPreview = false;\r\n            }\r\n        }\r\n    };\r\n\r\n    @HostListener('document:keydown.escape', ['$event'])\r\n    onKeydownHandler(): void {\r\n        if (this.previewVisible()) {\r\n            this._enableBackgroundScroll();\r\n            this.closePreview();\r\n        }\r\n    }\r\n\r\n    onImageClick(): void {\r\n        if (this.preview) {\r\n            this._disableBackgroundScroll();\r\n            this.maskVisible.set(true);\r\n            this._loadingPreview = true;\r\n\r\n            requestAnimationFrame(() => {\r\n                this.previewVisible.set(true);\r\n                this.previewShowChange.emit(true);\r\n            });\r\n        }\r\n    }\r\n\r\n    onMaskKeydown(event: KeyboardEvent): void {\r\n        switch (event.code) {\r\n            case 'Escape':\r\n                this.closePreview();\r\n                this._closePreviewByEscape = true;\r\n                event.preventDefault();\r\n                break;\r\n\r\n            default:\r\n                break;\r\n        }\r\n    }\r\n\r\n    onPreviewImageClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    rotateRight(): void {\r\n        this.rotate += 90;\r\n    }\r\n\r\n    rotateLeft(): void {\r\n        this.rotate -= 90;\r\n    }\r\n\r\n    zoomIn(): void {\r\n        this.scale = this.scale + this._zoomSettings.step;\r\n    }\r\n\r\n    zoomOut(): void {\r\n        this.scale = this.scale - this._zoomSettings.step;\r\n    }\r\n\r\n    handleToolbarClick(event: MouseEvent): void {\r\n        event.stopPropagation();\r\n    }\r\n\r\n    appendContainer(): void {\r\n        if (this.appendTo) {\r\n            if (this.appendTo === 'body') this._document.body.appendChild(this._mask as HTMLElement);\r\n            else {\r\n                if (this.appendTo instanceof HTMLElement) {\r\n                    this.appendTo.appendChild(this._mask as HTMLElement);\r\n                } else if (this.appendTo instanceof ElementRef) {\r\n                    this.appendTo.nativeElement.appendChild(this._mask as HTMLElement);\r\n                } else if (typeof this.appendTo === 'object' && this.appendTo !== null && 'el' in this.appendTo) {\r\n                    const target = this.appendTo as { el?: { nativeElement?: HTMLElement } };\r\n                    const nativeElement = target.el?.nativeElement;\r\n\r\n                    if (nativeElement) {\r\n                        nativeElement.appendChild(this._mask as HTMLElement);\r\n                    }\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n\r\n    imagePreviewStyle(): { transform: string; } {\r\n        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };\r\n    }\r\n\r\n    closePreview(): void {\r\n        if (this._closePreviewTimeoutId !== null) {\r\n            clearTimeout(this._closePreviewTimeoutId);\r\n            this._closePreviewTimeoutId = null;\r\n        }\r\n\r\n        this._enableBackgroundScroll();\r\n        this.previewVisible.set(false);\r\n\r\n        this._closePreviewTimeoutId = window.setTimeout(() => {\r\n            this.maskVisible.set(false);\r\n            this.rotate = 0;\r\n            this.scale = this._zoomSettings.default;\r\n            this.previewShowChange.emit(false);\r\n            this._closePreviewTimeoutId = null;\r\n        }, this._animationDuration);\r\n    }\r\n\r\n    imageError(event: Event): void {\r\n        this.imageErrorEvent.emit(event);\r\n    }\r\n\r\n    private _disableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        this._originalOverflow = body.style.overflow;\r\n        body.style.overflow = 'hidden';\r\n    }\r\n\r\n    private _enableBackgroundScroll(): void {\r\n        const body = this._document.body;\r\n        body.style.overflow = this._originalOverflow ?? '';\r\n    }\r\n}\r\n","<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n    <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n    @if(preview){\r\n    <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n        <button #previewButton matIconButton>\r\n            <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n        </button>\r\n    </div>\r\n    }\r\n\r\n    @if(maskVisible()){\r\n    <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n        role=\"dialog\" [attr.aria-modal]=\"maskVisible()\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n        <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n            <button matIconButton (click)=\"rotateRight()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton (click)=\"rotateLeft()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n            </button>\r\n            <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n            </button>\r\n            <button #closeButton matIconButton (click)=\"closePreview()\">\r\n                <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n            </button>\r\n        </div>\r\n        @if(previewVisible()){\r\n        <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n            (click)=\"onPreviewImageClick($event)\">\r\n            <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n                [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</span>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,14 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ViewChild, HostBinding, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, inject, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { createAjvValidator, parseJSONPath, createMultiSelection, isJSONContent, isKeySelection, stringifyJSONPath, isMultiSelection, createJSONEditor } from 'vanilla-jsoneditor';
 
 class CmatJsonEditorComponent {
     constructor() {
+        this.options = {};
         this.contentChanged = new EventEmitter();
         this.pathChanged = new EventEmitter();
-        this.id = 'cmatjsoneditor' + Math.floor(Math.random() * 1000000);
+        this.id = 'cmatjsoneditor-' + crypto.randomUUID().slice(0, 8);
         this.content = {
             text: undefined,
             json: {}
@@ -15,12 +16,6 @@ class CmatJsonEditorComponent {
         this._destroyed = false;
         this._document = inject(DOCUMENT);
     }
-    get darkTheme() {
-        return this._isDarkTheme;
-    }
-    get _isDarkTheme() {
-        return this._document.documentElement.classList.contains('dark') || this._document.body.classList.contains('dark');
-    }
     set jsonEditorContainer(value) {
         this._jsonEditorContainer = value;
         this._initializeEditor();
@@ -49,7 +44,7 @@ class CmatJsonEditorComponent {
         void this._editor?.destroy();
     }
     setSchema(schema) {
-        const validator = createAjvValidator({ schema });
+        const validator = createAjvValidator({ schema: schema });
         void this._editor?.updateProps({ validator: validator });
     }
     setSelectionToPath(pathString) {
@@ -67,11 +62,12 @@ class CmatJsonEditorComponent {
         if (this._editor) {
             const content = this._editor.get();
             if (isJSONContent(content)) {
-                const j = this._editor.get().json;
+                const j = content.json;
                 return j;
             }
             else {
-                const t = this._editor.get().text;
+                const textContent = content;
+                const t = String(textContent.text ?? '');
                 const j = JSON.parse(t);
                 return j;
             }
@@ -101,13 +97,10 @@ class CmatJsonEditorComponent {
             props: {
                 ...this.options,
                 content: this.content,
-                onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
-                    console.log('onChange', {
-                        updatedContent,
-                        previousContent,
-                        contentErrors,
-                        patchResult,
-                    });
+                onChange: (updatedContent, _previousContent, { contentErrors }) => {
+                    if (contentErrors) {
+                        console.error('JSON Editor content errors:', contentErrors);
+                    }
                     this.content = updatedContent;
                     this.contentChanged.emit(updatedContent);
                 },
@@ -115,9 +108,9 @@ class CmatJsonEditorComponent {
                 onRenderMenu(items, 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 context) {
-                    items.splice(items.findIndex(i => i['text'] === 'table'), 1);
-                    items.splice(items.findIndex(i => i['className'] === 'jse-sort'), 1);
-                    items.splice(items.findIndex(i => i['className'] === 'jse-transform'), 1);
+                    items.splice(items.findIndex((i) => i['text'] === 'table'), 1);
+                    items.splice(items.findIndex((i) => i['className'] === 'jse-sort'), 1);
+                    items.splice(items.findIndex((i) => i['className'] === 'jse-transform'), 1);
                     items.forEach((item) => {
                         const button = item;
                         switch (button['title']) {
@@ -169,11 +162,11 @@ class CmatJsonEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, host: { properties: { "class.jse-theme-dark": "this.darkTheme" } }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-json-editor', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"] }]
+            args: [{ selector: 'cmat-json-editor', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n    </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], data: [{
@@ -182,9 +175,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Output
             }], pathChanged: [{
                 type: Output
-            }], darkTheme: [{
-                type: HostBinding,
-                args: ['class.jse-theme-dark']
             }], jsonEditorContainer: [{
                 type: ViewChild,
                 args: ['jsonEditorContainer']

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/json-editor.component.html","../../../projects/cmat/components/json-editor/cmat-components-json-editor.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation, 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    templateUrl: './json-editor.component.html',\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    @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\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 _jsonEditorContainer?: ElementRef;\r\n    private _destroyed = false;\r\n    private readonly _document = inject(DOCUMENT);\r\n\r\n    @HostBinding('class.jse-theme-dark')\r\n    get darkTheme(): boolean {\r\n        return this._isDarkTheme;\r\n    }\r\n\r\n    private get _isDarkTheme(): boolean {\r\n        return this._document.documentElement.classList.contains('dark') || this._document.body.classList.contains('dark');\r\n    }\r\n\r\n    @ViewChild('jsonEditorContainer')\r\n    set jsonEditorContainer(value: ElementRef | undefined) {\r\n        this._jsonEditorContainer = value;\r\n        this._initializeEditor();\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this._initializeEditor();\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        }\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        this._destroyed = true;\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            this.pathChanged.emit(stringifyJSONPath((selection as any).path));\r\n        } else if (isMultiSelection(selection)) {\r\n            this.pathChanged.emit(stringifyJSONPath((selection as any).anchorPath));\r\n        }\r\n    }\r\n\r\n    private _initializeEditor(): void {\r\n        if (this._destroyed || this._editor || !this._jsonEditorContainer?.nativeElement) {\r\n            return;\r\n        }\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                    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","@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON 编辑器加载中...\r\n    </div>\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/json-editor.component.html","../../../projects/cmat/components/json-editor/cmat-components-json-editor.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    ElementRef,\r\n    EventEmitter,\r\n    Input,\r\n    OnChanges,\r\n    OnDestroy,\r\n    OnInit,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n    ViewEncapsulation,\r\n    inject,\r\n} from '@angular/core';\r\nimport {\r\n    stringifyJSONPath,\r\n    Content,\r\n    MenuItem,\r\n    createAjvValidator,\r\n    JSONEditorPropsOptional,\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    createJSONEditor,\r\n    JsonEditor,\r\n} from 'vanilla-jsoneditor';\r\n\r\n@Component({\r\n    selector: 'cmat-json-editor',\r\n    templateUrl: './json-editor.component.html',\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    @Input() options: JSONEditorPropsOptional = {};\r\n    @Input() data: unknown;\r\n\r\n    @Output() contentChanged: EventEmitter<Content> = new EventEmitter<Content>();\r\n    @Output() pathChanged: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n\r\n    public id = 'cmatjsoneditor-' + crypto.randomUUID().slice(0, 8);\r\n    content: Content = {\r\n        text: undefined,\r\n        json: {}\r\n    };\r\n\r\n    private _editor?: JsonEditor;\r\n    private _jsonEditorContainer?: ElementRef<HTMLElement>;\r\n    private _destroyed = false;\r\n    private readonly _document = inject(DOCUMENT);\r\n\r\n    @ViewChild('jsonEditorContainer')\r\n    set jsonEditorContainer(value: ElementRef<HTMLElement> | undefined) {\r\n        this._jsonEditorContainer = value;\r\n        this._initializeEditor();\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this._initializeEditor();\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        }\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        this._destroyed = true;\r\n        void this._editor?.destroy();\r\n    }\r\n\r\n    setSchema(schema: unknown): void {\r\n        const validator = createAjvValidator({ schema: schema as import('vanilla-jsoneditor').JSONSchema });\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 = content.json as JSON;\r\n                return j;\r\n            } else {\r\n                const textContent = content as { text?: string };\r\n                const t = String(textContent.text ?? '');\r\n                const j = JSON.parse(t) as JSON;\r\n                return j;\r\n            }\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    set(json: unknown): 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            this.pathChanged.emit(stringifyJSONPath(selection.path));\r\n        } else if (isMultiSelection(selection)) {\r\n            this.pathChanged.emit(stringifyJSONPath(selection.anchorPath));\r\n        }\r\n    }\r\n\r\n    private _initializeEditor(): void {\r\n        if (this._destroyed || this._editor || !this._jsonEditorContainer?.nativeElement) {\r\n            return;\r\n        }\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: Content,\r\n                    { contentErrors }: { contentErrors?: unknown }\r\n                ): void => {\r\n                    if (contentErrors) {\r\n                        console.error('JSON Editor content errors:', contentErrors);\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                    items.splice(\r\n                        items.findIndex((i): boolean => (i as MenuButton)['text'] === 'table'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex((i): boolean => (i as MenuButton)['className'] === 'jse-sort'),\r\n                        1\r\n                    );\r\n                    items.splice(\r\n                        items.findIndex((i): boolean => (i as MenuButton)['className'] === 'jse-transform'),\r\n                        1\r\n                    );\r\n\r\n                    items.forEach((item): void => {\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","@defer (on viewport) {\r\n    <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n    <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n        JSON 编辑器加载中...\r\n    </div>\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

@@ -39,8 +39,9 @@ class CmatKnobInputComponent {
         this._placeholder = '';
         this._required = false;
         this._disabled = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._onModelChange = () => { };
+        this._onModelChange = () => {
+            // Intentionally left blank
+        };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouchedChange = () => { };
         if (this.ngControl != null) {
@@ -246,9 +247,9 @@ class CmatKnobInputComponent {
     }
     onTouchMove(event) {
         if (!this.disabled && event instanceof TouchEvent && event.touches.length === 1) {
-            const rect = this._el.nativeElement.children[0].getBoundingClientRect();
+            const rect = this._el.nativeElement.firstElementChild?.getBoundingClientRect();
             const touch = event.targetTouches.item(0);
-            if (touch) {
+            if (touch && rect) {
                 const offsetX = touch.clientX - rect.left;
                 const offsetY = touch.clientY - rect.top;
                 this.updateValue(offsetX, offsetY);
@@ -267,7 +268,7 @@ class CmatKnobInputComponent {
         this.valueChange.emit(this.value);
     }
     writeValue(value) {
-        this.value = value;
+        this.value = value ?? this.min;
         this.refreshVersion.update(value => value + 1);
     }
     registerOnChange(fn) {
@@ -331,13 +332,13 @@ class CmatKnobInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [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)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($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>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n", 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 }); }
+        ], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [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)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($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>\r\n\r\n", 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: "21.2.9", 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/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [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)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($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>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n", 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"] }]
+                    ], exportAs: 'cmatKnobInput', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [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)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($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>\r\n\r\n", 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: () => [], propDecorators: { _knobElementRef: [{
                 type: ViewChild,
                 args: ['knob', { static: false }]