wj-elements 0.1.241 → 0.1.243

package/dist/packages/wje-element/element.d.ts

@@ -18,6 +18,7 @@ export default class WJElement extends HTMLElement {
      * @param [options] Additional options for defining the element.
      */
     static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
+    __templateInserted: boolean;
     service: UniversalService;
     _dependencies: {};
     /**

package/dist/wje-button.js

@@ -356,16 +356,23 @@ class Button extends WJElement {
    * After draw method for the Button element.
    */
   afterDraw() {
+    var _a, _b, _c, _d;
     if (this.hasAttribute("route")) {
       this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     }
     if (this.hasToggle) {
       if (this.toggle === "off") {
-        this.slotToggle.assignedNodes()[1].classList.add("show");
-        this.setAttribute("value", "off");
+        const node = (_b = (_a = this.slotToggle) == null ? void 0 : _a.assignedNodes()) == null ? void 0 : _b[1];
+        if (node) {
+          node.classList.add("show");
+          this.setAttribute("value", "off");
+        }
       } else {
-        this.slotToggle.assignedNodes()[0].classList.add("show");
-        this.setAttribute("value", "on");
+        const node = (_d = (_c = this.slotToggle) == null ? void 0 : _c.assignedNodes()) == null ? void 0 : _d[0];
+        if (node) {
+          node.classList.add("show");
+          this.setAttribute("value", "on");
+        }
       }
     }
     if (this.hasAttribute("custom-event")) {

package/dist/wje-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                const node = this.slotToggle?.assignedNodes()?.[1];\n                if (node) {\n                    node.classList.add(\"show\");\n                    this.setAttribute('value', 'off');\n                }\n                // this.slotToggle.assignedNodes()[1].classList.add('show');\n\n            } else {\n                const node = this.slotToggle?.assignedNodes()?.[0];\n                if (node) {\n                    node.classList.add(\"show\");\n                    this.setAttribute('value', 'on');\n                }\n                // this.slotToggle.assignedNodes()[0].classList.add('show');\n\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}

package/dist/wje-element.js

@@ -51,6 +51,7 @@ const _WJElement = class _WJElement extends HTMLElement {
         resolve();
       });
     });
+    this.__templateInserted = false;
     __privateSet(this, _isAttached, false);
     this.service = new UniversalService({
       store
@@ -268,6 +269,7 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   connectedCallback() {
     var _a;
+    if (__privateGet(this, _isAttached)) return;
     if (!__privateGet(this, _isRendering)) {
       __privateSet(this, _originalVisibility, __privateGet(this, _originalVisibility) ?? this.style.visibility);
       this.style.visibility = "hidden";
@@ -349,8 +351,12 @@ const _WJElement = class _WJElement extends HTMLElement {
       this.finisPromise = resolve;
       this.rejectPromise = reject;
     });
-    __privateSet(this, _pristine, false);
-    __privateMethod(this, _WJElement_instances, enqueueUpdate_fn).call(this);
+    if (__privateGet(this, _isAttached)) {
+      if (!__privateGet(this, _isRendering)) {
+        __privateSet(this, _pristine, false);
+        __privateMethod(this, _WJElement_instances, enqueueUpdate_fn).call(this);
+      }
+    }
   }
   stopRenderLoop() {
     if (this.rafId) {
@@ -386,10 +392,15 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   display(force = false) {
     this.template = this.constructor.customTemplate || document.createElement("template");
-    if (force) {
-      [...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));
+    if (!this.__templateInserted && this.context.childElementCount === 0) {
+      this.context.append(this.template.content.cloneNode(true));
+      this.__templateInserted = true;
+    }
+    if (this.context && this.constructor.cssStyleSheet) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(this.constructor.cssStyleSheet);
+      this.context.adoptedStyleSheets = [sheet];
     }
-    this.context.append(this.template.content.cloneNode(true));
     if (this.noShow || this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission)) {
       this.remove();
       return Promise.resolve();
@@ -400,22 +411,25 @@ const _WJElement = class _WJElement extends HTMLElement {
    * Renders the component's content.
    */
   async render() {
+    var _a;
     __privateSet(this, _drawingStatus, this.drawingStatuses.DRAWING);
-    let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
-    if (_draw instanceof Promise || (_draw == null ? void 0 : _draw.constructor.name) === "Promise") {
-      _draw = await _draw;
+    let result = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
+    if (result instanceof Promise || ((_a = result == null ? void 0 : result.constructor) == null ? void 0 : _a.name) === "Promise") {
+      result = await result;
+    }
+    if (result === null || result === void 0) {
+      return;
     }
-    let rend = _draw;
+    this.context.innerHTML = "";
     let element;
-    if (rend instanceof HTMLElement || rend instanceof DocumentFragment) {
-      element = rend;
+    if (result instanceof HTMLElement || result instanceof DocumentFragment) {
+      element = result;
     } else {
-      let inputTemplate = document.createElement("template");
-      inputTemplate.innerHTML = rend;
-      element = inputTemplate.content.cloneNode(true);
+      const tpl = document.createElement("template");
+      tpl.innerHTML = String(result);
+      element = tpl.content.cloneNode(true);
     }
-    let rendered = element;
-    this.context.appendChild(rendered);
+    this.context.appendChild(element);
   }
   /**
    * Sanitizes a given name by converting it from kebab-case to camelCase.
@@ -492,7 +506,7 @@ enqueueUpdate_fn = function() {
   }
 };
 refresh_fn = async function() {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   if (__privateGet(this, _isRendering)) {
     this.rafId = requestAnimationFrame(() => __privateMethod(this, _WJElement_instances, refresh_fn).call(this));
     return;
@@ -500,15 +514,26 @@ refresh_fn = async function() {
   if (!__privateGet(this, _pristine)) {
     __privateSet(this, _pristine, true);
     __privateSet(this, _isRendering, true);
-    if (__privateGet(this, _isAttached)) {
-      (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
-      (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
-      (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
-    } else {
-      this.stopRenderLoop();
-    }
     try {
-      await this.initWjElement(true);
+      (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
+      if (this.hasShadowRoot && !this.shadowRoot) {
+        this.attachShadow({ mode: this.shadowType || "open", delegatesFocus: true });
+      }
+      if (!__privateGet(this, _isAttached)) {
+        await this.display(false);
+      } else {
+        const params = WjElementUtils.getAttributes(this);
+        const bd = this.beforeDraw(this.context, this.store, params);
+        if (bd instanceof Promise || ((_b = bd == null ? void 0 : bd.constructor) == null ? void 0 : _b.name) === "Promise") {
+          await bd;
+        }
+        await this.render();
+        const ad = (_c = this.afterDraw) == null ? void 0 : _c.call(this, this.context, this.store, params);
+        if (ad instanceof Promise || ((_d = ad == null ? void 0 : ad.constructor) == null ? void 0 : _d.name) === "Promise") {
+          await ad;
+        }
+        __privateSet(this, _drawingStatus, this.drawingStatuses.DONE);
+      }
     } catch (error) {
       console.error("Render error:", error);
     } finally {
@@ -537,6 +562,7 @@ resolveRender_fn = function() {
       await __beforeDraw;
     }
     await this.render();
+    await new Promise((r) => queueMicrotask(r));
     const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
     if (__afterDraw instanceof Promise || (__afterDraw == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
       await __afterDraw;

package/dist/wje-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/**\n\t * Initializes a new instance of the WJElement class.\n\t */\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/**\n\t\t * @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t */\n\n\t\t/**\n\t\t * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t */\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/**\n\t * Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t */\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/**\n\t * Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t */\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') || [];\n\t}\n\n\t/**\n\t * Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t */\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/**\n\t * Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t */\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/**\n\t * Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t */\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/**\n\t * Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t */\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/**\n\t * Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t */\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/**\n\t * Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t */\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') || 'open';\n\t}\n\n\t/**\n\t * Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t */\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/**\n\t * Gets the store instance.\n\t * @returns {object} The store instance.\n\t */\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/**\n\t * @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t */\n\n\t/**\n\t * @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t */\n\n\t/**\n\t * Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t */\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/**\n\t * Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t */\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/**\n\t * Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t */\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/**\n\t * Gets the component dependencies.\n\t * @returns The component dependencies.\n\t */\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/**\n\t * Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t */\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML || ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/**\n\t * Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t */\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/**\n\t * Defines component dependencies by registering custom elements.\n\t */\n\tdefineDependencies() {\n\t\tif (this.dependencies)\n\t\t\tObject.entries(this.dependencies).forEach((name, component) => WJElement.define(name, component));\n\t}\n\n\t/**\n\t * Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStoreObj, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is connected to the DOM.\n\t */\n\tconnectedCallback() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/**\n\t * Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t */\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || 'open', delegatesFocus: true });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\t\t\tawait this.display(force);\n\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tthis.context.adoptedStyleSheets = [sheet];\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/**\n\t * Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t */\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Hook for extending behavior before disconnecting the component.\n\t */\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior after disconnecting the component.\n\t */\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior before redrawing the component.\n\t */\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/**\n\t * Cleans up resources and event listeners for the component.\n\t */\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is disconnected from the DOM.\n\t */\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/**\n\t * Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t */\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tthis.#pristine = false;\n\t\tthis.#enqueueUpdate();\n\t}\n\n\t/**\n\t * Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t */\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\tif (this.#isAttached) {\n\t\t\t\tthis.beforeRedraw?.();\n\t\t\t\tthis.beforeDisconnect?.();\n\t\t\t\tthis.afterDisconnect?.();\n\t\t\t} else {\n\t\t\t\tthis.stopRenderLoop();\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.initWjElement(true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStore The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStore, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStore, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t */\n\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate || document.createElement('template');\n\n\t\tif (force) {\n\t\t\t[...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));\n\t\t}\n\n\t\tthis.context.append(this.template.content.cloneNode(true));\n\n\t\tif (this.noShow || (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn this.#resolveRender();\n\t}\n\n\t/**\n\t * Renders the component's content.\n\t */\n\tasync render() {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (_draw instanceof Promise || _draw?.constructor.name === 'Promise') {\n\t\t\t_draw = await _draw;\n\t\t}\n\n\t\tlet rend = _draw;\n\t\tlet element;\n\n\t\tif (rend instanceof HTMLElement || rend instanceof DocumentFragment) {\n\t\t\telement = rend;\n\t\t} else {\n\t\t\tlet inputTemplate = document.createElement('template');\n\t\t\tinputTemplate.innerHTML = rend;\n\t\t\telement = inputTemplate.content.cloneNode(true);\n\t\t}\n\n\t\tlet rendered = element;\n\n\t\tthis.context.appendChild(rendered);\n\t}\n\n\t/**\n\t * Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t */\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/**\n\t * Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t *   get name() { return 'value'; },\n\t *   set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t */\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\t// Check if the descriptor is found on the object itself\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\t// Otherwise, check the prototype chain\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\t// If the property doesn't exist at all\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/**\n\t * Sets up property accessors for the component's attributes.\n\t */\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Resolves the rendering process of the component.\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender() {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__beforeDraw instanceof Promise || __beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render();\n\n\t\t\tconst __afterDraw = this.afterDraw?.(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__afterDraw instanceof Promise || __afterDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __afterDraw;\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter  pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.error(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/**\n\t * Initializes a new instance of the WJElement class.\n\t */\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.__templateInserted = false;\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/**\n\t\t * @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t */\n\n\t\t/**\n\t\t * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t */\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/**\n\t * Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t */\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/**\n\t * Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t */\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') || [];\n\t}\n\n\t/**\n\t * Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t */\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/**\n\t * Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t */\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/**\n\t * Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t */\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/**\n\t * Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t */\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/**\n\t * Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t */\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/**\n\t * Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t */\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') || 'open';\n\t}\n\n\t/**\n\t * Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t */\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/**\n\t * Gets the store instance.\n\t * @returns {object} The store instance.\n\t */\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/**\n\t * @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t */\n\n\t/**\n\t * @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t */\n\n\t/**\n\t * Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t */\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/**\n\t * Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t */\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/**\n\t * Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t */\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/**\n\t * Gets the component dependencies.\n\t * @returns The component dependencies.\n\t */\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/**\n\t * Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t */\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML || ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/**\n\t * Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t */\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/**\n\t * Defines component dependencies by registering custom elements.\n\t */\n\tdefineDependencies() {\n\t\tif (this.dependencies)\n\t\t\tObject.entries(this.dependencies).forEach((name, component) => WJElement.define(name, component));\n\t}\n\n\t/**\n\t * Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStoreObj, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is connected to the DOM.\n\t */\n\tconnectedCallback() {\n\t\tif (this.#isAttached) return;\n\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/**\n\t * Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t */\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || 'open', delegatesFocus: true });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\t\t\tawait this.display(force);\n\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tthis.context.adoptedStyleSheets = [sheet];\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/**\n\t * Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t */\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Hook for extending behavior before disconnecting the component.\n\t */\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior after disconnecting the component.\n\t */\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior before redrawing the component.\n\t */\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/**\n\t * Cleans up resources and event listeners for the component.\n\t */\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is disconnected from the DOM.\n\t */\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/**\n\t * Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t */\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tif (this.#isAttached) {\n\t\t\t// 🔥 NEVOLAJ redraw, keď sa práve renderuje\n\t\t\tif (!this.#isRendering) {\n\t\t\t\tthis.#pristine = false;\n\t\t\t\tthis.#enqueueUpdate();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t */\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\ttry {\n\t\t\t\tthis.beforeRedraw?.();\n\n\t\t\t\tif (this.hasShadowRoot && !this.shadowRoot) {\n\t\t\t\t\tthis.attachShadow({ mode: this.shadowType || 'open', delegatesFocus: true });\n\t\t\t\t}\n\n\t\t\t\tif (!this.#isAttached) {\n\t\t\t\t\t// 🔹 Prvé vykreslenie: vloží template + beforeDraw + render + afterDraw cez #resolveRender\n\t\t\t\t\tawait this.display(false);\n\t\t\t\t} else {\n\t\t\t\t\t// 🔹 Redraw: už nevoláme display(), len znova prebehnú hooky.\n\t\t\t\t\tconst params = WjElementUtils.getAttributes(this);\n\n\t\t\t\t\tconst bd = this.beforeDraw(this.context, this.store, params);\n\t\t\t\t\tif (bd instanceof Promise || bd?.constructor?.name === 'Promise') {\n\t\t\t\t\t\tawait bd;\n\t\t\t\t\t}\n\n\t\t\t\t\tawait this.render();\n\n\t\t\t\t\tconst ad = this.afterDraw?.(this.context, this.store, params);\n\t\t\t\t\tif (ad instanceof Promise || ad?.constructor?.name === 'Promise') {\n\t\t\t\t\t\tawait ad;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStore The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStore, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStore, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t */\n\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate || document.createElement('template');\n\n\t\t// Insert template ONLY once per component instance\n\t\tif (!this.__templateInserted && this.context.childElementCount === 0) {\n\t\t\tthis.context.append(this.template.content.cloneNode(true));\n\t\t\tthis.__templateInserted = true;\n\t\t}\n\n\t\t// Base stylesheet – aplikuj raz, keď context existuje.\n\t\tif (this.context && this.constructor.cssStyleSheet) {\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\t\t\tthis.context.adoptedStyleSheets = [sheet];\n\t\t}\n\n\t\tif (this.noShow || (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn this.#resolveRender();\n\t}\n\n\t/**\n\t * Renders the component's content.\n\t */\n\tasync render() {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet result = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (result instanceof Promise || result?.constructor?.name === 'Promise') {\n\t\t\tresult = await result;\n\t\t}\n\n\t\t// If draw() returns null or undefined → DO NOT clear DOM (template-only components)\n\t\tif (result === null || result === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\t// FULL RERENDER: clear existing DOM before inserting new content\n\t\tthis.context.innerHTML = '';\n\n\t\tlet element;\n\n\t\tif (result instanceof HTMLElement || result instanceof DocumentFragment) {\n\t\t\telement = result;\n\t\t} else {\n\t\t\tconst tpl = document.createElement('template');\n\t\t\ttpl.innerHTML = String(result);\n\t\t\telement = tpl.content.cloneNode(true);\n\t\t}\n\n\t\tthis.context.appendChild(element);\n\t}\n\n\t/**\n\t * Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t */\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/**\n\t * Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t *   get name() { return 'value'; },\n\t *   set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t */\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\t// Check if the descriptor is found on the object itself\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\t// Otherwise, check the prototype chain\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\t// If the property doesn't exist at all\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/**\n\t * Sets up property accessors for the component's attributes.\n\t */\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Resolves the rendering process of the component.\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender() {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__beforeDraw instanceof Promise || __beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render();\n\n\t\t\t// Počkaj na flush DOMu (mikrotask), aby v afterDraw už boli elementy pripravené\n\t\t\tawait new Promise(r => queueMicrotask(r));\n\n\t\t\tconst __afterDraw = this.afterDraw?.(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__afterDraw instanceof Promise || __afterDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __afterDraw;\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter  pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.error(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":[],"mappings":"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"}

package/dist/wje-img.js

@@ -163,17 +163,36 @@ class Img extends WJElement {
    * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.
    * @returns {void} Does not return a value.
    */
+  // afterDraw() {
+  //     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);
+  //             }
+  //         });
+  //     });
+  //
+  //     lazyImageObserver.observe(this.native);
+  // }
   afterDraw() {
-    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
+    const img = this.native;
+    let observer = new IntersectionObserver((entries, obs) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.src = this.src;
-          this.classList.remove("lazy");
-          lazyImageObserver.unobserve(entry.target);
+        if (!entry.isIntersecting) return;
+        const realSrc = this.getAttribute("src");
+        if (typeof realSrc === "string" && realSrc.length > 0) {
+          img.src = realSrc;
         }
+        this.classList.remove("lazy");
+        obs.unobserve(entry.target);
       });
     });
-    lazyImageObserver.observe(this.native);
+    if (img) {
+      observer.observe(img);
+    }
   }
   /**
    * Adds a new action to the internal actions object.

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 { 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.\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 value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\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'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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.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        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        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 { 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.\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 value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\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'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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.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        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    //     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    afterDraw() {\n        const img = this.native;\n\n        let observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach((entry) => {\n                if (!entry.isIntersecting) return;\n\n                const realSrc = this.getAttribute('src');\n\n                if (typeof realSrc === 'string' && realSrc.length > 0) {\n                    img.src = realSrc;\n                }\n\n                this.classList.remove('lazy');\n\n                obs.unobserve(entry.target);\n            });\n        });\n\n        if (img) {\n            observer.observe(img);\n        }\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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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.241",
+  "version": "0.1.243",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",