@xlabs-store/core 0.0.1

package/dist/collection/components/x-image/x-image.js

@@ -0,0 +1,628 @@
+import { Host, h } from "@stencil/core";
+import { translate } from "../../locales/locale.service";
+import { getIcon } from "../../utils/config";
+const DEFAULT_SCALE_STEP = 0.5;
+const MIN_SCALE = 1;
+const MAX_SCALE = 50;
+export class XImage {
+    el;
+    /**
+     * Image alt text
+     * @example
+     * <x-image alt="Profile picture" />
+     */
+    alt;
+    /**
+     * Fallback image source when error occurs
+     * @example
+     * <x-image src="broken.png" fallback="default.png" />
+     */
+    fallback;
+    /**
+     * Image height
+     * @example
+     * <x-image height="200px" />
+     * <x-image height={200} />
+     */
+    height;
+    /**
+     * Image width
+     * @example
+     * <x-image width="100%" />
+     * <x-image width={300} />
+     */
+    width;
+    /**
+     * Image source URL
+     * @example
+     * <x-image src="https://example.com/image.png" />
+     */
+    src;
+    /**
+     * Whether to show placeholder while loading
+     * @example
+     * <x-image placeholder />
+     */
+    placeholder = false;
+    /**
+     * Whether to enable preview or preview config
+     * @example
+     * <x-image preview />
+     * <x-image preview={{ src: 'large.png', minScale: 0.5 }} />
+     */
+    preview = true;
+    /**
+     * Root class name
+     * @example
+     * <x-image rootClassName="my-image-wrapper" />
+     */
+    rootClassName;
+    /**
+     * The attribute indicating how the element handles crossorigin requests
+     * @example
+     * <x-image crossOrigin="anonymous" />
+     */
+    crossOrigin;
+    /**
+     * Indicates which referrer to use when fetching the resource
+     * @example
+     * <x-image referrerPolicy="no-referrer" />
+     */
+    referrerPolicy;
+    /**
+     * Loading behavior (lazy, eager)
+     * @example
+     * <x-image loading="lazy" />
+     */
+    loading;
+    isError = false;
+    isLoading = true;
+    isPreviewVisible = false;
+    transform = {
+        x: 0,
+        y: 0,
+        rotate: 0,
+        scale: 1,
+        flipX: false,
+        flipY: false,
+    };
+    /**
+     * Emitted when image load fails
+     */
+    xError;
+    /**
+     * Emitted when image loads successfully
+     */
+    xLoad;
+    /**
+     * Emitted when preview visibility changes
+     */
+    xPreviewVisibleChange;
+    previewConfig = {};
+    componentWillLoad() {
+        this.parsePreviewConfig();
+    }
+    previewChanged() {
+        this.parsePreviewConfig();
+    }
+    srcChanged() {
+        this.isError = false;
+        this.isLoading = true;
+    }
+    parsePreviewConfig() {
+        if (typeof this.preview === 'boolean') {
+            this.previewConfig = {};
+        }
+        else if (typeof this.preview === 'object') {
+            this.previewConfig = this.preview;
+        }
+    }
+    /**
+     * Handles image load errors.
+     * Updates state to show error or fallback and emits error event.
+     * @param {Event} event - The error event.
+     */
+    handleError(event) {
+        this.isError = true;
+        this.isLoading = false;
+        this.xError.emit({
+            src: this.src || '',
+            error: event,
+        });
+    }
+    /**
+     * Handles successful image loading.
+     * Updates loading state and emits load event.
+     * @param {Event} event - The load event.
+     */
+    handleLoad(event) {
+        this.isLoading = false;
+        this.xLoad.emit({
+            src: this.src || '',
+            event: event,
+        });
+    }
+    /**
+     * Open preview modal.
+     *
+     * Flow:
+     * 1. Checks if preview is enabled.
+     * 2. Sets `isPreviewVisible` to true.
+     * 3. Resets transform (zoom/rotate) to default.
+     * 4. Emits `xPreviewVisibleChange` event.
+     * 5. Adds global `keydown` listener for Escape key.
+     */
+    openPreview() {
+        if (!this.preview)
+            return;
+        this.isPreviewVisible = true;
+        this.resetTransform();
+        this.xPreviewVisibleChange.emit({
+            visible: true,
+            src: this.src || '',
+        });
+        // Add keyboard listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    closePreview() {
+        this.isPreviewVisible = false;
+        this.xPreviewVisibleChange.emit({
+            visible: false,
+            src: this.src || '',
+        });
+        // Remove keyboard listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            this.closePreview();
+        }
+    };
+    resetTransform() {
+        this.transform = {
+            x: 0,
+            y: 0,
+            rotate: 0,
+            scale: 1,
+            flipX: false,
+            flipY: false,
+        };
+    }
+    getScaleStep() {
+        return this.previewConfig.scaleStep ?? DEFAULT_SCALE_STEP;
+    }
+    getMinScale() {
+        return this.previewConfig.minScale ?? MIN_SCALE;
+    }
+    getMaxScale() {
+        return this.previewConfig.maxScale ?? MAX_SCALE;
+    }
+    zoomIn() {
+        const newScale = Math.min(this.transform.scale + this.getScaleStep(), this.getMaxScale());
+        this.transform = { ...this.transform, scale: newScale };
+    }
+    zoomOut() {
+        const newScale = Math.max(this.transform.scale - this.getScaleStep(), this.getMinScale());
+        this.transform = { ...this.transform, scale: newScale };
+    }
+    rotateLeft() {
+        this.transform = { ...this.transform, rotate: this.transform.rotate - 90 };
+    }
+    rotateRight() {
+        this.transform = { ...this.transform, rotate: this.transform.rotate + 90 };
+    }
+    flipX() {
+        this.transform = { ...this.transform, flipX: !this.transform.flipX };
+    }
+    flipY() {
+        this.transform = { ...this.transform, flipY: !this.transform.flipY };
+    }
+    handleWheel = (e) => {
+        e.preventDefault();
+        if (e.deltaY > 0) {
+            this.zoomOut();
+        }
+        else {
+            this.zoomIn();
+        }
+    };
+    getTransformStyle() {
+        const { x, y, rotate, scale, flipX, flipY } = this.transform;
+        const scaleX = flipX ? -scale : scale;
+        const scaleY = flipY ? -scale : scale;
+        return `translate(${x}px, ${y}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Render image with optional placeholder and preview.
+     *
+     * Flow:
+     * 1. Determines effective image source (fallback if error).
+     * 2. Renders Host with error/loading classes.
+     * 3. Renders Placeholder if loading.
+     * 4. Renders main `<img>` tag with load/error handlers.
+     * 5. Renders Preview Mask if enabled and not error.
+     * 6. Renders Preview Modal if visible:
+     *    - Includes toolbar (zoom, rotate, flip).
+     *    - Includes close button.
+     *    - Renders transformed preview image.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const imgSrc = this.isError && this.fallback ? this.fallback : this.src;
+        const style = {};
+        if (this.width) {
+            style.width = typeof this.width === 'number' ? `${this.width}px` : this.width;
+        }
+        if (this.height) {
+            style.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
+        }
+        const isPreviewEnabled = !!this.preview;
+        const showCloseIcon = this.previewConfig.closeIcon !== false;
+        return (h(Host, { key: 'bb95b1a93bb027fc3b9a8ec1ccc43c4073697c2a', class: {
+                'x-image': true,
+                'x-image-error': this.isError,
+                [this.rootClassName || '']: !!this.rootClassName,
+            }, style: style }, this.isLoading && this.placeholder && (h("div", { key: '4a74c3bc1e1dd379b0e6cf8643d00eac31e48198', class: "x-image-placeholder" }, h("slot", { key: 'ae5938670022b5aca6948dfbfa9d45321737126b', name: "placeholder" }, h("div", { key: '8a499eb96a298ee6fb7b51b46da8be04f68c9869', class: "x-image-placeholder-default" })))), h("img", { key: '2603924c780366f6859f5ac758482e4c111d89f7', class: {
+                'x-image-img': true,
+                'x-image-img-loading': this.isLoading,
+            }, src: imgSrc, alt: this.alt, crossOrigin: this.crossOrigin, loading: this.loading, onError: (e) => this.handleError(e), onLoad: (e) => this.handleLoad(e), onClick: () => isPreviewEnabled && this.openPreview(), ...(this.referrerPolicy ? { 'referrerpolicy': this.referrerPolicy } : {}) }), isPreviewEnabled && !this.isError && (h("div", { key: '5714cba98437c6bb7c056d377474ff4b095b75f7', class: "x-image-mask", onClick: () => this.openPreview() }, h("div", { key: 'abca6fec5707b253a5b0398a038b55aec0366d50', class: "x-image-mask-info" }, h("slot", { key: 'd4e32732fb77aeb621e1f6d4f8a8db8307b10bd6', name: "preview-mask" }, h("span", { key: '5223b8db442847cbafa20aff1c24ed2a8f4bb92d', class: "x-image-mask-icon" }, h("x-icon", { key: '118729ea00b31a30921435f977c1571f3542e2e8', name: getIcon('eye') })), h("span", { key: '8f4af313c1af576f21e742882120b19885ba8f6b' }, translate('Image.preview', {}, 'Preview')))))), isPreviewEnabled && this.isPreviewVisible && (h("div", { key: '7a3acb2225fa82d090355cae35c7ea1a618878fc', class: "x-image-preview", onWheel: this.handleWheel }, h("div", { key: '6d6933adb42a1205bfdcce6bbfbd4d34e70d11b0', class: "x-image-preview-mask", onClick: () => this.closePreview() }), h("div", { key: '049c24d84c358d5df1d5cd7675be8dd80ce91645', class: "x-image-preview-wrap" }, showCloseIcon && (h("button", { key: 'e9c11f95f25d3d19386b717aed6bdd6c23df5989', class: "x-image-preview-close", onClick: () => this.closePreview() }, h("x-icon", { key: 'e01f98539d963596635c8c1788d19039f21b756a', name: getIcon('close') }))), h("div", { key: '80bb64b516446d3a635a5d06f4d0613162211eba', class: "x-image-preview-operations" }, h("button", { key: '0a07f0967aa349e97032db2201604616f6845810', class: "x-image-preview-operation", onClick: () => this.flipX(), title: "Flip Horizontal" }, h("x-icon", { key: '46ee62460bf15f8fddfbeb5d492a41d10775b75d', name: getIcon('flipX') })), h("button", { key: '5797a256d2e1ca333ba2280e6add5f503a08731f', class: "x-image-preview-operation", onClick: () => this.flipY(), title: "Flip Vertical" }, h("x-icon", { key: 'ad8374c20c1318318dd3eb00037f42987bb3241f', name: getIcon('flipY'), style: { transform: 'rotate(90deg)' } })), h("button", { key: 'f9da947ad172a9968b3b66e69d099237035e8703', class: "x-image-preview-operation", onClick: () => this.rotateLeft(), title: "Rotate Left" }, h("x-icon", { key: '04fd2630e26178805b3d08e5e413f1fac935b7a7', name: getIcon('rotateLeft') })), h("button", { key: '08f4906ed045057c41b22a299b97bb730ce47c21', class: "x-image-preview-operation", onClick: () => this.rotateRight(), title: "Rotate Right" }, h("x-icon", { key: '1f3856cea3846315cc24b617ecb1d722f22ab7ba', name: getIcon('rotateRight') })), h("button", { key: '8648dd9483d2b44867f0814a4cf912bae1f67cbc', class: "x-image-preview-operation", onClick: () => this.zoomOut(), title: "Zoom Out" }, h("x-icon", { key: '0e0d234ae8565fb7304b8f7a4f3d5af29fc339e6', name: getIcon('zoomOut') })), h("button", { key: 'd07d2c894ea72e36610eef5472e61c5ea0835167', class: "x-image-preview-operation", onClick: () => this.zoomIn(), title: "Zoom In" }, h("x-icon", { key: '9a5a978a543d3782369f32c7a23f3dc6665632f6', name: getIcon('zoomIn') }))), h("div", { key: 'e6856b8d2a1a024ae3d5fb7232e586cad3ca283c', class: "x-image-preview-body" }, h("img", { key: '2dbc165faa1e6c4f1f86297e7dc7ed578784eadf', class: "x-image-preview-img", src: this.previewConfig.src || imgSrc, alt: this.alt, style: { transform: this.getTransformStyle() }, onClick: (e) => e.stopPropagation() })))))));
+    }
+    static get is() { return "x-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-image.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image alt=\"Profile picture\" />"
+                        }],
+                    "text": "Image alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "fallback": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image src=\"broken.png\" fallback=\"default.png\" />"
+                        }],
+                    "text": "Fallback image source when error occurs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image height=\"200px\" />\r\n<x-image height={200} />"
+                        }],
+                    "text": "Image height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image width=\"100%\" />\r\n<x-image width={300} />"
+                        }],
+                    "text": "Image width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image src=\"https://example.com/image.png\" />"
+                        }],
+                    "text": "Image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "placeholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image placeholder />"
+                        }],
+                    "text": "Whether to show placeholder while loading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "false"
+            },
+            "preview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "ImagePreviewType",
+                    "resolved": "ImagePreviewConfig | boolean",
+                    "references": {
+                        "ImagePreviewType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-image/types.ts::ImagePreviewType",
+                            "referenceLocation": "ImagePreviewType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image preview />\r\n<x-image preview={{ src: 'large.png', minScale: 0.5 }} />"
+                        }],
+                    "text": "Whether to enable preview or preview config"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview",
+                "defaultValue": "true"
+            },
+            "rootClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image rootClassName=\"my-image-wrapper\" />"
+                        }],
+                    "text": "Root class name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root-class-name"
+            },
+            "crossOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'anonymous' | 'use-credentials' | ''",
+                    "resolved": "\"\" | \"anonymous\" | \"use-credentials\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image crossOrigin=\"anonymous\" />"
+                        }],
+                    "text": "The attribute indicating how the element handles crossorigin requests"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cross-origin"
+            },
+            "referrerPolicy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image referrerPolicy=\"no-referrer\" />"
+                        }],
+                    "text": "Indicates which referrer to use when fetching the resource"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "referrer-policy"
+            },
+            "loading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'lazy' | 'eager'",
+                    "resolved": "\"eager\" | \"lazy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-image loading=\"lazy\" />"
+                        }],
+                    "text": "Loading behavior (lazy, eager)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isError": {},
+            "isLoading": {},
+            "isPreviewVisible": {},
+            "transform": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xError",
+                "name": "xError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when image load fails"
+                },
+                "complexType": {
+                    "original": "ImageErrorEventDetail",
+                    "resolved": "ImageErrorEventDetail",
+                    "references": {
+                        "ImageErrorEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-image/types.ts::ImageErrorEventDetail",
+                            "referenceLocation": "ImageErrorEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xLoad",
+                "name": "xLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when image loads successfully"
+                },
+                "complexType": {
+                    "original": "ImageLoadEventDetail",
+                    "resolved": "ImageLoadEventDetail",
+                    "references": {
+                        "ImageLoadEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-image/types.ts::ImageLoadEventDetail",
+                            "referenceLocation": "ImageLoadEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPreviewVisibleChange",
+                "name": "xPreviewVisibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when preview visibility changes"
+                },
+                "complexType": {
+                    "original": "ImagePreviewVisibleChangeEventDetail",
+                    "resolved": "ImagePreviewVisibleChangeEventDetail",
+                    "references": {
+                        "ImagePreviewVisibleChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-image/types.ts::ImagePreviewVisibleChangeEventDetail",
+                            "referenceLocation": "ImagePreviewVisibleChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "preview",
+                "methodName": "previewChanged"
+            }, {
+                "propName": "src",
+                "methodName": "srcChanged"
+            }];
+    }
+}