wj-elements 0.1.136 → 0.1.138

package/dist/wje-toast.js

@@ -0,0 +1,334 @@
+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, { WjElementUtils, event } from "./wje-element.js";
+const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    position: relative;\n    z-index: 9999;\n    width: 300px;\n    margin: 0.5rem 0;\n    display: none;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
+class Toast extends WJElement {
+  /**
+   * Creates an instance of Toast.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
+    __publicField(this, "className", "Toast");
+    /**
+     * Asynchronously shows the toast notification.
+     * This method sets the `open` property to `true` and dispatches the
+     * `wje-toast:after-show` custom event. If the toast is already open,
+     * the method returns `undefined`.
+     */
+    __publicField(this, "show", () => {
+      if (this.open) {
+        return;
+      }
+      this.open = true;
+      event.dispatchCustomEvent(this, "wje-toast:after-show");
+    });
+    /**
+     * Asynchronously hides the toast notification.
+     * This method sets the `open` property to `false` and dispatches the
+     * `wje-toast:after-hide` custom event. If the toast is already hidden,
+     * the method returns `undefined`.
+     */
+    __publicField(this, "hide", () => {
+      if (!this.open) {
+        return;
+      }
+      this.open = false;
+      event.dispatchCustomEvent(this, "wje-toast:after-hide");
+    });
+    /**
+     * Pauses the countdown animation and stops the timer.
+     */
+    __publicField(this, "pause", () => {
+      var _a;
+      (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+      this.stopTimer();
+    });
+    /**
+     * Resumes the countdown animation and resumes the timer.
+     */
+    __publicField(this, "resume", () => {
+      var _a;
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+      this.resumeTimer();
+    });
+    /**
+     * Asynchronously starts the toast notification.
+     * This method appends the toast notification to the document body and
+     * shows the toast notification. The method returns a promise that
+     * resolves when the toast notification is shown.
+     * @returns {Promise<unknown>}
+     */
+    __publicField(this, "start", () => {
+      return new Promise((resolve) => {
+        let stack = document.body.querySelector(".wje-toast-stack");
+        if (stack) {
+          this.toastStack = stack;
+        }
+        if (this.toastStack.parentElement === null) {
+          document.body.append(this.toastStack);
+        }
+        this.toastStack.append(this);
+        this.show();
+        this.addEventListener("wje-toast:after-hide", this.removeChildAndStack);
+      });
+    });
+    this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
+  }
+  /**
+   * Set headline value of the toast.
+   * @param value
+   */
+  set headline(value) {
+    this.setAttribute("headline", value);
+  }
+  /**
+   * Get headline value of the toast.
+   * @returns {string}
+   */
+  get headline() {
+    return this.getAttribute("headline");
+  }
+  /**
+   * Set open value of the toast.
+   * @param value
+   */
+  set open(value) {
+    this.removeAttribute("open");
+    if (WjElementUtils.stringToBoolean(value)) this.setAttribute("open", value);
+  }
+  /**
+   * Get open value of the toast.
+   * @returns {boolean}
+   */
+  get open() {
+    return this.hasAttribute("open");
+  }
+  /**
+   * Set duration value of the toast.
+   * @param value
+   */
+  set duration(value) {
+    this.setAttribute("duration", value);
+  }
+  /**
+   * Get duration value of the toast.
+   * @returns {number}
+   */
+  get duration() {
+    return +this.getAttribute("duration");
+  }
+  /**
+   * Set closable value of the toast.
+   * @param value
+   */
+  set closable(value) {
+    this.setAttribute("closable", value || "");
+  }
+  /**
+   * Get closable value of the toast.
+   * @returns {boolean}
+   */
+  get closable() {
+    return this.hasAttribute("closable");
+  }
+  /**
+   * Set color value of the toast.
+   * @param value
+   */
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  /**
+   * Get color value of the toast.
+   * @returns {string}
+   */
+  get color() {
+    return this.getAttribute("color");
+  }
+  /**
+   * Set countdown value of the toast.
+   * @param value
+   */
+  set countdown(value) {
+    if (value) this.setAttribute("countdown", value);
+  }
+  /**
+   * Get countdown value of the toast.
+   * @returns {boolean}
+   */
+  get countdown() {
+    return this.hasAttribute("countdown");
+  }
+  /**
+   * Set icon value of the toast.
+   * @param value
+   */
+  set icon(value) {
+    this.setAttribute("icon", value);
+  }
+  /**
+   * Get icon value of the toast.
+   * @returns {string}
+   */
+  get icon() {
+    return this.getAttribute("icon");
+  }
+  /**
+   * Returns the CSS stylesheet for the component.
+   * @static
+   * @returns {CSSStyleSheet} The CSS stylesheet
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Setup attributes for the Button element.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draw method for the toast notification.
+   * @returns {object} Document fragment
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-toast");
+    let mediaSlot = document.createElement("slot");
+    mediaSlot.setAttribute("name", "media");
+    mediaSlot.classList.add("media");
+    mediaSlot.addEventListener("slotchange", () => {
+      if (WjElementUtils.hasSlotContent(this.context, "media")) {
+        mediaSlot.parentElement.classList.add("has-media");
+      } else {
+        mediaSlot.parentElement.classList.remove("has-media");
+      }
+    });
+    let content = document.createElement("div");
+    content.classList.add("content");
+    content.innerHTML = `<div class="headline">${this.headline}</div><div class="message"><slot></slot></div>`;
+    let iconX = document.createElement("wje-icon");
+    iconX.setAttribute("name", "x");
+    let closeBtn = document.createElement("wje-button");
+    closeBtn.setAttribute("fill", "link");
+    closeBtn.setAttribute("color", this.color);
+    closeBtn.setAttribute("size", "small");
+    closeBtn.classList.add("close");
+    let countdownEl = document.createElement("div");
+    countdownEl.classList.add("countdown");
+    let countdownBar = document.createElement("div");
+    countdownBar.classList.add("countdown-bar");
+    closeBtn.appendChild(iconX);
+    countdownEl.appendChild(countdownBar);
+    if (this.hasAttribute("icon") && this.icon) {
+      let icon = document.createElement("wje-icon");
+      icon.setAttribute("name", this.icon);
+      icon.setAttribute("color", this.color);
+      icon.setAttribute("slot", "media");
+      icon.setAttribute("part", "icon");
+      this.appendChild(icon);
+    }
+    native.appendChild(mediaSlot);
+    native.appendChild(content);
+    if (this.closable) native.appendChild(closeBtn);
+    if (this.hasAttribute("countdown")) native.appendChild(countdownEl);
+    fragment.appendChild(native);
+    this.closeBtn = closeBtn;
+    this.countdownBar = countdownBar;
+    return fragment;
+  }
+  /**
+   * After draw method for the toast notification.
+   */
+  afterDraw() {
+    this.closeBtn.addEventListener("wje-button:click", this.hide);
+    this.addEventListener("mouseenter", this.pause);
+    this.addEventListener("mouseleave", this.resume);
+    if (this.hasAttribute("countdown")) {
+      const startWidth = "100%";
+      const endWidth = "0";
+      this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
+    if (this.duration > 0) {
+      this.remainingTime = this.duration;
+      this.startTimer();
+    }
+  }
+  /**
+   * Before disconnect method
+   * This method is called before the element is disconnected from the document.
+   */
+  beforeDisconnect() {
+    this.closeBtn.removeEventListener("wje-button:click", this.hide);
+    this.removeEventListener("wje-toast:after-hide", this.removeChildAndStack);
+    this.removeEventListener("mouseenter", this.pause);
+    this.removeEventListener("mouseleave", this.resume);
+    clearTimeout(this.timeoutID);
+  }
+  /**
+   * Starts the timer.
+   * This method sets the `startTime` property to the current time and sets
+   * the `timeoutID` property to the ID of the timeout. The method also
+   * dispatches the `wje-toast:after-hide` custom event when the timeout
+   * expires.
+   */
+  startTimer() {
+    this.startTime = Date.now();
+    if (this.timeoutID) {
+      clearTimeout(this.timeoutID);
+    }
+    this.timeoutID = window.setTimeout(() => {
+      this.hide();
+    }, this.remainingTime);
+  }
+  /**
+   * Stops the timer.
+   * This method clears the timeout and calculates the remaining time.
+   * The method is called when the toast notification is paused.
+   */
+  stopTimer() {
+    if (this.timeoutID) {
+      window.clearTimeout(this.timeoutID);
+    }
+    const elapsedTime = Date.now() - this.startTime;
+    this.remainingTime -= elapsedTime;
+  }
+  /**
+   * Resumes the timer.
+   * This method resumes the timer if the remaining time is greater
+   * than zero. The method is called when the toast notification is resumed.
+   */
+  resumeTimer() {
+    if (this.remainingTime > 0) {
+      this.startTimer();
+    }
+  }
+  /**
+   * Removes the toast notification and the toast stack.
+   *
+   * This method removes the toast notification from the toast stack and
+   * removes the toast stack from the document body if the toast stack is
+   * empty.
+   */
+  removeChildAndStack() {
+    this.toastStack.removeChild(this);
+    if (this.toastStack.querySelector("wje-toast") === null) {
+      this.toastStack.remove();
+    }
+  }
+}
+Toast.define("wje-toast", Toast);
+export {
+  Toast as default
+};
+//# sourceMappingURL=wje-toast.js.map

package/dist/wje-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (this.timeoutID) {\n            window.clearTimeout(this.timeoutID);\n        }\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime -= elapsedTime;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        this.toastStack.removeChild(this);\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector('.wje-toast-stack');\n            if (stack) {\n                this.toastStack = stack;\n            }\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n\n            this.show();\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}

package/dist/wje-toggle.js

@@ -0,0 +1,125 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement, { event } from "./wje-element.js";
+const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n    display: flex;\n}\n\nlabel {\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    user-select: none;\n    .label-wrapper {\n        width: var(--wje-toggle-width) !important;\n        min-width: var(--wje-toggle-width);\n        height: var(--wje-toggle-height);\n        position: relative;\n        display: flex;\n        align-items: center;\n        &:before {\n            content: '';\n            position: absolute;\n            cursor: pointer;\n            width: 100%;\n            height: 100%;\n            top: auto;\n            left: 0;\n            background: var(--wje-toggle-color-base);\n            background-size: 300%;\n            background-position: right;\n            border-radius: var(--wje-toggle-border-radius);\n            border: none;\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            transition:\n                background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n        &:after {\n            content: '';\n            position: absolute;\n            transform: translateX(0%);\n            background: var(--wje-toggle-handle-color);\n            width: var(--wje-toggle-handle-width);\n            height: var(--wje-toggle-handle-height);\n            border-radius: var(--wje-toggle-handle-border-radius);\n            top: auto;\n            left: 2px;\n            box-shadow: var(--wje-toggle-handle-shadow);\n            transition: transform, box-shadow;\n            transition-duration: var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n    }\n}\ninput[type='checkbox'][disabled] {\n    & + label {\n        cursor: not-allowed !important;\n        color: var(--wje-color-contrast-9);\n        opacity: 0.58;\n\n        &:before {\n            cursor: not-allowed !important;\n        }\n    }\n}\n\ninput[type='checkbox'] {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    &:checked {\n        & + label {\n            .label-wrapper:before {\n                background-position: left;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            }\n            .label-wrapper:after {\n                transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                box-shadow: var(--wje-toggle-handle-shadow-checked);\n            }\n        }\n    }\n    &:focus {\n        & + label {\n            .label-wrapper:before {\n                outline: none !important;\n                box-shadow:\n                    inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n            }\n        }\n    }\n    &[disabled]:active {\n        & + label {\n            .label-wrapper:after {\n                transform: scaleX(1.1);\n                transform-origin: center left;\n                transition: transform step-start;\n            }\n        }\n    }\n    &:checked {\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                    transform-origin: center right;\n                }\n            }\n        }\n    }\n    &:hover {\n        &:active {\n            & + label {\n                .label-wrapper:before {\n                    background-color: transparent;\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\nslot {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n";
+class Toggle extends WJElement {
+  /**
+   * Creates an instance of Toggle.
+   */
+  constructor() {
+    super();
+    /**
+     * Set color attribute for the toggle element.
+     * @type {string}
+     */
+    __publicField(this, "className", "Toggle");
+  }
+  /**
+   * Set checked attribute for the toggle element.
+   */
+  set disabled(value) {
+    if (value) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  /**
+   * Get checked attribute for the toggle element.
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Set checked attribute for the toggle element.
+   */
+  set checked(value) {
+    if (value) this.setAttribute("checked", "");
+    else this.removeAttribute("checked");
+  }
+  /**
+   * Get checked attribute for the toggle element.
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  /**
+   * Get CSS stylesheet for the Button element.
+   * @static
+   * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Get observed attributes for the toggle element.
+   * @returns {string[]}
+   */
+  static get observedAttributes() {
+    return ["checked", "disabled"];
+  }
+  /**
+   * Set up the attributes for the toggle element.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draw the toggle element for the component.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.setAttribute("part", "native");
+    element.classList.add("native-toggle");
+    let input = document.createElement("input");
+    input.setAttribute("part", "input");
+    input.setAttribute("type", "checkbox");
+    input.setAttribute("name", this.name);
+    input.setAttribute("id", "input");
+    input.checked = this.hasAttribute("checked");
+    input.disabled = this.hasAttribute("disabled");
+    let label = document.createElement("label");
+    label.setAttribute("for", "input");
+    let labelWrapper = document.createElement("div");
+    labelWrapper.setAttribute("part", "toggle");
+    labelWrapper.classList.add("label-wrapper");
+    let text = document.createElement("div");
+    text.classList.add("text");
+    text.innerHTML = "<slot></slot>";
+    if (this.color) this.classList.add("wje-color-" + this.color, "wje-color");
+    element.appendChild(input);
+    element.appendChild(label);
+    if (this.placement === "end") {
+      element.classList.add("end");
+      label.appendChild(text);
+      label.appendChild(labelWrapper);
+    } else {
+      label.appendChild(labelWrapper);
+      label.appendChild(text);
+    }
+    fragment.appendChild(element);
+    this.input = input;
+    return fragment;
+  }
+  /**
+   * After draw method for the toggle element to add event listeners for the input element after the element is drawn.
+   */
+  afterDraw() {
+    if (!this.disabled) {
+      this.input.addEventListener("input", (e) => {
+        this.checked = e.target.checked;
+        event.dispatchCustomEvent(this, "wje-toggle:input");
+      });
+      this.input.addEventListener("change", (e) => {
+        this.checked = e.target.checked;
+        event.dispatchCustomEvent(this, "wje-toggle:change");
+      });
+    }
+  }
+}
+Toggle.define("wje-toggle", Toggle);
+export {
+  Toggle as default
+};
+//# sourceMappingURL=wje-toggle.js.map

package/dist/wje-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends WJElement {\n    /**\n     * Creates an instance of Toggle.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set checked(value) {\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set color attribute for the toggle element.\n     * @type {string}\n     */\n    className = 'Toggle';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the toggle element.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['checked', 'disabled'];\n    }\n\n    /**\n     * Set up the attributes for the toggle element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw the toggle element for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toggle');\n\n        let input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.setAttribute('type', 'checkbox');\n        input.setAttribute('name', this.name);\n        input.setAttribute('id', 'input');\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        let labelWrapper = document.createElement('div');\n        labelWrapper.setAttribute('part', 'toggle');\n        labelWrapper.classList.add('label-wrapper');\n\n        let text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        element.appendChild(input);\n        element.appendChild(label);\n\n        if (this.placement === 'end') {\n            element.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(labelWrapper);\n        } else {\n            label.appendChild(labelWrapper);\n            label.appendChild(text);\n        }\n\n        fragment.appendChild(element);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toggle element to add event listeners for the input element after the element is drawn.\n     */\n    afterDraw() {\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n        }\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":";;;;;AA4Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAO;AAuCX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAtChB;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,SAAS,OAAO;AAChB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,QAAQ,OAAO;AACf,QAAI,MAAO,MAAK,aAAa,WAAW,EAAE;AAAA,QACrC,MAAK,gBAAgB,SAAS;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,UAAU;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,aAAa,QAAQ,KAAK,IAAI;AACpC,UAAM,aAAa,MAAM,OAAO;AAChC,UAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAE7C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,OAAO,OAAO;AAEjC,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,aAAa,QAAQ,QAAQ;AAC1C,iBAAa,UAAU,IAAI,eAAe;AAE1C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY;AAEjB,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,YAAQ,YAAY,KAAK;AACzB,YAAQ,YAAY,KAAK;AAEzB,QAAI,KAAK,cAAc,OAAO;AAC1B,cAAQ,UAAU,IAAI,KAAK;AAC3B,YAAM,YAAY,IAAI;AACtB,YAAM,YAAY,YAAY;AAAA,IAC1C,OAAe;AACH,YAAM,YAAY,YAAY;AAC9B,YAAM,YAAY,IAAI;AAAA,IAClC;AAEQ,aAAS,YAAY,OAAO;AAE5B,SAAK,QAAQ;AAEb,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MAClE,CAAa;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AACzC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACnE,CAAa;AAAA,IACb;AAAA,EACA;AACA;AChKA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-toolbar-action.js

@@ -0,0 +1,72 @@
+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";
+class ToolbarAction extends WJElement {
+  /**
+   * Creates an instance of ToolbarAction.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
+    __publicField(this, "className", "ToolbarAction");
+  }
+  /**
+   * Returns the CSS stylesheet for the component.
+   * @static
+   * @returns {CSSStyleSheet} The CSS stylesheet
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of observed attributes.
+   * @static
+   * @returns {Array} An empty array
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component for the toolbar action.
+   * @returns {object} Document fragment
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let maxItems = +this.maxItems || 0;
+    let actions = this.getActions();
+    let slot = document.createElement("slot");
+    let element = document.createElement("div");
+    element.setAttribute("part", "native");
+    element.classList.add("native-toolbar-action");
+    const shouldCollapse = maxItems !== 0 && actions.length > maxItems;
+    if (shouldCollapse) {
+      element = document.createElement("wje-dropdown");
+    }
+    element.appendChild(slot);
+    fragment.appendChild(element);
+    return fragment;
+  }
+  /**
+   * Returns the actions for the toolbar action.
+   * @returns {Array} An array of wje-button elements
+   */
+  getActions() {
+    return Array.from(this.querySelectorAll("wje-button"));
+  }
+}
+ToolbarAction.define("wje-toolbar-action", ToolbarAction);
+export {
+  ToolbarAction as default
+};
+//# sourceMappingURL=wje-toolbar-action.js.map

package/dist/wje-toolbar-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let maxItems = +this.maxItems || 0;\n        let actions = this.getActions();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n        if (shouldCollapse) {\n            element = document.createElement('wje-dropdown');\n        }\n\n        element.appendChild(slot);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array} An array of wje-button elements\n     */\n    getActions() {\n        return Array.from(this.querySelectorAll('wje-button'));\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;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,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK,WAAY;AAE/B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,IAC3D;AAEQ,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,EAC7D;AACA;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}