@golemui/gui-lit 1.2.0 → 1.2.1

package/select.element-SDxBhGjz.js

@@ -1,266 +0,0 @@
-import { InputWidgetAdapter as m, formContext as b, inputContext as y } from "@golemui/lit";
-import { LitElement as v, html as n, nothing as u } from "lit";
-import { repeat as f } from "lit-html/directives/repeat.js";
-import { property as a, customElement as g } from "lit/decorators.js";
-import { classMap as $ } from "lit/directives/class-map.js";
-import { G as C, a as D, b as w, c as O } from "./templates-Df7abEkB.js";
-import { u as E, i as S } from "./one-of-anKkm7mD.js";
-import { consume as F, provide as _ } from "@lit/context";
-import "rxjs";
-var x = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (e, i, r, l) => {
-  for (var o = l > 1 ? void 0 : l ? q(i, r) : i, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (o = (l ? p(i, r, o) : p(o)) || o);
-  return l && o && x(i, r, o), o;
-};
-let t = class extends v {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.autocomplete = void 0, this.options = [], this.placeholder = void 0, this.invalidOptionMessage = void 0, this.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
-      getTargets: () => this.querySelectorAll(`select[id="${this.uid}"]`),
-      getState: () => ({
-        uid: this.uid,
-        templateData: {
-          hint: this.hint,
-          errors: this.errors,
-          readonly: this.readOnly,
-          disabled: this.disabled,
-          touched: this.touched,
-          required: this.required
-        }
-      })
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  render() {
-    super.render();
-    const e = {
-      uid: this.uid,
-      label: this.label,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      value: this.value,
-      hint: this.hint,
-      icon: this.icon,
-      autocomplete: this.autocomplete,
-      options: this.options,
-      placeholder: this.placeholder,
-      labelField: this.labelField,
-      valueField: this.valueField
-    }, i = D("select", e);
-    this.options = E(this.options, {
-      labelField: this.labelField,
-      valueField: this.valueField
-    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: l }) => l === this.value) !== void 0 : !1;
-    const r = this.optionsLoading ? n`<span>Loading...</span>` : n`
-          <option value="" disabled selected=${this.hasMatchingValue ? u : ""}>
-            ${this.placeholder ?? "Select an option"}
-          </option>
-          ${f(
-      this.options || [],
-      (l) => l?.value,
-      (l) => n`<option
-                value=${l.value}
-                selected=${this.hasMatchingValue && l.value === this.value ? "" : u}
-              >
-                ${l.label}
-              </option>`
-    )}
-        `;
-    return n`
-      ${w(this.uid, e)}
-
-      <div class="gui-widget">
-        <select
-          id=${this.uid}
-          data-cy=${`${this.uid}_select`}
-          class=${$({ "gui-widget-input": !0, ...i.widgetClasses })}
-          ?required=${e.required}
-          ?disabled=${e.disabled || e.readonly}
-          autocomplete=${this.autocomplete || u}
-          @change=${this.valueChanged}
-          @blur=${this.onBlur}
-        >
-          ${r}
-        </select>
-        <span class="gui-select__arrow"
-          ><svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 256 256"
-            aria-hidden="true"
-          >
-            <path
-              d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
-            ></path></svg
-        ></span>
-        ${i.html}
-      </div>
-
-      ${O(this.uid, e)}
-    `;
-  }
-  updated(e) {
-    e.has("value") && !this.hasMatchingValue && this.value && this.dispatchEvent(
-      new CustomEvent("inputError", {
-        detail: {
-          message: (this.invalidOptionMessage ?? "Invalid selection: '{value}' is not a valid option.").replace("{value}", String(this.value))
-        },
-        bubbles: !0
-      })
-    );
-  }
-  valueChanged(e) {
-    if (e.stopPropagation(), !this.readOnly) {
-      const i = e.target;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: S(i.value, this.options) },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  onBlur() {
-    this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-s([
-  a({ type: String })
-], t.prototype, "uid", 2);
-s([
-  a({ type: String })
-], t.prototype, "label", 2);
-s([
-  a({ type: String, attribute: "locale-id" })
-], t.prototype, "localeId", 2);
-s([
-  a({ type: Array })
-], t.prototype, "errors", 2);
-s([
-  a({ type: Boolean })
-], t.prototype, "touched", 2);
-s([
-  a({ type: Boolean })
-], t.prototype, "required", 2);
-s([
-  a({ type: Boolean })
-], t.prototype, "disabled", 2);
-s([
-  a({ type: Boolean, attribute: "readonly" })
-], t.prototype, "readOnly", 2);
-s([
-  a({ type: String })
-], t.prototype, "value", 2);
-s([
-  a({ type: String })
-], t.prototype, "hint", 2);
-s([
-  a({ type: String })
-], t.prototype, "icon", 2);
-s([
-  a({ type: String })
-], t.prototype, "autocomplete", 2);
-s([
-  a({ type: Array })
-], t.prototype, "options", 2);
-s([
-  a({ type: String })
-], t.prototype, "placeholder", 2);
-s([
-  a({ type: String, attribute: "invalid-option-message" })
-], t.prototype, "invalidOptionMessage", 2);
-s([
-  a({ type: String })
-], t.prototype, "labelField", 2);
-s([
-  a({ type: String })
-], t.prototype, "valueField", 2);
-t = s([
-  g("gui-select")
-], t);
-typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", t);
-var M = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (e, i, r, l) => {
-  for (var o = l > 1 ? void 0 : l ? I(i, r) : i, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (o = (l ? p(i, r, o) : p(o)) || o);
-  return l && o && M(i, r, o), o;
-};
-let h = class extends v {
-  constructor() {
-    super(...arguments), this.adapter = new m(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    super.updated(e);
-    const i = this.adapter.templateData.size;
-    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-select", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    return super.render(), n`
-      <gui-select
-        .uid=${this.widget.uid}
-        .label=${this.adapter.templateData.label}
-        .errors=${this.adapter.templateData.errors}
-        ?touched=${this.adapter.templateData.touched}
-        ?required=${this.adapter.templateData.validator?.required}
-        ?disabled=${this.adapter.templateData.disabled}
-        ?readonly=${this.adapter.templateData.readonly}
-        .value=${this.adapter.templateData.value}
-        .hint=${this.adapter.templateData.hint}
-        .icon=${this.adapter.templateData.icon}
-        .placeholder=${this.adapter.templateData.placeholder}
-        .autocomplete=${this.adapter.templateData.autocomplete}
-        .options=${this.adapter.templateData.options}
-        .labelField=${this.adapter.templateData.labelField}
-        .valueField=${this.adapter.templateData.valueField}
-        .invalidOptionMessage=${this.adapter.templateData.invalidOptionMessage}
-        @change=${this.valueChanged}
-        @inputError=${this.onInputError}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-select>
-    `;
-  }
-  valueChanged(e) {
-    const i = e.detail.value;
-    this.adapter.valueChanged(i);
-  }
-  onInputError(e) {
-    this.adapter.injectValidationIssues([e.detail.message]);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
-  }
-};
-c([
-  F({ context: b }),
-  a({ attribute: !1 })
-], h.prototype, "formContext", 2);
-c([
-  _({ context: y })
-], h.prototype, "adapter", 2);
-h = c([
-  g("gui-select-input")
-], h);
-export {
-  h as SelectElement
-};

package/tabs-DzSCq_98.js

@@ -1,13 +0,0 @@
-function c(e, t, n) {
-  if (!e)
-    throw new TypeError("The element provided to the IntersectionObserver must exist");
-  const r = new IntersectionObserver((s) => {
-    s.forEach((o) => {
-      t(o.isIntersecting);
-    });
-  }, n);
-  return r.observe(e), r;
-}
-export {
-  c
-};

package/tags.element-Bnhfevp3.js

@@ -1,369 +0,0 @@
-import { InputWidgetAdapter as D, formContext as w, inputContext as C } from "@golemui/lit";
-import { LitElement as y, nothing as c, html as m } from "lit";
-import { property as o, customElement as b } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { G as A, b as P, c as S } from "./templates-Df7abEkB.js";
-import "./pills-BDMO2NiR.js";
-import { styleMap as _ } from "lit-html/directives/style-map.js";
-import { consume as E, provide as L } from "@lit/context";
-import "rxjs";
-var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
-  for (var i = a > 1 ? void 0 : a ? I(e, r) : e, s = t.length - 1, p; s >= 0; s--)
-    (p = t[s]) && (i = (a ? p(e, r, i) : p(i)) || i);
-  return a && i && O(e, r, i), i;
-};
-const x = ["Enter", ",", "Tab", "blur"];
-let l = class extends y {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = [], this.hint = void 0, this.placeholder = void 0, this.icon = void 0, this.separators = void 0, this.allowDuplicates = !0, this.trim = !0, this.limit = void 0, this.removeAriaLabel = void 0, this.removeIcon = void 0, this.ariaController = new A(this, {
-      getTargets: () => this.querySelectorAll(".gui-tags-input"),
-      getState: () => ({
-        uid: this.uid,
-        templateData: {
-          hint: this.hint,
-          errors: this.errors,
-          readonly: this.readOnly,
-          disabled: this.disabled,
-          touched: this.touched,
-          required: this.required
-        }
-      })
-    }), this.onPillRemove = (t) => {
-      if (this.disabled || this.readOnly) return;
-      const e = this.getValue(), r = e.findIndex((i, s) => this.pillKey(i, s) === t.detail.key);
-      if (r < 0) return;
-      const a = e.filter((i, s) => s !== r);
-      this.emitChange(a), a.length === 0 && requestAnimationFrame(() => this.focusInput());
-    }, this.onPillKeydown = (t) => {
-      t.detail.event.key === "ArrowRight" && !this.isDropdownOpen() && this.focusInput();
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  getSeparators() {
-    return this.separators && this.separators.length > 0 ? this.separators : x;
-  }
-  getValue() {
-    return Array.isArray(this.value) ? this.value : [];
-  }
-  getRemoveAriaLabel() {
-    return this.removeAriaLabel ?? "Remove tag";
-  }
-  pillKey(t, e) {
-    return `${e}-${t}`;
-  }
-  render() {
-    const t = this.getValue(), e = {
-      uid: this.uid,
-      label: this.label,
-      hint: this.hint,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      placeholder: this.placeholder,
-      icon: this.icon
-    }, r = {
-      "gui-widget-icon": !0,
-      [this.icon]: !!this.icon
-    }, a = t.map((i, s) => ({
-      key: this.pillKey(i, s),
-      label: i
-    }));
-    return m`
-      ${this.label ? P(this.uid, e, !1, void 0, !1) : c}
-
-      <div class="gui-widget">
-        <div
-          class=${f({
-      "gui-widget-input": !0,
-      "gui-tags-input": !0,
-      "gui-tags-input--icon": !!this.icon
-    })}
-          role="group"
-          aria-label=${this.label ?? "Tags input"}
-        >
-          ${this.icon ? m`<span
-                class=${f(r)}
-                data-icon=${this.icon}
-                aria-hidden="true"
-              ></span>` : c}
-
-          <gui-pills
-            class="gui-tags__pills"
-            style=${_(a.length ? {} : { "min-width": 0 })}
-            .uid=${this.uid}
-            .toolbarAriaLabel=${"Selected tags"}
-            .items=${a}
-            .removable=${!0}
-            .clickable=${!1}
-            .bubble=${!0}
-            .tabbable=${!1}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readOnly}
-            .removeAriaLabel=${this.getRemoveAriaLabel()}
-            .removeIcon=${this.removeIcon}
-            .compactAriaLabel=${`${t.length} tags`}
-            @pillremove=${this.onPillRemove}
-            @pillkeydown=${this.onPillKeydown}
-          ></gui-pills>
-
-          <input
-            type="text"
-            id=${this.uid}
-            data-cy=${`${this.uid}_tags-input`}
-            class="gui-tags__input"
-            ?disabled=${this.disabled}
-            ?readonly=${this.readOnly}
-            placeholder=${this.placeholder || c}
-            @keydown=${this.onInputKeydown}
-            @blur=${this.onInputBlur}
-            @paste=${this.onPaste}
-            @change=${(i) => i.stopPropagation()}
-          />
-        </div>
-
-        ${S(this.uid, e)}
-      </div>
-    `;
-  }
-  onInputKeydown(t) {
-    if (this.disabled || this.readOnly) return;
-    const e = t.target, r = this.getSeparators(), a = e.value, i = e.selectionStart === 0 && e.selectionEnd === 0;
-    if (t.key === "Enter" && r.includes("Enter")) {
-      t.preventDefault(), this.commitDraft(a) && (e.value = "");
-      return;
-    }
-    if (t.key === "," && r.includes(",")) {
-      t.preventDefault(), this.commitDraft(a) && (e.value = "");
-      return;
-    }
-    if (t.key === "Tab" && r.includes("Tab") && a.length > 0) {
-      this.commitDraft(a) && (e.value = "");
-      return;
-    }
-    if (t.key === "Escape") {
-      t.preventDefault(), e.value = "";
-      return;
-    }
-    const s = this.getValue(), p = this.isCompactMode();
-    if (t.key === "ArrowDown" && p && s.length > 0) {
-      t.preventDefault(), this.enterPillList(0);
-      return;
-    }
-    if (t.key === "ArrowLeft" && !p && i && s.length > 0) {
-      t.preventDefault(), this.enterPillList(s.length - 1);
-      return;
-    }
-    if (t.key === "Backspace" && a === "" && s.length > 0) {
-      t.preventDefault(), this.enterPillList(s.length - 1);
-      return;
-    }
-  }
-  onInputBlur(t) {
-    const e = t.target, r = this.getSeparators(), a = e.value;
-    a.length > 0 && r.includes("blur") && !this.disabled && !this.readOnly && this.commitDraft(a) && (e.value = ""), this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  onPaste(t) {
-    if (this.disabled || this.readOnly) return;
-    const e = t.clipboardData?.getData("text") ?? "";
-    if (!e) return;
-    const a = this.getSeparators().filter((u) => u !== "Enter" && u !== "Tab" && u !== "blur");
-    if (a.length === 0) return;
-    const i = new RegExp(
-      `[${a.map((u) => u.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}
-]`
-    );
-    if (!i.test(e)) return;
-    t.preventDefault();
-    const s = t.target instanceof HTMLInputElement ? t.target : null, d = ((s?.value ?? "") + e).split(i), v = d.slice(0, -1), $ = d[d.length - 1] ?? "";
-    this.commitDraftBatch(v) && s && (s.value = $);
-  }
-  commitDraft(t) {
-    const e = this.trim ? t.trim() : t;
-    if (e.length === 0) return !1;
-    const r = this.getValue();
-    return this.allowDuplicates === !1 && r.includes(e) ? !0 : this.limit !== void 0 && r.length >= this.limit ? !1 : (this.emitChange([...r, e]), !0);
-  }
-  commitDraftBatch(t) {
-    const e = this.getValue(), r = [...e];
-    for (const a of t) {
-      const i = this.trim ? a.trim() : a;
-      if (i.length !== 0 && !(this.allowDuplicates === !1 && r.includes(i))) {
-        if (this.limit !== void 0 && r.length >= this.limit) break;
-        r.push(i);
-      }
-    }
-    return r.length === e.length ? !1 : (this.emitChange(r), !0);
-  }
-  emitChange(t) {
-    this.value = t, this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: t },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  focusInput() {
-    this.querySelector(`input[id="${this.uid}"]`)?.focus();
-  }
-  getPills() {
-    return this.querySelector("gui-pills");
-  }
-  isDropdownOpen() {
-    return !!this.getPills()?.querySelector(".gui-pills__dropdown");
-  }
-  /** True when the host wrapper has shrunk past the compact threshold and
-   *  gui-pills is displaying the bubble instead of the strip. */
-  isCompactMode() {
-    const t = this.getPills();
-    if (!t) return !1;
-    const e = t.querySelector(".gui-pills__strip-wrapper");
-    return e ? getComputedStyle(e).display === "none" : !1;
-  }
-  /**
-   * Enter the pill list at `index`. In compact mode the strip is hidden, so
-   * we open the dropdown overlay first so the user can see the focused pill.
-   */
-  enterPillList(t) {
-    const e = this.getPills();
-    e && (this.isCompactMode() ? (e.openDropdown(), requestAnimationFrame(() => e.focusPillAt(t))) : e.focusPillAt(t));
-  }
-};
-n([
-  o({ type: String })
-], l.prototype, "uid", 2);
-n([
-  o({ type: String })
-], l.prototype, "label", 2);
-n([
-  o({ type: String, attribute: "locale-id" })
-], l.prototype, "localeId", 2);
-n([
-  o({ type: Array })
-], l.prototype, "errors", 2);
-n([
-  o({ type: Boolean })
-], l.prototype, "touched", 2);
-n([
-  o({ type: Boolean })
-], l.prototype, "required", 2);
-n([
-  o({ type: Boolean })
-], l.prototype, "disabled", 2);
-n([
-  o({ type: Boolean, attribute: "readonly" })
-], l.prototype, "readOnly", 2);
-n([
-  o({ type: Array })
-], l.prototype, "value", 2);
-n([
-  o({ type: String })
-], l.prototype, "hint", 2);
-n([
-  o({ type: String })
-], l.prototype, "placeholder", 2);
-n([
-  o({ type: String })
-], l.prototype, "icon", 2);
-n([
-  o({ type: Array })
-], l.prototype, "separators", 2);
-n([
-  o({ type: Boolean })
-], l.prototype, "allowDuplicates", 2);
-n([
-  o({ type: Boolean })
-], l.prototype, "trim", 2);
-n([
-  o({ type: Number })
-], l.prototype, "limit", 2);
-n([
-  o({ type: String, attribute: "remove-aria-label" })
-], l.prototype, "removeAriaLabel", 2);
-n([
-  o({ type: String, attribute: "remove-icon" })
-], l.prototype, "removeIcon", 2);
-l = n([
-  b("gui-tags")
-], l);
-typeof customElements < "u" && !customElements.get("gui-tags") && customElements.define("gui-tags", l);
-var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, g = (t, e, r, a) => {
-  for (var i = a > 1 ? void 0 : a ? R(e, r) : e, s = t.length - 1, p; s >= 0; s--)
-    (p = t[s]) && (i = (a ? p(e, r, i) : p(i)) || i);
-  return a && i && q(e, r, i), i;
-};
-let h = class extends y {
-  constructor() {
-    super(...arguments), this.adapter = new D(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-tags", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    return super.render(), m`
-      <gui-tags
-        .uid=${this.widget.uid}
-        .label=${this.adapter.templateData.label}
-        .hint=${this.adapter.templateData.hint}
-        .errors=${this.adapter.templateData.errors}
-        ?touched=${this.adapter.templateData.touched}
-        ?required=${this.adapter.templateData.validator?.required}
-        ?disabled=${this.adapter.templateData.disabled}
-        ?readonly=${this.adapter.templateData.readonly}
-        .value=${this.adapter.templateData.value}
-        .placeholder=${this.adapter.templateData.placeholder}
-        .icon=${this.adapter.templateData.icon}
-        .separators=${this.adapter.templateData.separators}
-        .allowDuplicates=${this.adapter.templateData.allowDuplicates ?? !0}
-        .trim=${this.adapter.templateData.trim ?? !0}
-        .limit=${this.adapter.templateData.limit}
-        .removeAriaLabel=${this.adapter.templateData.removeAriaLabel}
-        .removeIcon=${this.adapter.templateData.removeIcon}
-        @change=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-tags>
-    `;
-  }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-};
-g([
-  E({ context: w }),
-  o({ attribute: !1 })
-], h.prototype, "formContext", 2);
-g([
-  L({ context: C })
-], h.prototype, "adapter", 2);
-h = g([
-  b("gui-tags-input")
-], h);
-export {
-  h as TagsElement
-};