@nyx-ds/treeview 0.1.0

package/dist/treeview.js

@@ -0,0 +1,669 @@
+import { LitElement as k, html as l, unsafeCSS as m, nothing as y } from "lit";
+import { property as a, state as f, queryAssignedElements as M } from "lit/decorators.js";
+import { repeat as U } from "lit/directives/repeat.js";
+import { classMap as O } from "lit/directives/class-map.js";
+import { eyeSlash as W, eye as V, xmark as G, check as j, minus as J, spinnerThird as K, magnifyingGlass as Q, chevronRightRegular as X } from "@nyx-ds/core";
+import { classMap as $ } from "lit-html/directives/class-map.js";
+import "@nyx-ds/icon";
+import { unsafeHTML as B } from "lit-html/directives/unsafe-html.js";
+function Y(c, o) {
+  return function(e, n) {
+    const { native: t = !1, ...r } = n || {}, i = t ? new Event(o, r) : new CustomEvent(o, { detail: e, ...r });
+    c.dispatchEvent(i);
+  };
+}
+function q(c) {
+  return (o, e) => {
+    Object.defineProperty(o, e, {
+      get() {
+        return Y(this, c || e);
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  };
+}
+const Z = ":host{display:flex;flex-direction:column;width:100%;--treeview-radius: var(--nyx-radii-s);--treeview-search-padding: var(--nyx-sizing-1-25) var(--nyx-sizing-1-75) 0 var(--nyx-sizing-1-75);--treeview-header-padding: var(--nyx-sizing-2) var(--nyx-sizing-2) var(--nyx-sizing-1-75) var(--nyx-sizing-2);--treeview-row-padding: var(--nyx-sizing-1-5, 12px) var(--nyx-sizing-2);--treeview-row-gap: var(--nyx-sizing-2);--treeview-col-gap: var(--nyx-sizing-1);--treeview-node-gap: var(--nyx-sizing-1);--treeview-row-min-height: 56px;--treeview-expander-wrapper-size: var(--nyx-sizing-4);--treeview-expander-padding: var(--nyx-sizing-1-25);--treeview-col-width: var(--treeview-header-icon-size);--treeview-background: var(--nyx-color-neutral-background-primary);--treeview-border-color: var(--nyx-color-neutral-border-tertiary);--treeview-content-color: var(--nyx-color-neutral-content-primary);--treeview-focus-border-color: var(--nyx-color-brand-border-default);--treeview-row-selected-background: var(--nyx-color-brand-background-softer);--treeview-row-selected-hover-background: var( --nyx-color-brand-background-softer-hover );--treeview-row-selected-color: var(--nyx-color-neutral-content-primary);--treeview-font-family: var(--nyx-font-family-font-family);--treeview-title-font-size: var(--nyx-label-medium-font-size);--treeview-title-line-height: var(--nyx-label-medium-line-height);--treeview-text-font-size: var(--nyx-label-medium-font-size);--treeview-text-line-height: var(--nyx-label-medium-line-height);--treeview-header-icon-size: var(--nyx-label-large-font-size);--treeview-node-icon-size: var(--nyx-label-medium-font-size);--treeview-expander-icon-size: var(--nyx-label-large-font-size);--treeview-row-hover-background: var(--nyx-color-brand-background-hover);--treeview-row-hover-color: var(--nyx-color-neutral-content-primary-inverse)}.nyx-treeview{display:flex;flex-direction:column;width:100%;font-family:var(--treeview-font-family);align-items:flex-start;border-radius:var(--treeview-radius);border:1px solid var(--treeview-border-color);background:var(--treeview-background);box-sizing:border-box}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.search-container{display:flex;padding:var(--treeview-search-padding);flex-direction:column;align-items:flex-start;align-self:stretch}.tree-scroll{width:100%}.tree-header{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:var(--treeview-header-padding);border-bottom:.5px solid var(--treeview-border-color);box-sizing:border-box}.tree-title{color:var(--treeview-content-color);font-size:var(--treeview-title-font-size);line-height:var(--treeview-title-line-height);font-weight:600}.header-columns,.node-columns{display:flex;align-items:center;justify-content:flex-end;gap:var(--treeview-col-gap);flex-shrink:0}.col-cell{min-width:var(--treeview-col-width);width:var(--treeview-col-width);flex:0 0 auto}.col-cell,.header-columns ::slotted(*){display:flex;justify-content:center;align-items:center;box-sizing:border-box}.header-columns ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-header-icon-size);color:var(--treeview-content-color)}.tree-body{width:100%;display:flex;flex-direction:column}.node-wrapper{display:flex;flex-direction:column;width:100%}.node-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--treeview-row-min-height);border-bottom:.5px solid var(--treeview-border-color);gap:var(--treeview-row-gap);padding:var(--treeview-row-padding);box-sizing:border-box;background:transparent;color:var(--treeview-content-color);outline:none;cursor:default}.node-row:hover{background:var(--treeview-row-hover-background);color:var(--treeview-row-hover-color)}.node-row:focus-within{background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)!important}.node-row:hover .expander nyx-icon,.node-row:hover .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row:focus-within .expander nyx-icon,.node-row:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row.selectable.selected{background-color:var(--treeview-row-selected-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected .expander nyx-icon,.node-row.selectable.selected .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover{background-color:var(--treeview-row-selected-hover-background);color:var(--treeview-row-selected-color)}.node-row:focus-visible{position:relative;z-index:2;outline:2px solid var(--treeview-content-color);outline-offset:-4px;background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)}.row-checkbox{display:flex;align-items:center;margin-right:4px}.node-info{display:flex;align-items:center;gap:var(--treeview-node-gap);flex:1 0 0;overflow:hidden;min-height:32px;padding-left:4px}.expander{--button-icon-color: inherit}.expander nyx-icon{--nyx-icon-size: var(--treeview-expander-icon-size);transition:transform .2s ease;transform-origin:center}.expander nyx-icon.expanded{transform:rotate(90deg)}.expander:hover,.expander:focus-within{--button-icon-color: var(--treeview-content-color) !important}.expander:hover nyx-icon,.expander:focus-within nyx-icon{color:var(--treeview-content-color)!important;--nyx-icon-color: var(--treeview-content-color) !important}.node-type-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-type-icon-wrapper ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-node-icon-size)}.node-text{font-size:var(--treeview-text-font-size);line-height:var(--treeview-text-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-children{width:100%}@media (max-width: 768px){.tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.tree-header,.tree-body{min-width:calc(250px + ((var(--treeview-col-width) + var(--treeview-col-gap)) * 4))}.node-text{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}", oo = ':host{--field-padding: var(--nyx-sizing-1-5);--field-padding-small: var(--nyx-sizing-1) var(--nyx-sizing-1-5);--field-border-radius-sharp: var(--nyx-radii-xs);--field-border-radius-rounded: var(--nyx-radii-100);--field-border: var(--nyx-stroke-number-2) solid var(--nyx-color-neutral-border-tertiary);--field-text-color: var(--nyx-color-neutral-content-primary);--field-font-family: var(--nyx-font-family-font-family);--field-font-size: var(--nyx-label-medium-font-size);--field-line-height: var(--nyx-label-medium-line-height);--placeholder-color: var(--nyx-color-neutral-content-tertiary);--field-hover-border: var(--nyx-stroke-number-3) solid var(--nyx-color-neutral-border-active);--field-focus-outline: var(--nyx-stroke-number-3) solid var(--nyx-color-neutral-border-active);--field-invalid-border: var(--nyx-stroke-number-3) solid var(--nyx-color-danger-border-default);--field-disabled-border: var(--nyx-stroke-number-2) solid var(--nyx-color-neutral-border-disable);--field-disabled-text-color: var(--nyx-color-neutral-content-disabled);--icon-color: var(--nyx-color-neutral-content-tertiary);--icon-disabled-color: var(--nyx-color-neutral-content-disabled);box-sizing:border-box;display:inline-flex;width:100%}*{box-sizing:inherit}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.container{width:100%;position:relative}.container.small ::slotted([slot="field"]){padding:var(--field-padding-small)}.container.iconLeft ::slotted([slot="field"]){padding-left:36px}.container.iconLeft ::slotted([slot="field"]){padding-right:36px}.password,.clear{display:none;position:absolute;top:0;bottom:0;right:12px;font-size:var(--field-font-size)}::slotted([slot="field"]){width:100%;margin:0;box-sizing:inherit;padding:var(--field-padding);border-radius:var(--field-border-radius-sharp);border:var(--field-border);color:var(--field-text-color);background-color:transparent;font-family:var(--field-font-family);font-size:var(--field-font-size);font-style:normal;font-weight:400;line-height:var(--field-line-height);resize:none}.container.rounded ::slotted([slot="field"]){border-radius:var(--field-border-radius-rounded)}::slotted([slot="field"])::placeholder{color:var(--placeholder-color)}::slotted([slot="field"]:hover:not([disabled])){border:var(--field-hover-border)}::slotted([slot="field"]:focus){outline:var(--field-focus-outline)}::slotted([slot="field"][invalid]){border:var(--field-invalid-border)}::slotted([slot="field"][disabled]){border:var(--field-disabled-border);color:var(--field-disabled-text-color)}::slotted([slot="field"][disabled])::placeholder{color:var(--field-disabled-text-color)}::slotted([slot="iconLeft"]),::slotted([slot="iconRight"]){position:absolute;top:12px;font-size:var(--field-font-size)}.container.small ::slotted([slot="iconLeft"]),.container.small ::slotted([slot="iconRight"]){top:8px}::slotted([slot="iconLeft"]){left:12px}::slotted([slot="iconRight"]){right:12px}::slotted([slot="iconLeft"]:not([action])),::slotted([slot="iconRight"]:not([action])){color:var(--icon-color)}::slotted([slot="iconLeft"][clickable]:not([disabled])),::slotted([slot="iconRight"][clickable]:not([disabled])){cursor:pointer}:host(.disabled) ::slotted([slot="iconLeft"]),:host(.disabled) ::slotted([slot="iconRight"]){color:var(--icon-disabled-color)}.container.passwordToggle ::slotted([slot="iconRight"]),.container.clearable ::slotted([slot="iconRight"]){display:none}.container.passwordToggle .password,.container.clearable .clear{display:flex;cursor:pointer}';
+var to = Object.defineProperty, w = (c, o, e, n) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && to(o, e, t), t;
+};
+const C = class C extends k {
+  constructor() {
+    super(...arguments), this.size = "medium", this.border = "sharp", this.passwordToggle = !1, this.clearable = !1, this.showPassword = !1;
+  }
+  updated(o) {
+    const e = this.querySelector('[slot="field"]'), n = e instanceof HTMLInputElement && e.disabled;
+    this.classList.toggle("disabled", n);
+  }
+  /** @internal */
+  handleClick() {
+    this.showPassword = !this.showPassword;
+    const e = this.shadowRoot.querySelector("slot[name='field']").assignedElements({ flatten: !0 })[0];
+    e && (e.type = this.showPassword ? "text" : "password");
+  }
+  /** @internal */
+  handleClear() {
+    const e = this.shadowRoot.querySelector("slot[name='field']").assignedElements({ flatten: !0 })[0];
+    e && (e.value = "");
+  }
+  render() {
+    const o = !!this.querySelector('[slot="iconLeft"]'), e = !!this.querySelector('[slot="iconRight"]'), n = {
+      container: !0,
+      small: this.size === "small",
+      iconLeft: o,
+      iconRight: e,
+      passwordToggle: this.passwordToggle,
+      clearable: this.clearable,
+      rounded: this.border === "rounded"
+    };
+    return l`
+      <div class=${$(n)}>
+        <slot name="field"></slot>
+        <slot name="iconLeft"></slot>
+        <slot name="iconRight"></slot>
+        <div class="password">
+          <nyx-icon @click=${this.handleClick} svg=${this.showPassword ? W : V}></nyx-icon>
+        </div>
+        <div class="clear">
+          <nyx-icon @click=${this.handleClear} svg=${G}></nyx-icon>
+        </div>
+      </div>
+    `;
+  }
+};
+C.styles = m(oo);
+let h = C;
+w([
+  a({ type: String, reflect: !0 })
+], h.prototype, "size");
+w([
+  a({ type: String, reflect: !0 })
+], h.prototype, "border");
+w([
+  a({ type: Boolean, reflect: !0 })
+], h.prototype, "passwordToggle");
+w([
+  a({ type: Boolean, reflect: !0 })
+], h.prototype, "clearable");
+w([
+  f()
+], h.prototype, "showPassword");
+customElements.get("nyx-input") || customElements.define("nyx-input", h);
+const eo = ':host{--checkbox-container-gap: var(--nyx-sizing-1);--checkbox-container-color: var(--nyx-color-neutral-content-primary);--checkbox-container-font-family: var(--nyx-font-family-font-family);--checkbox-container-font-size: var(--nyx-label-medium-font-size);--checkbox-container-line-height: var(--nyx-label-medium-line-height);--checkbox-container-disabled-color: var(--nyx-color-neutral-content-disabled);--checkbox-background: var(--nyx-color-neutral-background-primary);--checkbox-border: 1px solid var(--nyx-color-neutral-border-primary);--checkbox-disabled-border: 1px solid var(--nyx-color-neutral-border-disable);--checkbox-hover-border: 1px solid var(--nyx-color-brand-border-hover);--checkbox-checked-background: var(--nyx-color-brand-background-default);--checkbox-background-hover: var(--nyx-color-neutral-content-primary-inverse);--checkbox-checked-color: var(--nyx-color-neutral-content-primary-inverse);--checkbox-checked-disabled-background: var(--nyx-color-neutral-background-disable);--checkbox-checked-disabled-color: var(--nyx-color-neutral-content-disabled);--checkbox-checked-hover-background: var(--nyx-color-brand-background-hover);box-sizing:border-box;display:inline-flex}*{box-sizing:inherit}::slotted(input[type="checkbox"]){position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.container{display:inline-flex;justify-content:center;align-items:center;gap:var(--checkbox-container-gap);color:var(--checkbox-container-color);font-family:var(--checkbox-container-font-family);font-size:var(--checkbox-container-font-size);font-style:normal;font-weight:400;line-height:var(--checkbox-container-line-height);cursor:pointer}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.container[disabled]{color:var(--checkbox-container-disabled-color)}.container:focus-visible:not([disabled]),.container:focus-within:not([disabled]){outline:2px solid var(--checkbox-container-color);outline-offset:2px;border-radius:1px}.container:focus-visible .checkbox:not([disabled]),.container:focus-within .checkbox:not([disabled]){border:var(--checkbox-hover-border);background-color:var(--checkbox-background-hover)}.container:focus-visible .checkbox.checked:not([disabled]),.container:focus-visible .checkbox.indeterminate:not([disabled]),.container:focus-within .checkbox.checked:not([disabled]),.container:focus-within .checkbox.indeterminate:not([disabled]){background-color:var(--checkbox-checked-hover-background);border-color:transparent}.checkbox{display:inline-flex;gap:var(--checkbox-container-gap);padding:1px;justify-content:center;align-items:center;cursor:pointer;border-radius:4px;background-color:var(--checkbox-background);border:var(--checkbox-border)}.checkbox nyx-icon{opacity:0;--nyx-icon-size: var(--checkbox-container-font-size)}.checkbox.checked nyx-icon,.checkbox.indeterminate nyx-icon{opacity:1}.checkbox[disabled]{border:var(--checkbox-disabled-border);background-color:var(--checkbox-checked-disabled-background);color:var(--checkbox-checked-disabled-color);cursor:default}.container:hover .checkbox:not([disabled]){border:var(--checkbox-hover-border);background-color:var(--checkbox-background-hover)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--checkbox-checked-background);color:var(--checkbox-checked-color);border:1px solid transparent}.checkbox[disabled].checked,.checkbox[disabled].indeterminate{border:var(--checkbox-disabled-border);background-color:var(--checkbox-checked-disabled-background);color:var(--checkbox-checked-disabled-color)}.container:hover .checkbox.checked:not([disabled]),.container:hover .checkbox.indeterminate:not([disabled]){background-color:var(--checkbox-checked-hover-background);border-color:transparent}';
+var no = Object.defineProperty, S = (c, o, e, n) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && no(o, e, t), t;
+};
+const A = class A extends k {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1;
+  }
+  updated(o) {
+    super.updated(o);
+    const e = this._slottedInputs[0];
+    e && (o.has("checked") && e.checked !== this.checked && (e.checked = this.checked), o.has("disabled") && (e.disabled = this.disabled, this.disabled ? e.setAttribute("tabindex", "-1") : e.removeAttribute("tabindex")));
+  }
+  _toggleCheck() {
+    if (this.disabled) return;
+    this.checked = !this.checked, this.indeterminate = !1;
+    const o = this._slottedInputs[0];
+    o && (o.checked = this.checked, o.dispatchEvent(new Event("change", { bubbles: !0 })));
+  }
+  render() {
+    const o = {
+      checkbox: !0,
+      checked: this.checked,
+      indeterminate: this.indeterminate,
+      disabled: this.disabled
+    };
+    return l`
+      <div class="container" ?disabled=${this.disabled} @click=${this._toggleCheck}>
+        <div class=${$(o)} ?disabled=${this.disabled}>
+          <nyx-icon svg=${this.checked ? j : this.indeterminate ? J : j}></nyx-icon>
+        </div>
+        <slot name="input"></slot>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+A.styles = m(eo);
+let x = A;
+S([
+  a({ type: Boolean, reflect: !0 })
+], x.prototype, "checked");
+S([
+  a({ type: Boolean, reflect: !0 })
+], x.prototype, "indeterminate");
+S([
+  a({ type: Boolean, reflect: !0 })
+], x.prototype, "disabled");
+S([
+  M({ slot: "input" })
+], x.prototype, "_slottedInputs");
+customElements.get("nyx-checkbox") || customElements.define("nyx-checkbox", x);
+const ro = ":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--nyx-icon-size, 1rem);color:var(--nyx-icon-color, currentColor)}*{box-sizing:inherit}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}::slotted(svg),svg{width:var(--nyx-icon-size, 1rem);height:var(--nyx-icon-size, 1rem);fill:currentColor}i{font-size:inherit;color:inherit}";
+var io = Object.defineProperty, _ = (c, o, e, n) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && io(o, e, t), t;
+};
+const E = class E extends k {
+  constructor() {
+    super(...arguments), this.variant = "solid";
+  }
+  /**
+   * Watches for property changes and loads the SVG if `src` changes.
+   * @param changedProperties Properties that have been changed.
+   */
+  async updated(o) {
+    o.has("src") && this.src && await this.loadSvg();
+  }
+  /**
+   * @private
+   * Loads an external SVG file and stores its contents.
+   */
+  async loadSvg() {
+    if (this.src)
+      try {
+        const o = await fetch(this.src);
+        if (!o.ok)
+          throw new Error("Error on load SVG.");
+        this._svgContentImported = await o.text();
+      } catch (o) {
+        this.dispatchEvent(new CustomEvent("nyx-icon-load-error", {
+          detail: {
+            src: this.src,
+            message: o instanceof Error ? o.message : String(o)
+          },
+          bubbles: !0,
+          composed: !0
+        }));
+      }
+  }
+  render() {
+    if (this.svg)
+      return l`${B(this.svg)}`;
+    if (this.src)
+      return l`${B(this._svgContentImported)}`;
+    const o = [`fa-${this.name}`];
+    this.variant && o.push(...this.variant.split(" ").map((n) => `fa-${n}`));
+    const e = document.createElement("i");
+    return e.className = o.join(" "), this.shadowRoot.host.innerHTML = "", this.shadowRoot.host.appendChild(e), l`<slot></slot>`;
+  }
+};
+E.styles = m(ro);
+let v = E;
+_([
+  a({ type: String })
+], v.prototype, "name");
+_([
+  a({ type: String })
+], v.prototype, "variant");
+_([
+  a({ type: String })
+], v.prototype, "src");
+_([
+  a({ type: String })
+], v.prototype, "svg");
+_([
+  f()
+], v.prototype, "_svgContentImported");
+customElements.get("nyx-icon") || customElements.define("nyx-icon", v);
+const ao = ":host{--button-padding: var(--nyx-sizing-2);--button-gap: var(--nyx-sizing-1);--button-border-radius: var(--nyx-radii-2xs);--button-color: var(--nyx-color-neutral-content-always-white);--button-font-family: var(--nyx-font-family-font-family);--button-font-size: var(--nyx-label-medium-font-size);--button-line-height: var(--nyx-label-medium-line-height);--button-small-padding: var(--nyx-sizing-1-25);--button-small-font-size: var(--nyx-label-medium-font-size);--button-small-line-height: var(--nyx-label-medium-line-height);--button-medium-padding: var(--nyx-sizing-1-5);--button-brand-background: var(--nyx-color-brand-background-default);--button-warning-background: var(--nyx-color-warning-background-default);--button-danger-background: var(--nyx-color-danger-background-default);--button-info-background: var(--nyx-color-info-background-default);--button-success-background: var(--nyx-color-success-background-default);--button-brand-background-hover: var(--nyx-color-brand-background-hover);--button-warning-background-hover: var(--nyx-color-warning-background-hover);--button-danger-background-hover: var(--nyx-color-danger-background-hover);--button-info-background-hover: var(--nyx-color-info-background-hover);--button-success-background-hover: var(--nyx-color-success-background-hover);--button-neutral-background-hover: var(--nyx-color-neutral-background-hover);--button-brand-background-active: var(--nyx-color-brand-background-strong);--button-warning-background-active: var(--nyx-color-warning-background-strong);--button-danger-background-active: var(--nyx-color-danger-background-strong);--button-info-background-active: var(--nyx-color-info-background-strong);--button-success-background-active: var(--nyx-color-success-background-strong);--button-color-inverse: var(--nyx-color-neutral-content-primary-inverse);--button-disabled-background: var(--nyx-color-neutral-background-disable);--button-disabled-color: var(--nyx-color-neutral-content-disabled);--button-outline-border: 1px solid var(--nyx-color-neutral-border-primary);--button-outline-color: var(--nyx-color-neutral-content-primary);--button-outline-background: var(--nyx-color-neutral-background-primary);--button-outline-danger-border: 1px solid var(--nyx-color-danger-border-default);--button-outline-danger-color: var(--nyx-color-danger-content-default);--button-outline-warning-border: 1px solid var(--nyx-color-warning-border-default);--button-outline-warning-color: var(--nyx-color-warning-content-default);--button-outline-info-border: 1px solid var(--nyx-color-info-border-default);--button-outline-info-color: var(--nyx-color-info-content-default);--button-outline-success-border: 1px solid var(--nyx-color-success-border-default);--button-outline-success-color: var(--nyx-color-success-content-default);--button-outline-background-hover: var(--nyx-color-neutral-background-hover);--button-outline-border-hover: 1px solid var(--nyx-color-neutral-border-primary);--button-outline-color-hover: var(--nyx-color-neutral-content-primary);--button-outline-danger-background-hover: var(--nyx-color-danger-background-softer-hover);--button-outline-danger-border-hover: 1px solid var(--nyx-color-danger-border-softer);--button-outline-danger-color-hover: var(--nyx-color-danger-content-strong);--button-outline-warning-background-hover: var(--nyx-color-warning-background-softer-hover);--button-outline-warning-border-hover: 1px solid var(--nyx-color-warning-border-softer);--button-outline-warning-color-hover: var(--nyx-color-warning-content-strong);--button-outline-info-background-hover: var(--nyx-color-info-background-softer-hover);--button-outline-info-border-hover: 1px solid var(--nyx-color-info-border-softer);--button-outline-info-color-hover: var(--nyx-color-info-content-default);--button-outline-success-background-hover: var(--nyx-color-success-background-softer-hover);--button-outline-success-border-hover: 1px solid var(--nyx-color-success-border-softer);--button-outline-success-color-hover: var(--nyx-color-success-content-strong);--button-outline-background-active: var(--nyx-color-neutral-background-active);--button-outline-color-active: var(--nyx-color-neutral-content-primary);--button-outline-warning-background-active: var(--nyx-color-warning-background-strong);--button-outline-warning-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-danger-background-active: var(--nyx-color-danger-background-strong);--button-outline-danger-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-info-background-active: var(--nyx-color-info-background-strong);--button-outline-info-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-success-background-active: var(--nyx-color-success-background-strong);--button-outline-success-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-disabled-color: var(--nyx-color-neutral-content-disabled);--button-outline-disabled-border: 1px solid var(--nyx-color-neutral-border-disable);--button-ghost-color: var(--nyx-color-neutral-content-primary);--button-ghost-warning-color: var(--nyx-color-warning-content-default);--button-ghost-danger-color: var(--nyx-color-danger-content-default);--button-ghost-info-color: var(--nyx-color-info-content-default);--button-ghost-success-color: var(--nyx-color-success-content-default);--button-ghost-background: transparent;--button-ghost-neutral-color-hover: var(--nyx-color-neutral-content-tertiary);--button-ghost-warning-color-hover: var(--nyx-color-warning-content-hover);--button-ghost-danger-color-hover: var(--nyx-color-danger-content-hover);--button-ghost-info-color-hover: var(--nyx-color-info-content-hover);--button-ghost-success-color-hover: var(--nyx-color-success-content-hover);--button-ghost-neutral-color-active: var(--nyx-color-neutral-content-secondary);--button-ghost-warning-color-active: var(--nyx-color-warning-content-strong);--button-ghost-danger-color-active: var(--nyx-color-danger-content-strong);--button-ghost-info-color-active: var(--nyx-color-info-content-strong);--button-ghost-success-color-active: var(--nyx-color-success-content-strong);--button-loading-line-height: calc(var(--nyx-label-medium-line-height) - 4px);--button-icon-background-hover: var(--nyx-color-brand-background-softer-hover);--button-icon-border-hover: 1px solid var(--nyx-color-brand-border-hover);--button-icon-color-disabled: var(--nyx-color-neutral-content-disabled);--button-icon-border-disabled: 1px solid var(--nyx-color-neutral-border-disable);--button-icon-border-with-border: 1px solid var(--nyx-color-neutral-border-active);--button-icon-border-radius-with-border: var(--nyx-radii-2xs);--button-icon-color: var(--nyx-color-neutral-content-primary);--button-icon-border-radius: var(--nyx-radii-100);--button-icon-small-icon-font-size: var(--nyx-label-small-font-size);--button-icon-medium-icon-font-size: var(--nyx-label-medium-font-size);--button-icon-large-icon-font-size: var(--nyx-heading-h6-font-size);--button-icon-xlarge-icon-font-size: var(--nyx-heading-h4-font-size);box-sizing:border-box;display:inline-flex}:host([block]){width:100%}*{box-sizing:inherit}button.brand:not([disabled]):not(.loading):hover,button.brand:not([disabled]):not(.loading):active,button.warning:not([disabled]):not(.loading):hover,button.warning:not([disabled]):not(.loading):active,button.danger:not([disabled]):not(.loading):hover,button.danger:not([disabled]):not(.loading):active,button.info:not([disabled]):not(.loading):hover,button.info:not([disabled]):not(.loading):active,button.success:not([disabled]):not(.loading):hover,button.success:not([disabled]):not(.loading):active{color:var(--button-color-inverse)}button{display:inline-flex;padding:var(--button-padding);align-items:center;justify-content:center;gap:var(--button-gap);border-radius:var(--button-border-radius);color:var(--button-color);cursor:pointer;border:none;text-align:center;font-family:var(--button-font-family);font-size:var(--button-font-size);font-style:normal;font-weight:600;line-height:var(--button-line-height)}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}button.icon-right{flex-direction:row-reverse}button.small{padding:var(--button-small-padding);font-size:var(--button-small-font-size);line-height:var(--button-small-line-height)}button.medium{padding:var(--button-medium-padding)}button.block{width:100%}button.brand{background-color:var(--button-brand-background)}button.warning{background-color:var(--button-warning-background)}button.danger{background-color:var(--button-danger-background)}button.info{background-color:var(--button-info-background)}button.success{background-color:var(--button-success-background)}button.ghost{color:var(--button-ghost-color);background-color:var(--button-ghost-background)}button.ghost.danger{color:var(--button-ghost-danger-color);background-color:var(--button-ghost-background)}button.ghost.warning{color:var(--button-ghost-warning-color);background-color:var(--button-ghost-background)}button.ghost.info{color:var(--button-ghost-info-color);background-color:var(--button-ghost-background)}button.ghost.success{color:var(--button-ghost-success-color);background-color:var(--button-ghost-background)}button.brand:not([disabled]):not(.loading):hover{background-color:var(--button-brand-background-hover);color:var(--button-color-inverse)}button.warning:not([disabled]):not(.loading):hover{background-color:var(--button-warning-background-hover);color:var(--button-color-inverse)}button.danger:not([disabled]):not(.loading):hover{background-color:var(--button-danger-background-hover);color:var(--button-color-inverse)}button.info:not([disabled]):not(.loading):hover{background-color:var(--button-info-background-hover);color:var(--button-color-inverse)}button.outline:not([disabled]):not(.loading):hover{background-color:var(--button-success-background-hover);color:var(--button-color-inverse)}button.brand:not([disabled]):not(.loading):active{background-color:var(--button-brand-background-active)}button.warning:not([disabled]):not(.loading):active{background-color:var(--button-warning-background-active)}button.danger:not([disabled]):not(.loading):active{background-color:var(--button-danger-background-active)}button.info:not([disabled]):not(.loading):active{background-color:var(--button-info-background-active)}button.success:not([disabled]):not(.loading):active{background-color:var(--button-success-background-active)}button.outline:not([disabled]):not(.loading):active{background-color:var(--button-outline-background-active);color:var(--button-outline-color-active)}button.outline.warning:not([disabled]):not(.loading):active{background-color:var(--button-outline-warning-background-active);color:var(--button-outline-warning-background-active)}button.outline.danger:not([disabled]):not(.loading):active{background-color:var(--button-outline-danger-background-active);color:var(--button-outline-danger-background-active)}button.outline.info:not([disabled]):not(.loading):active{background-color:var(--button-outline-info-background-active);color:var(--button-outline-info-background-active)}button.outline.success:not([disabled]):not(.loading):active{background-color:var(--button-outline-success-background-active);color:var(--button-outline-success-background-active)}button.ghost:not([disabled]):not(.loading):active{background-color:var(--button-ghost-background-active);color:var(--button-ghost-neutral-color-active)}button.ghost.warning:not([disabled]):not(.loading):active{background-color:var(--button-warning-background-active);color:var(--button-ghost-warning-color-active)}button.ghost.danger:not([disabled]):not(.loading):active{background-color:var(--button-danger-background-active);color:var(--button-ghost-danger-color-active)}button.ghost.info:not([disabled]):not(.loading):active{background-color:var(--button-info-background-active);color:var(--button-ghost-info-color-active)}button.ghost.success:not([disabled]):not(.loading):active{background-color:var(--button-success-background-active);color:var(--button-ghost-success-color-active)}button:disabled{background:var(--button-disabled-background);color:var(--button-disabled-color);cursor:default}button.outline{background-color:transparent;border:var(--button-outline-border);color:var(--button-outline-color)}button.outline.danger{color:var(--button-outline-danger-color)}button.outline.warning{color:var(--button-outline-warning-color)}button.outline.info{color:var(--button-outline-info-color)}button.outline.success{color:var(--button-outline-success-color)}button.outline:not([disabled]):not(.loading):hover{background-color:var(--button-outline-background-hover);border:var(--button-outline-border-hover);color:var(--button-outline-color)}button.outline.danger:not([disabled]):not(.loading):hover{background-color:var(--button-outline-danger-background-hover);border:var(--button-outline-danger-border-hover);color:var(--button-outline-danger-color-hover)}button.outline.warning:not([disabled]):not(.loading):hover{background-color:var(--button-outline-warning-background-hover);border:var(--button-outline-warning-border-hover);color:var(--button-outline-warning-color-hover)}button.outline.info:not([disabled]):not(.loading):hover{background-color:var(--button-outline-info-background-hover);border:var(--button-outline-info-border-hover);color:var(--button-outline-info-color-hover)}button.outline.success:not([disabled]):not(.loading):hover{background-color:var(--button-outline-success-background-hover);border:var(--button-outline-success-border-hover);color:var(--button-outline-success-color-hover)}button.outline:disabled{border:1px solid var(--nyx-color-neutral-border-disable);background:var(--nyx-color-neutral-background-primary)}button.ghost{background-color:transparent;border:none;color:var(--button-ghost-color)}button.ghost.info{color:var(--button-ghost-info-color);background-color:transparent}button.ghost.danger{color:var(--button-ghost-danger-color);background-color:transparent}button.ghost.warning{color:var(--button-ghost-warning-color);background-color:transparent}button.ghost.success{color:var(--button-ghost-success-color);background-color:transparent}button.ghost:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-color)}button.ghost.danger:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-danger-color-hover)}button.ghost.warning:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-warning-color-hover)}button.ghost.info:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-info-color-hover)}button.ghost.success:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-success-color-hover)}button.ghost:disabled{background-color:var(--button-ghost-background);color:var(--button-disabled-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading nyx-icon{animation:spin 1s linear infinite}button.loading{cursor:default;line-height:var(--button-loading-line-height)}button.button-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--button-icon-border-radius);align-self:stretch;border:none;cursor:pointer;background-color:transparent;color:var(--button-icon-color);text-align:center}button.button-icon:not([disabled]):hover{background-color:var(--button-icon-background-hover)!important}button.button-icon.neutral:not([disabled]):hover{background-color:var(--button-neutral-background-hover)!important}button.button-icon[disabled]{color:var(--button-icon-color-disabled);cursor:default}button:focus-visible,button:focus-within{outline:2px solid var(--button-outline-color);outline-offset:2px}button.brand:focus-visible,button.brand:focus-within{background-color:var(--button-brand-background-hover)}button.warning:focus-visible,button.warning:focus-within{background-color:var(--button-warning-background-hover)}button.danger:focus-visible,button.danger:focus-within{background-color:var(--button-danger-background-hover)}button.info:focus-visible,button.info:focus-within{background-color:var(--button-info-background-hover)}button.success:focus-visible,button.success:focus-within{background-color:var(--button-success-background-hover)}button.ghost:focus-visible,button.ghost:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-color)}button.ghost.danger:focus-visible,button.ghost.danger:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-danger-color-hover)}button.ghost.info:focus-visible,button.ghost.info:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-info-color-hover)}button.ghost.success:focus-visible,button.ghost.success:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-success-color-hover)}button.ghost.warning:focus-visible,button.ghost.warning:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-warning-color-hover)}button.outline:focus-visible,button.outline:focus-within{background-color:var(--button-outline-background-hover)}button.outline.danger:focus-visible,button.outline.danger:focus-within{background-color:var(--button-outline-danger-background-hover)}button.outline.warning:focus-visible,button.outline.warning:focus-within{background-color:var(--button-outline-warning-background-hover)}button.outline.info:focus-visible,button.outline.info:focus-within{background-color:var(--button-outline-info-background-hover)}button.outline.success:focus-visible,button.outline.success:focus-within{background-color:var(--button-outline-success-background-hover)}button.button-icon:focus-visible,button.button-icon:focus-within{background-color:var( --button-icon-background-focus, var(--button-icon-background-hover) )!important}button.button-icon.neutral:focus-visible,button.button-icon.neutral:focus-within{background-color:var( --button-icon-background-focus, var(--button-neutral-background-hover) )!important}:host(.active) button.button-icon:not([disabled]){background-color:var( --button-icon-background-focus, var(--button-icon-background-hover) )!important}button.button-icon.button-icon-with-border{border:var(--button-icon-border-with-border);border-radius:var(--button-icon-border-radius-with-border)}button.button-icon.button-icon-with-border:not([disabled]):hover{border:var(--button-icon-border-hover)}button.button-icon.button-icon-with-border[disabled]{border:var(--button-icon-border-disabled)}button.button-icon nyx-icon{font-style:normal;font-weight:400;line-height:normal}button.button-icon.small{width:var(--button-icon-override-width, 24px);height:var(--button-icon-override-height, 24px)}button.button-icon.small nyx-icon{font-size:var(--button-icon-small-icon-font-size)}button.button-icon.medium{width:var(--button-icon-override-width, 30px);height:var(--button-icon-override-height, 30px)}button.button-icon.medium nyx-icon{font-size:var(--button-icon-medium-icon-font-size)}button.button-icon.large{width:var(--button-icon-override-width, 34px);height:var(--button-icon-override-height, 34px)}button.button-icon.large nyx-icon{font-size:var(--button-icon-large-icon-font-size)}button.button-icon.xlarge{width:var(--button-icon-override-width, 40px);height:var(--button-icon-override-height, 40px)}button.button-icon.xlarge nyx-icon{font-size:var(--button-icon-xlarge-icon-font-size)}";
+var co = Object.defineProperty, u = (c, o, e, n) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && co(o, e, t), t;
+}, b;
+const d = (b = class extends k {
+  constructor() {
+    super(...arguments), this.variant = "brand", this.size = "large", this.hierarchy = "solid", this.iconPosition = "left", this.disabled = !1, this.loading = !1, this.block = !1, this.buttonIcon = !1, this.buttonIconWithBorder = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._hostAriaObserver = new MutationObserver(() => {
+      this.requestUpdate();
+    }), this._hostAriaObserver.observe(this, {
+      attributes: !0,
+      attributeFilter: [...b._HOST_ARIA_ATTRS]
+    });
+  }
+  willUpdate(o) {
+    this._pullHostAriaIntoShadowButton(), super.willUpdate(o);
+  }
+  disconnectedCallback() {
+    var o;
+    (o = this._hostAriaObserver) == null || o.disconnect(), this._hostAriaObserver = void 0, super.disconnectedCallback();
+  }
+  _pullHostAriaIntoShadowButton() {
+    var o, e;
+    if (this.hasAttribute("aria-label")) {
+      const n = this.getAttribute("aria-label") ?? "", t = n.trim() === "" ? void 0 : n;
+      t !== this._innerAriaLabel && (this._innerAriaLabel = t), this.removeAttribute("aria-label");
+    }
+    if (this.hasAttribute("aria-labelledby")) {
+      const n = (o = this.getAttribute("aria-labelledby")) == null ? void 0 : o.trim(), t = n === "" ? void 0 : n;
+      t !== this._innerAriaLabelledby && (this._innerAriaLabelledby = t), this.removeAttribute("aria-labelledby");
+    }
+    if (this.hasAttribute("aria-describedby")) {
+      const n = (e = this.getAttribute("aria-describedby")) == null ? void 0 : e.trim(), t = n === "" ? void 0 : n;
+      t !== this._innerAriaDescribedby && (this._innerAriaDescribedby = t), this.removeAttribute("aria-describedby");
+    }
+  }
+  /**
+   * @private
+   * Handles the click action performed on the button.
+   */
+  _handleClick(o) {
+    if (this.disabled || this.loading) {
+      o.preventDefault(), o.stopPropagation();
+      return;
+    }
+    o.stopPropagation(), this.click(void 0, { native: !0, bubbles: !0, composed: !0 });
+  }
+  render() {
+    const o = this.buttonIcon || this.buttonIconWithBorder, e = {
+      brand: this.variant === "brand",
+      info: this.variant === "info",
+      warning: this.variant === "warning",
+      danger: this.variant === "danger",
+      neutral: this.variant === "neutral",
+      success: this.variant === "success",
+      small: this.size === "small",
+      medium: this.size === "medium",
+      large: this.size === "large",
+      xlarge: this.size === "xlarge",
+      outline: this.hierarchy === "outline",
+      ghost: this.hierarchy === "ghost",
+      "icon-right": this.iconPosition === "right",
+      loading: this.loading,
+      block: this.block,
+      "button-icon": o,
+      "button-icon-with-border": this.buttonIconWithBorder
+    };
+    return l`
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        class=${$(e)}
+        aria-label=${this._innerAriaLabel ?? y}
+        aria-labelledby=${this._innerAriaLabelledby ?? y}
+        aria-describedby=${this._innerAriaDescribedby ?? y}
+        @click=${this._handleClick}
+      >
+        ${this.loading ? "" : l`<slot name="icon"></slot>`}
+        ${this.loading ? l`<div class="loading"><nyx-icon svg=${K}></nyx-icon></div>` : ""}
+        ${o ? "" : l`<slot></slot>`}
+      </button>
+    `;
+  }
+}, b._HOST_ARIA_ATTRS = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby"
+], b.styles = m(ao), b);
+u([
+  a({ type: String, reflect: !0 })
+], d.prototype, "variant");
+u([
+  a({ type: String, reflect: !0 })
+], d.prototype, "size");
+u([
+  a({ type: String, reflect: !0 })
+], d.prototype, "hierarchy");
+u([
+  a()
+], d.prototype, "iconPosition");
+u([
+  a({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled");
+u([
+  a({ type: Boolean, reflect: !0 })
+], d.prototype, "loading");
+u([
+  a({ type: Boolean, reflect: !0 })
+], d.prototype, "block");
+u([
+  a({ attribute: "button-icon", type: Boolean, reflect: !0 })
+], d.prototype, "buttonIcon");
+u([
+  a({ attribute: "button-icon-with-border", type: Boolean, reflect: !0 })
+], d.prototype, "buttonIconWithBorder");
+u([
+  q()
+], d.prototype, "click");
+u([
+  f()
+], d.prototype, "_innerAriaLabel");
+u([
+  f()
+], d.prototype, "_innerAriaLabelledby");
+u([
+  f()
+], d.prototype, "_innerAriaDescribedby");
+let lo = d;
+customElements.get("nyx-button") || customElements.define("nyx-button", lo);
+var so = Object.defineProperty, z = (c, o, e, n) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && so(o, e, t), t;
+};
+const R = class R extends k {
+  constructor() {
+    super(...arguments), this._items = [], this._expandedIds = /* @__PURE__ */ new Set(), this._searchTerm = "";
+  }
+  updated(o) {
+    o.has("options") && this.options && (this._items = JSON.parse(JSON.stringify(this.options.items)), this.options.defaultExpandedLevel !== void 0 && this._expandedIds.size === 0 && this._expandToLevel(
+      this._items,
+      0,
+      this.options.defaultExpandedLevel
+    ), this._generateLightDomIcons());
+  }
+  _generateLightDomIcons() {
+    var n;
+    if (this.querySelectorAll("[data-auto-generated]").forEach((t) => t.remove()), !this.options) return;
+    (n = this.options.columns) == null || n.forEach((t, r) => {
+      t.icon && this._createIconElement(t.icon, `generated-header-icon-${r}`);
+    });
+    const e = (t) => {
+      t.icon && this._createIconElement(
+        t.icon,
+        `generated-tree-icon-${t.id}`
+      ), t.children && t.children.forEach(e);
+    };
+    this._items.forEach(e);
+  }
+  _createIconElement(o, e) {
+    const n = document.createElement("nyx-icon");
+    let t = "regular";
+    typeof o == "string" ? n.setAttribute("name", o) : (o.name && n.setAttribute("name", o.name), o.variant && (t = o.variant), o.src && n.setAttribute("src", o.src), o.svg && (n.svg = o.svg)), n.setAttribute("variant", t), n.setAttribute("slot", e), n.setAttribute("data-auto-generated", ""), this.appendChild(n);
+  }
+  _expandToLevel(o, e, n) {
+    o.forEach((t) => {
+      e < n && (this._expandedIds.add(t.id), t.children && this._expandToLevel(t.children, e + 1, n));
+    });
+  }
+  _isColumnDisabled(o, e) {
+    return !!o.disabledColumns && o.disabledColumns.includes(e);
+  }
+  _isNodeSelected(o, e) {
+    return this._isColumnDisabled(o, e) ? !1 : (o.selectedColumns || []).includes(e);
+  }
+  _isIndeterminate(o, e) {
+    if (!o.children || o.children.length === 0) return !1;
+    const n = this._getFlatDescendants(o), t = n.filter(
+      (r) => this._isNodeSelected(r, e)
+    ).length;
+    return t > 0 && t < n.length;
+  }
+  _allDescendantsSelected(o, e) {
+    return !o.children || o.children.length === 0 ? this._isNodeSelected(o, e) : this._getFlatDescendants(o).every((t) => this._isNodeSelected(t, e));
+  }
+  _getFlatDescendants(o) {
+    let e = [];
+    return o.children && o.children.forEach((n) => {
+      e.push(n), e = e.concat(this._getFlatDescendants(n));
+    }), e;
+  }
+  _handleCheck(o, e) {
+    const t = !this._isNodeSelected(o, e);
+    this._toggleNodeState(o, e, t), o.children && this._getFlatDescendants(o).forEach((r) => {
+      this._toggleNodeState(r, e, t);
+    }), this._updateParents(this._items, o.id, e), this._triggerChange();
+  }
+  _toggleNodeState(o, e, n) {
+    if (this._isColumnDisabled(o, e)) return;
+    o.selectedColumns || (o.selectedColumns = []);
+    const t = o.selectedColumns.indexOf(e);
+    n && t === -1 ? o.selectedColumns.push(e) : !n && t > -1 && o.selectedColumns.splice(t, 1);
+  }
+  _updateParents(o, e, n) {
+    for (const t of o)
+      if (t.children && t.children.some(
+        (r) => r.id === e || this._updateParents(t.children, e, n)
+      )) {
+        const r = t.children.every(
+          (i) => this._allDescendantsSelected(i, n)
+        );
+        return this._toggleNodeState(t, n, r), !0;
+      }
+    return !1;
+  }
+  _isRowAllSelected(o) {
+    var n;
+    if (!((n = this.options) != null && n.columns)) return !1;
+    const e = this.options.columns.every((t) => this._isColumnDisabled(o, t.id) ? !0 : this._isNodeSelected(o, t.id));
+    return o.children && o.children.length > 0 ? e && o.children.every((t) => this._isRowAllSelected(t)) : e;
+  }
+  _isRowIndeterminate(o) {
+    var t;
+    if (this._isRowAllSelected(o) || !((t = this.options) != null && t.columns)) return !1;
+    const e = this.options.columns.some(
+      (r) => this._isNodeSelected(o, r.id)
+    ), n = o.children ? o.children.some(
+      (r) => this._isRowAllSelected(r) || this._isRowIndeterminate(r)
+    ) : !1;
+    return e || n;
+  }
+  _handleRowCheck(o) {
+    var t;
+    const n = !this._isRowAllSelected(o);
+    this._toggleRowRecursively(o, n), (t = this.options) != null && t.columns && this.options.columns.forEach((r) => {
+      this._updateParents(this._items, o.id, r.id);
+    }), this._triggerChange();
+  }
+  _toggleRowRecursively(o, e) {
+    var n;
+    (n = this.options) != null && n.columns && (e ? this.options.columns.forEach((t) => {
+      this._isColumnDisabled(o, t.id) || (o.selectedColumns || (o.selectedColumns = []), o.selectedColumns.includes(t.id) || o.selectedColumns.push(t.id));
+    }) : o.selectedColumns = [], o.children && o.children.forEach((t) => this._toggleRowRecursively(t, e)));
+  }
+  _triggerChange() {
+    this._items = [...this._items], this.onChange({ items: this._items }, { bubbles: !0, composed: !0 });
+  }
+  async _toggleExpand(o, e = !1) {
+    var r;
+    if (!(o.children && o.children.length > 0)) return;
+    const t = this._expandedIds.has(o.id);
+    if (t ? this._expandedIds.delete(o.id) : this._expandedIds.add(o.id), this._expandedIds = new Set(this._expandedIds), !t && e && o.children && o.children[0]) {
+      await this.updateComplete;
+      const i = o.children[0].id, p = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+        `#row-${i}`
+      );
+      p && p.focus();
+    }
+  }
+  _handleRowKeyDown(o, e) {
+    var t;
+    const n = o.currentTarget;
+    if ((o.key === "Enter" || o.key === " ") && o.target === n) {
+      o.preventDefault(), this._enableChildren(n);
+      const r = n.querySelector(
+        "nyx-checkbox input, nyx-button:not([disabled])"
+      );
+      if (r)
+        if (r instanceof HTMLInputElement)
+          r.focus();
+        else {
+          const i = (t = r.shadowRoot) == null ? void 0 : t.querySelector("button");
+          i == null || i.focus();
+        }
+      return;
+    }
+    o.key === "Escape" && (o.preventDefault(), o.stopPropagation(), this._disableChildren(n), n.focus());
+  }
+  _handleRowFocusOut(o) {
+    const e = o.currentTarget;
+    e.contains(o.relatedTarget) || this._disableChildren(e);
+  }
+  _enableChildren(o) {
+    const e = o.querySelectorAll('input[slot="input"]'), n = o.querySelectorAll("nyx-button");
+    e.forEach((t) => t.setAttribute("tabindex", "0")), n.forEach((t) => t.removeAttribute("tabindex"));
+  }
+  _disableChildren(o) {
+    const e = o.querySelectorAll('input[slot="input"]'), n = o.querySelectorAll("nyx-button");
+    e.forEach((t) => t.setAttribute("tabindex", "-1")), n.forEach((t) => t.setAttribute("tabindex", "-1"));
+  }
+  _clearAllFocus() {
+    var n, t;
+    const o = (n = this.shadowRoot) == null ? void 0 : n.activeElement;
+    o == null || o.blur();
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(".node-row");
+    e == null || e.forEach((r) => {
+      this._disableChildren(r);
+    });
+  }
+  render() {
+    var o, e, n;
+    return l`
+      <div class="nyx-treeview" @mousedown=${() => this._clearAllFocus()}>
+        <div class="search-container">
+          <nyx-input>
+            <nyx-icon .svg=${Q} slot="iconLeft"></nyx-icon>
+            <input
+              class="search-input"
+              type="text"
+              slot="field"
+              placeholder="Search..."
+              @input=${(t) => this._searchTerm = t.target.value}
+            />
+          </nyx-input>
+        </div>
+
+        <div class="tree-scroll">
+          <div class="tree-header">
+            <div class="tree-title">${(o = this.options) == null ? void 0 : o.title}</div>
+            <div class="header-columns">
+              ${(n = (e = this.options) == null ? void 0 : e.columns) == null ? void 0 : n.map(
+      (t, r) => l`
+                  <div class="col-cell" title="${t.title || ""}">
+                    <slot name="generated-header-icon-${r}"></slot>
+                  </div>
+                `
+    )}
+            </div>
+          </div>
+
+          <div class="tree-body">${this._renderNodes(this._items, 0)}</div>
+        </div>
+      </div>
+    `;
+  }
+  _renderNodes(o, e) {
+    var r;
+    const n = o.filter(
+      (i) => !this._searchTerm || i.label.toLowerCase().includes(this._searchTerm.toLowerCase()) || i.children && i.children.some(
+        (p) => p.label.toLowerCase().includes(this._searchTerm.toLowerCase())
+      )
+    ), t = 16 + e * 24 - ((r = this.options) != null && r.showRowSelection ? 4 : 0);
+    return U(
+      n,
+      (i) => i.id,
+      (i) => {
+        var I, D, P, T;
+        const p = this._expandedIds.has(i.id), L = i.children && i.children.length > 0, N = this._isRowAllSelected(i), F = this._isRowIndeterminate(i), H = !!((I = this.options) != null && I.showRowSelection);
+        return l`
+          <div class="node-wrapper">
+            <div
+              id="row-${i.id}"
+              class=${O({
+          "node-row": !0,
+          selectable: H,
+          selected: N || F
+        })}
+              style="padding-left: ${t}px;"
+              tabindex="0"
+              @mousedown=${(s) => s.preventDefault()}
+              @keydown=${(s) => this._handleRowKeyDown(s, i)}
+              @focusout=${this._handleRowFocusOut}
+            >
+              <div class="node-info">
+                ${(D = this.options) != null && D.showRowSelection ? l`
+                      <div class="row-checkbox">
+                        <nyx-checkbox
+                          ?checked=${this._isRowAllSelected(i)}
+                          ?indeterminate=${this._isRowIndeterminate(i)}
+                          @click=${(s) => {
+          s.stopPropagation(), this._handleRowCheck(i);
+        }}
+                        >
+                          <input type="checkbox" slot="input" tabindex="-1" />
+                        </nyx-checkbox>
+                      </div>
+                    ` : y}
+                ${L ? l`
+                      <nyx-button
+                        class="expander"
+                        size="small"
+                        button-icon
+                        tabindex="-1"
+                        hierarchy="ghost"
+                        @click=${() => this._toggleExpand(i, !1)}
+                        @keydown=${(s) => {
+          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), s.stopPropagation(), this._toggleExpand(i, !0));
+        }}
+                      >
+                        <nyx-icon
+                          slot="icon"
+                          class=${O({ expanded: p })}
+                          .svg=${X}
+                        ></nyx-icon>
+                      </nyx-button>
+                    ` : y}
+                <div class="node-type-icon-wrapper">
+                  <slot name="generated-tree-icon-${i.id}"></slot>
+                </div>
+                <span class="node-text" title="${i.label}"
+                  >${i.label}</span
+                >
+              </div>
+              <div class="node-columns">
+                ${(T = (P = this.options) == null ? void 0 : P.columns) == null ? void 0 : T.map(
+          (s) => l`
+                    <div class="col-cell">
+                      <nyx-checkbox
+                        ?checked=${this._allDescendantsSelected(i, s.id)}
+                        ?indeterminate=${this._isIndeterminate(i, s.id)}
+                        ?disabled=${this._isColumnDisabled(i, s.id)}
+                        @click=${() => this._handleCheck(i, s.id)}
+                      >
+                        <input type="checkbox" slot="input" tabindex="-1" />
+                      </nyx-checkbox>
+                    </div>
+                  `
+        )}
+              </div>
+            </div>
+            ${p && L ? l`<div class="node-children">
+                  ${this._renderNodes(i.children, e + 1)}
+                </div>` : ""}
+          </div>
+        `;
+      }
+    );
+  }
+};
+R.styles = m(Z);
+let g = R;
+z([
+  a({ type: Object })
+], g.prototype, "options");
+z([
+  f()
+], g.prototype, "_items");
+z([
+  f()
+], g.prototype, "_expandedIds");
+z([
+  f()
+], g.prototype, "_searchTerm");
+z([
+  q("nyx-change")
+], g.prototype, "onChange");
+customElements.get("nyx-treeview") || customElements.define("nyx-treeview", g);
+export {
+  g as NyxTreeview
+};

package/dist/treeview.umd.cjs

@@ -0,0 +1,131 @@
+(function(u,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("lit"),require("lit/decorators.js"),require("lit/directives/repeat.js"),require("lit/directives/class-map.js"),require("@nyx-ds/core"),require("lit-html/directives/class-map.js"),require("@nyx-ds/icon"),require("lit-html/directives/unsafe-html.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js","lit/directives/repeat.js","lit/directives/class-map.js","@nyx-ds/core","lit-html/directives/class-map.js","@nyx-ds/icon","lit-html/directives/unsafe-html.js"],a):(u=typeof globalThis<"u"?globalThis:u||self,a(u.treeview={},u.lit,u.decorators_js,u.repeat_js,u.classMap_js$1,u.core,u.classMap_js,null,u.unsafeHtml_js))})(this,function(u,a,l,O,E,h,z,Z,R){"use strict";var p;function B(c,o){return function(e,n){const{native:t=!1,...r}=n||{},i=t?new Event(o,r):new CustomEvent(o,{detail:e,...r});c.dispatchEvent(i)}}function L(c){return(o,e)=>{Object.defineProperty(o,e,{get(){return B(this,c||e)},enumerable:!0,configurable:!0})}}const N=":host{display:flex;flex-direction:column;width:100%;--treeview-radius: var(--nyx-radii-s);--treeview-search-padding: var(--nyx-sizing-1-25) var(--nyx-sizing-1-75) 0 var(--nyx-sizing-1-75);--treeview-header-padding: var(--nyx-sizing-2) var(--nyx-sizing-2) var(--nyx-sizing-1-75) var(--nyx-sizing-2);--treeview-row-padding: var(--nyx-sizing-1-5, 12px) var(--nyx-sizing-2);--treeview-row-gap: var(--nyx-sizing-2);--treeview-col-gap: var(--nyx-sizing-1);--treeview-node-gap: var(--nyx-sizing-1);--treeview-row-min-height: 56px;--treeview-expander-wrapper-size: var(--nyx-sizing-4);--treeview-expander-padding: var(--nyx-sizing-1-25);--treeview-col-width: var(--treeview-header-icon-size);--treeview-background: var(--nyx-color-neutral-background-primary);--treeview-border-color: var(--nyx-color-neutral-border-tertiary);--treeview-content-color: var(--nyx-color-neutral-content-primary);--treeview-focus-border-color: var(--nyx-color-brand-border-default);--treeview-row-selected-background: var(--nyx-color-brand-background-softer);--treeview-row-selected-hover-background: var( --nyx-color-brand-background-softer-hover );--treeview-row-selected-color: var(--nyx-color-neutral-content-primary);--treeview-font-family: var(--nyx-font-family-font-family);--treeview-title-font-size: var(--nyx-label-medium-font-size);--treeview-title-line-height: var(--nyx-label-medium-line-height);--treeview-text-font-size: var(--nyx-label-medium-font-size);--treeview-text-line-height: var(--nyx-label-medium-line-height);--treeview-header-icon-size: var(--nyx-label-large-font-size);--treeview-node-icon-size: var(--nyx-label-medium-font-size);--treeview-expander-icon-size: var(--nyx-label-large-font-size);--treeview-row-hover-background: var(--nyx-color-brand-background-hover);--treeview-row-hover-color: var(--nyx-color-neutral-content-primary-inverse)}.nyx-treeview{display:flex;flex-direction:column;width:100%;font-family:var(--treeview-font-family);align-items:flex-start;border-radius:var(--treeview-radius);border:1px solid var(--treeview-border-color);background:var(--treeview-background);box-sizing:border-box}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.search-container{display:flex;padding:var(--treeview-search-padding);flex-direction:column;align-items:flex-start;align-self:stretch}.tree-scroll{width:100%}.tree-header{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:var(--treeview-header-padding);border-bottom:.5px solid var(--treeview-border-color);box-sizing:border-box}.tree-title{color:var(--treeview-content-color);font-size:var(--treeview-title-font-size);line-height:var(--treeview-title-line-height);font-weight:600}.header-columns,.node-columns{display:flex;align-items:center;justify-content:flex-end;gap:var(--treeview-col-gap);flex-shrink:0}.col-cell{min-width:var(--treeview-col-width);width:var(--treeview-col-width);flex:0 0 auto}.col-cell,.header-columns ::slotted(*){display:flex;justify-content:center;align-items:center;box-sizing:border-box}.header-columns ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-header-icon-size);color:var(--treeview-content-color)}.tree-body{width:100%;display:flex;flex-direction:column}.node-wrapper{display:flex;flex-direction:column;width:100%}.node-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--treeview-row-min-height);border-bottom:.5px solid var(--treeview-border-color);gap:var(--treeview-row-gap);padding:var(--treeview-row-padding);box-sizing:border-box;background:transparent;color:var(--treeview-content-color);outline:none;cursor:default}.node-row:hover{background:var(--treeview-row-hover-background);color:var(--treeview-row-hover-color)}.node-row:focus-within{background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)!important}.node-row:hover .expander nyx-icon,.node-row:hover .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row:focus-within .expander nyx-icon,.node-row:focus-within .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-hover-color)}.node-row.selectable.selected{background-color:var(--treeview-row-selected-background);color:var(--treeview-row-selected-color)}.node-row.selectable.selected .expander nyx-icon,.node-row.selectable.selected .node-type-icon-wrapper ::slotted(nyx-icon){color:var(--treeview-row-selected-color)}.node-row.selectable.selected:hover{background-color:var(--treeview-row-selected-hover-background);color:var(--treeview-row-selected-color)}.node-row:focus-visible{position:relative;z-index:2;outline:2px solid var(--treeview-content-color);outline-offset:-4px;background:var(--treeview-row-hover-background)!important;color:var(--treeview-row-hover-color)}.row-checkbox{display:flex;align-items:center;margin-right:4px}.node-info{display:flex;align-items:center;gap:var(--treeview-node-gap);flex:1 0 0;overflow:hidden;min-height:32px;padding-left:4px}.expander{--button-icon-color: inherit}.expander nyx-icon{--nyx-icon-size: var(--treeview-expander-icon-size);transition:transform .2s ease;transform-origin:center}.expander nyx-icon.expanded{transform:rotate(90deg)}.expander:hover,.expander:focus-within{--button-icon-color: var(--treeview-content-color) !important}.expander:hover nyx-icon,.expander:focus-within nyx-icon{color:var(--treeview-content-color)!important;--nyx-icon-color: var(--treeview-content-color) !important}.node-type-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-type-icon-wrapper ::slotted(nyx-icon){--nyx-icon-size: var(--treeview-node-icon-size)}.node-text{font-size:var(--treeview-text-font-size);line-height:var(--treeview-text-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-children{width:100%}@media (max-width: 768px){.tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.tree-header,.tree-body{min-width:calc(250px + ((var(--treeview-col-width) + var(--treeview-col-gap)) * 4))}.node-text{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}",M=':host{--field-padding: var(--nyx-sizing-1-5);--field-padding-small: var(--nyx-sizing-1) var(--nyx-sizing-1-5);--field-border-radius-sharp: var(--nyx-radii-xs);--field-border-radius-rounded: var(--nyx-radii-100);--field-border: var(--nyx-stroke-number-2) solid var(--nyx-color-neutral-border-tertiary);--field-text-color: var(--nyx-color-neutral-content-primary);--field-font-family: var(--nyx-font-family-font-family);--field-font-size: var(--nyx-label-medium-font-size);--field-line-height: var(--nyx-label-medium-line-height);--placeholder-color: var(--nyx-color-neutral-content-tertiary);--field-hover-border: var(--nyx-stroke-number-3) solid var(--nyx-color-neutral-border-active);--field-focus-outline: var(--nyx-stroke-number-3) solid var(--nyx-color-neutral-border-active);--field-invalid-border: var(--nyx-stroke-number-3) solid var(--nyx-color-danger-border-default);--field-disabled-border: var(--nyx-stroke-number-2) solid var(--nyx-color-neutral-border-disable);--field-disabled-text-color: var(--nyx-color-neutral-content-disabled);--icon-color: var(--nyx-color-neutral-content-tertiary);--icon-disabled-color: var(--nyx-color-neutral-content-disabled);box-sizing:border-box;display:inline-flex;width:100%}*{box-sizing:inherit}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.container{width:100%;position:relative}.container.small ::slotted([slot="field"]){padding:var(--field-padding-small)}.container.iconLeft ::slotted([slot="field"]){padding-left:36px}.container.iconLeft ::slotted([slot="field"]){padding-right:36px}.password,.clear{display:none;position:absolute;top:0;bottom:0;right:12px;font-size:var(--field-font-size)}::slotted([slot="field"]){width:100%;margin:0;box-sizing:inherit;padding:var(--field-padding);border-radius:var(--field-border-radius-sharp);border:var(--field-border);color:var(--field-text-color);background-color:transparent;font-family:var(--field-font-family);font-size:var(--field-font-size);font-style:normal;font-weight:400;line-height:var(--field-line-height);resize:none}.container.rounded ::slotted([slot="field"]){border-radius:var(--field-border-radius-rounded)}::slotted([slot="field"])::placeholder{color:var(--placeholder-color)}::slotted([slot="field"]:hover:not([disabled])){border:var(--field-hover-border)}::slotted([slot="field"]:focus){outline:var(--field-focus-outline)}::slotted([slot="field"][invalid]){border:var(--field-invalid-border)}::slotted([slot="field"][disabled]){border:var(--field-disabled-border);color:var(--field-disabled-text-color)}::slotted([slot="field"][disabled])::placeholder{color:var(--field-disabled-text-color)}::slotted([slot="iconLeft"]),::slotted([slot="iconRight"]){position:absolute;top:12px;font-size:var(--field-font-size)}.container.small ::slotted([slot="iconLeft"]),.container.small ::slotted([slot="iconRight"]){top:8px}::slotted([slot="iconLeft"]){left:12px}::slotted([slot="iconRight"]){right:12px}::slotted([slot="iconLeft"]:not([action])),::slotted([slot="iconRight"]:not([action])){color:var(--icon-color)}::slotted([slot="iconLeft"][clickable]:not([disabled])),::slotted([slot="iconRight"][clickable]:not([disabled])){cursor:pointer}:host(.disabled) ::slotted([slot="iconLeft"]),:host(.disabled) ::slotted([slot="iconRight"]){color:var(--icon-disabled-color)}.container.passwordToggle ::slotted([slot="iconRight"]),.container.clearable ::slotted([slot="iconRight"]){display:none}.container.passwordToggle .password,.container.clearable .clear{display:flex;cursor:pointer}';var F=Object.defineProperty,k=(c,o,e,n)=>{for(var t=void 0,r=c.length-1,i;r>=0;r--)(i=c[r])&&(t=i(o,e,t)||t);return t&&F(o,e,t),t};const S=class S extends a.LitElement{constructor(){super(...arguments),this.size="medium",this.border="sharp",this.passwordToggle=!1,this.clearable=!1,this.showPassword=!1}updated(o){const e=this.querySelector('[slot="field"]'),n=e instanceof HTMLInputElement&&e.disabled;this.classList.toggle("disabled",n)}handleClick(){this.showPassword=!this.showPassword;const e=this.shadowRoot.querySelector("slot[name='field']").assignedElements({flatten:!0})[0];e&&(e.type=this.showPassword?"text":"password")}handleClear(){const e=this.shadowRoot.querySelector("slot[name='field']").assignedElements({flatten:!0})[0];e&&(e.value="")}render(){const o=!!this.querySelector('[slot="iconLeft"]'),e=!!this.querySelector('[slot="iconRight"]'),n={container:!0,small:this.size==="small",iconLeft:o,iconRight:e,passwordToggle:this.passwordToggle,clearable:this.clearable,rounded:this.border==="rounded"};return a.html`
+      <div class=${z.classMap(n)}>
+        <slot name="field"></slot>
+        <slot name="iconLeft"></slot>
+        <slot name="iconRight"></slot>
+        <div class="password">
+          <nyx-icon @click=${this.handleClick} svg=${this.showPassword?h.eyeSlash:h.eye}></nyx-icon>
+        </div>
+        <div class="clear">
+          <nyx-icon @click=${this.handleClear} svg=${h.xmark}></nyx-icon>
+        </div>
+      </div>
+    `}};S.styles=a.unsafeCSS(M);let g=S;k([l.property({type:String,reflect:!0})],g.prototype,"size"),k([l.property({type:String,reflect:!0})],g.prototype,"border"),k([l.property({type:Boolean,reflect:!0})],g.prototype,"passwordToggle"),k([l.property({type:Boolean,reflect:!0})],g.prototype,"clearable"),k([l.state()],g.prototype,"showPassword"),customElements.get("nyx-input")||customElements.define("nyx-input",g);const H=':host{--checkbox-container-gap: var(--nyx-sizing-1);--checkbox-container-color: var(--nyx-color-neutral-content-primary);--checkbox-container-font-family: var(--nyx-font-family-font-family);--checkbox-container-font-size: var(--nyx-label-medium-font-size);--checkbox-container-line-height: var(--nyx-label-medium-line-height);--checkbox-container-disabled-color: var(--nyx-color-neutral-content-disabled);--checkbox-background: var(--nyx-color-neutral-background-primary);--checkbox-border: 1px solid var(--nyx-color-neutral-border-primary);--checkbox-disabled-border: 1px solid var(--nyx-color-neutral-border-disable);--checkbox-hover-border: 1px solid var(--nyx-color-brand-border-hover);--checkbox-checked-background: var(--nyx-color-brand-background-default);--checkbox-background-hover: var(--nyx-color-neutral-content-primary-inverse);--checkbox-checked-color: var(--nyx-color-neutral-content-primary-inverse);--checkbox-checked-disabled-background: var(--nyx-color-neutral-background-disable);--checkbox-checked-disabled-color: var(--nyx-color-neutral-content-disabled);--checkbox-checked-hover-background: var(--nyx-color-brand-background-hover);box-sizing:border-box;display:inline-flex}*{box-sizing:inherit}::slotted(input[type="checkbox"]){position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.container{display:inline-flex;justify-content:center;align-items:center;gap:var(--checkbox-container-gap);color:var(--checkbox-container-color);font-family:var(--checkbox-container-font-family);font-size:var(--checkbox-container-font-size);font-style:normal;font-weight:400;line-height:var(--checkbox-container-line-height);cursor:pointer}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}.container[disabled]{color:var(--checkbox-container-disabled-color)}.container:focus-visible:not([disabled]),.container:focus-within:not([disabled]){outline:2px solid var(--checkbox-container-color);outline-offset:2px;border-radius:1px}.container:focus-visible .checkbox:not([disabled]),.container:focus-within .checkbox:not([disabled]){border:var(--checkbox-hover-border);background-color:var(--checkbox-background-hover)}.container:focus-visible .checkbox.checked:not([disabled]),.container:focus-visible .checkbox.indeterminate:not([disabled]),.container:focus-within .checkbox.checked:not([disabled]),.container:focus-within .checkbox.indeterminate:not([disabled]){background-color:var(--checkbox-checked-hover-background);border-color:transparent}.checkbox{display:inline-flex;gap:var(--checkbox-container-gap);padding:1px;justify-content:center;align-items:center;cursor:pointer;border-radius:4px;background-color:var(--checkbox-background);border:var(--checkbox-border)}.checkbox nyx-icon{opacity:0;--nyx-icon-size: var(--checkbox-container-font-size)}.checkbox.checked nyx-icon,.checkbox.indeterminate nyx-icon{opacity:1}.checkbox[disabled]{border:var(--checkbox-disabled-border);background-color:var(--checkbox-checked-disabled-background);color:var(--checkbox-checked-disabled-color);cursor:default}.container:hover .checkbox:not([disabled]){border:var(--checkbox-hover-border);background-color:var(--checkbox-background-hover)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--checkbox-checked-background);color:var(--checkbox-checked-color);border:1px solid transparent}.checkbox[disabled].checked,.checkbox[disabled].indeterminate{border:var(--checkbox-disabled-border);background-color:var(--checkbox-checked-disabled-background);color:var(--checkbox-checked-disabled-color)}.container:hover .checkbox.checked:not([disabled]),.container:hover .checkbox.indeterminate:not([disabled]){background-color:var(--checkbox-checked-hover-background);border-color:transparent}';var U=Object.defineProperty,_=(c,o,e,n)=>{for(var t=void 0,r=c.length-1,i;r>=0;r--)(i=c[r])&&(t=i(o,e,t)||t);return t&&U(o,e,t),t};const $=class $ extends a.LitElement{constructor(){super(...arguments),this.checked=!1,this.indeterminate=!1,this.disabled=!1}updated(o){super.updated(o);const e=this._slottedInputs[0];e&&(o.has("checked")&&e.checked!==this.checked&&(e.checked=this.checked),o.has("disabled")&&(e.disabled=this.disabled,this.disabled?e.setAttribute("tabindex","-1"):e.removeAttribute("tabindex")))}_toggleCheck(){if(this.disabled)return;this.checked=!this.checked,this.indeterminate=!1;const o=this._slottedInputs[0];o&&(o.checked=this.checked,o.dispatchEvent(new Event("change",{bubbles:!0})))}render(){const o={checkbox:!0,checked:this.checked,indeterminate:this.indeterminate,disabled:this.disabled};return a.html`
+      <div class="container" ?disabled=${this.disabled} @click=${this._toggleCheck}>
+        <div class=${z.classMap(o)} ?disabled=${this.disabled}>
+          <nyx-icon svg=${this.checked?h.check:this.indeterminate?h.minus:h.check}></nyx-icon>
+        </div>
+        <slot name="input"></slot>
+        <slot></slot>
+      </div>
+    `}};$.styles=a.unsafeCSS(H);let y=$;_([l.property({type:Boolean,reflect:!0})],y.prototype,"checked"),_([l.property({type:Boolean,reflect:!0})],y.prototype,"indeterminate"),_([l.property({type:Boolean,reflect:!0})],y.prototype,"disabled"),_([l.queryAssignedElements({slot:"input"})],y.prototype,"_slottedInputs"),customElements.get("nyx-checkbox")||customElements.define("nyx-checkbox",y);const W=":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--nyx-icon-size, 1rem);color:var(--nyx-icon-color, currentColor)}*{box-sizing:inherit}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}::slotted(svg),svg{width:var(--nyx-icon-size, 1rem);height:var(--nyx-icon-size, 1rem);fill:currentColor}i{font-size:inherit;color:inherit}";var V=Object.defineProperty,m=(c,o,e,n)=>{for(var t=void 0,r=c.length-1,i;r>=0;r--)(i=c[r])&&(t=i(o,e,t)||t);return t&&V(o,e,t),t};const C=class C extends a.LitElement{constructor(){super(...arguments),this.variant="solid"}async updated(o){o.has("src")&&this.src&&await this.loadSvg()}async loadSvg(){if(this.src)try{const o=await fetch(this.src);if(!o.ok)throw new Error("Error on load SVG.");this._svgContentImported=await o.text()}catch(o){this.dispatchEvent(new CustomEvent("nyx-icon-load-error",{detail:{src:this.src,message:o instanceof Error?o.message:String(o)},bubbles:!0,composed:!0}))}}render(){if(this.svg)return a.html`${R.unsafeHTML(this.svg)}`;if(this.src)return a.html`${R.unsafeHTML(this._svgContentImported)}`;const o=[`fa-${this.name}`];this.variant&&o.push(...this.variant.split(" ").map(n=>`fa-${n}`));const e=document.createElement("i");return e.className=o.join(" "),this.shadowRoot.host.innerHTML="",this.shadowRoot.host.appendChild(e),a.html`<slot></slot>`}};C.styles=a.unsafeCSS(W);let f=C;m([l.property({type:String})],f.prototype,"name"),m([l.property({type:String})],f.prototype,"variant"),m([l.property({type:String})],f.prototype,"src"),m([l.property({type:String})],f.prototype,"svg"),m([l.state()],f.prototype,"_svgContentImported"),customElements.get("nyx-icon")||customElements.define("nyx-icon",f);const j=":host{--button-padding: var(--nyx-sizing-2);--button-gap: var(--nyx-sizing-1);--button-border-radius: var(--nyx-radii-2xs);--button-color: var(--nyx-color-neutral-content-always-white);--button-font-family: var(--nyx-font-family-font-family);--button-font-size: var(--nyx-label-medium-font-size);--button-line-height: var(--nyx-label-medium-line-height);--button-small-padding: var(--nyx-sizing-1-25);--button-small-font-size: var(--nyx-label-medium-font-size);--button-small-line-height: var(--nyx-label-medium-line-height);--button-medium-padding: var(--nyx-sizing-1-5);--button-brand-background: var(--nyx-color-brand-background-default);--button-warning-background: var(--nyx-color-warning-background-default);--button-danger-background: var(--nyx-color-danger-background-default);--button-info-background: var(--nyx-color-info-background-default);--button-success-background: var(--nyx-color-success-background-default);--button-brand-background-hover: var(--nyx-color-brand-background-hover);--button-warning-background-hover: var(--nyx-color-warning-background-hover);--button-danger-background-hover: var(--nyx-color-danger-background-hover);--button-info-background-hover: var(--nyx-color-info-background-hover);--button-success-background-hover: var(--nyx-color-success-background-hover);--button-neutral-background-hover: var(--nyx-color-neutral-background-hover);--button-brand-background-active: var(--nyx-color-brand-background-strong);--button-warning-background-active: var(--nyx-color-warning-background-strong);--button-danger-background-active: var(--nyx-color-danger-background-strong);--button-info-background-active: var(--nyx-color-info-background-strong);--button-success-background-active: var(--nyx-color-success-background-strong);--button-color-inverse: var(--nyx-color-neutral-content-primary-inverse);--button-disabled-background: var(--nyx-color-neutral-background-disable);--button-disabled-color: var(--nyx-color-neutral-content-disabled);--button-outline-border: 1px solid var(--nyx-color-neutral-border-primary);--button-outline-color: var(--nyx-color-neutral-content-primary);--button-outline-background: var(--nyx-color-neutral-background-primary);--button-outline-danger-border: 1px solid var(--nyx-color-danger-border-default);--button-outline-danger-color: var(--nyx-color-danger-content-default);--button-outline-warning-border: 1px solid var(--nyx-color-warning-border-default);--button-outline-warning-color: var(--nyx-color-warning-content-default);--button-outline-info-border: 1px solid var(--nyx-color-info-border-default);--button-outline-info-color: var(--nyx-color-info-content-default);--button-outline-success-border: 1px solid var(--nyx-color-success-border-default);--button-outline-success-color: var(--nyx-color-success-content-default);--button-outline-background-hover: var(--nyx-color-neutral-background-hover);--button-outline-border-hover: 1px solid var(--nyx-color-neutral-border-primary);--button-outline-color-hover: var(--nyx-color-neutral-content-primary);--button-outline-danger-background-hover: var(--nyx-color-danger-background-softer-hover);--button-outline-danger-border-hover: 1px solid var(--nyx-color-danger-border-softer);--button-outline-danger-color-hover: var(--nyx-color-danger-content-strong);--button-outline-warning-background-hover: var(--nyx-color-warning-background-softer-hover);--button-outline-warning-border-hover: 1px solid var(--nyx-color-warning-border-softer);--button-outline-warning-color-hover: var(--nyx-color-warning-content-strong);--button-outline-info-background-hover: var(--nyx-color-info-background-softer-hover);--button-outline-info-border-hover: 1px solid var(--nyx-color-info-border-softer);--button-outline-info-color-hover: var(--nyx-color-info-content-default);--button-outline-success-background-hover: var(--nyx-color-success-background-softer-hover);--button-outline-success-border-hover: 1px solid var(--nyx-color-success-border-softer);--button-outline-success-color-hover: var(--nyx-color-success-content-strong);--button-outline-background-active: var(--nyx-color-neutral-background-active);--button-outline-color-active: var(--nyx-color-neutral-content-primary);--button-outline-warning-background-active: var(--nyx-color-warning-background-strong);--button-outline-warning-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-danger-background-active: var(--nyx-color-danger-background-strong);--button-outline-danger-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-info-background-active: var(--nyx-color-info-background-strong);--button-outline-info-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-success-background-active: var(--nyx-color-success-background-strong);--button-outline-success-color-active: var(--nyx-color-neutral-content-always-white);--button-outline-disabled-color: var(--nyx-color-neutral-content-disabled);--button-outline-disabled-border: 1px solid var(--nyx-color-neutral-border-disable);--button-ghost-color: var(--nyx-color-neutral-content-primary);--button-ghost-warning-color: var(--nyx-color-warning-content-default);--button-ghost-danger-color: var(--nyx-color-danger-content-default);--button-ghost-info-color: var(--nyx-color-info-content-default);--button-ghost-success-color: var(--nyx-color-success-content-default);--button-ghost-background: transparent;--button-ghost-neutral-color-hover: var(--nyx-color-neutral-content-tertiary);--button-ghost-warning-color-hover: var(--nyx-color-warning-content-hover);--button-ghost-danger-color-hover: var(--nyx-color-danger-content-hover);--button-ghost-info-color-hover: var(--nyx-color-info-content-hover);--button-ghost-success-color-hover: var(--nyx-color-success-content-hover);--button-ghost-neutral-color-active: var(--nyx-color-neutral-content-secondary);--button-ghost-warning-color-active: var(--nyx-color-warning-content-strong);--button-ghost-danger-color-active: var(--nyx-color-danger-content-strong);--button-ghost-info-color-active: var(--nyx-color-info-content-strong);--button-ghost-success-color-active: var(--nyx-color-success-content-strong);--button-loading-line-height: calc(var(--nyx-label-medium-line-height) - 4px);--button-icon-background-hover: var(--nyx-color-brand-background-softer-hover);--button-icon-border-hover: 1px solid var(--nyx-color-brand-border-hover);--button-icon-color-disabled: var(--nyx-color-neutral-content-disabled);--button-icon-border-disabled: 1px solid var(--nyx-color-neutral-border-disable);--button-icon-border-with-border: 1px solid var(--nyx-color-neutral-border-active);--button-icon-border-radius-with-border: var(--nyx-radii-2xs);--button-icon-color: var(--nyx-color-neutral-content-primary);--button-icon-border-radius: var(--nyx-radii-100);--button-icon-small-icon-font-size: var(--nyx-label-small-font-size);--button-icon-medium-icon-font-size: var(--nyx-label-medium-font-size);--button-icon-large-icon-font-size: var(--nyx-heading-h6-font-size);--button-icon-xlarge-icon-font-size: var(--nyx-heading-h4-font-size);box-sizing:border-box;display:inline-flex}:host([block]){width:100%}*{box-sizing:inherit}button.brand:not([disabled]):not(.loading):hover,button.brand:not([disabled]):not(.loading):active,button.warning:not([disabled]):not(.loading):hover,button.warning:not([disabled]):not(.loading):active,button.danger:not([disabled]):not(.loading):hover,button.danger:not([disabled]):not(.loading):active,button.info:not([disabled]):not(.loading):hover,button.info:not([disabled]):not(.loading):active,button.success:not([disabled]):not(.loading):hover,button.success:not([disabled]):not(.loading):active{color:var(--button-color-inverse)}button{display:inline-flex;padding:var(--button-padding);align-items:center;justify-content:center;gap:var(--button-gap);border-radius:var(--button-border-radius);color:var(--button-color);cursor:pointer;border:none;text-align:center;font-family:var(--button-font-family);font-size:var(--button-font-size);font-style:normal;font-weight:600;line-height:var(--button-line-height)}.component-subtitle{color:var(--nyx-color-neutral-content-tertiary);font-family:var(--nyx-font-family-font-family);font-size:var(--nyx-paragraph-large-font-size);line-height:var(--nyx-paragraph-large-line-height);display:block;margin-top:-8px;margin-bottom:16px}button.icon-right{flex-direction:row-reverse}button.small{padding:var(--button-small-padding);font-size:var(--button-small-font-size);line-height:var(--button-small-line-height)}button.medium{padding:var(--button-medium-padding)}button.block{width:100%}button.brand{background-color:var(--button-brand-background)}button.warning{background-color:var(--button-warning-background)}button.danger{background-color:var(--button-danger-background)}button.info{background-color:var(--button-info-background)}button.success{background-color:var(--button-success-background)}button.ghost{color:var(--button-ghost-color);background-color:var(--button-ghost-background)}button.ghost.danger{color:var(--button-ghost-danger-color);background-color:var(--button-ghost-background)}button.ghost.warning{color:var(--button-ghost-warning-color);background-color:var(--button-ghost-background)}button.ghost.info{color:var(--button-ghost-info-color);background-color:var(--button-ghost-background)}button.ghost.success{color:var(--button-ghost-success-color);background-color:var(--button-ghost-background)}button.brand:not([disabled]):not(.loading):hover{background-color:var(--button-brand-background-hover);color:var(--button-color-inverse)}button.warning:not([disabled]):not(.loading):hover{background-color:var(--button-warning-background-hover);color:var(--button-color-inverse)}button.danger:not([disabled]):not(.loading):hover{background-color:var(--button-danger-background-hover);color:var(--button-color-inverse)}button.info:not([disabled]):not(.loading):hover{background-color:var(--button-info-background-hover);color:var(--button-color-inverse)}button.outline:not([disabled]):not(.loading):hover{background-color:var(--button-success-background-hover);color:var(--button-color-inverse)}button.brand:not([disabled]):not(.loading):active{background-color:var(--button-brand-background-active)}button.warning:not([disabled]):not(.loading):active{background-color:var(--button-warning-background-active)}button.danger:not([disabled]):not(.loading):active{background-color:var(--button-danger-background-active)}button.info:not([disabled]):not(.loading):active{background-color:var(--button-info-background-active)}button.success:not([disabled]):not(.loading):active{background-color:var(--button-success-background-active)}button.outline:not([disabled]):not(.loading):active{background-color:var(--button-outline-background-active);color:var(--button-outline-color-active)}button.outline.warning:not([disabled]):not(.loading):active{background-color:var(--button-outline-warning-background-active);color:var(--button-outline-warning-background-active)}button.outline.danger:not([disabled]):not(.loading):active{background-color:var(--button-outline-danger-background-active);color:var(--button-outline-danger-background-active)}button.outline.info:not([disabled]):not(.loading):active{background-color:var(--button-outline-info-background-active);color:var(--button-outline-info-background-active)}button.outline.success:not([disabled]):not(.loading):active{background-color:var(--button-outline-success-background-active);color:var(--button-outline-success-background-active)}button.ghost:not([disabled]):not(.loading):active{background-color:var(--button-ghost-background-active);color:var(--button-ghost-neutral-color-active)}button.ghost.warning:not([disabled]):not(.loading):active{background-color:var(--button-warning-background-active);color:var(--button-ghost-warning-color-active)}button.ghost.danger:not([disabled]):not(.loading):active{background-color:var(--button-danger-background-active);color:var(--button-ghost-danger-color-active)}button.ghost.info:not([disabled]):not(.loading):active{background-color:var(--button-info-background-active);color:var(--button-ghost-info-color-active)}button.ghost.success:not([disabled]):not(.loading):active{background-color:var(--button-success-background-active);color:var(--button-ghost-success-color-active)}button:disabled{background:var(--button-disabled-background);color:var(--button-disabled-color);cursor:default}button.outline{background-color:transparent;border:var(--button-outline-border);color:var(--button-outline-color)}button.outline.danger{color:var(--button-outline-danger-color)}button.outline.warning{color:var(--button-outline-warning-color)}button.outline.info{color:var(--button-outline-info-color)}button.outline.success{color:var(--button-outline-success-color)}button.outline:not([disabled]):not(.loading):hover{background-color:var(--button-outline-background-hover);border:var(--button-outline-border-hover);color:var(--button-outline-color)}button.outline.danger:not([disabled]):not(.loading):hover{background-color:var(--button-outline-danger-background-hover);border:var(--button-outline-danger-border-hover);color:var(--button-outline-danger-color-hover)}button.outline.warning:not([disabled]):not(.loading):hover{background-color:var(--button-outline-warning-background-hover);border:var(--button-outline-warning-border-hover);color:var(--button-outline-warning-color-hover)}button.outline.info:not([disabled]):not(.loading):hover{background-color:var(--button-outline-info-background-hover);border:var(--button-outline-info-border-hover);color:var(--button-outline-info-color-hover)}button.outline.success:not([disabled]):not(.loading):hover{background-color:var(--button-outline-success-background-hover);border:var(--button-outline-success-border-hover);color:var(--button-outline-success-color-hover)}button.outline:disabled{border:1px solid var(--nyx-color-neutral-border-disable);background:var(--nyx-color-neutral-background-primary)}button.ghost{background-color:transparent;border:none;color:var(--button-ghost-color)}button.ghost.info{color:var(--button-ghost-info-color);background-color:transparent}button.ghost.danger{color:var(--button-ghost-danger-color);background-color:transparent}button.ghost.warning{color:var(--button-ghost-warning-color);background-color:transparent}button.ghost.success{color:var(--button-ghost-success-color);background-color:transparent}button.ghost:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-color)}button.ghost.danger:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-danger-color-hover)}button.ghost.warning:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-warning-color-hover)}button.ghost.info:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-info-color-hover)}button.ghost.success:not([disabled]):not(.loading):hover{background-color:var(--button-ghost-background);color:var(--button-ghost-success-color-hover)}button.ghost:disabled{background-color:var(--button-ghost-background);color:var(--button-disabled-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading nyx-icon{animation:spin 1s linear infinite}button.loading{cursor:default;line-height:var(--button-loading-line-height)}button.button-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--button-icon-border-radius);align-self:stretch;border:none;cursor:pointer;background-color:transparent;color:var(--button-icon-color);text-align:center}button.button-icon:not([disabled]):hover{background-color:var(--button-icon-background-hover)!important}button.button-icon.neutral:not([disabled]):hover{background-color:var(--button-neutral-background-hover)!important}button.button-icon[disabled]{color:var(--button-icon-color-disabled);cursor:default}button:focus-visible,button:focus-within{outline:2px solid var(--button-outline-color);outline-offset:2px}button.brand:focus-visible,button.brand:focus-within{background-color:var(--button-brand-background-hover)}button.warning:focus-visible,button.warning:focus-within{background-color:var(--button-warning-background-hover)}button.danger:focus-visible,button.danger:focus-within{background-color:var(--button-danger-background-hover)}button.info:focus-visible,button.info:focus-within{background-color:var(--button-info-background-hover)}button.success:focus-visible,button.success:focus-within{background-color:var(--button-success-background-hover)}button.ghost:focus-visible,button.ghost:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-color)}button.ghost.danger:focus-visible,button.ghost.danger:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-danger-color-hover)}button.ghost.info:focus-visible,button.ghost.info:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-info-color-hover)}button.ghost.success:focus-visible,button.ghost.success:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-success-color-hover)}button.ghost.warning:focus-visible,button.ghost.warning:focus-within{background-color:var(--button-ghost-background-hover);color:var(--button-ghost-warning-color-hover)}button.outline:focus-visible,button.outline:focus-within{background-color:var(--button-outline-background-hover)}button.outline.danger:focus-visible,button.outline.danger:focus-within{background-color:var(--button-outline-danger-background-hover)}button.outline.warning:focus-visible,button.outline.warning:focus-within{background-color:var(--button-outline-warning-background-hover)}button.outline.info:focus-visible,button.outline.info:focus-within{background-color:var(--button-outline-info-background-hover)}button.outline.success:focus-visible,button.outline.success:focus-within{background-color:var(--button-outline-success-background-hover)}button.button-icon:focus-visible,button.button-icon:focus-within{background-color:var( --button-icon-background-focus, var(--button-icon-background-hover) )!important}button.button-icon.neutral:focus-visible,button.button-icon.neutral:focus-within{background-color:var( --button-icon-background-focus, var(--button-neutral-background-hover) )!important}:host(.active) button.button-icon:not([disabled]){background-color:var( --button-icon-background-focus, var(--button-icon-background-hover) )!important}button.button-icon.button-icon-with-border{border:var(--button-icon-border-with-border);border-radius:var(--button-icon-border-radius-with-border)}button.button-icon.button-icon-with-border:not([disabled]):hover{border:var(--button-icon-border-hover)}button.button-icon.button-icon-with-border[disabled]{border:var(--button-icon-border-disabled)}button.button-icon nyx-icon{font-style:normal;font-weight:400;line-height:normal}button.button-icon.small{width:var(--button-icon-override-width, 24px);height:var(--button-icon-override-height, 24px)}button.button-icon.small nyx-icon{font-size:var(--button-icon-small-icon-font-size)}button.button-icon.medium{width:var(--button-icon-override-width, 30px);height:var(--button-icon-override-height, 30px)}button.button-icon.medium nyx-icon{font-size:var(--button-icon-medium-icon-font-size)}button.button-icon.large{width:var(--button-icon-override-width, 34px);height:var(--button-icon-override-height, 34px)}button.button-icon.large nyx-icon{font-size:var(--button-icon-large-icon-font-size)}button.button-icon.xlarge{width:var(--button-icon-override-width, 40px);height:var(--button-icon-override-height, 40px)}button.button-icon.xlarge nyx-icon{font-size:var(--button-icon-xlarge-icon-font-size)}";var G=Object.defineProperty,b=(c,o,e,n)=>{for(var t=void 0,r=c.length-1,i;r>=0;r--)(i=c[r])&&(t=i(o,e,t)||t);return t&&G(o,e,t),t};const d=(p=class extends a.LitElement{constructor(){super(...arguments),this.variant="brand",this.size="large",this.hierarchy="solid",this.iconPosition="left",this.disabled=!1,this.loading=!1,this.block=!1,this.buttonIcon=!1,this.buttonIconWithBorder=!1}connectedCallback(){super.connectedCallback(),this._hostAriaObserver=new MutationObserver(()=>{this.requestUpdate()}),this._hostAriaObserver.observe(this,{attributes:!0,attributeFilter:[...p._HOST_ARIA_ATTRS]})}willUpdate(o){this._pullHostAriaIntoShadowButton(),super.willUpdate(o)}disconnectedCallback(){var o;(o=this._hostAriaObserver)==null||o.disconnect(),this._hostAriaObserver=void 0,super.disconnectedCallback()}_pullHostAriaIntoShadowButton(){var o,e;if(this.hasAttribute("aria-label")){const n=this.getAttribute("aria-label")??"",t=n.trim()===""?void 0:n;t!==this._innerAriaLabel&&(this._innerAriaLabel=t),this.removeAttribute("aria-label")}if(this.hasAttribute("aria-labelledby")){const n=(o=this.getAttribute("aria-labelledby"))==null?void 0:o.trim(),t=n===""?void 0:n;t!==this._innerAriaLabelledby&&(this._innerAriaLabelledby=t),this.removeAttribute("aria-labelledby")}if(this.hasAttribute("aria-describedby")){const n=(e=this.getAttribute("aria-describedby"))==null?void 0:e.trim(),t=n===""?void 0:n;t!==this._innerAriaDescribedby&&(this._innerAriaDescribedby=t),this.removeAttribute("aria-describedby")}}_handleClick(o){if(this.disabled||this.loading){o.preventDefault(),o.stopPropagation();return}o.stopPropagation(),this.click(void 0,{native:!0,bubbles:!0,composed:!0})}render(){const o=this.buttonIcon||this.buttonIconWithBorder,e={brand:this.variant==="brand",info:this.variant==="info",warning:this.variant==="warning",danger:this.variant==="danger",neutral:this.variant==="neutral",success:this.variant==="success",small:this.size==="small",medium:this.size==="medium",large:this.size==="large",xlarge:this.size==="xlarge",outline:this.hierarchy==="outline",ghost:this.hierarchy==="ghost","icon-right":this.iconPosition==="right",loading:this.loading,block:this.block,"button-icon":o,"button-icon-with-border":this.buttonIconWithBorder};return a.html`
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        class=${z.classMap(e)}
+        aria-label=${this._innerAriaLabel??a.nothing}
+        aria-labelledby=${this._innerAriaLabelledby??a.nothing}
+        aria-describedby=${this._innerAriaDescribedby??a.nothing}
+        @click=${this._handleClick}
+      >
+        ${this.loading?"":a.html`<slot name="icon"></slot>`}
+        ${this.loading?a.html`<div class="loading"><nyx-icon svg=${h.spinnerThird}></nyx-icon></div>`:""}
+        ${o?"":a.html`<slot></slot>`}
+      </button>
+    `}},p._HOST_ARIA_ATTRS=["aria-label","aria-labelledby","aria-describedby"],p.styles=a.unsafeCSS(j),p);b([l.property({type:String,reflect:!0})],d.prototype,"variant"),b([l.property({type:String,reflect:!0})],d.prototype,"size"),b([l.property({type:String,reflect:!0})],d.prototype,"hierarchy"),b([l.property()],d.prototype,"iconPosition"),b([l.property({type:Boolean,reflect:!0})],d.prototype,"disabled"),b([l.property({type:Boolean,reflect:!0})],d.prototype,"loading"),b([l.property({type:Boolean,reflect:!0})],d.prototype,"block"),b([l.property({attribute:"button-icon",type:Boolean,reflect:!0})],d.prototype,"buttonIcon"),b([l.property({attribute:"button-icon-with-border",type:Boolean,reflect:!0})],d.prototype,"buttonIconWithBorder"),b([L()],d.prototype,"click"),b([l.state()],d.prototype,"_innerAriaLabel"),b([l.state()],d.prototype,"_innerAriaLabelledby"),b([l.state()],d.prototype,"_innerAriaDescribedby");let J=d;customElements.get("nyx-button")||customElements.define("nyx-button",J);var K=Object.defineProperty,w=(c,o,e,n)=>{for(var t=void 0,r=c.length-1,i;r>=0;r--)(i=c[r])&&(t=i(o,e,t)||t);return t&&K(o,e,t),t};const A=class A extends a.LitElement{constructor(){super(...arguments),this._items=[],this._expandedIds=new Set,this._searchTerm=""}updated(o){o.has("options")&&this.options&&(this._items=JSON.parse(JSON.stringify(this.options.items)),this.options.defaultExpandedLevel!==void 0&&this._expandedIds.size===0&&this._expandToLevel(this._items,0,this.options.defaultExpandedLevel),this._generateLightDomIcons())}_generateLightDomIcons(){var n;if(this.querySelectorAll("[data-auto-generated]").forEach(t=>t.remove()),!this.options)return;(n=this.options.columns)==null||n.forEach((t,r)=>{t.icon&&this._createIconElement(t.icon,`generated-header-icon-${r}`)});const e=t=>{t.icon&&this._createIconElement(t.icon,`generated-tree-icon-${t.id}`),t.children&&t.children.forEach(e)};this._items.forEach(e)}_createIconElement(o,e){const n=document.createElement("nyx-icon");let t="regular";typeof o=="string"?n.setAttribute("name",o):(o.name&&n.setAttribute("name",o.name),o.variant&&(t=o.variant),o.src&&n.setAttribute("src",o.src),o.svg&&(n.svg=o.svg)),n.setAttribute("variant",t),n.setAttribute("slot",e),n.setAttribute("data-auto-generated",""),this.appendChild(n)}_expandToLevel(o,e,n){o.forEach(t=>{e<n&&(this._expandedIds.add(t.id),t.children&&this._expandToLevel(t.children,e+1,n))})}_isColumnDisabled(o,e){return!!o.disabledColumns&&o.disabledColumns.includes(e)}_isNodeSelected(o,e){return this._isColumnDisabled(o,e)?!1:(o.selectedColumns||[]).includes(e)}_isIndeterminate(o,e){if(!o.children||o.children.length===0)return!1;const n=this._getFlatDescendants(o),t=n.filter(r=>this._isNodeSelected(r,e)).length;return t>0&&t<n.length}_allDescendantsSelected(o,e){return!o.children||o.children.length===0?this._isNodeSelected(o,e):this._getFlatDescendants(o).every(t=>this._isNodeSelected(t,e))}_getFlatDescendants(o){let e=[];return o.children&&o.children.forEach(n=>{e.push(n),e=e.concat(this._getFlatDescendants(n))}),e}_handleCheck(o,e){const t=!this._isNodeSelected(o,e);this._toggleNodeState(o,e,t),o.children&&this._getFlatDescendants(o).forEach(r=>{this._toggleNodeState(r,e,t)}),this._updateParents(this._items,o.id,e),this._triggerChange()}_toggleNodeState(o,e,n){if(this._isColumnDisabled(o,e))return;o.selectedColumns||(o.selectedColumns=[]);const t=o.selectedColumns.indexOf(e);n&&t===-1?o.selectedColumns.push(e):!n&&t>-1&&o.selectedColumns.splice(t,1)}_updateParents(o,e,n){for(const t of o)if(t.children&&t.children.some(r=>r.id===e||this._updateParents(t.children,e,n))){const r=t.children.every(i=>this._allDescendantsSelected(i,n));return this._toggleNodeState(t,n,r),!0}return!1}_isRowAllSelected(o){var n;if(!((n=this.options)!=null&&n.columns))return!1;const e=this.options.columns.every(t=>this._isColumnDisabled(o,t.id)?!0:this._isNodeSelected(o,t.id));return o.children&&o.children.length>0?e&&o.children.every(t=>this._isRowAllSelected(t)):e}_isRowIndeterminate(o){var t;if(this._isRowAllSelected(o)||!((t=this.options)!=null&&t.columns))return!1;const e=this.options.columns.some(r=>this._isNodeSelected(o,r.id)),n=o.children?o.children.some(r=>this._isRowAllSelected(r)||this._isRowIndeterminate(r)):!1;return e||n}_handleRowCheck(o){var t;const n=!this._isRowAllSelected(o);this._toggleRowRecursively(o,n),(t=this.options)!=null&&t.columns&&this.options.columns.forEach(r=>{this._updateParents(this._items,o.id,r.id)}),this._triggerChange()}_toggleRowRecursively(o,e){var n;(n=this.options)!=null&&n.columns&&(e?this.options.columns.forEach(t=>{this._isColumnDisabled(o,t.id)||(o.selectedColumns||(o.selectedColumns=[]),o.selectedColumns.includes(t.id)||o.selectedColumns.push(t.id))}):o.selectedColumns=[],o.children&&o.children.forEach(t=>this._toggleRowRecursively(t,e)))}_triggerChange(){this._items=[...this._items],this.onChange({items:this._items},{bubbles:!0,composed:!0})}async _toggleExpand(o,e=!1){var r;if(!(o.children&&o.children.length>0))return;const t=this._expandedIds.has(o.id);if(t?this._expandedIds.delete(o.id):this._expandedIds.add(o.id),this._expandedIds=new Set(this._expandedIds),!t&&e&&o.children&&o.children[0]){await this.updateComplete;const i=o.children[0].id,x=(r=this.shadowRoot)==null?void 0:r.querySelector(`#row-${i}`);x&&x.focus()}}_handleRowKeyDown(o,e){var t;const n=o.currentTarget;if((o.key==="Enter"||o.key===" ")&&o.target===n){o.preventDefault(),this._enableChildren(n);const r=n.querySelector("nyx-checkbox input, nyx-button:not([disabled])");if(r)if(r instanceof HTMLInputElement)r.focus();else{const i=(t=r.shadowRoot)==null?void 0:t.querySelector("button");i==null||i.focus()}return}o.key==="Escape"&&(o.preventDefault(),o.stopPropagation(),this._disableChildren(n),n.focus())}_handleRowFocusOut(o){const e=o.currentTarget;e.contains(o.relatedTarget)||this._disableChildren(e)}_enableChildren(o){const e=o.querySelectorAll('input[slot="input"]'),n=o.querySelectorAll("nyx-button");e.forEach(t=>t.setAttribute("tabindex","0")),n.forEach(t=>t.removeAttribute("tabindex"))}_disableChildren(o){const e=o.querySelectorAll('input[slot="input"]'),n=o.querySelectorAll("nyx-button");e.forEach(t=>t.setAttribute("tabindex","-1")),n.forEach(t=>t.setAttribute("tabindex","-1"))}_clearAllFocus(){var n,t;const o=(n=this.shadowRoot)==null?void 0:n.activeElement;o==null||o.blur();const e=(t=this.shadowRoot)==null?void 0:t.querySelectorAll(".node-row");e==null||e.forEach(r=>{this._disableChildren(r)})}render(){var o,e,n;return a.html`
+      <div class="nyx-treeview" @mousedown=${()=>this._clearAllFocus()}>
+        <div class="search-container">
+          <nyx-input>
+            <nyx-icon .svg=${h.magnifyingGlass} slot="iconLeft"></nyx-icon>
+            <input
+              class="search-input"
+              type="text"
+              slot="field"
+              placeholder="Search..."
+              @input=${t=>this._searchTerm=t.target.value}
+            />
+          </nyx-input>
+        </div>
+
+        <div class="tree-scroll">
+          <div class="tree-header">
+            <div class="tree-title">${(o=this.options)==null?void 0:o.title}</div>
+            <div class="header-columns">
+              ${(n=(e=this.options)==null?void 0:e.columns)==null?void 0:n.map((t,r)=>a.html`
+                  <div class="col-cell" title="${t.title||""}">
+                    <slot name="generated-header-icon-${r}"></slot>
+                  </div>
+                `)}
+            </div>
+          </div>
+
+          <div class="tree-body">${this._renderNodes(this._items,0)}</div>
+        </div>
+      </div>
+    `}_renderNodes(o,e){var r;const n=o.filter(i=>!this._searchTerm||i.label.toLowerCase().includes(this._searchTerm.toLowerCase())||i.children&&i.children.some(x=>x.label.toLowerCase().includes(this._searchTerm.toLowerCase()))),t=16+e*24-((r=this.options)!=null&&r.showRowSelection?4:0);return O.repeat(n,i=>i.id,i=>{var T,P,D,q;const x=this._expandedIds.has(i.id),I=i.children&&i.children.length>0,Q=this._isRowAllSelected(i),X=this._isRowIndeterminate(i),Y=!!((T=this.options)!=null&&T.showRowSelection);return a.html`
+          <div class="node-wrapper">
+            <div
+              id="row-${i.id}"
+              class=${E.classMap({"node-row":!0,selectable:Y,selected:Q||X})}
+              style="padding-left: ${t}px;"
+              tabindex="0"
+              @mousedown=${s=>s.preventDefault()}
+              @keydown=${s=>this._handleRowKeyDown(s,i)}
+              @focusout=${this._handleRowFocusOut}
+            >
+              <div class="node-info">
+                ${(P=this.options)!=null&&P.showRowSelection?a.html`
+                      <div class="row-checkbox">
+                        <nyx-checkbox
+                          ?checked=${this._isRowAllSelected(i)}
+                          ?indeterminate=${this._isRowIndeterminate(i)}
+                          @click=${s=>{s.stopPropagation(),this._handleRowCheck(i)}}
+                        >
+                          <input type="checkbox" slot="input" tabindex="-1" />
+                        </nyx-checkbox>
+                      </div>
+                    `:a.nothing}
+                ${I?a.html`
+                      <nyx-button
+                        class="expander"
+                        size="small"
+                        button-icon
+                        tabindex="-1"
+                        hierarchy="ghost"
+                        @click=${()=>this._toggleExpand(i,!1)}
+                        @keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),s.stopPropagation(),this._toggleExpand(i,!0))}}
+                      >
+                        <nyx-icon
+                          slot="icon"
+                          class=${E.classMap({expanded:x})}
+                          .svg=${h.chevronRightRegular}
+                        ></nyx-icon>
+                      </nyx-button>
+                    `:a.nothing}
+                <div class="node-type-icon-wrapper">
+                  <slot name="generated-tree-icon-${i.id}"></slot>
+                </div>
+                <span class="node-text" title="${i.label}"
+                  >${i.label}</span
+                >
+              </div>
+              <div class="node-columns">
+                ${(q=(D=this.options)==null?void 0:D.columns)==null?void 0:q.map(s=>a.html`
+                    <div class="col-cell">
+                      <nyx-checkbox
+                        ?checked=${this._allDescendantsSelected(i,s.id)}
+                        ?indeterminate=${this._isIndeterminate(i,s.id)}
+                        ?disabled=${this._isColumnDisabled(i,s.id)}
+                        @click=${()=>this._handleCheck(i,s.id)}
+                      >
+                        <input type="checkbox" slot="input" tabindex="-1" />
+                      </nyx-checkbox>
+                    </div>
+                  `)}
+              </div>
+            </div>
+            ${x&&I?a.html`<div class="node-children">
+                  ${this._renderNodes(i.children,e+1)}
+                </div>`:""}
+          </div>
+        `})}};A.styles=a.unsafeCSS(N);let v=A;w([l.property({type:Object})],v.prototype,"options"),w([l.state()],v.prototype,"_items"),w([l.state()],v.prototype,"_expandedIds"),w([l.state()],v.prototype,"_searchTerm"),w([L("nyx-change")],v.prototype,"onChange"),customElements.get("nyx-treeview")||customElements.define("nyx-treeview",v),u.NyxTreeview=v,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@nyx-ds/treeview",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/treeview.js",
+  "module": "dist/treeview.js",
+  "types": "treeview.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@nyx-ds/button": "^0.1.3",
+    "@nyx-ds/checkbox": "^0.1.4",
+    "@nyx-ds/core": "^0.1.11",
+    "@nyx-ds/icon": "^0.1.1",
+    "@nyx-ds/input": "^0.1.6",
+    "lit": "^3.2.1",
+    "lit-html": "^3.2.1"
+  },
+  "gitHead": "322d90fcbbce1bf63b8ea2bcdedc48a98e8b5f62"
+}