wj-elements 0.2.0-alpha.12 → 0.2.0-alpha.14

package/dist/skeleton.css

@@ -0,0 +1,187 @@
+/*
+[ Skeleton ]
+*/
+
+@keyframes wje-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.wje-skeleton {
+  cursor: progress;
+  user-select: none;
+}
+
+.wje-skeleton-overlay {
+  display: grid;
+}
+
+.wje-skeleton-overlay-content,
+.wje-skeleton-overlay-skeleton {
+  grid-area: 1 / 1;
+}
+
+.wje-skeleton-overlay-skeleton {
+  display: none;            /* shown in loading state */
+  pointer-events: none;     /* skeleton should not be interactive */
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+.wje-skeleton-overlay-skeleton > .wje-skeleton {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Base "shape" primitives */
+.wje-skeleton-line,
+.wje-skeleton-head,
+.wje-skeleton-circle,
+.wje-skeleton-square {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--wje-skeleton-bg);
+}
+
+.wje-skeleton-line {
+  display: block;
+  height: var(--wje-skeleton-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.wje-skeleton-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wje-skeleton-gap);
+}
+
+.wje-skeleton-flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wje-skeleton-gap);
+}
+
+.wje-skeleton-line + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-head,
+.wje-skeleton-head + .wje-skeleton-line,
+.wje-skeleton-head + .wje-skeleton-head,
+.wje-skeleton-circle + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-circle {
+  /*margin-top: var(--wje-skeleton-gap);*/
+}
+
+.wje-skeleton-head {
+  display: block;
+  height: var(--wje-skeleton-head-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+}
+
+.wje-skeleton-circle {
+  display: block;
+  flex: 1 1 0;
+  max-width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+}
+
+.wje-skeleton-square {
+  display: block;
+  width: 100%;
+  height: 150px;
+  border-radius: var(--wje-skeleton-radius);
+}
+
+/* Shimmer layer */
+.wje-skeleton-line::after,
+.wje-skeleton-head::after,
+.wje-skeleton-circle::after,
+.wje-skeleton-square::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  animation: wje-skeleton-shimmer var(--wje-skeleton-duration) infinite;
+  background: linear-gradient(90deg, transparent, var(--wje-skeleton-highlight), transparent);
+}
+
+/* "Stronger" variant */
+.wje-skeleton-strong .wje-skeleton-line,
+.wje-skeleton-strong .wje-skeleton-head,
+.wje-skeleton-strong .wje-skeleton-circle,
+.wje-skeleton-strong .wje-skeleton-square {
+  background-color: var(--wje-skeleton-bg-strong);
+}
+
+/* Simple layout helpers (opt-in) */
+.wje-skeleton .flex { display: flex; }
+.wje-skeleton .inline-flex { display: inline-flex; }
+.wje-skeleton .align-center { align-items: center; }
+.wje-skeleton .align-start { align-items: flex-start; }
+.wje-skeleton .align-end { align-items: flex-end; }
+.wje-skeleton .justify-start { justify-content: flex-start; }
+.wje-skeleton .justify-end { justify-content: flex-end; }
+.wje-skeleton .justify-between { justify-content: space-between; }
+.wje-skeleton .justify-center { justify-content: center; }
+.wje-skeleton .justify-around { justify-content: space-around; }
+
+.wje-skeleton .gap { gap: var(--wje-skeleton-gap); }
+
+.wje-skeleton .w-5 { width: 5%; }
+.wje-skeleton .w-10 { width: 10%; }
+.wje-skeleton .w-15 { width: 15%; }
+.wje-skeleton .w-20 { width: 20%; }
+.wje-skeleton .w-25 { width: 25%; }
+.wje-skeleton .w-30 { width: 30%; }
+.wje-skeleton .w-35 { width: 35%; }
+.wje-skeleton .w-40 { width: 40%; }
+.wje-skeleton .w-45 { width: 45%; }
+.wje-skeleton .w-50 { width: 50%; }
+.wje-skeleton .w-55 { width: 55%; }
+.wje-skeleton .w-60 { width: 60%; }
+.wje-skeleton .w-65 { width: 65%; }
+.wje-skeleton .w-70 { width: 70%; }
+.wje-skeleton .w-75 { width: 75%; }
+.wje-skeleton .w-80 { width: 80%; }
+.wje-skeleton .w-85 { width: 85%; }
+.wje-skeleton .w-90 { width: 90%; }
+.wje-skeleton .w-95 { width: 95%; }
+.wje-skeleton .w-100 { width: 100%; }
+
+.wje-skeleton .mb { margin-bottom: 16px; }
+.wje-skeleton .mt { margin-top: 16px; }
+.wje-skeleton .mr { margin-right: 16px; }
+.wje-skeleton .ml { margin-left: 16px; }
+.wje-skeleton .mbs { margin-bottom: 8px; }
+.wje-skeleton .mts { margin-top: 8px; }
+.wje-skeleton .mrs { margin-right: 8px; }
+.wje-skeleton .mls { margin-left: 8px; }
+
+/* Optional state helpers */
+.wje-skeleton-loading .wje-skeleton-overlay-content {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.wje-skeleton-loading .wje-skeleton-overlay-skeleton {
+  display: block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wje-skeleton-line::after,
+  .wje-skeleton-head::after,
+  .wje-skeleton-circle::after,
+  .wje-skeleton-square::after {
+    animation: none;
+    transform: none;
+    opacity: 0.35;
+  }
+}

package/dist/wje-dialog.js

@@ -140,6 +140,7 @@ dialog:focus-visible {
 
 :host {
     dialog {
+        background: var(--wje-dialog-background);
         box-sizing: border-box;
         transition: all 0.2s !important;
         width: var(--wje-dialog-width);

package/dist/wje-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n        slotFooter.id = 'footerSlot';\n        slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n\n        // Slot assignment may not be reflected synchronously on first render.\n        // Run in a microtask to ensure assignedNodes() sees slotted content.\n        Promise.resolve().then(() => this.updateHasFooter());\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 0);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n\n    updateHasFooter() {\n        // If footer is intentionally hidden, ensure it doesn't reserve space\n        if (this.hiddenFooter) {\n            const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n            if (footerEl) footerEl.setAttribute('hidden', '');\n            this.removeAttribute('has-footer');\n            return;\n        }\n        const slot = this.shadowRoot?.getElementById('footerSlot');\n        if (!slot) {\n            this.removeAttribute('has-footer');\n            return;\n        }\n\n        const assigned = slot.assignedNodes({ flatten: true });\n        const hasContent = assigned.some((n) => {\n            if (n.nodeType === Node.ELEMENT_NODE) return true;\n            if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n            return false;\n        });\n\n        // Prefer toggling the actual footer element so CSS/spacing is always correct\n        const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n        if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n        // Keep host attribute too (harmless, may be used elsewhere)\n        this.toggleAttribute('has-footer', hasContent);\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAO;AAwFX;AAAA;AAAA;AAAA;AAAA,qCAAY;AA+KZ;AAAA;AAAA;AAAA;AAAA,kCAAS,CAAC,MAAM;AACZ,UAAI,KAAK,QAAQ;AACb,aAAK,OAAO,YAAY;AAAA,MACpC;AAEQ,iBAAW,MAAM;AACb,gBAAQ,QAAQ,KAAK,WAAW,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACpD,eAAK,eAAe,KAAK,MAAM;AAE/B,eAAK,OAAO;AAEZ,cAAI,KAAK,OAAO,MAAM;AAClB,oBAAQ,QAAQ,KAAK,UAAU,MAAM,CAAC,CAAC;AAAA,UAC3D;AAAA,QACA,CAAa;AAAA,MACJ,GAAE,CAAC;AAAA,IACZ;AAMI;AAAA;AAAA;AAAA;AAAA,mCAAU,CAAC,MAAM;AACb,cAAQ,QAAQ,KAAK,YAAY,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACrD,aAAK,OAAO;AAEZ,YAAI,CAAC,KAAK,OAAO,MAAM;AACnB,kBAAQ,QAAQ,KAAK,WAAW,MAAM,CAAC,CAAC;AAAA,QACxD;AAAA,MACA,CAAS;AAAA,IACJ;AAAA,EApSL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY,OAAO;AACnB,QAAI,MAAO,MAAK,aAAa,gBAAgB,EAAE;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc;AACd,WAAO,CAAC,CAAC,KAAK,aAAa,cAAc;AAAA,EACjD;AAAA,EAEI,IAAI,aAAa,OAAO;AACpB,QAAI,MAAO,MAAK,aAAa,iBAAiB,EAAE;AAAA,EACxD;AAAA,EAEI,IAAI,eAAe;AACf,WAAO,CAAC,CAAC,KAAK,aAAa,eAAe;AAAA,EAClD;AAAA,EAEI,IAAI,aAAa,OAAO;AACpB,QAAI,MAAO,MAAK,aAAa,iBAAiB,EAAE;AAAA,EACxD;AAAA,EAEI,IAAI,eAAe;AACf,WAAO,CAAC,CAAC,KAAK,aAAa,eAAe;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,OAAO,IAAI;AAEtD,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAEnC,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,UAAU,SAAS,OAAO,QAAQ;AAC9B,QAAI,OAAO,SAAS;AAChB,YAAM,YAAY,UAAU,OAAO,SAAS,MAAM,KAAK,MAAM;AAAA,IACzE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,eAAe,QAAQ;AACnB,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,GAAG;AAC7B,SAAK,aAAa,QAAQ,WAAW;AAErC,QAAI,QAAQ,SAAS,cAAc,YAAY;AAC/C,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,iBAAiB,SAAS,CAAC,MAAM;AACnC,WAAK,MAAM,CAAC;AAAA,IACxB,CAAS;AAED,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,QAAI,KAAK,aAAa,UAAU;AAC5B,aAAO,YAAY,yBAAyB,KAAK,QAAQ;AAE7D,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AAExC,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,kBAAc,UAAU,IAAI,gBAAgB;AAC5C,kBAAc,aAAa,QAAQ,gBAAgB;AACnD,kBAAc,YAAY,UAAU;AAEpC,QAAI,cAAc,SAAS,cAAc,MAAM;AAE/C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,aAAa,QAAQ,MAAM;AAChC,SAAK,UAAU,IAAI,gBAAgB;AAEnC,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,YAAY;AAEnB,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AACxC,eAAW,KAAK;AAChB,eAAW,iBAAiB,cAAc,MAAM,KAAK,gBAAe,CAAE;AAEtE,UAAM,YAAY,IAAI;AAEtB,QAAI,CAAC,KAAK,YAAa,QAAO,YAAY,KAAK;AAE/C,WAAO,YAAY,aAAa;AAChC,SAAK,YAAY,WAAW;AAC5B,WAAO,YAAY,UAAU;AAE7B,QAAI,CAAC,KAAK,aAAc,QAAO,YAAY,MAAM;AACjD,WAAO,YAAY,IAAI;AACvB,QAAI,CAAC,KAAK,aAAc,QAAO,YAAY,MAAM;AAIjD,YAAQ,QAAO,EAAG,KAAK,MAAM,KAAK,gBAAe,CAAE;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,GAAG;AACL,SAAK,QAAQ,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,SAAI,UAAK,WAAL,mBAAa,SAAS;AACtB,YAAM,eAAe,WAAU,UAAK,WAAL,mBAAa,SAAS,MAAM,KAAK,MAAM;AAAA,IAClF;AAAA,EAGA;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW,QAAQ,SAAS;AAAA,EAEhC;AAAA;AAAA;AAAA;AAAA,EAKI,UAAU,QAAQ,SAAS;AAAA,EAE/B;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY,QAAQ,SAAS;AAAA,EAEjC;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW,QAAQ,SAAS;AAAA,EAEhC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4CI,sBAAsB,QAAQ,SAAS;AACnC,WAAO,iBAAiB,oBAAoB,OAAO,MAAM;AACrD,UAAI,kBAAkB,SAAS,cAAc,KAAK;AAClD,sBAAgB,UAAU,IAAI,kBAAkB;AAEhD,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,UAAU;AACpC,WAAK,aAAa,QAAQ,UAAU;AAEpC,sBAAgB,YAAY,IAAI;AAEhC,UAAI,eAAe,KAAK,OAAO;AAC/B,sBAAgB,MAAM,MAAM,GAAG,YAAY;AAC3C,sBAAgB,MAAM,SAAS,IAAI,YAAY;AAE/C,WAAK,OAAO,YAAY,eAAe;AAEvC,YAAM,QAAO,EACR,KAAK,CAAC,QAAQ;AACX,aAAK,MAAO;AACZ,wBAAgB,OAAQ;AAAA,MAC3B,CAAA,EACA,MAAM,CAAC,QAAQ;AACZ,gBAAQ,MAAM,GAAG;AACjB,wBAAgB,OAAQ;AAAA,MAC5C,CAAiB;AAAA,IACjB,CAAS;AAAA,EACT;AAAA,EAEI,kBAAkB;;AAEd,QAAI,KAAK,cAAc;AACnB,YAAMA,aAAW,UAAK,eAAL,mBAAiB,cAAc;AAChD,UAAIA,UAAU,CAAAA,UAAS,aAAa,UAAU,EAAE;AAChD,WAAK,gBAAgB,YAAY;AACjC;AAAA,IACZ;AACQ,UAAM,QAAO,UAAK,eAAL,mBAAiB,eAAe;AAC7C,QAAI,CAAC,MAAM;AACP,WAAK,gBAAgB,YAAY;AACjC;AAAA,IACZ;AAEQ,UAAM,WAAW,KAAK,cAAc,EAAE,SAAS,KAAI,CAAE;AACrD,UAAM,aAAa,SAAS,KAAK,CAAC,MAAM;AACpC,UAAI,EAAE,aAAa,KAAK,aAAc,QAAO;AAC7C,UAAI,EAAE,aAAa,KAAK,UAAW,QAAO,EAAE,YAAY,OAAO,SAAS;AACxE,aAAO;AAAA,IACnB,CAAS;AAGD,UAAM,YAAW,UAAK,eAAL,mBAAiB,cAAc;AAChD,QAAI,SAAU,UAAS,gBAAgB,UAAU,CAAC,UAAU;AAG5D,SAAK,gBAAgB,cAAc,UAAU;AAAA,EACrD;AACA;AClYA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n        slotFooter.id = 'footerSlot';\n        slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n\n        // Slot assignment may not be reflected synchronously on first render.\n        // Run in a microtask to ensure assignedNodes() sees slotted content.\n        Promise.resolve().then(() => this.updateHasFooter());\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 0);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n\n    updateHasFooter() {\n        // If footer is intentionally hidden, ensure it doesn't reserve space\n        if (this.hiddenFooter) {\n            const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n            if (footerEl) footerEl.setAttribute('hidden', '');\n            this.removeAttribute('has-footer');\n            return;\n        }\n        const slot = this.shadowRoot?.getElementById('footerSlot');\n        if (!slot) {\n            this.removeAttribute('has-footer');\n            return;\n        }\n\n        const assigned = slot.assignedNodes({ flatten: true });\n        const hasContent = assigned.some((n) => {\n            if (n.nodeType === Node.ELEMENT_NODE) return true;\n            if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n            return false;\n        });\n\n        // Prefer toggling the actual footer element so CSS/spacing is always correct\n        const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n        if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n        // Keep host attribute too (harmless, may be used elsewhere)\n        this.toggleAttribute('has-footer', hasContent);\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}

package/dist/wje-dropdown.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _onMenuItemCustom;
 import WJElement from "./wje-element.js";
-import { P as Popup } from "./popup.element-DeajFyOQ.js";
+import { P as Popup } from "./popup.element-Cl6QeG8M.js";
 import { event } from "./event.js";
 class Dropdown extends WJElement {
   /**