@ng-nest/ui 17.0.12 → 18.0.0

package/fesm2022/ng-nest-ui-image.mjs

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XConfigService, XIsChange } from '@ng-nest/ui/core';
+import { input, output, Component, signal, inject, computed, viewChild, ViewEncapsulation, ChangeDetectionStrategy, effect, NgModule } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue, XProperty, XConfigService } from '@ng-nest/ui/core';
 import { X_DIALOG_DATA, XDialogCloseDirective, XDialogService } from '@ng-nest/ui/dialog';
 import { DOCUMENT, NgClass } from '@angular/common';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import * as i1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { XI18nService } from '@ng-nest/ui/i18n';
-import { Subject, map } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
+import { map } from 'rxjs';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Image
@@ -18,54 +17,169 @@ import { XOutletDirective } from '@ng-nest/ui/outlet';
  * @decorator component
  */
 const XImagePrefix = 'x-image';
-const X_CONFIG_NAME = 'image';
+const X_IMAGE_CONFIG_NAME = 'image';
 /**
  * Image Property
  */
-class XImageProperty extends XProperty {
+class XImageProperty extends XPropertyFunction(X_IMAGE_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 图片显示地址
+         * @en_US Picture display address
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.src = input();
+        /**
+         * @zh_CN 图片宽度
+         * @en_US Picture width
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.width = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 图片高度
+         * @en_US Picture height
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.height = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 图像描述
+         * @en_US Image description
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   alt="ng-nest-admin-light"
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.alt = input();
+        /**
+         * @zh_CN 加载失败显示的地址
+         * @en_US Load fault tolerance address
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="error"
+         *   fallback="data:image/png;base64,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"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.fallback = input();
+        /**
+         * @zh_CN 预览文字
+         * @en_US Preview text
+         * @default '预览'
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         *   previewText="查看"
+         * ></x-image>
+         * ```
+         *
+         */
+        this.previewText = input(this.config?.previewText);
+        /**
+         * @zh_CN 渐进加载显示的图片地址
+         * @en_US Progressive loading image addresses
+         */
+        this.placeholder = input();
+        /**
+         * @zh_CN 自定义预览操作
+         * @en_US Custom preview operation
+         */
+        this.previewTpl = input();
         /**
          * @zh_CN 图片加载错误
          * @en_US Picture load failed
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="error"
+         *   (error)="onError($event)"
+         * ></x-image>
+         * ```
+         *
+         * ```typescript
+         * onError(event: ErrorEvent) {
+         *   console.log(event)
+         * }
+         * ```
+         *
          */
-        this.error = new EventEmitter();
+        this.error = output();
         /**
          * @zh_CN 图片加载完成
          * @en_US Picture loading complete
+         * @example
+         *
+         * ```html
+         * <x-image
+         *   width="100px"
+         *   height="100px"
+         *   src="https://ngnest.com/static/docs/course/rbac/1-introduction/demo/1__ng-nest-admin/light.png"
+         *   (load)="onLoad($event)"
+         * ></x-image>
+         * ```
+         *
+         * ```typescript
+         * onLoad(event: Event) {
+         *   console.log(event)
+         * }
+         * ```
+         *
          */
-        this.load = new EventEmitter();
+        this.load = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XImageProperty, selector: "x-image-property", inputs: { src: "src", width: "width", height: "height", alt: "alt", fallback: "fallback", previewText: "previewText", placeholder: "placeholder", previewTpl: "previewTpl" }, outputs: { error: "error", load: "load" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XImageProperty, selector: "x-image-property", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, previewText: { classPropertyName: "previewText", publicName: "previewText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, previewTpl: { classPropertyName: "previewTpl", publicName: "previewTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { error: "error", load: "load" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XImageProperty.prototype, "previewText", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XImagePrefix}-property`, template: '' }]
-        }], propDecorators: { src: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], fallback: [{
-                type: Input
-            }], previewText: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], previewTpl: [{
-                type: Input
-            }], error: [{
-                type: Output
-            }], load: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Image Preview
  * @selector x-image-preview
@@ -76,10 +190,10 @@ const XImagePreviewPrefix = 'x-image-preview';
  * Image Preview Property
  */
 class XImagePreviewProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImagePreviewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XImagePreviewProperty, selector: "x-image-preview-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImagePreviewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XImagePreviewProperty, selector: "x-image-preview-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImagePreviewProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImagePreviewProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XImagePreviewPrefix}-property`, template: '' }]
         }] });
@@ -93,80 +207,85 @@ const XImageGroupPrefix = 'x-image-group';
 class XImagePreviewComponent extends XImagePreviewProperty {
     constructor() {
         super(...arguments);
-        this.imgScale3d = {
+        this.imgScale3d = signal({
             x: 1,
             y: 1,
             z: 1
-        };
-        this.rotate = 0;
-        this.position = {
+        });
+        this.rotate = signal(0);
+        this.position = signal({
             x: 0,
             y: 0
-        };
-        this.total = 1;
-        this.current = 1;
+        });
+        this.activated = signal(undefined);
+        this.total = signal(1);
+        this.current = signal(1);
         this.document = inject(DOCUMENT);
+        this.wrapperTransform = computed(() => {
+            return `translate3d(${this.position().x}px, ${this.position().y}px, 0)`;
+        });
+        this.imgTransform = computed(() => {
+            return `scale3d(${this.imgScale3d().x}, ${this.imgScale3d().y}, ${this.imgScale3d().z}) rotate(${this.rotate()}deg)`;
+        });
+        this.imageRef = viewChild.required('imageRef');
         this.data = inject(X_DIALOG_DATA);
-        this.configService = inject(XConfigService);
-    }
-    get getWrapperTransform() {
-        return `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;
-    }
-    get getImgTransform() {
-        return `scale3d(${this.imgScale3d.x}, ${this.imgScale3d.y}, ${this.imgScale3d.z}) rotate(${this.rotate}deg)`;
     }
     ngOnInit() {
         this.setActivated();
     }
     initialization() {
-        this.imgScale3d = {
+        this.imgScale3d.set({
             x: 1,
             y: 1,
             z: 1
-        };
-        this.rotate = 0;
-        this.position = {
+        });
+        this.rotate.set(0);
+        this.position.set({
             x: 0,
             y: 0
-        };
+        });
     }
     setActivated() {
         if (!this.data)
             return;
         if (this.data.length === 1) {
-            this.activated = this.data[0];
-            this.total = this.current = 1;
+            this.activated.set(this.data[0]);
+            this.total.set(1);
+            this.current.set(1);
         }
         else {
-            this.total = this.data.length;
-            this.activated = this.data.find((x, index) => {
+            this.total.set(this.data.length);
+            this.activated.set(this.data.find((x, index) => {
                 if (x.activated) {
-                    this.current = index + 1;
+                    this.current.set(index + 1);
                     return true;
                 }
                 return false;
-            });
+            }));
         }
     }
     onCurrentChange(num) {
-        this.current += num;
-        this.activated = this.data[this.current - 1];
+        this.current.update((x) => x + num);
+        this.activated.set(this.data[this.current() - 1]);
         this.initialization();
     }
     onRotate(deg) {
-        this.rotate += deg;
+        this.rotate.update((x) => x + deg);
     }
     onScale(zoom) {
-        this.imgScale3d.x += zoom;
-        this.imgScale3d.y += zoom;
+        this.imgScale3d.update((item) => {
+            item.x += zoom;
+            item.y += zoom;
+            return { ...item };
+        });
     }
     onDragReleased() {
-        let width = this.imageRef.nativeElement.offsetWidth * this.imgScale3d.x;
-        let height = this.imageRef.nativeElement.offsetHeight * this.imgScale3d.x;
+        let width = this.imageRef().nativeElement.offsetWidth * this.imgScale3d().x;
+        let height = this.imageRef().nativeElement.offsetHeight * this.imgScale3d().x;
         const clientWidth = this.document.documentElement.clientWidth;
         const clientHeight = this.document.defaultView?.innerHeight || this.document.documentElement.clientHeight;
-        const isRotate = this.rotate % 180 !== 0;
-        const box = this.imageRef.nativeElement.getBoundingClientRect();
+        const isRotate = this.rotate() % 180 !== 0;
+        const box = this.imageRef().nativeElement.getBoundingClientRect();
         const docElem = this.document.documentElement;
         const left = box.left +
             (this.document.defaultView?.pageXOffset || docElem.scrollLeft) -
@@ -183,7 +302,7 @@ class XImagePreviewComponent extends XImagePreviewProperty {
             position.x = x ? x : 0;
             position.y = y ? y : 0;
         }
-        this.position = { ...this.position, ...position };
+        this.position.update((x) => ({ ...x, ...position }));
     }
     fitPoint(start, size, clientSize) {
         const startAddSize = start + size;
@@ -204,128 +323,106 @@ class XImagePreviewComponent extends XImagePreviewProperty {
         }
         return distance;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImagePreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XImagePreviewComponent, isStandalone: true, selector: "x-image-preview", viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["imageRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"x-image-preview\" [ngClass]=\"classMap\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      @if (total != 1) {\r\n        <span class=\"x-image-preview-current\">{{ current }} / {{ total }}</span>\r\n      }\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon\r\n        type=\"fto-zoom-out\"\r\n        [class.x-image-preview-disabled]=\"imgScale3d.x === 1\"\r\n        (click)=\"imgScale3d.x > 1 && onScale(-1)\"\r\n      ></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"getWrapperTransform\"\r\n    [cdkDragFreeDragPosition]=\"position\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img\r\n      #imageRef\r\n      [src]=\"activated?.src\"\r\n      [attr.alt]=\"activated?.alt\"\r\n      cdkDragHandle\r\n      [style.transform]=\"getImgTransform\"\r\n    />\r\n  </div>\r\n  @if (data && data.length > 1) {\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current === 1\"\r\n      class=\"x-image-preview-left\"\r\n      (click)=\"current > 1 && onCurrentChange(-1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-left\"></x-icon>\r\n    </div>\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current === total\"\r\n      class=\"x-image-preview-right\"\r\n      (click)=\"current != total && onCurrentChange(1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-right\"></x-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: XDialogCloseDirective, selector: "[x-dialog-close]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImagePreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XImagePreviewComponent, isStandalone: true, selector: "x-image-preview", viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["imageRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"x-image-preview\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      @if (total() != 1) {\r\n        <span class=\"x-image-preview-current\">{{ current() }} / {{ total() }}</span>\r\n      }\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon\r\n        type=\"fto-zoom-out\"\r\n        [class.x-image-preview-disabled]=\"imgScale3d().x === 1\"\r\n        (click)=\"imgScale3d().x > 1 && onScale(-1)\"\r\n      ></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"wrapperTransform()\"\r\n    [cdkDragFreeDragPosition]=\"position()\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img\r\n      #imageRef\r\n      [src]=\"activated()?.src!\"\r\n      [attr.alt]=\"activated()?.alt!\"\r\n      cdkDragHandle\r\n      [style.transform]=\"imgTransform()\"\r\n    />\r\n  </div>\r\n  @if (data && data.length > 1) {\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current() === 1\"\r\n      class=\"x-image-preview-left\"\r\n      (click)=\"current() > 1 && onCurrentChange(-1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-left\"></x-icon>\r\n    </div>\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current() === total()\"\r\n      class=\"x-image-preview-right\"\r\n      (click)=\"current() != total() && onCurrentChange(1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-right\"></x-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: XDialogCloseDirective, selector: "[x-dialog-close]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImagePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImagePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XImagePreviewPrefix}`, standalone: true, imports: [NgClass, XIconComponent, DragDropModule, XDialogCloseDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image-preview\" [ngClass]=\"classMap\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      @if (total != 1) {\r\n        <span class=\"x-image-preview-current\">{{ current }} / {{ total }}</span>\r\n      }\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon\r\n        type=\"fto-zoom-out\"\r\n        [class.x-image-preview-disabled]=\"imgScale3d.x === 1\"\r\n        (click)=\"imgScale3d.x > 1 && onScale(-1)\"\r\n      ></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"getWrapperTransform\"\r\n    [cdkDragFreeDragPosition]=\"position\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img\r\n      #imageRef\r\n      [src]=\"activated?.src\"\r\n      [attr.alt]=\"activated?.alt\"\r\n      cdkDragHandle\r\n      [style.transform]=\"getImgTransform\"\r\n    />\r\n  </div>\r\n  @if (data && data.length > 1) {\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current === 1\"\r\n      class=\"x-image-preview-left\"\r\n      (click)=\"current > 1 && onCurrentChange(-1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-left\"></x-icon>\r\n    </div>\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current === total\"\r\n      class=\"x-image-preview-right\"\r\n      (click)=\"current != total && onCurrentChange(1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-right\"></x-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"] }]
-        }], propDecorators: { imageRef: [{
-                type: ViewChild,
-                args: ['imageRef']
-            }] } });
+            args: [{ selector: `${XImagePreviewPrefix}`, standalone: true, imports: [NgClass, XIconComponent, DragDropModule, XDialogCloseDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image-preview\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      @if (total() != 1) {\r\n        <span class=\"x-image-preview-current\">{{ current() }} / {{ total() }}</span>\r\n      }\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon\r\n        type=\"fto-zoom-out\"\r\n        [class.x-image-preview-disabled]=\"imgScale3d().x === 1\"\r\n        (click)=\"imgScale3d().x > 1 && onScale(-1)\"\r\n      ></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"wrapperTransform()\"\r\n    [cdkDragFreeDragPosition]=\"position()\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img\r\n      #imageRef\r\n      [src]=\"activated()?.src!\"\r\n      [attr.alt]=\"activated()?.alt!\"\r\n      cdkDragHandle\r\n      [style.transform]=\"imgTransform()\"\r\n    />\r\n  </div>\r\n  @if (data && data.length > 1) {\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current() === 1\"\r\n      class=\"x-image-preview-left\"\r\n      (click)=\"current() > 1 && onCurrentChange(-1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-left\"></x-icon>\r\n    </div>\r\n    <div\r\n      [class.x-image-preview-disabled]=\"current() === total()\"\r\n      class=\"x-image-preview-right\"\r\n      (click)=\"current() != total() && onCurrentChange(1)\"\r\n    >\r\n      <x-icon type=\"fto-chevron-right\"></x-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"] }]
+        }] });
 
 class XImageGroupComponent {
     constructor() {
-        this.images = [];
-        console.log('group cons');
-    }
-    ngOnInit() {
-        console.log('group');
+        this.images = signal([]);
     }
     addImage(image) {
-        console.log('add');
-        this.images.push(image);
+        this.images.update((x) => {
+            x.push(image);
+            return [...x];
+        });
     }
     removeImage(image) {
-        console.log('remove');
-        this.images.splice(this.images.indexOf(image), 1);
+        this.images.update((x) => {
+            x.splice(x.indexOf(image), 1);
+            return [...x];
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XImageGroupComponent, isStandalone: true, selector: "x-image-group", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["x-image-group{display:inline-flex;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XImageGroupComponent, isStandalone: true, selector: "x-image-group", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["x-image-group{display:inline-flex;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XImageGroupPrefix}`, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: ["x-image-group{display:inline-flex;flex-wrap:wrap}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class XImageComponent extends XImageProperty {
     constructor() {
-        super(...arguments);
-        this.locale = {};
-        this.isError = false;
-        this.isLoaded = false;
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
+        super();
         this.dialog = inject(XDialogService);
         this.i18n = inject(XI18nService);
         this.group = inject(XImageGroupComponent, { optional: true });
         this.configService = inject(XConfigService);
-    }
-    get getPreviewText() {
-        return this.previewText || this.locale.previewText;
-    }
-    ngOnInit() {
-        if (this.group) {
-            this.group.addImage(this);
-        }
-        this.i18n.localeChange
-            .pipe(map((x) => x.image), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
+        this.isError = signal(false);
+        this.isLoaded = signal(false);
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.image)), { initialValue: zh_CN.image });
+        this.previewTextSignal = computed(() => {
+            return this.previewText() || this.locale().previewText;
         });
+        effect(() => {
+            this.src();
+            this.isLoaded.set(false);
+        }, { allowSignalWrites: true });
     }
-    ngOnChanges(changes) {
-        let { src } = changes;
-        if (XIsChange(src)) {
-            this.isLoaded = false;
-            this.isError = false;
-            this.cdr.detectChanges();
-        }
+    ngOnInit() {
+        this.group && this.group.addImage(this);
     }
     ngOnDestroy() {
-        if (this.group) {
-            this.group.removeImage(this);
-        }
+        this.group && this.group.removeImage(this);
     }
     onPreview() {
         let data = [];
         if (this.group) {
-            const activatedIndex = this.group.images.indexOf(this);
-            data = this.group.images.map((x, index) => ({
-                src: x.src,
-                alt: x.alt,
-                fallback: x.fallback,
+            const activatedIndex = this.group.images().indexOf(this);
+            data = this.group.images().map((x, index) => ({
+                src: x.src(),
+                alt: x.alt(),
+                fallback: x.fallback(),
                 activated: index === activatedIndex
             }));
         }
         else {
-            data = [{ src: this.src, alt: this.alt, fallback: this.fallback }];
+            data = [{ src: this.src(), alt: this.alt(), fallback: this.fallback() }];
         }
         this.dialog.create(XImagePreviewComponent, {
             width: '100%',
             height: '100%',
             className: 'x-image-preview-portal',
-            data: data
+            data
         });
     }
     onError(event) {
-        this.src = this.fallback;
-        this.isError = true;
-        this.cdr.detectChanges();
+        this.isError.set(true);
         this.error.emit(event);
     }
     onLoad(event) {
-        this.isLoaded = true;
-        this.isError = false;
-        this.cdr.detectChanges();
+        this.isLoaded.set(true);
+        this.isError.set(false);
         this.load.emit(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XImageComponent, isStandalone: true, selector: "x-image", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-image\" [ngClass]=\"classMap\">\r\n  @if (!isError && !fallback) {\r\n    <img\r\n      [hidden]=\"placeholder && !isLoaded\"\r\n      class=\"x-image-img\"\r\n      [src]=\"src\"\r\n      [style.width]=\"width\"\r\n      [style.height]=\"height\"\r\n      (error)=\"onError($event)\"\r\n      (load)=\"onLoad($event)\"\r\n    />\r\n  }\r\n  @if (placeholder && !isLoaded) {\r\n    <img class=\"x-image-img\" [src]=\"placeholder\" [style.width]=\"width\" [style.height]=\"height\" />\r\n  }\r\n  @if (isError && !fallback) {\r\n    <div class=\"x-image-error-icon\" [style.width]=\"width\" [style.height]=\"height\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n    </div>\r\n  }\r\n  <ng-container *xOutlet=\"previewTpl; context: { $image: this }\">\r\n    @if (!isError) {\r\n      <div class=\"x-image-overlay\" (click)=\"onPreview()\">\r\n        <div class=\"x-image-text\">\r\n          <x-icon type=\"fto-eye\"></x-icon>\r\n          <span>{{ getPreviewText }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{max-width:100%;max-height:100%;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#00000080;cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}.x-image-error{display:none}.x-image-error-icon{font-size:2rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XImageComponent, isStandalone: true, selector: "x-image", usesInheritance: true, ngImport: i0, template: "<div class=\"x-image\">\r\n  <img\r\n    [hidden]=\"(placeholder() && !isLoaded()) || isError()\"\r\n    class=\"x-image-img\"\r\n    [src]=\"src()\"\r\n    [style.width]=\"width()\"\r\n    [style.height]=\"height()\"\r\n    (error)=\"onError($event)\"\r\n    (load)=\"onLoad($event)\"\r\n  />\r\n  @if (placeholder() && !isLoaded()) {\r\n    <img class=\"x-image-img\" [src]=\"placeholder()\" [style.width]=\"width()\" [style.height]=\"height()\" />\r\n  }\r\n  @if (isError() && fallback()) {\r\n    <img class=\"x-image-img\" [src]=\"fallback()\" [style.width]=\"width()\" [style.height]=\"height()\" />\r\n  }\r\n  @if (isError() && !fallback()) {\r\n    <div class=\"x-image-error-icon\" [style.width]=\"width()\" [style.height]=\"height()\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n    </div>\r\n  }\r\n  <ng-container *xOutlet=\"previewTpl(); context: { $image: this }\">\r\n    @if (!isError()) {\r\n      <div class=\"x-image-overlay\" (click)=\"onPreview()\">\r\n        <div class=\"x-image-text\">\r\n          <x-icon type=\"fto-eye\"></x-icon>\r\n          <span>{{ previewTextSignal() }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{max-width:100%;max-height:100%;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#00000080;cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}.x-image-error{display:none}.x-image-error-icon{font-size:2rem}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XImagePrefix}`, standalone: true, imports: [NgClass, XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image\" [ngClass]=\"classMap\">\r\n  @if (!isError && !fallback) {\r\n    <img\r\n      [hidden]=\"placeholder && !isLoaded\"\r\n      class=\"x-image-img\"\r\n      [src]=\"src\"\r\n      [style.width]=\"width\"\r\n      [style.height]=\"height\"\r\n      (error)=\"onError($event)\"\r\n      (load)=\"onLoad($event)\"\r\n    />\r\n  }\r\n  @if (placeholder && !isLoaded) {\r\n    <img class=\"x-image-img\" [src]=\"placeholder\" [style.width]=\"width\" [style.height]=\"height\" />\r\n  }\r\n  @if (isError && !fallback) {\r\n    <div class=\"x-image-error-icon\" [style.width]=\"width\" [style.height]=\"height\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n    </div>\r\n  }\r\n  <ng-container *xOutlet=\"previewTpl; context: { $image: this }\">\r\n    @if (!isError) {\r\n      <div class=\"x-image-overlay\" (click)=\"onPreview()\">\r\n        <div class=\"x-image-text\">\r\n          <x-icon type=\"fto-eye\"></x-icon>\r\n          <span>{{ getPreviewText }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{max-width:100%;max-height:100%;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#00000080;cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}.x-image-error{display:none}.x-image-error-icon{font-size:2rem}\n"] }]
-        }] });
+            args: [{ selector: `${XImagePrefix}`, standalone: true, imports: [NgClass, XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image\">\r\n  <img\r\n    [hidden]=\"(placeholder() && !isLoaded()) || isError()\"\r\n    class=\"x-image-img\"\r\n    [src]=\"src()\"\r\n    [style.width]=\"width()\"\r\n    [style.height]=\"height()\"\r\n    (error)=\"onError($event)\"\r\n    (load)=\"onLoad($event)\"\r\n  />\r\n  @if (placeholder() && !isLoaded()) {\r\n    <img class=\"x-image-img\" [src]=\"placeholder()\" [style.width]=\"width()\" [style.height]=\"height()\" />\r\n  }\r\n  @if (isError() && fallback()) {\r\n    <img class=\"x-image-img\" [src]=\"fallback()\" [style.width]=\"width()\" [style.height]=\"height()\" />\r\n  }\r\n  @if (isError() && !fallback()) {\r\n    <div class=\"x-image-error-icon\" [style.width]=\"width()\" [style.height]=\"height()\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n    </div>\r\n  }\r\n  <ng-container *xOutlet=\"previewTpl(); context: { $image: this }\">\r\n    @if (!isError()) {\r\n      <div class=\"x-image-overlay\" (click)=\"onPreview()\">\r\n        <div class=\"x-image-text\">\r\n          <x-icon type=\"fto-eye\"></x-icon>\r\n          <span>{{ previewTextSignal() }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{max-width:100%;max-height:100%;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#00000080;cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}.x-image-error{display:none}.x-image-error-icon{font-size:2rem}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XImageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XImageModule, imports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent], exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageModule, imports: [XImageComponent, XImagePreviewComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XImageModule, imports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent], exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageModule, imports: [XImageComponent, XImagePreviewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XImageModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent],