wj-elements 0.1.134 → 0.1.136

package/dist/wje-toast.js

@@ -1,333 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { 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
-};

package/dist/wje-toggle.js

@@ -1,124 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ 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
-};

package/dist/wje-toolbar-action.js

@@ -1,71 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ 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
-};

package/dist/wje-toolbar.js

@@ -1,62 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ 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";
-class Toolbar extends WJElement {
-  /**
-   * Creates an instance of Toolbar.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "Toolbar");
-  }
-  /**
-   * 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.
-   * @returns {object} Document fragment
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-toolbar");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    native.appendChild(start);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    return fragment;
-  }
-}
-Toolbar.define("wje-toolbar", Toolbar);
-export {
-  Toolbar as default
-};