wj-elements 0.1.253 → 0.1.255

package/dist/light.css

@@ -254,6 +254,9 @@
     --wje-badge-border-color: transparent;
 
     /* Breadcrumb */
+    --wje-breadcrumb-font-size: var(--wje-font-size);
+    --wje-breadcrumb-active-font-weight: var(--wje-font-weight-bold);
+    --wje-breadcrumb-active-font-size: var(--wje-font-size);
     --wje-breadcrumb-a: var(--wje-color-contrast-8);
     --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
 
@@ -636,6 +639,19 @@
     --wje-thumbnail-height: 48px;
     --wje-thumbnail-border-radius: var(--wje-border-radius-medium);
 
+    /* Toolbar */
+    --wje-toolbar-background: var(--wje-background);
+    --wje-toolbar-height: auto;
+    --wje-toolbar-min-height: 70px;
+    --wje-toolbar-padding-inline: 1.5rem;
+    --wje-toolbar-padding-block: 1rem;
+    --wje-toolbar-border-color: var(--wje-border-color);
+    --wje-toolbar-top: 0;
+    --wje-toolbar-shadow: var(--wje-shadow-medium);
+
+    /* Toolbar - Action */
+    --wje-toolbar-action-gap: var(--wje-spacing-3x-small);
+
     /* Tooltip */
     --wje-tooltip-arrow-color: var(--wje-color-contrast-11);
     --wje-tooltip-background: var(--wje-color-contrast-11);

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

@@ -28,7 +28,7 @@ export default class Breadcrumb extends WJElement {
      */
     static get observedAttributes(): Array<string>;
     _showSeparator: boolean;
-    showCollapsedIndicator: boolean;
+    _showCollapsedIndicator: boolean;
     /**
      * Set show separator flag.
      * @param {boolean} value The value to set
@@ -51,10 +51,13 @@ export default class Breadcrumb extends WJElement {
     get collapsedVariant(): string;
     _collapsedVariant: string;
     /**
-     * Attribute changed callback method.
-     * @returns {boolean} false - Always returns false
+     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
+     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
+     * @returns {boolean} Returns false to signal no default behavior is implemented.
      */
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): boolean;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): boolean;
     active: boolean;
     /**
      * Draw method for the Breadcrumb element.
@@ -63,18 +66,33 @@ export default class Breadcrumb extends WJElement {
     draw(): object;
     native: HTMLAnchorElement;
     /**
-     * Draw collapsed indicator method.
-     * @returns {object} - The collapsed indicator element.
+     * Renders the collapsed indicator based on the current collapsed variant.
+     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
+     * Otherwise, it invokes the collapseButton method.
+     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
      */
-    drawCollapsedIndicator(): object;
+    drawCollapsedIndicator(): any;
     /**
-     * Collapse dropdown button.
-     * @returns {object} dropdown - The dropdown button.
+     * Creates and returns a dropdown UI component for collapsed breadcrumbs.
+     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
+     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
+     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
+     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
+     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
      */
-    collapseDropdown(): object;
+    collapseDropdown(): HTMLElement;
     /**
-     * Collapse button method.
-     * @returns {object} - The button element.
+     * Creates a button element that expands hidden breadcrumbs when clicked.
+     * The button is set with appropriate attributes and event listeners to handle
+     * the expanding of hidden breadcrumb elements. Clicking the button will remove
+     * the button itself, reveal hidden breadcrumbs, and stop the current event
+     * propagation.
+     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
      */
-    collapseButton(): object;
+    collapseButton(): HTMLButtonElement;
+    /**
+     * Retrieves the breadcrumb trail for the current element by returning its parent element.
+     * @returns {Element} The parent element representing the breadcrumb trail.
+     */
+    getBreadcrumbs(): Element;
 }

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

@@ -86,12 +86,20 @@ export default class Breadcrumbs extends WJElement {
      */
     draw(): object;
     /**
-     * After draw method for the Breadcrumbs element.
+     * Updates the breadcrumb elements after they are drawn on the page.
+     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs
+     * if the total exceeds the specified maximum items.
+     * @returns {void} This method does not return a value.
      */
     afterDraw(): void;
     /**
-     * Get breadcrumbs method.
-     * @returns {Array} - The breadcrumbs array
+     * Retrieves all breadcrumb elements within the current instance.
+     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
      */
-    getBreadcrumbs(): any[];
+    getBreadcrumbs(): Array<Element>;
+    /**
+     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
+     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.
+     */
+    getBreadcrumbsCollapsed(): Array<Element>;
 }

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

@@ -22,6 +22,7 @@ export default class Checkbox extends FormAssociatedElement {
     static get cssStyleSheet(): string;
     static get observedAttributes(): string[];
     pristine: boolean;
+    _valueOff: string;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.

package/dist/wje-breadcrumb.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n}\n\n:host(.collapsed) {\n    display: none;\n}\n.native-breadcrumb {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    outline: none;\n    background: inherit;\n    padding: 0.25rem 0.75rem;\n    color: var(--wje-breadcrumb-a);\n    text-decoration: none;\n    &.hidden {\n        display: none;\n    }\n    &.active {\n        font-weight: bold;\n    }\n    &:hover {\n        color: var(--wje-breadcrumb-a-hover);\n    }\n}\n\nbutton {\n    margin-inline: 0.75rem;\n    border: 0 solid transparent;\n    border-radius: 3px;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n}\n\n.separator {\n    display: inline-flex;\n    align-items: center;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
+const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n\n    .native-breadcrumb {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        background: inherit;\n        padding: 0.25rem 0.75rem;\n        color: var(--wje-breadcrumb-a);\n        text-decoration: none;\n        font-size: var(--wje-breadcrumb-font-size);\n        &.hidden {\n            display: none;\n        }\n        &.active {\n            font-weight: var(--wje-breadcrumb-active-font-weight);\n            font-size: var(--wje-breadcrumb-active-font-size);\n        }\n        &:hover {\n            color: var(--wje-breadcrumb-a-hover);\n        }\n    }\n\n    button {\n        margin-inline: 0.75rem;\n        border: 0 solid transparent;\n        border-radius: 3px;\n        background-color: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n    }\n\n    .separator {\n        display: inline-flex;\n        align-items: center;\n    }\n}\n\n:host(.collapsed) {\n    display: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
 class Breadcrumb extends WJElement {
   /**
    * Breadcrumb constructor method.
@@ -17,7 +17,7 @@ class Breadcrumb extends WJElement {
      */
     __publicField(this, "className", "Breadcrumb");
     this._showSeparator = true;
-    this.showCollapsedIndicator = false;
+    this._showCollapsedIndicator = false;
   }
   /**
    * Get show separator flag.
@@ -65,8 +65,11 @@ class Breadcrumb extends WJElement {
     return ["show-collapsed-indicator", "collapsed", "last"];
   }
   /**
-   * Attribute changed callback method.
-   * @returns {boolean} false - Always returns false
+   * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
+   * @param {string} name The name of the attribute that was changed.
+   * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
+   * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
+   * @returns {boolean} Returns false to signal no default behavior is implemented.
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "collapsed") {
@@ -74,7 +77,7 @@ class Breadcrumb extends WJElement {
         this.classList.add("collapsed");
     } else if (name === "show-collapsed-indicator") {
       if (WjElementUtils.stringToBoolean(newValue)) {
-        this.showCollapsedIndicator = true;
+        this._showCollapsedIndicator = true;
         this.refresh();
       }
     } else if (name === "last") {
@@ -105,12 +108,10 @@ class Breadcrumb extends WJElement {
     start.setAttribute("name", "start");
     let end = document.createElement("slot");
     end.setAttribute("name", "end");
-    native.appendChild(start);
-    native.appendChild(slot);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {
-      fragment.appendChild(this.drawCollapsedIndicator());
+    native.append(start, slot, end);
+    fragment.append(native);
+    if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {
+      fragment.append(this.drawCollapsedIndicator());
       native.classList.add("hidden");
     }
     if (this.showSeparator) {
@@ -120,18 +121,20 @@ class Breadcrumb extends WJElement {
       if (WjElementUtils.hasSlot(this, "separator")) {
         let slotSeparator = document.createElement("slot");
         slotSeparator.setAttribute("name", "separator");
-        separator.appendChild(slotSeparator);
+        separator.append(slotSeparator);
       } else {
         separator.innerHTML = `<wje-icon name=${this.separator || "chevron-right"}></wje-icon>`;
       }
-      fragment.appendChild(separator);
+      fragment.append(separator);
     }
     this.native = native;
     return fragment;
   }
   /**
-   * Draw collapsed indicator method.
-   * @returns {object} - The collapsed indicator element.
+   * Renders the collapsed indicator based on the current collapsed variant.
+   * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
+   * Otherwise, it invokes the collapseButton method.
+   * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
    */
   drawCollapsedIndicator() {
     let collapsedIndicator = null;
@@ -143,8 +146,12 @@ class Breadcrumb extends WJElement {
     return collapsedIndicator;
   }
   /**
-   * Collapse dropdown button.
-   * @returns {object} dropdown - The dropdown button.
+   * Creates and returns a dropdown UI component for collapsed breadcrumbs.
+   * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
+   * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
+   * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
+   * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
+   * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
    */
   collapseDropdown() {
     let dropdown = document.createElement("wje-dropdown");
@@ -156,21 +163,49 @@ class Breadcrumb extends WJElement {
     button.innerHTML = `<wje-icon name="dots"></wje-icon>`;
     let menu = document.createElement("wje-menu");
     menu.setAttribute("variant", "context");
-    dropdown.appendChild(button);
-    dropdown.appendChild(menu);
-    dropdown.innerHTML = `<wje-button slot="trigger" fill="link">
-            <wje-icon name="dots"></wje-icon>
-        </wje-button>
-        <wje-menu variant="context">
-            <wje-menu-item>Test 0</wje-menu-item>
-            <wje-menu-item>Test 1</wje-menu-item>
-            <wje-menu-item>Test 2</wje-menu-item>
-        </wje-menu>`;
+    menu.addEventListener("click", (e) => {
+      var _a;
+      e.stopPropagation();
+      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+    });
+    this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {
+      let menuItem = document.createElement("wje-menu-item");
+      menuItem.innerHTML = b.innerHTML;
+      menuItem.__breadcrumb = b;
+      menuItem.addEventListener("wje-menu-item:click", (e) => {
+        var _a, _b, _c;
+        (_a = e.preventDefault) == null ? void 0 : _a.call(e);
+        e.stopPropagation();
+        (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
+        const breadcrumb = e.currentTarget.__breadcrumb;
+        if (!breadcrumb) return;
+        const native = breadcrumb.native || ((_c = breadcrumb.shadowRoot) == null ? void 0 : _c.querySelector("a.native-breadcrumb"));
+        if (native && typeof native.click === "function") {
+          native.click();
+        } else if (typeof breadcrumb.click === "function") {
+          breadcrumb.click();
+        } else {
+          breadcrumb.dispatchEvent(
+            new MouseEvent("click", {
+              bubbles: true,
+              composed: true,
+              cancelable: true
+            })
+          );
+        }
+      });
+      menu.append(menuItem);
+    });
+    dropdown.append(button, menu);
     return dropdown;
   }
   /**
-   * Collapse button method.
-   * @returns {object} - The button element.
+   * Creates a button element that expands hidden breadcrumbs when clicked.
+   * The button is set with appropriate attributes and event listeners to handle
+   * the expanding of hidden breadcrumb elements. Clicking the button will remove
+   * the button itself, reveal hidden breadcrumbs, and stop the current event
+   * propagation.
+   * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
    */
   collapseButton() {
     let button = document.createElement("button");
@@ -180,13 +215,20 @@ class Breadcrumb extends WJElement {
     event.addListener(button, "click", null, (e) => {
       this.native.classList.remove("hidden");
       button.remove();
-      this.parentElement.querySelectorAll("wje-breadcrumb").forEach((el) => {
+      this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {
         el.classList.remove("collapsed");
       });
       e.stopPropagation();
     });
     return button;
   }
+  /**
+   * Retrieves the breadcrumb trail for the current element by returning its parent element.
+   * @returns {Element} The parent element representing the breadcrumb trail.
+   */
+  getBreadcrumbs() {
+    return this.parentElement;
+  }
 }
 Breadcrumb.define("wje-breadcrumb", Breadcrumb);
 export {

package/dist/wje-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this.showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Attribute changed callback method.\n     * @returns {boolean} false - Always returns false\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this.showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n        if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.appendChild(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.appendChild(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.appendChild(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Draw collapsed indicator method.\n     * @returns {object} - The collapsed indicator element.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Collapse dropdown button.\n     * @returns {object} dropdown - The dropdown button.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.appendChild(button);\n        dropdown.appendChild(menu);\n\n        dropdown.innerHTML = `<wje-button slot=\"trigger\" fill=\"link\">\n            <wje-icon name=\"dots\"></wje-icon>\n        </wje-button>\n        <wje-menu variant=\"context\">\n            <wje-menu-item>Test 0</wje-menu-item>\n            <wje-menu-item>Test 1</wje-menu-item>\n            <wje-menu-item>Test 2</wje-menu-item>\n        </wje-menu>`;\n\n        return dropdown;\n    }\n\n    /**\n     * Collapse button method.\n     * @returns {object} - The button element.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this._showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n     * @returns {boolean} Returns false to signal no default behavior is implemented.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this._showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.append(start, slot, end);\n\n        // APPEND\n        fragment.append(native);\n\n        if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.append(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.append(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.append(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Renders the collapsed indicator based on the current collapsed variant.\n     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n     * Otherwise, it invokes the collapseButton method.\n     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        menu.addEventListener('click', (e) => {\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n        });\n\n        this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n            let menuItem = document.createElement('wje-menu-item');\n            menuItem.innerHTML = b.innerHTML;\n\n            menuItem.__breadcrumb = b;\n\n            menuItem.addEventListener('wje-menu-item:click', (e) => {\n                e.preventDefault?.();\n                e.stopPropagation();\n                e.stopImmediatePropagation?.();\n\n                const breadcrumb = e.currentTarget.__breadcrumb;\n                if (!breadcrumb) return;\n\n                // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n                const native = breadcrumb.native || breadcrumb.shadowRoot?.querySelector('a.native-breadcrumb');\n                if (native && typeof native.click === 'function') {\n                    native.click();\n                } else if (typeof breadcrumb.click === 'function') {\n                    breadcrumb.click();\n                } else {\n                    breadcrumb.dispatchEvent(\n                        new MouseEvent('click', {\n                            bubbles: true,\n                            composed: true,\n                            cancelable: true\n                        })\n                    );\n                }\n            });\n\n            menu.append(menuItem);\n        });\n\n        dropdown.append(button, menu);\n\n        return dropdown;\n    }\n\n    /**\n     * Creates a button element that expands hidden breadcrumbs when clicked.\n     * The button is set with appropriate attributes and event listeners to handle\n     * the expanding of hidden breadcrumb elements. Clicking the button will remove\n     * the button itself, reveal hidden breadcrumbs, and stop the current event\n     * propagation.\n     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n\n    /**\n     * Retrieves the breadcrumb trail for the current element by returning its parent element.\n     * @returns {Element} The parent element representing the breadcrumb trail.\n     */\n    getBreadcrumbs() {\n        return this.parentElement;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}

package/dist/wje-breadcrumbs.js

@@ -106,7 +106,10 @@ class Breadcrumbs extends WJElement {
     return fragment;
   }
   /**
-   * After draw method for the Breadcrumbs element.
+   * Updates the breadcrumb elements after they are drawn on the page.
+   * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs
+   * if the total exceeds the specified maximum items.
+   * @returns {void} This method does not return a value.
    */
   afterDraw() {
     let breadcrumbs = this.getBreadcrumbs();
@@ -126,12 +129,19 @@ class Breadcrumbs extends WJElement {
     }
   }
   /**
-   * Get breadcrumbs method.
-   * @returns {Array} - The breadcrumbs array
+   * Retrieves all breadcrumb elements within the current instance.
+   * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
    */
   getBreadcrumbs() {
     return Array.from(this.querySelectorAll("wje-breadcrumb")) || [];
   }
+  /**
+   * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
+   * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.
+   */
+  getBreadcrumbsCollapsed() {
+    return Array.from(this.querySelectorAll("wje-breadcrumb[collapsed]")) || [];
+  }
 }
 Breadcrumbs.define("wje-breadcrumbs", Breadcrumbs);
 export {

package/dist/wje-breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        return +this.getAttribute('items-after-collapse') || 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Breadcrumbs element.\n     */\n    afterDraw() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        let breadcrumb = breadcrumbs.findLast((e) => e);\n\n        breadcrumb.setAttribute('last', true);\n\n        const shouldCollapse =\n            this.maxItems !== undefined &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n        if (shouldCollapse) {\n            breadcrumbs.forEach((b, index) => {\n                if (index === this.itemsBeforeCollapse) {\n                    b.setAttribute('show-collapsed-indicator', true);\n                }\n\n                if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n                    b.setAttribute('collapsed', true);\n                }\n            });\n        }\n    }\n\n    /**\n     * Get breadcrumbs method.\n     * @returns {Array} - The breadcrumbs array\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,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,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AACA;ACxLA,YAAY,OAAO,mBAAmB,WAAW;"}
+{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        return +this.getAttribute('items-after-collapse') || 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        let breadcrumb = breadcrumbs.findLast((e) => e);\n\n        breadcrumb.setAttribute('last', true);\n\n        const shouldCollapse =\n            this.maxItems !== undefined &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n        if (shouldCollapse) {\n            breadcrumbs.forEach((b, index) => {\n                if (index === this.itemsBeforeCollapse) {\n                    b.setAttribute('show-collapsed-indicator', true);\n                }\n\n                if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n                    b.setAttribute('collapsed', true);\n                }\n            });\n        }\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,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,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAE;AAAA,EACnF;AACA;ACnMA,YAAY,OAAO,mBAAmB,WAAW;"}

package/dist/wje-checkbox.js

@@ -26,6 +26,7 @@ class Checkbox extends FormAssociatedElement {
     __publicField(this, "className", "Checkbox");
     this.invalid = false;
     this.pristine = true;
+    this._valueOff = "off";
   }
   /**
    * Setter for the value attribute.
@@ -112,7 +113,7 @@ class Checkbox extends FormAssociatedElement {
       this.internals.setFormValue(this.value);
     } else {
       this.removeAttribute("checked");
-      this.internals.setFormValue(null);
+      this.internals.setFormValue(this._valueOff);
     }
     if (this.input) {
       this.input.checked = value;
@@ -143,7 +144,7 @@ class Checkbox extends FormAssociatedElement {
       if (isChecked) {
         this.internals.setFormValue(this.value);
       } else {
-        this.internals.setFormValue(null);
+        this.internals.setFormValue(this._valueOff);
       }
     } else if (name === "disabled") {
       this.input.disabled = this.hasAttribute("disabled");
@@ -204,7 +205,7 @@ class Checkbox extends FormAssociatedElement {
    * Adds an event listener after drawing the checkbox.
    */
   afterDraw() {
-    this.internals.setFormValue(this.checked ? this.value : null);
+    this.internals.setFormValue(this.checked ? this.value : this._valueOff);
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
         this.validate();

package/dist/wje-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-toggle:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n */\nexport default class Checkbox extends FormAssociatedElement {\n\t#internalValue;\n\t/**\n\t * Checkbox constructor method.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.invalid = false;\n\t\tthis.pristine = true;\n\t}\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.#internalValue = value;\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.#internalValue ?? this.getAttribute('value') ?? 'on';;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * Sets or removes the 'indeterminate' attribute for the object.\n\t * This property typically reflects the visual or functional state where\n\t * the component is neither fully active nor inactive.\n\t * @param {boolean} value A boolean where `true` indicates the 'indeterminate'\n\t * state should be set, and `false` removes it.\n\t */\n\tset indeterminate(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('indeterminate', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('indeterminate');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the current state of the 'indeterminate' attribute.\n\t *\n\t * The 'indeterminate' attribute is typically used to signify a state\n\t * where a checkbox is neither checked nor unchecked, such as a partially\n\t * selected state.\n\t * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.\n\t */\n\tget indeterminate() {\n\t\treturn this.hasAttribute('indeterminate');\n\t}\n\n\t/**\n\t * Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t */\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t\tthis.internals.setFormValue(this.value); // len ak je checked\n\t\t} else {\n\t\t\tthis.removeAttribute('checked');\n\t\t\tthis.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n\t\t}\n\t\tif (this.input) {\n\t\t\tthis.input.checked = value;\n\t\t}\n\t}\n\n\t/**\n\t * Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t */\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/**\n\t * The class name for the Checkbox.\n\t */\n\tclassName = 'Checkbox';\n\n\t/**\n\t * Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (!this.input) return;\n\t\tif (name === 'checked') {\n\t\t\tconst isChecked = this.hasAttribute('checked');\n\t\t\tthis.input.checked = isChecked;\n\t\t\t// Reflect into form value\n\t\t\tif (isChecked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t} else if (name === 'disabled') {\n\t\t\tthis.input.disabled = this.hasAttribute('disabled');\n\t\t} else if (name === 'indeterminate') {\n\t\t\tthis.input.indeterminate = this.hasAttribute('indeterminate');\n\t\t} else if (name === 'value') {\n\t\t\t// keep payload in sync; do not toggle checked here\n\t\t\tthis.#internalValue = newValue ?? undefined;\n\t\t\tthis.input.value = this.value;\n\t\t\t// If currently checked, update the submitted payload\n\t\t\tif (this.input.checked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets up the attributes for the checkbox.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\t// if some value was set via value setter then dont use default value\n\t\tif (this.pristine) {\n\t\t\tthis.value = this.#internalValue;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/**\n\t * Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name || 'checkbox';\n\t\tinput.checked = this.checked;\n\t\tinput.disabled = this.disabled;\n\t\tinput.indeterminate = this.indeterminate;\n\t\tinput.required = this.required;\n\t\tinput.value = this.value;\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\t// Error\n\t\tlet errorSlot = document.createElement('slot');\n\t\terrorSlot.setAttribute('name', 'error');\n\n\t\tlet error = document.createElement('div');\n\t\terror.setAttribute('slot', 'error');\n\n\t\t// APPEND\n\t\tnative.append(input);\n\t\tnative.append(label);\n\t\tnative.append(errorSlot);\n\n\t\tthis.append(error);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Adds an event listener after drawing the checkbox.\n\t */\n\tafterDraw() {\n\t\tthis.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.validate();\n\n\t\t\t\tthis.pristine = false;\n\t\t\t\tthis.propagateValidation();\n\n\t\t\t\t// User interaction decides the checked state; value stays as payload\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = e.target.checked;\n\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:change');\n\t\t\t});\n\n\t\t\tthis.addEventListener('invalid', (e) => {\n\t\t\t\tthis.invalid = true;\n\t\t\t\tthis.pristine = false;\n\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t});\n\n\t\t\tthis.validate();\n\n\t\t\tif (this.invalid) {\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Removes the event listener when the checkbox is disconnected.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBe,MAAM,iBAAiB,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAK3D,cAAc;AACb,UAAO;AALR;AA0HA;AAAA;AAAA;AAAA,qCAAY;AAnHX,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,MAAM,OAAO;AAChB,uBAAK,gBAAiB;AACtB,QAAI,KAAK,OAAO;AACf,WAAK,MAAM,QAAQ;AAAA,IACtB;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,QAAQ;AACX,WAAO,mBAAK,mBAAkB,KAAK,aAAa,OAAO,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,qBAAqB;AACxB,WAAO,KAAK,aAAa,sBAAsB;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,mBAAmB;AACtB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQC,IAAI,aAAa,OAAO;AACvB,SAAK,aAAa,SAAS,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASC,IAAI,eAAe;AAClB,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASC,IAAI,cAAc,OAAO;AACxB,QAAI,OAAO;AACV,WAAK,aAAa,iBAAiB,EAAE;AAAA,IACxC,OAAS;AACN,WAAK,gBAAgB,eAAe;AAAA,IACvC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUC,IAAI,gBAAgB;AACnB,WAAO,KAAK,aAAa,eAAe;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,QAAQ,OAAO;AAClB,QAAI,OAAO;AACV,WAAK,aAAa,WAAW,EAAE;AAC/B,WAAK,UAAU,aAAa,KAAK,KAAK;AAAA,IACzC,OAAS;AACN,WAAK,gBAAgB,SAAS;AAC9B,WAAK,UAAU,aAAa,IAAI;AAAA,IACnC;AACE,QAAI,KAAK,OAAO;AACf,WAAK,MAAM,UAAU;AAAA,IACxB;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,UAAU;AACb,WAAO,KAAK,aAAa,SAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAWC,WAAW,gBAAgB;AAC1B,WAAO;AAAA,EACT;AAAA,EAEC,WAAW,qBAAqB;AAC/B,WAAO,CAAC,WAAW,YAAY,SAAS,eAAe;AAAA,EACzD;AAAA,EAEC,yBAAyB,MAAM,UAAU,UAAU;AAClD,QAAI,CAAC,KAAK,MAAO;AACjB,QAAI,SAAS,WAAW;AACvB,YAAM,YAAY,KAAK,aAAa,SAAS;AAC7C,WAAK,MAAM,UAAU;AAErB,UAAI,WAAW;AACd,aAAK,UAAU,aAAa,KAAK,KAAK;AAAA,MAC1C,OAAU;AACN,aAAK,UAAU,aAAa,IAAI;AAAA,MACpC;AAAA,IACA,WAAa,SAAS,YAAY;AAC/B,WAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAAA,IACrD,WAAa,SAAS,iBAAiB;AACpC,WAAK,MAAM,gBAAgB,KAAK,aAAa,eAAe;AAAA,IAC/D,WAAa,SAAS,SAAS;AAE5B,yBAAK,gBAAiB,YAAY;AAClC,WAAK,MAAM,QAAQ,KAAK;AAExB,UAAI,KAAK,MAAM,SAAS;AACvB,aAAK,UAAU,aAAa,KAAK,KAAK;AAAA,MAC1C;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKC,kBAAkB;AACjB,SAAK,eAAe;AAEpB,QAAI,KAAK,UAAU;AAClB,WAAK,QAAQ,mBAAK;AAClB,WAAK,WAAW;AAAA,IACnB;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,OAAO;AACN,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,OAAO;AACb,UAAM,KAAK;AACX,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,UAAU,KAAK;AACrB,UAAM,WAAW,KAAK;AACtB,UAAM,gBAAgB,KAAK;AAC3B,UAAM,WAAW,KAAK;AACtB,UAAM,QAAQ,KAAK;AAEnB,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU;AAChB,UAAM,YAAY;AAGlB,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AAEtC,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAGlC,WAAO,OAAO,KAAK;AACnB,WAAO,OAAO,KAAK;AACnB,WAAO,OAAO,SAAS;AAEvB,SAAK,OAAO,KAAK;AAEjB,SAAK,QAAQ;AAEb,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKC,YAAY;AACX,SAAK,UAAU,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAE5D,QAAI,CAAC,KAAK,UAAU;AACnB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AAC3C,aAAK,SAAU;AAEf,aAAK,WAAW;AAChB,aAAK,oBAAqB;AAG1B,aAAK,gBAAgB;AACrB,aAAK,UAAU,EAAE,OAAO;AAExB,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MACtD,CAAI;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AAC5C,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACvD,CAAI;AAED,WAAK,iBAAiB,WAAW,CAAC,MAAM;AACvC,aAAK,UAAU;AACf,aAAK,WAAW;AAEhB,aAAK,mBAAoB;AAAA,MAC7B,CAAI;AAED,WAAK,SAAU;AAEf,UAAI,KAAK,SAAS;AACjB,aAAK,mBAAoB;AAAA,MAC7B;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKC,mBAAmB;AAClB,UAAM,cAAc,KAAK,KAAK;AAAA,EAChC;AACA;AAzQC;ACdD,UAAU,OAAO,gBAAgB,QAAQ;"}
+{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-toggle:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n */\nexport default class Checkbox extends FormAssociatedElement {\n\t#internalValue;\n\t/**\n\t * Checkbox constructor method.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.invalid = false;\n\t\tthis.pristine = true;\n\t\tthis._valueOff = 'off';\n\t}\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.#internalValue = value;\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.#internalValue ?? this.getAttribute('value') ?? 'on';\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * Sets or removes the 'indeterminate' attribute for the object.\n\t * This property typically reflects the visual or functional state where\n\t * the component is neither fully active nor inactive.\n\t * @param {boolean} value A boolean where `true` indicates the 'indeterminate'\n\t * state should be set, and `false` removes it.\n\t */\n\tset indeterminate(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('indeterminate', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('indeterminate');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the current state of the 'indeterminate' attribute.\n\t *\n\t * The 'indeterminate' attribute is typically used to signify a state\n\t * where a checkbox is neither checked nor unchecked, such as a partially\n\t * selected state.\n\t * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.\n\t */\n\tget indeterminate() {\n\t\treturn this.hasAttribute('indeterminate');\n\t}\n\n\t/**\n\t * Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t */\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t\tthis.internals.setFormValue(this.value); // len ak je checked\n\t\t} else {\n\t\t\tthis.removeAttribute('checked');\n\t\t\tthis.internals.setFormValue(this._valueOff); // ak nie je checked, nič sa neposiela\n\t\t}\n\t\tif (this.input) {\n\t\t\tthis.input.checked = value;\n\t\t}\n\t}\n\n\t/**\n\t * Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t */\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/**\n\t * The class name for the Checkbox.\n\t */\n\tclassName = 'Checkbox';\n\n\t/**\n\t * Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (!this.input) return;\n\t\tif (name === 'checked') {\n\t\t\tconst isChecked = this.hasAttribute('checked');\n\t\t\tthis.input.checked = isChecked;\n\t\t\t// Reflect into form value\n\t\t\tif (isChecked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(this._valueOff);\n\t\t\t}\n\t\t} else if (name === 'disabled') {\n\t\t\tthis.input.disabled = this.hasAttribute('disabled');\n\t\t} else if (name === 'indeterminate') {\n\t\t\tthis.input.indeterminate = this.hasAttribute('indeterminate');\n\t\t} else if (name === 'value') {\n\t\t\t// keep payload in sync; do not toggle checked here\n\t\t\tthis.#internalValue = newValue ?? undefined;\n\t\t\tthis.input.value = this.value;\n\t\t\t// If currently checked, update the submitted payload\n\t\t\tif (this.input.checked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets up the attributes for the checkbox.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\t// if some value was set via value setter then dont use default value\n\t\tif (this.pristine) {\n\t\t\tthis.value = this.#internalValue;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/**\n\t * Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name || 'checkbox';\n\t\tinput.checked = this.checked;\n\t\tinput.disabled = this.disabled;\n\t\tinput.indeterminate = this.indeterminate;\n\t\tinput.required = this.required;\n\t\tinput.value = this.value;\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\t// Error\n\t\tlet errorSlot = document.createElement('slot');\n\t\terrorSlot.setAttribute('name', 'error');\n\n\t\tlet error = document.createElement('div');\n\t\terror.setAttribute('slot', 'error');\n\n\t\t// APPEND\n\t\tnative.append(input);\n\t\tnative.append(label);\n\t\tnative.append(errorSlot);\n\n\t\tthis.append(error);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Adds an event listener after drawing the checkbox.\n\t */\n\tafterDraw() {\n\t\tthis.internals.setFormValue(this.checked ? this.value : this._valueOff); // Set initial form value based on checked state\n\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.validate();\n\n\t\t\t\tthis.pristine = false;\n\t\t\t\tthis.propagateValidation();\n\n\t\t\t\t// User interaction decides the checked state; value stays as payload\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = e.target.checked;\n\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:change');\n\t\t\t});\n\n\t\t\tthis.addEventListener('invalid', (e) => {\n\t\t\t\tthis.invalid = true;\n\t\t\t\tthis.pristine = false;\n\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t});\n\n\t\t\tthis.validate();\n\n\t\t\tif (this.invalid) {\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Removes the event listener when the checkbox is disconnected.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}

package/dist/wje-toolbar-action.js

@@ -2,7 +2,7 @@ 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 Toolbar Action ]\n*/\n\n:host {\n    .native-toolbar-action {\n        display: flex;\n    }\n}\n";
+const styles = "/*\n[ WJ Toolbar Action ]\n*/\n\n:host {\n    .native-toolbar-action {\n        display: flex;\n        gap: var(--wje-toolbar-action-gap);\n    }\n}\n";
 class ToolbarAction extends WJElement {
   /**
    * Creates an instance of ToolbarAction.

package/dist/wje-toolbar.js

@@ -2,7 +2,7 @@ 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 Toolbar ]\n*/\n\n:host {\n    --wje-toolbar-background: var(--wje-background);\n    --wje-toolbar-height: auto;\n    --wje-toolbar-min-height: 70px;\n    --wje-toolbar-padding-top: 1rem;\n    --wje-toolbar-padding-bottom: 1rem;\n    --wje-toolbar-padding-inline: 1.5rem;\n    --wje-toolbar-border-color: var(--wje-border-color);\n    --wje-toolbar-top: 0;\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-top: var(--wje-toolbar-padding-top);\n    padding-bottom: var(--wje-toolbar-padding-bottom);\n    box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    margin-right: auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
+const styles = "/*\n[ WJ Toolbar ]\n*/\n\n:host {\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-block: var(--wje-toolbar-padding-block);\n    box-shadow: var(--wje-toolbar-shadow);\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    margin-right: auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
 class Toolbar extends WJElement {
   /**
    * Creates an instance of Toolbar.

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.253",
+  "version": "0.1.255",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",