wj-elements 0.1.135 → 0.1.136

package/dist/wje-dialog.js

@@ -1,249 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ Dialog ]\n*/\n\n:host {\n    --wje-dialog-header-actions-gap: 0.5rem;\n\n    .close {\n        margin-left: auto;\n    }\n\n    .header-actions {\n        margin-left: auto;\n        display: flex;\n        align-items: center;\n        gap: var(--wje-dialog-header-actions-gap);\n    }\n\n    .modal-content {\n        border-radius: 3px;\n        box-shadow: none;\n    }\n\n    .dialog-header {\n        position: relative;\n        border-bottom: 0;\n        padding-inline: var(--wje-dialog-padding);\n        padding-top: var(--wje-dialog-padding);\n        padding-bottom: var(--wje-dialog-padding);\n        display: flex;\n        align-items: center;\n        span {\n            font-family: var(--wje-font-family-secondary);\n            font-size: 10.5px;\n            text-transform: uppercase;\n            display: inline-block;\n            letter-spacing: 0.06em;\n            font-weight: 500;\n            margin: 0;\n            padding: 0;\n            line-height: normal;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            filter: alpha(opacity=40);\n        }\n    }\n\n    .dialog-content {\n        box-shadow: none;\n        padding-inline: var(--wje-dialog-padding);\n        white-space: normal;\n        z-index: 1;\n    }\n\n    .dialog-footer {\n        display: flex;\n        justify-content: end;\n        border-top: none;\n        box-shadow: none;\n        margin-top: 0;\n        padding-inline: var(--wje-dialog-padding-inline);\n        padding-top: var(--wje-dialog-padding-top);\n        padding-bottom: var(--wje-dialog-padding-bottom);\n    }\n}\n\n/*Blocking element styles*/\n.blocking-element {	\n	position: absolute;\n	top: 0;\n	left: 0;\n	right: 0;\n	bottom: 0;\n	background-color: var(--wje-color-contrast-0);\n	opacity: 0.75;\n	z-index: 1;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	height: 100%;\n\n	wje-icon {\n		animation: loader 1s linear infinite;\n	}\n}\n\n@keyframes loader {\n	0% {\n		transform: rotate(0deg);\n	}\n	100% {\n		transform: rotate(360deg);\n	}\n}\n\ndialog::backdrop {\n    opacity: var(--wje-backdrop-opacity);\n    background-color: var(--wje-backdrop);\n}\n\ndialog:focus-visible {\n    outline: none;\n}\n\n:host(.separator) .dialog-header:after {\n    content: '';\n    height: 1px;\n    background: rgba(0, 0, 0, 0.08);\n    left: var(--wje-dialog-padding);\n    right: var(--wje-dialog-padding);\n    position: absolute;\n    bottom: 0;\n}\n\n:host {\n    dialog {\n        box-sizing: border-box;\n        transition: all 0.2s !important;\n        width: var(--wje-dialog-width);\n        height: var(--wje-dialog-height);\n        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n\n        border-radius: var(--wje-dialog-border-radius);\n        border-width: var(--wje-dialog-border-width);\n        border-style: var(--wje-dialog-border-style);\n        border-color: var(--wje-dialog-border-color);\n\n        margin-top: var(--wje-dialog-margin-top);\n\n        margin-bottom: var(--wje-dialog-margin-bottom);\n        margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\n\n        padding: 0;\n    }\n}\n\n/*Top*/\n:host(.stick-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 0 0 8px 8px;\n    --wje-dialog-border-width: 0 1px 1px 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-translate-from: translateY(-110%);\n    --wje-dialog-template-to: translateX(0);\n}\n\n/*Cenetered*/\n:host(.slide-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 8px;\n    --wje-dialog-border-width: 1px;\n    --wje-dialog-opacity-from: 0;\n    --wje-dialog-translate-from: scale(0.9);\n    --wje-dialog-translate-to: scale(1);\n}\n\n/*Fullscreen*/\n:host(.fill-in) {\n    --wje-dialog-width: 100%;\n    --wje-dialog-height: 100%;\n    --wje-dialog-border-radius: 0 0 0 0 !important;\n    --wje-dialog-border-width: 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    --wje-dialog-translate-from: scale(0.95);\n    --wje-dialog-translate-to: scale(1);\n    dialog {\n        min-width: var(--wje-dialog-width);\n        min-height: var(--wje-dialog-height);\n    }\n}\n\n/*Slide Left*/\n:host(.slide-left) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 1px 0 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: auto;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(-110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n/*Slide Right*/\n:host(.slide-right) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 0 0 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: auto;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n:host(.small) {\n    --wje-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n    --wje-dialog-width: 500px !important;\n}\n\n:host(.large) {\n    --wje-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n    --wje-dialog-width: 900px !important;\n}\n\ndialog[open] {\n    animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n    from {\n        opacity: var(--wje-dialog-opacity-from, 1);\n        transform: var(--wje-dialog-translate-from);\n    }\n    to {\n        opacity: 1;\n        transform: var(--wje-dialog-translate-to);\n    }\n}\n";
-class Dialog extends WJElement {
-  /**
-   * @class
-   */
-  constructor() {
-    super();
-    /**
-     * Sets the headline of the dialog.
-     * @type {string}
-     */
-    __publicField(this, "className", "Dialog");
-    /**
-     * Opens the dialog.
-     * @param e
-     */
-    __publicField(this, "onOpen", (e) => {
-      this.dialog.innerHTML = "";
-      Promise.resolve(this.beforeOpen(this, e)).then((res) => {
-        this.htmlDialogBody(this.dialog);
-        this.dialog.showModal();
-        if (this.dialog.open) {
-          Promise.resolve(this.afterOpen(this, e));
-        }
-      });
-    });
-    /**
-     * Closes the dialog.
-     * @param {object} e
-     */
-    __publicField(this, "onClose", (e) => {
-      Promise.resolve(this.beforeClose(this, e)).then((res) => {
-        this.dialog.close();
-        if (this.dialog.open) {
-          Promise.resolve(this.afterClose(this, e));
-        }
-      });
-    });
-  }
-  /**
-   * Sets the headline of the dialog.
-   * @param value
-   */
-  set placement(value) {
-    this.setAttribute("placement", value);
-  }
-  /**
-   * Gets the headline of the dialog.
-   * @returns {string|string}
-   */
-  get placement() {
-    return this.getAttribute("placement") || "slide-up";
-  }
-  /**
-   * Sets the headline of the dialog.
-   * @param value
-   */
-  set async(value) {
-    this.setAttribute("async", "");
-  }
-  /**
-   * Gets the headline of the dialog.
-   * @returns {boolean}
-   */
-  get async() {
-    return this.hasAttribute("async");
-  }
-  /**
-   * Sets the headline of the dialog.
-   * @param value
-   */
-  set closeHidden(value) {
-    if (value) this.setAttribute("close-hidden", "");
-  }
-  /**
-   * Gets the headline of the dialog.
-   * @returns {boolean}
-   */
-  get closeHidden() {
-    return !!this.hasAttribute("close-hidden");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @returns {*}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @returns {*[]}
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   * @param {object} context The context for drawing.
-   * @param {object} store The store for drawing.
-   * @param {object} params The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    this.classList.add("fade", this.placement, params.size);
-    let dialog = document.createElement("dialog");
-    dialog.classList.add("modal-dialog");
-    fragment.appendChild(dialog);
-    this.dialog = dialog;
-    return fragment;
-  }
-  /**
-   * Creates the dialog body.
-   * @param dialog
-   */
-  htmlDialogBody(dialog) {
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "x");
-    icon.setAttribute("slot", "icon-only");
-    let close = document.createElement("wje-button");
-    close.setAttribute("fill", "link");
-    close.setAttribute("size", "small");
-    close.setAttribute("part", "close");
-    close.addEventListener("click", (e) => {
-      this.close(e);
-    });
-    close.appendChild(icon);
-    let header = document.createElement("div");
-    header.setAttribute("part", "header");
-    header.classList.add("dialog-header");
-    if (this.hasAttribute("headline"))
-      header.innerHTML = `<span part="headline">${this.getAttribute("headline")}</span>`;
-    let slotHeader = document.createElement("slot");
-    slotHeader.setAttribute("name", "header");
-    const headerActions = document.createElement("div");
-    headerActions.classList.add("header-actions");
-    headerActions.setAttribute("part", "header-actions");
-    headerActions.appendChild(slotHeader);
-    header.appendChild(headerActions);
-    if (!this.closeHidden) header.appendChild(close);
-    let contentSlot = document.createElement("slot");
-    let body = document.createElement("div");
-    body.setAttribute("part", "body");
-    body.classList.add("dialog-content");
-    body.appendChild(contentSlot);
-    let footer = document.createElement("div");
-    footer.setAttribute("part", "footer");
-    footer.classList.add("dialog-footer");
-    footer.innerHTML = "";
-    let slotFooter = document.createElement("slot");
-    slotFooter.setAttribute("name", "footer");
-    footer.appendChild(slotFooter);
-    dialog.appendChild(header);
-    dialog.appendChild(body);
-    dialog.appendChild(footer);
-  }
-  /**
-   * Closes the dialog.
-   * @param e
-   */
-  close(e) {
-    this.onClose(e);
-  }
-  /**
-   * Draws the component after it has been drawn.
-   * @param {object} context The context for drawing.
-   * @param {object} store The store for drawing.
-   * @param {object} params The parameters for drawing.
-   */
-  afterDraw(context, store, params) {
-    if (params.trigger) {
-      event.addListener(document, params.trigger, null, this.onOpen);
-    }
-    this.dialog.addEventListener("close", this.onClose);
-  }
-  /**
-   * Before the component is disconnected.
-   */
-  beforeDisconnect() {
-    var _a, _b;
-    if ((_a = this.params) == null ? void 0 : _a.trigger) {
-      event.removeListener(document, (_b = this.params) == null ? void 0 : _b.trigger, null, this.onOpen);
-    }
-    this.dialog.removeEventListener("close", this.onClose);
-  }
-  /**
-   * Before the dialog opens.
-   */
-  beforeOpen() {
-  }
-  /**
-   * After the dialog opens.
-   */
-  afterOpen() {
-  }
-  /**
-   * Before the dialog closes.
-   */
-  beforeClose() {
-  }
-  /**
-   * After the dialog closes.
-   */
-  afterClose() {
-  }
-  /**
-   * Registers an event listener on the provided button that triggers a blocking UI element
-   * and executes a given promise when the button is clicked.
-   * @param {HTMLElement} button The button element to attach the event listener to.
-   * @param {Function} promise A function that returns a promise to be executed when the button is clicked.
-   */
-  registerBlockingEvent(button, promise) {
-    button.addEventListener("wje-button:click", async (e) => {
-      console.log("Button clicked");
-      let blockingElement = document.createElement("div");
-      blockingElement.classList.add("blocking-element");
-      let icon = document.createElement("wje-icon");
-      icon.setAttribute("name", "loader-2");
-      icon.setAttribute("size", "2x-large");
-      blockingElement.appendChild(icon);
-      let scrollOffset = this.dialog.scrollTop;
-      blockingElement.style.top = `${scrollOffset}px`;
-      blockingElement.style.bottom = `-${scrollOffset}px`;
-      this.dialog.appendChild(blockingElement);
-      await promise().then((res) => {
-        this.close();
-        blockingElement.remove();
-      }).catch((err) => {
-        console.error(err);
-        blockingElement.remove();
-      });
-    });
-  }
-}
-Dialog.define("wje-dialog", Dialog);
-export {
-  Dialog as default
-};
-//# sourceMappingURL=wje-dialog.js.map

package/dist/wje-dialog.js.map

@@ -1 +0,0 @@
-{"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 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    /**\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.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        return fragment;\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        close.appendChild(icon);\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.getAttribute('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        header.appendChild(headerActions);\n        if (!this.closeHidden) header.appendChild(close);\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        body.appendChild(contentSlot);\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\n        footer.appendChild(slotFooter);\n\n        dialog.appendChild(header);\n        dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\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        this.dialog.addEventListener('close', this.onClose);\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() {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen() {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose() {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose() {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        this.dialog.innerHTML = '';\n\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    };\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            console.log('Button clicked');\n\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().then((res) => {\n                this.close();\n                blockingElement.remove();\n            }).catch((err) => {\n                console.error(err);\n                blockingElement.remove();\n            });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}

package/dist/wje-divider.js

@@ -1,55 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Divider ]\n*/\n\n:host(:not([vertical])) {\n    display: block;\n    border-top: var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);\n    margin: var(--wje-divider-spacing) 0;\n}\n\n:host([vertical]) {\n    display: inline-block;\n    height: 100%;\n    border-left: var(--wje-divider-border-width) var(--wje-divider-border-style) var(--wje-divider-border-color);\n    margin: 0 var(--wje-divider-spacing);\n}\n";
-class Divider extends WJElement {
-  /**
-   * Constructor for the Divider class.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the Divider class.
-     * @type {string}
-     */
-    __publicField(this, "className", "Divider");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {string} The CSS stylesheet.
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array as there are no observed attributes.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the Divider.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the Divider.
-   * @returns {DocumentFragment} The created document fragment.
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
-  }
-}
-Divider.define("wje-divider", Divider);
-export {
-  Divider as default
-};
-//# sourceMappingURL=wje-divider.js.map

package/dist/wje-divider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wje-divider.js","sources":["../packages/wje-divider/divider.element.js","../packages/wje-divider/divider.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Divider is a custom web component that extends WJElement.\n * It provides a simple divider line that can be used to separate content.\n * @documentation https://elements.webjet.sk/components/divider\n * @status stable\n * @augments WJElement\n * @slot - This is a default/unnamed slot.\n * @cssproperty [--wje-border-width=1px] - The size of the border.\n * @cssproperty [--wje-divider-border-color=var(--wje-border-color)] - The color of the divider borderline.\n * @cssproperty [--wje-divider-border-width=var(--wje-border-width, 1px)] - The width of the divider borderline.\n * @cssproperty [--wje-divider-spacing=0] - The spacing for the divider.\n * @tag wje-divider\n * @tag wje-divider\n */\nexport default class Divider extends WJElement {\n    /**\n     * Constructor for the Divider class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Divider class.\n     * @type {string}\n     */\n    className = 'Divider';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string} The CSS stylesheet.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An empty array as there are no observed attributes.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the Divider.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Divider.\n     * @returns {DocumentFragment} The created document fragment.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Divider from './divider.element.js';\n\nexport default Divider;\n\nDivider.define('wje-divider', Divider);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;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,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AACvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;ACjEA,QAAQ,OAAO,eAAe,OAAO;"}

package/dist/wje-dropdown.js

@@ -1,194 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
-import { P as Popup } from "./popup.element-tyYxow0p.js";
-class Dropdown extends WJElement {
-  /**
-   * Creates an instance of Dropdown.
-   * @class
-   */
-  constructor() {
-    super();
-    /**
-     * The placement of the dropdown.
-     * @type {{"wje-popup": Popup}}
-     */
-    __publicField(this, "dependencies", {
-      "wje-popup": Popup
-    });
-    /**
-     * Sets the placement of the dropdown.
-     * @type {string}
-     */
-    __publicField(this, "className", "Dropdown");
-    /**
-     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
-     * @param {Event} e The event object.
-     */
-    __publicField(this, "otherDropdownOpennedCallback", (e) => {
-      if (e.detail.detail.target !== this) {
-        this.classList.remove("active");
-        this.popup.hide();
-      }
-    });
-    /**
-     * @summary Toggles the dropdown element between active and inactive states.
-     * Calls the `onOpen` method if the element is currently inactive,
-     * and calls the `onClose` method if the element is currently active.
-     * @param {Event} e The event object.
-     */
-    __publicField(this, "toggleCallback", (e) => {
-      e.stopPropagation();
-      if (this.classList.contains("active")) {
-        this.onClose(e);
-      } else {
-        this.onOpen(e);
-      }
-    });
-    /**
-     * Open the popup element.
-     * @param {object} e
-     */
-    __publicField(this, "onOpen", (e) => {
-      e.stopPropagation();
-      this.classList.add("active");
-      Promise.resolve(this.beforeShow(this)).then((res) => {
-        if (!this.classList.contains("active")) {
-          throw new Error("beforeShow method returned false or not string");
-        }
-        this.popup.show();
-        event.dispatchCustomEvent(this, "wje-dropdown:open", {
-          bubbles: true,
-          detail: { target: this }
-        });
-        Promise.resolve(this.afterShow(this));
-      }).catch((error) => {
-        this.classList.remove("active");
-        this.popup.hide();
-      });
-    });
-    /**
-     * Close the popup element.
-     * @param {object} e
-     */
-    __publicField(this, "onClose", (e) => {
-      this.classList.remove("active");
-      this.popup.hide();
-      event.dispatchCustomEvent(this, "wje-dropdown:close", {
-        bubbles: true,
-        detail: { target: this }
-      });
-    });
-  }
-  /**
-   * Sets the placement of the dropdown.
-   * @param value
-   */
-  set trigger(value) {
-    this.setAttribute("trigger", value);
-  }
-  /**
-   * Gets the placement of the dropdown.
-   * @returns {string|string}
-   */
-  get trigger() {
-    return this.getAttribute("trigger") || "click";
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {string[]}
-   */
-  static get observedAttributes() {
-    return ["active"];
-  }
-  /**
-   * Sets up the attributes for the dropdown.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Removes the popup element.
-   */
-  beforeDraw() {
-    var _a;
-    (_a = this.popup) == null ? void 0 : _a.remove();
-    this.popup = null;
-  }
-  /**
-   * Draws the dropdown element and returns the created document fragment.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-dropdown");
-    let tooltip = document.createElement("wje-tooltip");
-    tooltip.setAttribute("content", this.tooltip);
-    let anchorSlot = document.createElement("slot");
-    anchorSlot.setAttribute("name", "trigger");
-    anchorSlot.setAttribute("slot", "anchor");
-    let slot = document.createElement("slot");
-    let popup = document.createElement("wje-popup");
-    popup.setAttribute("placement", this.placement);
-    popup.setAttribute("offset", this.offset);
-    popup.appendChild(anchorSlot);
-    popup.appendChild(slot);
-    popup.setAttribute("manual", "");
-    native.appendChild(popup);
-    fragment.appendChild(native);
-    this.popup = popup;
-    this.anchorSlot = anchorSlot;
-    return fragment;
-  }
-  /**
-   * Adds event listeners for the mouseenter and mouseleave events.
-   */
-  afterDisconnect() {
-    event.removeListener(this, "mouseenter", null, this.onOpen);
-    event.removeListener(this, "mouseleave", null, this.onClose);
-    event.removeListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: true });
-  }
-  /**
-   * Adds event listeners for the mouseenter and mouseleave events.
-   */
-  afterDraw() {
-    event.addListener(this, "wje-popup:hide", null, () => {
-      this.classList.remove("active");
-    });
-    if (this.trigger !== "click") {
-      event.addListener(this, "mouseenter", null, this.onOpen);
-      event.addListener(this, "mouseleave", null, this.onClose);
-    } else {
-      event.addListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: true });
-    }
-    if (this.hasAttribute("collapsible")) {
-      event.addListener(
-        Array.from(this.querySelectorAll("wje-menu-item")),
-        "click",
-        "wje-menu-item:click",
-        this.onClose
-      );
-    }
-  }
-  /**
-   * @summary Returns the content to be displayed before showing the dropdown.
-   * @returns {any} The content to be displayed.
-   */
-  beforeShow() {
-    return this.content;
-  }
-  /**
-   * This method is called after the dropdown is shown.
-   */
-  afterShow() {
-  }
-}
-Dropdown.define("wje-dropdown", Dropdown);
-export {
-  Dropdown as default
-};
-//# sourceMappingURL=wje-dropdown.js.map

package/dist/wje-dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n\n        popup.appendChild(anchorSlot);\n        popup.appendChild(slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, () => {\n            this.classList.remove('active');\n        });\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n    }\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        e.stopPropagation();\n        if (this.classList.contains('active')) {\n            this.onClose(e);\n        } else {\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        e.stopPropagation();\n\n        this.classList.add('active');\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Close the popup element.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        this.classList.remove('active');\n        this.popup.hide(); // Now close the popup\n\n        event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n            bubbles: true,\n            detail: { target: this },\n        });\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}