wj-elements 0.1.4 → 0.1.6

package/dist/wje-aside.js

@@ -1,55 +0,0 @@
-var a = Object.defineProperty;
-var h = (t, e, i) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
-var s = (t, e, i) => (h(t, typeof e != "symbol" ? e + "" : e, i), i);
-import l from "./wje-element.js";
-const n = ':host{--wje-aside-width: "100px";--wje-aside-top: 0;--wje-aside-border-color: var(--wje-border-color);--wje-aside-border-width: 0 1px 0 0;--wje-aside-border-style: solid;box-sizing:border-box;flex-shrink:0;overflow:auto;border-color:var(--wje-aside-border-color);border-width:var(--wje-aside-border-width);border-style:var(--wje-aside-border-style)}:host(.open){display:block!important}@media (min-width: 768px){:host([fixed]){position:fixed;width:var(--wje-aside-width);top:var(--wje-aside-top);height:calc(100% - var(--wje-aside-top))}}@media (max-width: 768px){:host{display:none}:host([variant=top-start]){position:fixed;top:0;left:0;width:80%;height:100%;z-index:9999;background-color:#fff}}';
-class r extends l {
-  /**
-   * Constructor for the Aside class.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the Aside element ddddd.
-     * @type {string}
-     */
-    s(this, "className", "Aside");
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @return {Object} The styles for the Aside element.
-   */
-  static get cssStyleSheet() {
-    return n;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @return {Array} An empty array as there are no observed attributes.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Method to setup attributes for the Aside element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Method to draw the Aside element.
-   * @param {Object} context - The context in which the element is drawn.
-   * @param {Object} store - The store containing the state of the element.
-   * @param {Object} params - The parameters for drawing the element.
-   * @return {Object} The document fragment containing the drawn element.
-   */
-  draw(i, w, p) {
-    let o = document.createDocumentFragment();
-    this.width && this.style.setProperty("--wje-aside-width", this.width), this.top && this.hasAttribute("fixed") && this.style.setProperty("--wje-aside-top", this.top);
-    let d = document.createElement("slot");
-    return o.appendChild(d), o;
-  }
-}
-r.define("wje-aside", r);
-export {
-  r as default
-};

package/dist/wje-avatar.js

@@ -1,74 +0,0 @@
-var w = Object.defineProperty;
-var u = (a, e, t) => e in a ? w(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
-var v = (a, e, t) => (u(a, typeof e != "symbol" ? e + "" : e, t), t);
-import p from "./wje-element.js";
-function j(a, e = 30, t = 80) {
-  let o = a, s = 0;
-  for (let i = 0; i < (o == null ? void 0 : o.length); i++)
-    s = o.charCodeAt(i) + ((s << 5) - s);
-  return "hsl(" + s % 360 + ", " + e + "%, " + t + "%)";
-}
-function b(a, e = 2) {
-  let t = a.split(" "), o = t[0].substring(0, 1).toUpperCase();
-  return t.length > 1 && e > 1 && (o += t[t.length - 1].substring(0, 1).toUpperCase()), o;
-}
-const g = ":host{--wje-avatar-width: 32px;--wje-avatar-height: 32px;--wje-avatar-font-size: .75rem;--wje-avatar-font-weight: 400;--wje-avatar-color: inherit;--wje-avatar-background-color: var(--wje-color-contrast-low);--wje-avatar-border-radius: 50%;--wje-avatar-border-color: transparent;--wje-avatar-border-width: 1px;--wje-avatar-border-style: solid;display:inline-block;width:var(--wje-avatar-width);height:var(--wje-avatar-height);font-size:var(--wje-avatar-font-size);font-weight:var(--wje-avatar-font-weight);color:var(--wje-avatar-color)}:host .native-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--wje-avatar-border-radius);background-color:var(--wje-avatar-background-color)}::slotted([slot=status]){display:flex;position:absolute;bottom:-4px;right:-4px}::slotted(wje-img),::slotted(img){border-radius:var(--wje-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wje-avatar-border){border-color:var(--wje-avatar-border-color);border-width:var(--wje-avatar-border-width);border-style:var(--wje-avatar-border-style)}:host(.wje-avatar-small){--wje-avatar-width: 24px;--wje-avatar-height: 24px}:host(.wje-avatar-large){--wje-avatar-width: 48px;--wje-avatar-height: 48px}";
-class c extends p {
-  /**
-   * Avatar class constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     */
-    v(this, "className", "Avatar");
-  }
-  /**
-   * Getter for cssStyleSheet
-   * @returns {string} styles
-   */
-  static get cssStyleSheet() {
-    return g;
-  }
-  /**
-   * Method to setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Method to draw the avatar
-   * @param {object} context - The context
-   * @param {object} store - The store
-   * @param {object} params - The parameters
-   * @returns {object} fragment - The document fragment
-   */
-  draw(t, o, s) {
-    let n = document.createDocumentFragment(), r = document.createElement("div");
-    r.setAttribute("part", "native"), r.classList.add("native-avatar"), this.size && this.classList.add("wje-avatar-" + this.size);
-    let i = document.createElement("slot");
-    if (r.appendChild(i), this.hasAttribute("initials")) {
-      let l = b(this.label);
-      this.setAttribute("style", `--wje-avatar-background-color: ${j(l)}`), r.innerText = l;
-    } else {
-      let l = document.createElement("slot");
-      l.setAttribute("name", "icon"), r.appendChild(l);
-    }
-    let d = document.createElement("slot");
-    d.setAttribute("name", "status"), d.setAttribute("part", "status");
-    let h = document.createElement("slot");
-    return h.setAttribute("name", "secondary"), h.setAttribute("part", "secondary"), r.appendChild(d), r.appendChild(h), n.appendChild(r), n;
-  }
-  /**
-   * Method to check if the avatar is an image
-   * @returns {boolean} - True if the avatar is an image, false otherwise
-   */
-  isImage() {
-    return this.getElementsByTagName("wje-img").length > 0;
-  }
-}
-c.define("wje-avatar", c);
-export {
-  c as default
-};

package/dist/wje-badge.js

@@ -1,48 +0,0 @@
-var s = Object.defineProperty;
-var l = (r, o, e) => o in r ? s(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e;
-var a = (r, o, e) => (l(r, typeof o != "symbol" ? o + "" : o, e), e);
-import w from "./wje-element.js";
-const i = ":host(.wje-color-primary){--wje-color-base: var(--wje-color-primary) !important;--wje-color-contrast: var(--wje-color-contrast-lowest) !important}:host(.wje-color-complete){--wje-color-base: var(--wje-color-complete) !important;--wje-color-contrast: var(--wje-color-contrast-lowest) !important}:host(.wje-color-success){--wje-color-base: var(--wje-color-success) !important;--wje-color-contrast: var(--wje-color-contrast-lowest) !important}:host(.wje-color-warning){--wje-color-base: var(--wje-color-warning) !important;--wje-color-contrast: var(--wje-color-contrast-high) !important}:host(.wje-color-danger){--wje-color-base: var(--wje-color-danger) !important;--wje-color-contrast: var(--wje-color-contrast-lowest) !important}:host(.wje-color-info){--wje-color-base: var(--wje-color-info) !important;--wje-color-contrast: var(--wje-color-contrast-lowest) !important}:host(.wje-color-contrast){--wje-color-base: var(--wje-color-contrast-lower) !important;--wje-color-contrast: var(--wje-color-contrast-high) !important}:host{--wje-badge-border-radius: var(--wje-border-radius-large);--wje-badge-padding-top: 2px;--wje-badge-padding-bottom: 2px;--wje-badge-padding-inline: 6px;display:inline-block;text-shadow:none;font-family:var(--wje-font-family);font-weight:600;background-color:var(--wje-color-contrast-low);font-size:11px;line-height:1;padding-top:var(--wje-badge-padding-top);padding-bottom:var(--wje-badge-padding-bottom);padding-inline:var(--wje-badge-padding-inline);color:var(--wje-color-contrast-high);border-radius:var(--wje-badge-border-radius)}:host(.wje-color){background-color:var(--wje-color-base, red);color:var(--wje-color-contrast)}";
-class c extends w {
-  /**
-   * Badge constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    a(this, "className", "Badge");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return i;
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
-   */
-  draw(e, d, j) {
-    let t = document.createDocumentFragment(), n = document.createElement("slot");
-    return this.color && this.classList.add("wje-color-" + this.color, "wje-color"), t.appendChild(n), t;
-  }
-}
-c.define("wje-badge", c);
-export {
-  c as default
-};

package/dist/wje-breadcrumb.js

@@ -1,148 +0,0 @@
-var b = Object.defineProperty;
-var w = (s, r, e) => r in s ? b(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var m = (s, r, e) => (w(s, typeof r != "symbol" ? r + "" : r, e), e);
-import j, { WjElementUtils as l, event as f } from "./wje-element.js";
-const g = ':host{--wje-breadcrumb-a: var(--wje-color-contrast-high);--wje-breadcrumb-a-hover: var(--wje-color-contrast-medium);display:flex;flex:0 0 auto;align-items:center;line-height:1.5}:host(.collapsed){display:none}.native-breadcrumb{display:flex;align-items:center;width:100%;outline:none;background:inherit;padding:.25rem .75rem;color:var(--wje-breadcrumb-a);text-decoration:none}.native-breadcrumb.hidden{display:none}.native-breadcrumb.active{font-weight:700}.native-breadcrumb:hover{color:var(--wje-breadcrumb-a-hover)}button{margin-inline:.75rem;border:0 solid transparent;border-radius:3px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.separator{display:inline-flex;align-items:center}::slotted([slot="start"]){margin-inline:0 .5rem}::slotted([slot="end"]){margin-inline:.5rem 0}';
-class u extends j {
-  /**
-   * Breadcrumb constructor
-   */
-  constructor() {
-    var e;
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    m(this, "className", "Breadcrumb");
-    this._showSeparator = !0, this._collapsedVariant = ((e = this.parentElement) == null ? void 0 : e.collapsedVariant) || "BUTTON";
-  }
-  /**
-   * Get show separator flag
-   * @returns {boolean} showSeparator - The show separator flag
-   */
-  get showSeparator() {
-    return this._showSeparator;
-  }
-  /**
-   * Set show separator flag
-   * @param {boolean} value - The value to set
-   */
-  set showSeparator(e) {
-    this._showSeparator = e;
-  }
-  /**
-   * Get collapsed variant
-   * @returns {string} collapsedVariant - The collapsed variant
-   */
-  get collapsedVariant() {
-    return this._collapsedVariant.toUpperCase();
-  }
-  /**
-   * Set collapsed variant
-   * @param {string} value - The value to set
-   */
-  set collapsedVariant(e) {
-    this._collapsedVariant = e || this.parentElement.collapsedVariant;
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return g;
-  }
-  /**
-   * Get observed attributes
-   * @static
-   * @returns {Array<string>} observedAttributes - The observed attributes
-   */
-  static get observedAttributes() {
-    return ["show-collapsed-indicator", "collapsed", "last"];
-  }
-  /**
-   * Attribute changed callback
-   * @param {string} name - The attribute name
-   * @param {string} oldValue - The old value
-   * @param {string} newValue - The new value
-   * @returns {boolean} false - Always returns false
-   */
-  attributeChangedCallback(e, n, t) {
-    return e === "collapsed" ? l.stringToBoolean(t) && this.classList.add("collapsed") : e === "show-collapsed-indicator" ? l.stringToBoolean(t) && (this.showCollapsedIndicator = !0, this.refresh()) : e === "last" && (this.active = l.stringToBoolean(t), this.showSeparator = !l.stringToBoolean(t), this.refresh()), !1;
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
-   */
-  draw(e, n, t) {
-    let o = document.createDocumentFragment(), a = document.createElement("a");
-    a.classList.add("native-breadcrumb"), a.setAttribute("part", "native"), this.active && a.classList.add("active");
-    let h = document.createElement("slot"), d = document.createElement("slot");
-    d.setAttribute("name", "start");
-    let c = document.createElement("slot");
-    if (c.setAttribute("name", "end"), a.appendChild(d), a.appendChild(h), a.appendChild(c), o.appendChild(a), this.showCollapsedIndicator && (o.appendChild(this.drawCollapsedIndicator()), this.classList.remove("collapsed"), a.classList.add("hidden")), this.showSeparator) {
-      let i = document.createElement("span");
-      if (i.classList.add("separator"), i.setAttribute("part", "separator"), l.hasSlot(this, "separator")) {
-        let p = document.createElement("slot");
-        p.setAttribute("name", "separator"), i.appendChild(p);
-      } else
-        i.innerHTML = `<wje-icon name=${this.separator || "chevron-right"}></wje-icon>`;
-      o.appendChild(i);
-    }
-    return this.native = a, o;
-  }
-  /**
-   * Draw collapsed indicator
-   * @returns {Object} collapsedIndicator - The collapsed indicator
-   */
-  drawCollapsedIndicator() {
-    let e = null;
-    return this.collapsedVariant === "DROPDOWN" ? e = this.collapseDropdown() : e = this.collapseButton(), e;
-  }
-  /**
-   * Collapse dropdown
-   * @returns {Object} dropdown - The dropdown
-   */
-  collapseDropdown() {
-    let e = document.createElement("wje-dropdown");
-    e.setAttribute("placement", "bottom"), e.setAttribute("offset", "10");
-    let n = document.createElement("wje-button");
-    n.setAttribute("slot", "trigger"), n.setAttribute("fill", "link"), n.innerHTML = '<wje-icon name="dots"></wje-icon>';
-    let t = document.createElement("wje-menu");
-    return t.setAttribute("variant", "context"), e.appendChild(n), e.appendChild(t), e.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>`, this.parentElement.querySelectorAll("wje-breadcrumb").forEach((o) => {
-    }), e;
-  }
-  /**
-   * Collapse button
-   * @returns {Object} button - The button
-   */
-  collapseButton() {
-    let e = document.createElement("button");
-    return e.setAttribute("aria-label", "Show more breadcrumbs"), e.setAttribute("part", "collapsed-indicator"), e.innerHTML = '<wje-icon name="dots"></wje-icon>', f.addListener(e, "click", null, (n) => {
-      this.native.classList.remove("hidden"), e.remove(), this.parentElement.querySelectorAll("wje-breadcrumb").forEach((t) => {
-        t.classList.remove("collapsed");
-      }), n.stopPropagation();
-    }), e;
-  }
-}
-u.define("wje-breadcrumb", u);
-export {
-  u as default
-};

package/dist/wje-breadcrumbs.js

@@ -1,67 +0,0 @@
-var n = Object.defineProperty;
-var d = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var i = (r, t, e) => (d(r, typeof t != "symbol" ? t + "" : t, e), e);
-import f from "./wje-element.js";
-const p = ":host{display:flex;flex-wrap:wrap;align-items:center}";
-class c extends f {
-  /**
-   * Breadcrumbs constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    i(this, "className", "Breadcrumbs");
-    this.last = !1;
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return p;
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
-   */
-  draw(e, l, o) {
-    let s = document.createDocumentFragment(), u = document.createElement("slot");
-    return s.appendChild(u), s;
-  }
-  /**
-   * After draw method
-   */
-  afterDraw() {
-    let e = +this.maxItems || 0, l = +this.itemsBeforeCollapse || 1, o = +this.itemsAfterCollapse || 1, s = this.getBreadcrumbs();
-    if (s.length === 0)
-      return;
-    s.findLast((a) => a).setAttribute("last", !0), e !== void 0 && s.length > e && l + o <= e && s.forEach((a, m) => {
-      m === l && a.setAttribute("show-collapsed-indicator", !0), m >= l && m < s.length - o && a.setAttribute("collapsed", !0);
-    });
-  }
-  /**
-   * Get breadcrumbs
-   * @returns {Array} breadcrumbs - The breadcrumbs
-   */
-  getBreadcrumbs() {
-    return Array.from(this.querySelectorAll("wje-breadcrumb")) || [];
-  }
-}
-c.define("wje-breadcrumbs", c);
-export {
-  c as default
-};

package/dist/wje-button-group.js

@@ -1,78 +0,0 @@
-var d = Object.defineProperty;
-var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var i = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
-import u from "./wje-element.js";
-const g = ":host{display:inline-block}:host .native-button-group{display:flex;flex-wrap:nowrap;line-height:1}:host slot{display:contents}::slotted(wje-button){margin:0!important}";
-class m extends u {
-  /**
-   * ButtonGroup constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    i(this, "className", "ButtonGroup");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return g;
-  }
-  /**
-   * Get observed attributes
-   * @static
-   * @returns {Array<string>} observedAttributes - The observed attributes
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
-   */
-  draw(t, l, c) {
-    let s = document.createDocumentFragment(), n = document.createElement("div");
-    return n.classList.add("native-button-group"), n.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), n.appendChild(this.slotElement), s.appendChild(n), s;
-  }
-  /**
-   * After draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   */
-  afterDraw(t, l, c) {
-    const s = [...this.slotElement.assignedElements({ flatten: !0 })];
-    s.forEach((n) => {
-      let a = s.indexOf(n), r = this.findButton(n);
-      r && (r.classList.add("wje-button-group-button"), r.classList.toggle("wje-button-group-first", a === 0), r.classList.toggle("wje-button-group-inner", a > 0 && a < s.length - 1), r.classList.toggle("wje-button-group-last", a === s.length - 1));
-    });
-  }
-  /**
-   * Find button method
-   * @param {Object} el - The element
-   * @returns {Object} button - The button
-   */
-  findButton(t) {
-    const l = "wje-button";
-    return t.closest(l) ?? t.querySelector(l);
-  }
-}
-u.define("wje-button-group", m);
-export {
-  m as default
-};

package/dist/wje-button.js

@@ -1,177 +0,0 @@
-var b = Object.defineProperty;
-var j = (t, r, o) => r in t ? b(t, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[r] = o;
-var s = (t, r, o) => (j(t, typeof r != "symbol" ? r + "" : r, o), o);
-import h, { WjElementUtils as g, event as i } from "./wje-element.js";
-import v from "./wje-icon.js";
-const w = (t) => t === "false" || t === "null" || t === "NaN" || t === "undefined" || t === "0" ? !1 : !!t, p = ':host(.wje-button-solid.wje-color-primary){--wje-button-background-color: var(--wje-color-primary-10);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary){--wje-button-border-color: var(--wje-color-primary-6);--wje-button-color: var(--wje-color-primary-6)}:host(.wje-button-solid.wje-color-complete){--wje-button-background-color: var(--wje-color-complete-10);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete){--wje-button-border-color: var(--wje-color-complete-6);--wje-button-color: var(--wje-color-complete-6)}:host(.wje-button-solid.wje-color-success){--wje-button-background-color: var(--wje-color-success-10);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success){--wje-button-border-color: var(--wje-color-success-6);--wje-button-color: var(--wje-color-success-6)}:host(.wje-button-solid.wje-color-warning){--wje-button-background-color: var(--wje-color-warning-10);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning){--wje-button-border-color: var(--wje-color-warning-6);--wje-button-color: var(--wje-color-warning-6)}:host(.wje-button-solid.wje-color-danger){--wje-button-background-color: var(--wje-color-danger-10);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger){--wje-button-border-color: var(--wje-color-danger-6);--wje-button-color: var(--wje-color-danger-6)}:host(.wje-button-solid.wje-color-neutral){--wje-button-background-color: var(--wje-color-contrast-10);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral){--wje-button-border-color: var(--wje-color-contrast-6);--wje-button-color: var(--wje-color-contrast-6)}:host(.wje-button-solid.wje-color-default){--wje-button-background-color: transparent;--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-outline.wje-color-default){--wje-button-border-color: var(--wje-color-contrast-4);--wje-button-color: var(--wje-color-contrast-11)}:host{--wje-button-border-radius: var(--wje-border-radius-medium);--wje-button-border-width: 1px;--wje-button-border-style: solid;--wje-button-border-color: var(--wje-color-contrast-1);--wje-button-margin-inline: 0;--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.button-native{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);outline:none;background-color:var(--wje-button-background-color);color:var(--wje-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end)}@media (any-hover: hover){:host(.wje-button-solid.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-9);--wje-button-border-color: var(--wje-color-primary-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-primary:hover){--wje-button-background-color: var(--wje-color-primary-1);--wje-button-border-color: var(--wje-color-primary-11);--wje-button-color: var(--wje-color-primary-11)}:host(.wje-button-solid.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-9);--wje-button-border-color: var(--wje-color-complete-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-complete:hover){--wje-button-background-color: var(--wje-color-complete-1);--wje-button-border-color: var(--wje-color-complete-11);--wje-button-color: var(--wje-color-complete-11)}:host(.wje-button-solid.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-9);--wje-button-border-color: var(--wje-color-success-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-success:hover){--wje-button-background-color: var(--wje-color-success-1);--wje-button-border-color: var(--wje-color-success-11);--wje-button-color: var(--wje-color-success-11)}:host(.wje-button-solid.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-9);--wje-button-border-color: var(--wje-color-warning-10);--wje-button-color: var(--wje-color-black)}:host(.wje-button-outline.wje-color-warning:hover){--wje-button-background-color: var(--wje-color-warning-1);--wje-button-border-color: var(--wje-color-warning-11);--wje-button-color: var(--wje-color-warning-11)}:host(.wje-button-solid.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-9);--wje-button-border-color: var(--wje-color-danger-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-danger:hover){--wje-button-background-color: var(--wje-color-danger-1);--wje-button-border-color: var(--wje-color-danger-11);--wje-button-color: var(--wje-color-danger-11)}:host(.wje-button-solid.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-9);--wje-button-border-color: var(--wje-color-contrast-10);--wje-button-color: var(--wje-color-contrast-0)}:host(.wje-button-outline.wje-color-neutral:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-11);--wje-button-color: var(--wje-color-contrast-11)}:host(.wje-button-solid.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-outline.wje-color-default:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: var(--wje-color-contrast-2);--wje-button-color: var(--wje-color-contrast-9)}:host(.wje-button-link:hover){--wje-button-background-color: var(--wje-color-contrast-1);--wje-button-border-color: transparent;color:var(--wje-color-contrast-9)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wje-color){background-color:var(--wje-button-background-color);color:var(--wje-button-color)}:host(.wje-button-link){--wje-button-border-width: 1px;--wje-button-border-color: transparent;--wje-button-background-color: transparent}:host(.wje-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wje-button-round){--wje-button-border-radius: var(--wje-border-radius-pill)}:host(.wje-button-circle){--wje-button-border-radius: var(--wje-border-radius-circle);aspect-ratio:1/1}:host(.wje-button-large){--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host(.wje-button-small){--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 -.3rem}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;display:block}:host(.wje-button-group-first:not(.wje-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wje-button-group-inner) .button-native{border-radius:0}:host(.wje-button-group-last:not(.wje-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wje-button-group-button:not(.wje-button-group-first)){margin-inline-start:calc(-1 * var(--wje-button-border-width))!important}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
-class d extends h {
-  /**
-   * Button constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Dependencies
-     * @type {Object}
-     */
-    s(this, "depandencies", {
-      "wje-icon": v
-    });
-    /**
-     * Class name
-     * @type {string}
-     */
-    s(this, "className", "Button");
-    /**
-     * Event dialog open method
-     * @param {Event} e - The event
-     */
-    s(this, "eventDialogOpen", (o) => {
-      i.dispatchCustomEvent(this, this.dialog, {
-        bubbles: !0
-      });
-    });
-    /**
-     * Toggle states method
-     */
-    s(this, "toggleStates", () => {
-      this.slotToggle.assignedNodes().filter((a) => a.nodeType === Node.ELEMENT_NODE).forEach((a) => {
-        a.classList.contains("show") ? a.classList.remove("show") : a.classList.add("show");
-      });
-    });
-  }
-  /**
-   * Set active state
-   * @param {boolean} value - The value to set
-   */
-  set active(o) {
-    this.setAttribute("active", "");
-  }
-  /**
-   * Get active state
-   * @returns {boolean} active - The active state
-   */
-  get active() {
-    return this.hasAttribute("active");
-  }
-  /**
-   * Set disabled state
-   * @param {boolean} value - The value to set
-   */
-  set disabled(o) {
-    o ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  /**
-   * Get disabled state
-   * @returns {boolean} disabled - The disabled state
-   */
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  /**
-   * Set fill
-   * @param {string} value - The value to set
-   */
-  set fill(o) {
-    this.setAttribute("fill", o);
-  }
-  /**
-   * Get fill
-   * @returns {string} fill - The fill
-   */
-  get fill() {
-    return this.getAttribute("fill") || "solid";
-  }
-  /**
-   * Set outline
-   * @param {boolean} value - The value to set
-   */
-  set outline(o) {
-    this.setAttribute("outline", "");
-  }
-  /**
-   * Get outline
-   * @returns {boolean} outline - The outline
-   */
-  get outline() {
-    return this.hasAttribute("outline");
-  }
-  /**
-   * Set stop propagation
-   * @param {boolean} value - The value to set
-   */
-  set stopPropagation(o) {
-    this.setAttribute("stop-propagation", w(o));
-  }
-  /**
-   * Get stop propagation
-   * @returns {boolean} stopPropagation - The stop propagation
-   */
-  get stopPropagation() {
-    return w(this.getAttribute("stop-propagation"));
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles - The CSS styles
-   */
-  static get cssStyleSheet() {
-    return p;
-  }
-  /**
-   * Get observed attributes
-   * @static
-   * @returns {Array<string>} observedAttributes - The observed attributes
-   */
-  static get observedAttributes() {
-    return ["disabled"];
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} fragment - The document fragment
-   */
-  draw(o, a, m) {
-    let u = document.createDocumentFragment();
-    if (this.classList.remove("wje-button-disabled"), this.disabled && this.classList.add("wje-button-disabled"), this.variant && this.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && this.classList.add("wje-button-round"), this.hasAttribute("circle") && this.classList.add("wje-button-circle"), this.outline && this.classList.add("wje-outline"), this.fill && this.classList.add("wje-button-" + this.fill), this.size && this.classList.add("wje-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wje-color-" + this.color, "wje-color") : this.classList.add("wje-color-default", "wje-color"), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
-      let l = document.createElement("wje-icon");
-      l.style.setProperty("--wje-icon-size", "14px"), l.setAttribute("slot", "caret"), l.setAttribute("name", "chevron-down"), this.appendChild(l);
-    }
-    if (this.active) {
-      this.classList.add("wje-active");
-      let l = document.createElement("wje-icon");
-      l.setAttribute("name", "check"), this.appendChild(l);
-    }
-    let c = document.createElement(this.hasAttribute("href") ? "a" : "button");
-    c.classList.add("button-native"), c.setAttribute("part", "native");
-    let n = document.createElement("span");
-    n.classList.add("button-inner");
-    let e = document.createElement("slot");
-    return e.setAttribute("name", "icon-only"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "start"), n.appendChild(e), e = document.createElement("slot"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "end"), n.appendChild(e), e = document.createElement("slot"), e.setAttribute("name", "caret"), n.appendChild(e), this.hasToggle = g.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), c.appendChild(n), u.appendChild(c), u;
-  }
-  /**
-   * After draw method
-   */
-  afterDraw() {
-    this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), this.hasAttribute("dialog") ? i.addListener(this, "click", null, this.eventDialogOpen) : i.addListener(this, "click", "wje-button:click", null), this.hasToggle && i.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
-  }
-  /**
-   * Before disconnect method
-   */
-  beforeDisconnect() {
-    this.removeEventListener("click", this.eventDialogOpen);
-  }
-}
-d.define("wje-button", d);
-export {
-  d as default
-};