wj-elements 0.7.7 → 0.8.0

package/dist/wje-img-comparer.js

@@ -1,135 +1,58 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-CReYMzAK.js";
-function drag(container, options) {
-  function move(pointerEvent) {
-    const dims = container.getBoundingClientRect();
-    const defaultView = container.ownerDocument.defaultView;
-    const offsetX = dims.left + defaultView.pageXOffset;
-    const offsetY = dims.top + defaultView.pageYOffset;
-    const x = pointerEvent.pageX - offsetX;
-    const y = pointerEvent.pageY - offsetY;
-    if (options == null ? void 0 : options.onMove) {
-      options.onMove(x, y);
-    }
-  }
-  function stop() {
-    document.removeEventListener("pointermove", move);
-    document.removeEventListener("pointerup", stop);
-    if (options == null ? void 0 : options.onStop) {
-      options.onStop();
-    }
-  }
-  document.addEventListener("pointermove", move, { passive: true });
-  document.addEventListener("pointerup", stop);
-  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
-    move(options.initialEvent);
-  }
-}
-const styles = "/*\n[ WJ Image Compare ]\n*/\n\n:host {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n    border-color: var(--wje-border-color);\n    border-style: solid;\n    border-width: 1px;\n}\n\n.wje-before,\n.wje-after {\n    display: block;\n}\n\n.wje-after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    clip-path: var(--wje-img-compare-clip-path);\n}\n\n.native-split-view {\n    max-width: 100%;\n    max-height: 100%;\n    overflow: hidden;\n}\n\n.wje-divider {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n    background-color: var(--wje-img-compare-divider-background);\n    height: 100%;\n    width: var(--wje-img-compare-divider-size);\n    cursor: col-resize;\n    top: 0;\n    left: var(--wje-img-compare-divider-left);\n    &:after {\n        display: flex;\n        content: '';\n        position: absolute;\n        height: 100%;\n        left: calc(var(--wje-img-compare-divider-area) / -2 + var(--wje-img-compare-divider-size) / 2);\n        width: var(---wje-img-compare-divider-area);\n    }\n    wje-icon {\n        position: absolute;\n        background-color: white;\n        padding: 0.5rem;\n        color: var(--wje-color-dark);\n        border-radius: var(--wje-border-radius-circle);\n        box-shadow: rgba(82, 63, 105, 0.2) 0 0 30px 10px;\n        background: var(--wje-color-white) !important;\n    }\n}\n";
-class ImgComparer extends WJElement {
-  /**
-   * Creates an instance of ImgComparer.
-   * @class
-   */
+import e from "./wje-element.js";
+import { I as t } from "./icon-DmsqtDpL.js";
+class i extends e {
   constructor() {
     super();
-    /**
-     * Dependencies of the ImgComparer component.
-     * @property {object} dependencies
-     */
-    __publicField(this, "dependencies", {
-      "wje-icon": Icon
-    });
+    __publicField(this, "dependencies", { "wje-icon": t });
     __publicField(this, "className", "ImgComparer");
-    /**
-     * Handles the drag event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "handleDrag", (e) => {
-      const { width } = this.native.getBoundingClientRect();
-      drag(this, {
-        onMove: (x) => {
-          let value = x / width * 100;
-          this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));
-          this.native.style.setProperty("--wje-img-compare-divider-left", this.position + "%");
-          this.native.style.setProperty("--wje-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
-        },
-        initialEvent: e
-      });
+    __publicField(this, "handleDrag", (e2) => {
+      const { width: t2 } = this.native.getBoundingClientRect();
+      !(function(e3, t3) {
+        function i2(i3) {
+          const o = e3.getBoundingClientRect(), r = e3.ownerDocument.defaultView, a = o.left + r.pageXOffset, n = o.top + r.pageYOffset, d = i3.pageX - a, s = i3.pageY - n;
+          (t3 == null ? void 0 : t3.onMove) && t3.onMove(d, s);
+        }
+        document.addEventListener("pointermove", i2, { passive: true }), document.addEventListener("pointerup", function e4() {
+          document.removeEventListener("pointermove", i2), document.removeEventListener("pointerup", e4), (t3 == null ? void 0 : t3.onStop) && t3.onStop();
+        }), (t3 == null ? void 0 : t3.initialEvent) instanceof PointerEvent && i2(t3.initialEvent);
+      })(this, { onMove: (e3) => {
+        let i2 = e3 / t2 * 100;
+        this.position = parseFloat(this.clamp(i2, 0, 100).toFixed(2)), this.native.style.setProperty("--wje-img-compare-divider-left", this.position + "%"), this.native.style.setProperty("--wje-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
+      }, initialEvent: e2 });
     });
-    /**
-     * Clamps a number between a minimum and maximum value.
-     * @param {number} num The number to clamp.
-     * @param {number} min The minimum value.
-     * @param {number} max The maximum value.
-     * @returns {number} The clamped number.
-     */
-    __publicField(this, "clamp", (num, min, max) => Math.min(Math.max(num, min), max));
+    __publicField(this, "clamp", (e2, t2, i2) => Math.min(Math.max(e2, t2), i2));
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:inline-block;position:relative;width:100%;border-color:var(--wje-border-color);border-style:solid;border-width:1px}.wje-before,.wje-after{display:block}.wje-after{position:absolute;top:0;left:0;height:100%;width:100%;clip-path:var(--wje-img-compare-clip-path)}.native-split-view{max-width:100%;max-height:100%;overflow:hidden}.wje-divider{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;background-color:var(--wje-img-compare-divider-background);height:100%;width:var(--wje-img-compare-divider-size);cursor:col-resize;top:0;left:var(--wje-img-compare-divider-left)}.wje-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wje-img-compare-divider-area) / -2 + var(--wje-img-compare-divider-size) / 2);width:var(---wje-img-compare-divider-area)}.wje-divider wje-icon{position:absolute;background-color:#fff;padding:.5rem;color:var(--wje-color-dark);border-radius:var(--wje-border-radius-circle);box-shadow:#523f6933 0 0 30px 10px;background:var(--wje-color-white)!important}';
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "group" });
+    this.isShadowRoot = "open", this.setAriaState({ role: "group" });
   }
-  /**
-   * Draws the component.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-split-view");
-    let beforeElement = document.createElement("div");
-    beforeElement.classList.add("wje-before");
-    let before = document.createElement("slot");
-    before.setAttribute("name", "before");
-    let afterElement = document.createElement("div");
-    afterElement.classList.add("wje-after");
-    let after = document.createElement("slot");
-    after.setAttribute("name", "after");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "arrow-bar-both");
-    let dividerElement = document.createElement("div");
-    dividerElement.classList.add("wje-divider");
-    dividerElement.setAttribute("part", "divider");
-    dividerElement.setAttribute("role", "separator");
-    dividerElement.setAttribute("tabindex", "0");
-    dividerElement.setAttribute("aria-orientation", "horizontal");
-    dividerElement.addEventListener("mousedown", this.handleDrag, false);
-    beforeElement.appendChild(before);
-    afterElement.appendChild(after);
-    dividerElement.appendChild(icon);
-    native.appendChild(beforeElement);
-    native.appendChild(afterElement);
-    native.appendChild(dividerElement);
-    fragment.appendChild(native);
-    this.native = native;
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("native-split-view");
+    let i2 = document.createElement("div");
+    i2.classList.add("wje-before");
+    let o = document.createElement("slot");
+    o.setAttribute("name", "before");
+    let r = document.createElement("div");
+    r.classList.add("wje-after");
+    let a = document.createElement("slot");
+    a.setAttribute("name", "after");
+    let n = document.createElement("wje-icon");
+    n.setAttribute("name", "arrow-bar-both");
+    let d = document.createElement("div");
+    return d.classList.add("wje-divider"), d.setAttribute("part", "divider"), d.setAttribute("role", "separator"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-orientation", "horizontal"), d.addEventListener("mousedown", this.handleDrag, false), i2.appendChild(o), r.appendChild(a), d.appendChild(n), t2.appendChild(i2), t2.appendChild(r), t2.appendChild(d), e2.appendChild(t2), this.native = t2, e2;
   }
 }
-ImgComparer.define("wje-img-comparer", ImgComparer);
+i.define("wje-img-comparer", i);
 export {
-  ImgComparer as default
+  i as default
 };
 //# sourceMappingURL=wje-img-comparer.js.map

package/dist/wje-img-comparer.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('tabindex', '0');\n        dividerElement.setAttribute('aria-orientation', 'horizontal');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('tabindex', '0');\n        dividerElement.setAttribute('aria-orientation', 'horizontal');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":["ImgComparer","WJElement","constructor","super","dependencies","Icon","className","handleDrag","e","width","this","native","getBoundingClientRect","container","options","move","pointerEvent","dims","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","onMove","document","addEventListener","passive","stop","removeEventListener","onStop","initialEvent","PointerEvent","value","position","parseFloat","clamp","toFixed","style","setProperty","num","min","max","Math","cssStyleSheet","setupAttributes","isShadowRoot","setAriaState","role","draw","fragment","createDocumentFragment","createElement","classList","add","beforeElement","before","setAttribute","afterElement","after","icon","dividerElement","appendChild","define"],"mappings":"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"}

package/dist/wje-img.js

@@ -1,246 +1,98 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { getBasePath } from "./base-path.js";
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Img ]\n*/\n\nimg {\n    display: block;\n    width: var(--wje-img-width, 100%);\n    height: var(--wje-img-height, auto);\n    max-width: 100%;\n    object-fit: inherit;\n    border-radius: var(--wje-img-border-radius, 0);\n}\n";
-class Img extends WJElement {
-  /**
-   * Creates an instance of Img.
-   * @class
-   */
+import { getBasePath as t } from "./base-path.js";
+import e from "./wje-element.js";
+class i extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "Img");
-    __publicField(this, "setAvatarInitials", (value = false) => {
-      let parent = this.parentElement;
-      if ((parent == null ? void 0 : parent.tagName) === "WJE-AVATAR") parent.initials = value;
+    __publicField(this, "setAvatarInitials", (t2 = false) => {
+      let e2 = this.parentElement;
+      "WJE-AVATAR" === (e2 == null ? void 0 : e2.tagName) && (e2.initials = t2);
     });
-    /**
-     * Deletes the current image by calling the remove method.
-     * This function is typically used to trigger the removal of an image element
-     * or perform cleanup operations related to the image.
-     */
     __publicField(this, "deleteImage", () => {
       this.remove();
     });
-    /**
-     * Handles error scenarios by checking the `fallout` property and performing
-     * corresponding actions. If `fallout` is not defined, the function terminates
-     * early. Logs the active actions and attempts to assign an error handler
-     * based on the `fallout` value. If the `fallout` value does not correspond to
-     * a recognized action, it logs an error message.
-     * @function onerrorFunc
-     * @memberof Img
-     */
-    __publicField(this, "onerrorFunc", (img) => {
-      if (!this.fallout) return;
-      if (this.actions[this.fallout]) {
-        img.onerror = this.actions[this.fallout];
-      } else {
-        console.error("Unsupported value:", this.fallout);
-      }
+    __publicField(this, "onerrorFunc", (t2) => {
+      this.fallout && (this.actions[this.fallout] ? t2.onerror = this.actions[this.fallout] : console.error("Unsupported value:", this.fallout));
     });
-    this._fallout = false;
-    this.actions = {
-      delete: () => this.deleteImage(),
-      log: () => console.error("Error log pre obrázok:", this.src)
-    };
-  }
-  /**
-   * Sets the value of the `src` attribute for the element.
-   * @param {string} value The value to set for the `src` attribute.
-   */
-  set src(value) {
-    this.setAttribute("src", value);
-  }
-  /**
-   * Retrieves the value of the 'src' attribute from the element.
-   * @returns {string} The value of the 'src' attribute.
-   */
+    this._fallout = false, this.actions = { delete: () => this.deleteImage(), log: () => console.error("Error log pre obrázok:", this.src) };
+  }
+  set src(t2) {
+    this.setAttribute("src", t2);
+  }
   get src() {
     return this.getAttribute("src");
   }
-  /**
-   * Sets the value of the 'alt' attribute for the element.
-   * @param {string} value The new value to set for the 'alt' attribute.
-   */
-  set alt(value) {
-    this.setAttribute("alt", value);
-  }
-  /**
-   * Retrieves the value of the 'alt' attribute for the current element.
-   * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.
-   */
+  set alt(t2) {
+    this.setAttribute("alt", t2);
+  }
   get alt() {
     return this.getAttribute("alt");
   }
-  /**
-   * Sets the fallout property. Updates the `fallout` attribute if the value is a string;
-   * otherwise, assigns the value to the `_fallout` property.
-   * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.
-   */
-  set fallout(value) {
-    if (typeof value === "string") {
-      this.setAttribute("fallout", value);
-    } else {
-      this._fallout = value;
-    }
+  set fallout(t2) {
+    "string" == typeof t2 ? this.setAttribute("fallout", t2) : this._fallout = t2;
   }
-  /**
-   * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.
-   * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.
-   */
   get fallout() {
     return this.hasAttribute("fallout") ? this.getAttribute("fallout") : this._fallout;
   }
-  /**
-   * Sets the value of the loader attribute.
-   * @param {string} value The value to set for the loader attribute.
-   */
-  set loader(value) {
-    if (value) {
-      this.setAttribute("loader", value);
-    }
+  set loader(t2) {
+    t2 && this.setAttribute("loader", t2);
   }
-  /**
-   * Retrieves the configured loader URL or resolves the default loader from the base path.
-   * @returns {string} The loader URL.
-   */
   get loader() {
-    return this.getAttribute("loader") || getBasePath("assets/img/image-loader.gif");
-  }
-  /**
-   * Enables or disables lazy loading for the image.
-   * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.
-   */
-  set noLazy(value) {
-    if (value) {
-      this.setAttribute("no-lazy", "");
-    } else {
-      this.removeAttribute("no-lazy");
-    }
+    return this.getAttribute("loader") || t("assets/img/image-loader.gif");
+  }
+  set noLazy(t2) {
+    t2 ? this.setAttribute("no-lazy", "") : this.removeAttribute("no-lazy");
   }
-  /**
-   * Checks whether lazy loading is disabled.
-   * @returns {boolean} True when the `no-lazy` attribute is present.
-   */
   get noLazy() {
     return this.hasAttribute("no-lazy");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return "img{display:block;width:var(--wje-img-width, 100%);height:var(--wje-img-height, auto);max-width:100%;object-fit:inherit;border-radius:var(--wje-img-border-radius, 0)}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["src", "alt", "no-lazy"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(t2, e2, i2) {
     var _a, _b;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (oldValue === newValue) return;
-    if (name === "alt") {
-      if (this.native) this.native.setAttribute("alt", this.alt || "");
-      const label = (_b = this.alt) == null ? void 0 : _b.trim();
-      if (label) this.setAriaState({ label });
+    if ((_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, t2, e2, i2), e2 !== i2 && "alt" === t2) {
+      this.native && this.native.setAttribute("alt", this.alt || "");
+      const t3 = (_b = this.alt) == null ? void 0 : _b.trim();
+      t3 && this.setAriaState({ label: t3 });
     }
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     var _a;
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "img" });
-    if ((_a = this.alt) == null ? void 0 : _a.trim()) this.setAriaState({ label: this.alt.trim() });
-  }
-  /**
-   * Creates and assembles a lazy-loaded image element within a document fragment.
-   * @returns {DocumentFragment} A document fragment containing the image element.
-   */
+    this.isShadowRoot = "open", this.setAriaState({ role: "img" }), ((_a = this.alt) == null ? void 0 : _a.trim()) && this.setAriaState({ label: this.alt.trim() });
+  }
   draw() {
     var _a;
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("img");
-    native.setAttribute("part", "native");
-    native.setAttribute("src", this.noLazy ? this.src : this.loader);
-    native.setAttribute("alt", this.alt || "");
-    native.classList.add("lazy-loaded-image", "lazy");
-    native.addEventListener("error", (e) => {
-      const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;
-      if (e.target.src === absoluteLoaderUrl) return;
-      this.setAvatarInitials(true);
-    });
-    this.onerrorFunc(native);
-    fragment.appendChild(native);
-    this.native = native;
-    if ((_a = this.alt) == null ? void 0 : _a.trim()) this.setAriaState({ label: this.alt.trim() });
-    return fragment;
-  }
-  /**
-   * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.
-   * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.
-   * Removes the `lazy` class once the image source is updated and unobserves the element.
-   * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.
-   * @returns {void} Does not return a value.
-   */
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("img");
+    return e2.setAttribute("part", "native"), e2.setAttribute("src", this.noLazy ? this.src : this.loader), e2.setAttribute("alt", this.alt || ""), e2.classList.add("lazy-loaded-image", "lazy"), e2.addEventListener("error", (t3) => {
+      const e3 = new URL(this.loader, window.location.origin).href;
+      t3.target.src !== e3 && this.setAvatarInitials(true);
+    }), this.onerrorFunc(e2), t2.appendChild(e2), this.native = e2, ((_a = this.alt) == null ? void 0 : _a.trim()) && this.setAriaState({ label: this.alt.trim() }), t2;
+  }
   afterDraw() {
-    if (this.noLazy) {
-      this.native.classList.remove("lazy");
-      return;
-    }
-    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.src = this.src;
-          this.classList.remove("lazy");
-          lazyImageObserver.unobserve(entry.target);
-        }
+    if (this.noLazy) return void this.native.classList.remove("lazy");
+    let t2 = new IntersectionObserver((e2, i2) => {
+      e2.forEach((e3) => {
+        e3.isIntersecting && (e3.target.src = this.src, this.classList.remove("lazy"), t2.unobserve(e3.target));
       });
     });
-    lazyImageObserver.observe(this.native);
-  }
-  /**
-   * Adds a new action to the internal actions object.
-   * @param {string} name The name of the action to be added.
-   * @param {Function} func The function representing the action logic.
-   * @returns {void} This method does not return a value.
-   */
-  addAction(name, func) {
-    if (typeof func === "function") {
-      this.actions[name] = func;
-    } else {
-      console.error("The action must be a function.");
-    }
+    t2.observe(this.native);
   }
-  /**
-   * Removes an action from the actions list if it exists.
-   * @param {string} name The name of the action to remove.
-   * @returns {void} Does not return a value.
-   */
-  removeAction(name) {
-    if (this.actions[name]) {
-      delete this.actions[name];
-    } else {
-      console.error(`Action "${name}" does not exist.`);
-    }
+  addAction(t2, e2) {
+    "function" == typeof e2 ? this.actions[t2] = e2 : console.error("The action must be a function.");
+  }
+  removeAction(t2) {
+    this.actions[t2] ? delete this.actions[t2] : console.error(`Action "${t2}" does not exist.`);
   }
 }
-Img.define("wje-img", Img);
+i.define("wje-img", i);
 export {
-  Img as default
+  i as default
 };
 //# sourceMappingURL=wje-img.js.map

package/dist/wje-img.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { getBasePath } from '../utils/base-path.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading. Defaults to the loader asset resolved from the configured base path.\n * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the configured loader URL or resolves the default loader from the base path.\n     * @returns {string} The loader URL.\n     */\n    get loader() {\n        return this.getAttribute('loader') || getBasePath('assets/img/image-loader.gif');\n    }\n\n    /**\n     * Enables or disables lazy loading for the image.\n     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.\n     */\n    set noLazy(value) {\n        if (value) {\n            this.setAttribute('no-lazy', '');\n        } else {\n            this.removeAttribute('no-lazy');\n        }\n    }\n\n    /**\n     * Checks whether lazy loading is disabled.\n     * @returns {boolean} True when the `no-lazy` attribute is present.\n     */\n    get noLazy() {\n        return this.hasAttribute('no-lazy');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['src', 'alt', 'no-lazy'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.noLazy ? this.src : this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.noLazy) {\n            this.native.classList.remove('lazy');\n            return;\n        }\n\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { getBasePath } from '../utils/base-path.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading. Defaults to the loader asset resolved from the configured base path.\n * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the configured loader URL or resolves the default loader from the base path.\n     * @returns {string} The loader URL.\n     */\n    get loader() {\n        return this.getAttribute('loader') || getBasePath('assets/img/image-loader.gif');\n    }\n\n    /**\n     * Enables or disables lazy loading for the image.\n     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.\n     */\n    set noLazy(value) {\n        if (value) {\n            this.setAttribute('no-lazy', '');\n        } else {\n            this.removeAttribute('no-lazy');\n        }\n    }\n\n    /**\n     * Checks whether lazy loading is disabled.\n     * @returns {boolean} True when the `no-lazy` attribute is present.\n     */\n    get noLazy() {\n        return this.hasAttribute('no-lazy');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['src', 'alt', 'no-lazy'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.noLazy ? this.src : this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.noLazy) {\n            this.native.classList.remove('lazy');\n            return;\n        }\n\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":["Img","WJElement","constructor","super","className","setAvatarInitials","value","parent","this","parentElement","tagName","initials","deleteImage","remove","onerrorFunc","img","fallout","actions","onerror","console","error","_fallout","delete","log","src","setAttribute","getAttribute","hasAttribute","loader","getBasePath","removeAttribute","noLazy","cssStyleSheet","observedAttributes","name","oldValue","newValue","attributeChangedCallback","native","alt","label","trim","setAriaState","setupAttributes","isShadowRoot","role","draw","fragment","document","createDocumentFragment","createElement","classList","add","addEventListener","e","absoluteLoaderUrl","URL","window","location","origin","href","target","appendChild","afterDraw","lazyImageObserver","IntersectionObserver","entries","observer","forEach","entry","isIntersecting","unobserve","observe","func","define"],"mappings":"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"}