wj-elements 0.1.6 → 0.1.8

package/dist/wje-aside.js

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,74 @@
+var u = Object.defineProperty;
+var w = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var c = (a, e, t) => (w(a, typeof e != "symbol" ? e + "" : e, t), t);
+import p from "./wje-element.js";
+function m(a, e = 30, t = 80) {
+  let s = a, i = 0;
+  for (let o = 0; o < (s == null ? void 0 : s.length); o++)
+    i = s.charCodeAt(o) + ((i << 5) - i);
+  return "hsl(" + i % 360 + ", " + e + "%, " + t + "%)";
+}
+function g(a, e = 2) {
+  let t = a.split(" "), s = t[0].substring(0, 1).toUpperCase();
+  return t.length > 1 && e > 1 && (s += t[t.length - 1].substring(0, 1).toUpperCase()), s;
+}
+const b = ":host{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 v extends p {
+  /**
+   * Avatar class constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     */
+    c(this, "className", "Avatar");
+  }
+  /**
+   * Getter for cssStyleSheet
+   * @returns {string} styles
+   */
+  static get cssStyleSheet() {
+    return b;
+  }
+  /**
+   * 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, s, i) {
+    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 o = document.createElement("slot");
+    if (r.appendChild(o), this.hasAttribute("initials")) {
+      let l = g(this.label);
+      this.setAttribute("style", `--wje-avatar-background-color: ${m(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;
+  }
+}
+v.define("wje-avatar", v);
+export {
+  v as default
+};

package/dist/wje-badge.js

@@ -0,0 +1,48 @@
+var l = Object.defineProperty;
+var n = (e, o, r) => o in e ? l(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r;
+var a = (e, o, r) => (n(e, typeof o != "symbol" ? o + "" : o, r), r);
+import w from "./wje-element.js";
+const j = ":host(.wje-color-primary){--wje-color-base: var(--wje-color-primary);--wje-color-contrast: var(--wje-color-contrast-lowest)}:host(.wje-color-complete){--wje-color-base: var(--wje-color-complete);--wje-color-contrast: var(--wje-color-contrast-lowest)}:host(.wje-color-success){--wje-color-base: var(--wje-color-success);--wje-color-contrast: var(--wje-color-contrast-lowest)}:host(.wje-color-warning){--wje-color-base: var(--wje-color-warning);--wje-color-contrast: var(--wje-color-contrast-high)}:host(.wje-color-danger){--wje-color-base: var(--wje-color-danger);--wje-color-contrast: var(--wje-color-contrast-lowest)}:host(.wje-color-info){--wje-color-base: var(--wje-color-info);--wje-color-contrast: var(--wje-color-contrast-lowest)}:host(.wje-color-contrast){--wje-color-base: var(--wje-color-contrast-lower);--wje-color-contrast: var(--wje-color-contrast-high)}:host{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);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 j;
+  }
+  /**
+   * 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(r, i, d) {
+    let t = document.createDocumentFragment(), s = document.createElement("slot");
+    return this.color && this.classList.add("wje-color-" + this.color, "wje-color"), t.appendChild(s), t;
+  }
+}
+c.define("wje-badge", c);
+export {
+  c as default
+};

package/dist/wje-breadcrumb.js

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,177 @@
+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
+};