@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

package/password.element-C1aQh_iz.js

@@ -1,240 +0,0 @@
-import { InputWidgetAdapter as m, formContext as y, inputContext as P } from "@golemui/lit";
-import { LitElement as w, nothing as n, html as u } from "lit";
-import { property as o, state as g, customElement as b } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { G as $, a as f, b as I, c as C } from "./templates-Df7abEkB.js";
-import { consume as D, provide as L } from "@lit/context";
-import "rxjs";
-var S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (t, a, i, d) => {
-  for (var r = d > 1 ? void 0 : d ? _(a, i) : a, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (r = (d ? h(a, i, r) : h(r)) || r);
-  return d && r && S(a, i, r), r;
-};
-let e = class extends w {
-  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.placeholder = void 0, this.autocomplete = void 0, this.showPasswordIcon = void 0, this.hidePasswordIcon = void 0, this.showPasswordLabel = void 0, this.hidePasswordLabel = void 0, this.showPassword = !1, this.ariaController = new $(this, {
-      getTargets: () => this.querySelectorAll(`input[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 t = {
-      uid: this.uid,
-      label: this.label,
-      hint: this.hint,
-      errors: this.errors,
-      touched: this.touched,
-      required: this.required,
-      disabled: this.disabled,
-      readonly: this.readOnly,
-      value: this.value,
-      icon: this.icon,
-      placeholder: this.placeholder,
-      autocomplete: this.autocomplete,
-      showPasswordIcon: this.showPasswordIcon,
-      hidePasswordIcon: this.hidePasswordIcon,
-      showPasswordLabel: this.showPasswordLabel,
-      hidePasswordLabel: this.hidePasswordLabel
-    }, a = f("password", t), i = {
-      "gui-widget-input": !0,
-      "gui-password--icon": !!this.icon
-    };
-    return u`
-      ${I(this.uid, t)}
-
-      <div class="gui-widget">
-        <input
-          type=${this.showPassword ? "text" : "password"}
-          id=${this.uid}
-          data-cy=${`${this.uid}_password`}
-          class=${v(i)}
-          value=${this.value}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readOnly}
-          placeholder=${this.placeholder || n}
-          autocomplete=${this.autocomplete || n}
-          @input=${this.valueChanged}
-          @blur=${this.onBlur}
-        />
-        ${a.html}
-        <button
-          class=${`gui-password__toggle gui-widget-icon ${this.showPassword && t.showPasswordIcon ? t.showPasswordIcon : ""} ${!this.showPassword && t.hidePasswordIcon ? t.hidePasswordIcon : ""}`}
-          data-icon=${this.showPassword ? t.showPasswordIcon : t.hidePasswordIcon}
-          type="button"
-          ?disabled=${this.disabled}
-          aria-label=${this.showPassword ? t.hidePasswordLabel ?? "Hide password" : t.showPasswordLabel ?? "Show password"}
-          @click=${() => this.showPassword = !this.showPassword}
-        >
-          ${t.showPasswordIcon || t.hidePasswordIcon ? n : u`<span aria-hidden="true"
-                >${this.showPassword ? t.hidePasswordLabel ?? "Hide" : t.showPasswordLabel ?? "Show"}</span
-              >`}
-        </button>
-      </div>
-
-      ${C(this.uid, t)}
-    `;
-  }
-  valueChanged(t) {
-    if (t.stopPropagation(), !this.readOnly) {
-      const a = t.target;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: { value: a.value },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  onBlur() {
-    this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-s([
-  o({ type: String })
-], e.prototype, "uid", 2);
-s([
-  o({ type: String })
-], e.prototype, "label", 2);
-s([
-  o({ type: String, attribute: "locale-id" })
-], e.prototype, "localeId", 2);
-s([
-  o({ type: Array })
-], e.prototype, "errors", 2);
-s([
-  o({ type: Boolean })
-], e.prototype, "touched", 2);
-s([
-  o({ type: Boolean })
-], e.prototype, "required", 2);
-s([
-  o({ type: Boolean })
-], e.prototype, "disabled", 2);
-s([
-  o({ type: Boolean, attribute: "readonly" })
-], e.prototype, "readOnly", 2);
-s([
-  o({ type: String })
-], e.prototype, "value", 2);
-s([
-  o({ type: String })
-], e.prototype, "hint", 2);
-s([
-  o({ type: String })
-], e.prototype, "icon", 2);
-s([
-  o({ type: String })
-], e.prototype, "placeholder", 2);
-s([
-  o({ type: String })
-], e.prototype, "autocomplete", 2);
-s([
-  o({ type: String })
-], e.prototype, "showPasswordIcon", 2);
-s([
-  o({ type: String })
-], e.prototype, "hidePasswordIcon", 2);
-s([
-  o({ type: String })
-], e.prototype, "showPasswordLabel", 2);
-s([
-  o({ type: String })
-], e.prototype, "hidePasswordLabel", 2);
-s([
-  g()
-], e.prototype, "showPassword", 2);
-e = s([
-  b("gui-password")
-], e);
-typeof customElements < "u" && !customElements.get("gui-password") && customElements.define("gui-password", e);
-var O = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (t, a, i, d) => {
-  for (var r = d > 1 ? void 0 : d ? x(a, i) : a, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (r = (d ? h(a, i, r) : h(r)) || r);
-  return d && r && O(a, i, r), r;
-};
-let p = class extends w {
-  constructor() {
-    super(...arguments), this.adapter = new m(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-password", "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(), u`
-      <gui-password
-        .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}
-        .icon=${this.adapter.templateData.icon}
-        .placeholder=${this.adapter.templateData.placeholder}
-        .autocomplete=${this.adapter.templateData.autocomplete}
-        .showPasswordIcon=${this.adapter.templateData.showPasswordIcon}
-        .hidePasswordIcon=${this.adapter.templateData.hidePasswordIcon}
-        .showPasswordLabel=${this.adapter.templateData.showPasswordLabel}
-        .hidePasswordLabel=${this.adapter.templateData.hidePasswordLabel}
-        @input=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-password>
-    `;
-  }
-  valueChanged(t) {
-    const a = t.detail.value;
-    this.adapter.valueChanged(a);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-};
-c([
-  D({ context: y }),
-  o({ attribute: !1 })
-], p.prototype, "formContext", 2);
-c([
-  L({ context: P })
-], p.prototype, "adapter", 2);
-p = c([
-  b("gui-password-input")
-], p);
-export {
-  p as PasswordElement
-};

package/pill-ranges-DpvWwP-3.js

@@ -1,48 +0,0 @@
-import { p as o } from "./date-DBuYpvcO.js";
-function s(t) {
-  return `${t.start}-${t.end ?? t.start}`;
-}
-function f(t, n) {
-  return !t || !Array.isArray(t) ? [] : [...t].sort((r, e) => n(r.start, e.start));
-}
-function u(t, n) {
-  return t.find((r) => s(r) === n);
-}
-function c(t, n) {
-  const r = t ?? [], e = u(r, n);
-  if (!e) return null;
-  const i = r.filter(
-    (a) => !(a.start === e.start && (a.end ?? null) === (e.end ?? null))
-  );
-  return { removed: e, next: i };
-}
-function d(t, n) {
-  const r = o(t);
-  return isNaN(r.getTime()) ? t : new Intl.DateTimeFormat(n ?? "en", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).format(r);
-}
-function m(t, n) {
-  const r = n(t.start), e = t.end ? n(t.end) : r;
-  return `${r} - ${e}`;
-}
-function y(t, n) {
-  return t.map((r) => {
-    const e = n(r);
-    return {
-      key: s(r),
-      label: e,
-      ariaLabel: e
-    };
-  });
-}
-export {
-  m as a,
-  y as b,
-  d as c,
-  u as f,
-  c as r,
-  f as s
-};

package/pills-BDMO2NiR.js

@@ -1,348 +0,0 @@
-import { LitElement as m, nothing as d, html as a } from "lit";
-import { property as l, state as u, customElement as w } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { repeat as b } from "lit/directives/repeat.js";
-import { c as v } from "./tabs-DzSCq_98.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
-  for (var n = r > 1 ? void 0 : r ? _(t, i) : t, p = e.length - 1, h; p >= 0; p--)
-    (h = e[p]) && (n = (r ? h(t, i, n) : h(n)) || n);
-  return r && n && y(t, i, n), n;
-};
-let s = class extends m {
-  constructor() {
-    super(...arguments), this.uid = void 0, this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", this.toolbarAriaLabel = "Selected items", this._isStartVisible = !0, this._isEndVisible = !0, this._showDropdown = !1, this._pendingFocusIndex = null, this.handlePillFocus = (e) => {
-      e.target.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest"
-      });
-    }, this.toggleDropdown = () => {
-      this._showDropdown ? this.closeDropdown() : this.openDropdown();
-    }, this.handleOutsideInteraction = (e) => {
-      const t = this.querySelector(".gui-pills__compact"), i = this.querySelector(".gui-pills__dropdown"), r = e.composedPath()[0];
-      !t?.contains(r) && !i?.contains(r) && this.closeDropdown();
-    };
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    if (super.updated(e), this.setupObservers(), this._pendingFocusIndex !== null && e.has("items")) {
-      const t = this._pendingFocusIndex;
-      this._pendingFocusIndex = null;
-      const i = this.items.length;
-      if (i === 0) {
-        this._showDropdown && this.closeDropdown();
-        return;
-      }
-      const r = Math.max(0, Math.min(t, i - 1));
-      this.focusPillAt(r);
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.disconnectObservers(), this.removeOutsideListeners();
-  }
-  render() {
-    const e = this.items.length;
-    return e === 0 ? d : a`
-      ${this.renderStrip()} ${this.bubble ? this.renderCompact(e) : d}
-      ${this.bubble && this._showDropdown ? this.renderDropdown() : d}
-    `;
-  }
-  renderStrip() {
-    return a`
-      <div
-        class=${c({
-      "gui-pills__strip-wrapper": !0,
-      "gui-pills--start-shadow": !this._isStartVisible,
-      "gui-pills--end-shadow": !this._isEndVisible
-    })}
-      >
-        <div
-          class="gui-pills__strip"
-          role="toolbar"
-          aria-label=${this.toolbarAriaLabel}
-          tabindex="-1"
-        >
-          <span class="gui-sentinel gui-sentinel__start"></span>
-          ${b(
-      this.items,
-      (e) => e.key,
-      (e, t) => this.renderPill(e, t, !1)
-    )}
-          <span class="gui-sentinel gui-sentinel__end"></span>
-        </div>
-      </div>
-    `;
-  }
-  get dropdownId() {
-    return this.uid ? `${this.uid}_pills_dropdown` : void 0;
-  }
-  renderCompact(e) {
-    return a`
-      <div class="gui-pills__compact">
-        <button
-          type="button"
-          class="gui-pills__count"
-          aria-label=${this.compactAriaLabel ?? `${e} items`}
-          aria-haspopup="true"
-          aria-expanded=${this._showDropdown}
-          aria-controls=${this.dropdownId ?? d}
-          ?disabled=${this.disabled || this.readOnly}
-          @click=${(t) => {
-      t.stopPropagation(), this.toggleDropdown();
-    }}
-        >
-          ${e}
-        </button>
-      </div>
-    `;
-  }
-  renderDropdown() {
-    return a`
-      <div
-        id=${this.dropdownId ?? d}
-        class="gui-pills__dropdown"
-        role="toolbar"
-        aria-orientation="vertical"
-        aria-label=${this.toolbarAriaLabel}
-      >
-        ${b(
-      this.items,
-      (e) => `dd-${e.key}`,
-      (e, t) => this.renderPill(e, t, !0)
-    )}
-      </div>
-    `;
-  }
-  renderPill(e, t, i) {
-    const r = this.clickable && !this.disabled && !this.readOnly;
-    return a`
-      <button
-        type="button"
-        class=${c({
-      "gui-pills__pill": !0,
-      "gui-pills__pill--clickable": r
-    })}
-        data-key=${e.key}
-        data-index=${t}
-        data-in-dropdown=${i}
-        tabindex=${this.tabbable && !this.disabled && !this.readOnly ? 0 : -1}
-        ?disabled=${this.disabled || this.readOnly}
-        aria-label=${e.ariaLabel ?? e.label}
-        aria-description=${this.removable && !this.disabled && !this.readOnly ? this.removeAriaLabel : d}
-        @click=${(n) => this.onPillClick(n, e)}
-        @focus=${this.handlePillFocus}
-        @keydown=${(n) => this.onPillKeydown(n, e, t)}
-      >
-        <span class="gui-pills__pill-text">${e.label}</span>
-        ${this.removable ? this.renderRemoveButton(e) : d}
-      </button>
-    `;
-  }
-  renderRemoveButton(e) {
-    return a`
-      <span
-        class="gui-pills__pill-remove"
-        aria-hidden="true"
-        @mousedown=${(t) => {
-      t.stopPropagation(), t.preventDefault();
-    }}
-        @click=${(t) => {
-      t.stopPropagation(), this.emitRemove(e.key, this.items.indexOf(e));
-    }}
-      >
-        ${this.removeIcon ? a`<span
-              class=${`gui-widget-icon ${this.removeIcon}`}
-              data-icon=${this.removeIcon}
-              aria-hidden="true"
-            ></span>` : a`<svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 256 256"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
-              ></path>
-            </svg>`}
-      </span>
-    `;
-  }
-  onPillClick(e, t) {
-    !this.clickable || this.disabled || this.readOnly || (e.stopPropagation(), this.dispatchEvent(
-      new CustomEvent("pillclick", {
-        detail: { key: t.key },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  onPillKeydown(e, t, i) {
-    if (this.disabled || this.readOnly) {
-      this.emitKeydown(t.key, e);
-      return;
-    }
-    if (this.removable && (e.key === "Delete" || e.key === "Backspace")) {
-      e.preventDefault(), e.stopPropagation(), this.emitRemove(t.key, i);
-      return;
-    }
-    if ((e.key === "Enter" || e.key === " ") && this.clickable) {
-      e.preventDefault(), this.dispatchEvent(
-        new CustomEvent("pillclick", {
-          detail: { key: t.key },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-      return;
-    }
-    const r = this._showDropdown, n = r ? "ArrowUp" : "ArrowLeft", p = r ? "ArrowDown" : "ArrowRight";
-    if (e.key === n) {
-      i > 0 ? (e.preventDefault(), this.focusPillAt(i - 1)) : this.emitKeydown(t.key, e);
-      return;
-    }
-    if (e.key === p) {
-      i < this.items.length - 1 ? (e.preventDefault(), this.focusPillAt(i + 1)) : this.emitKeydown(t.key, e);
-      return;
-    }
-    if (e.key === "Home") {
-      e.preventDefault(), this.focusPillAt(0);
-      return;
-    }
-    if (e.key === "End") {
-      e.preventDefault(), this.focusPillAt(this.items.length - 1);
-      return;
-    }
-    if (e.key === "Escape" && r) {
-      e.preventDefault(), e.stopPropagation(), this.closeDropdown();
-      return;
-    }
-    this.emitKeydown(t.key, e);
-  }
-  emitRemove(e, t) {
-    this._pendingFocusIndex = t, this.dispatchEvent(
-      new CustomEvent("pillremove", {
-        detail: { key: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  emitKeydown(e, t) {
-    this.dispatchEvent(
-      new CustomEvent("pillkeydown", {
-        detail: { key: e, event: t },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  // ─── Focus ───────────────────────────────────────────────────────────────
-  /**
-   * Programmatically focus the pill at the given index. In dropdown mode,
-   * focuses the corresponding pill in the dropdown overlay; otherwise in the
-   * strip. Useful for hosts that want to "enter" the pill list from outside
-   * (e.g. tags' ArrowLeft from the input).
-   */
-  focusPillAt(e) {
-    requestAnimationFrame(() => {
-      const t = this._showDropdown ? ".gui-pills__dropdown .gui-pills__pill" : ".gui-pills__strip .gui-pills__pill", i = this.querySelectorAll(t);
-      if (i.length === 0) return;
-      const r = Math.max(0, Math.min(e, i.length - 1));
-      i[r].focus();
-    });
-  }
-  /** Open the dropdown and focus its first pill. No-op if `bubble` is false. */
-  openDropdown() {
-    !this.bubble || this.disabled || this.readOnly || this._showDropdown || (this._showDropdown = !0, this.dispatchEvent(
-      new CustomEvent("dropdowntoggle", {
-        detail: { open: !0 },
-        bubbles: !0,
-        composed: !0
-      })
-    ), requestAnimationFrame(() => {
-      this.addOutsideListeners(), this.querySelector(".gui-pills__dropdown .gui-pills__pill")?.focus();
-    }));
-  }
-  closeDropdown() {
-    this._showDropdown && (this._showDropdown = !1, this.removeOutsideListeners(), this.dispatchEvent(
-      new CustomEvent("dropdowntoggle", {
-        detail: { open: !1 },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  addOutsideListeners() {
-    document.addEventListener("pointerdown", this.handleOutsideInteraction), document.addEventListener("focusin", this.handleOutsideInteraction);
-  }
-  removeOutsideListeners() {
-    document.removeEventListener("pointerdown", this.handleOutsideInteraction), document.removeEventListener("focusin", this.handleOutsideInteraction);
-  }
-  // ─── Observers ───────────────────────────────────────────────────────────
-  setupObservers() {
-    const e = this.querySelector(".gui-sentinel__start"), t = this.querySelector(".gui-sentinel__end");
-    e && !this.startObserver && (this.startObserver = v(
-      e,
-      (i) => this._isStartVisible = i
-    )), t && !this.endObserver && (this.endObserver = v(
-      t,
-      (i) => this._isEndVisible = i
-    )), !e && this.startObserver && (this.startObserver.disconnect(), this.startObserver = void 0, this._isStartVisible = !0), !t && this.endObserver && (this.endObserver.disconnect(), this.endObserver = void 0, this._isEndVisible = !0);
-  }
-  disconnectObservers() {
-    this.startObserver?.disconnect(), this.endObserver?.disconnect(), this.startObserver = void 0, this.endObserver = void 0;
-  }
-};
-o([
-  l({ type: String })
-], s.prototype, "uid", 2);
-o([
-  l({ type: Array })
-], s.prototype, "items", 2);
-o([
-  l({ type: Boolean })
-], s.prototype, "clickable", 2);
-o([
-  l({ type: Boolean })
-], s.prototype, "removable", 2);
-o([
-  l({ type: Boolean })
-], s.prototype, "bubble", 2);
-o([
-  l({ type: Boolean })
-], s.prototype, "tabbable", 2);
-o([
-  l({ type: Boolean })
-], s.prototype, "disabled", 2);
-o([
-  l({ type: Boolean, attribute: "readonly" })
-], s.prototype, "readOnly", 2);
-o([
-  l({ type: String, attribute: "remove-aria-label" })
-], s.prototype, "removeAriaLabel", 2);
-o([
-  l({ type: String, attribute: "remove-icon" })
-], s.prototype, "removeIcon", 2);
-o([
-  l({ type: String, attribute: "compact-aria-label" })
-], s.prototype, "compactAriaLabel", 2);
-o([
-  l({ type: String, attribute: "toolbar-aria-label" })
-], s.prototype, "toolbarAriaLabel", 2);
-o([
-  u()
-], s.prototype, "_isStartVisible", 2);
-o([
-  u()
-], s.prototype, "_isEndVisible", 2);
-o([
-  u()
-], s.prototype, "_showDropdown", 2);
-s = o([
-  w("gui-pills")
-], s);
-typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", s);