npm - wj-elements - Versions diffs - 0.1.254 → 0.1.255 - Mend

wj-elements 0.1.254 → 0.1.255

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/light.css +16 -0
package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +31 -13
package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts +12 -4
package/dist/wje-breadcrumb.js +72 -30
package/dist/wje-breadcrumb.js.map +1 -1
package/dist/wje-breadcrumbs.js +13 -3
package/dist/wje-breadcrumbs.js.map +1 -1
package/dist/wje-toolbar-action.js +1 -1
package/dist/wje-toolbar.js +1 -1
package/package.json +1 -1

package/dist/light.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/wje-breadcrumb.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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 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-toolbar-action.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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