@golemui/gui-lit 0.14.0 → 0.15.0

package/lib/components/range-date-picker.element.d.ts

@@ -12,8 +12,10 @@ export declare class RangeDatePickerElement extends LitElement implements WithWi
     isCalendarOpen: boolean;
     focusDate: string | undefined;
     subscriptions: Subscription[];
+    private _ignoreNextFocusOut;
     onFocusOut: (event: FocusEvent) => void;
     onDocumentClick: (event: MouseEvent) => void;
+    onDropdownToggle: (event: Event) => void;
     createRenderRoot(): this;
     updated(changedProperties: any): void;
     connectedCallback(): void;
@@ -26,5 +28,6 @@ export declare class RangeDatePickerElement extends LitElement implements WithWi
     toggleCalendar(event: Event): void;
     openCalendar(): void;
     closeCalendar(): void;
+    private closePillsDropdown;
     disconnectedCallback(): void;
 }

package/lib/components/tags.element.d.ts

@@ -0,0 +1,17 @@
+import { InputWidget, WithWidget } from '@golemui/core';
+import { InputWidgetAdapter, LitFormContext } from '@golemui/lit';
+import { TagsProps } from '@golemui/gui-shared';
+import { LitElement } from 'lit';
+import { Subscription } from 'rxjs';
+export declare class TagsElement extends LitElement implements WithWidget {
+    widget: InputWidget<string[]>;
+    formContext: LitFormContext<any>;
+    adapter: InputWidgetAdapter<string[], TagsProps>;
+    subscriptions: Subscription[];
+    createRenderRoot(): this;
+    updated(changedProperties: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    valueChanged(event: CustomEvent): void;
+    disconnectedCallback(): void;
+}

package/{markdown.element-CT1JOOM3.js → markdown.element-1IF3G5KX.js}

@@ -62,6 +62,7 @@ let n = class extends H {
       maxLength: this.maxLength,
       dependencies: this.dependencies
     }, e = {
+      "gui-widget-input": !0,
       "gui-markdown--icon": !1
     };
     let i = u``;

package/{number.element-HaXEg_7U.js → number.element-zgd4L5hn.js}

@@ -2,8 +2,8 @@ import { InputWidgetAdapter as y, formContext as v, inputContext as $ } from "@g
 import "@golemui/gui-shared";
 import { LitElement as m, nothing as n, html as c } from "lit";
 import { property as s, customElement as b } from "lit/decorators.js";
-import { G as f, b as g, c as x } from "./templates-Dk1jxLwS.js";
-import { styleMap as w } from "lit-html/directives/style-map.js";
+import { G as g, b as f, c as w } from "./templates-Dk1jxLwS.js";
+import { styleMap as x } from "lit-html/directives/style-map.js";
 import { consume as D, provide as C } from "@lit/context";
 import "rxjs";
 var N = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, i, e, o) => {
@@ -13,7 +13,7 @@ var N = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, i, e
 };
 let a = class extends m {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.step = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimum = void 0, this.maximum = void 0, this.autoGrow = !1, this.ariaController = new f(this, {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.step = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimum = void 0, this.maximum = void 0, this.autoGrow = !1, this.ariaController = new g(this, {
       getTargets: () => this.querySelectorAll(`input[id="${this.uid}"]`),
       getState: () => ({
         uid: this.uid,
@@ -60,7 +60,7 @@ let a = class extends m {
       autocomplete: this.autocomplete
     };
     return c`
-      ${g(this.uid, e)}
+      ${f(this.uid, e)}
 
       <div class="gui-widget">
         <button
@@ -78,7 +78,8 @@ let a = class extends m {
           inputmode="decimal"
           id=${this.uid}
           data-cy=${`${this.uid}_number`}
-          style=${w(i)}
+          class="gui-widget-input"
+          style=${x(i)}
           value=${this.value}
           ?required=${this.required}
           ?disabled=${this.disabled}
@@ -102,7 +103,7 @@ let a = class extends m {
         </button>
       </div>
 
-      ${x(this.uid, e)}
+      ${w(this.uid, e)}
     `;
   }
   keyDown(t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/gui-lit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "main": "./index.umd.cjs",
   "module": "./index.js",
@@ -21,11 +21,11 @@
     "*.md"
   ],
   "peerDependencies": {
-    "@golemui/lit": "0.14.0",
-    "@golemui/core": "0.14.0",
-    "@golemui/gui-components": "0.14.0",
-    "@golemui/gui-shared": "0.14.0",
-    "@golemui/gui-validators": "0.14.0",
+    "@golemui/lit": "0.15.0",
+    "@golemui/core": "0.15.0",
+    "@golemui/gui-components": "0.15.0",
+    "@golemui/gui-shared": "0.15.0",
+    "@golemui/gui-validators": "0.15.0",
     "@lit/context": "^1.1.6",
     "lit-html": "^3.3.1",
     "lit": "^3.3.1",

package/{password.element-B4-0SCe4.js → password.element-BT65mDsp.js}

@@ -53,6 +53,7 @@ let e = class extends w {
       showPasswordLabel: this.showPasswordLabel,
       hidePasswordLabel: this.hidePasswordLabel
     }, a = f("password", t), i = {
+      "gui-widget-input": !0,
       "gui-password--icon": !!this.icon
     };
     return u`

package/pills-D0yyi-op.js

@@ -0,0 +1,323 @@
+import { LitElement as m, nothing as p, html as d } 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, s) => {
+  for (var n = s > 1 ? void 0 : s ? _(t, i) : t, a = e.length - 1, h; a >= 0; a--)
+    (h = e[a]) && (n = (s ? h(t, i, n) : h(n)) || n);
+  return s && n && y(t, i, n), n;
+};
+let r = class extends m {
+  constructor() {
+    super(...arguments), this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", 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"), s = e.composedPath()[0];
+      !t?.contains(s) && !i?.contains(s) && 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 s = Math.max(0, Math.min(t, i - 1));
+      this.focusPillAt(s);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.disconnectObservers(), this.removeOutsideListeners();
+  }
+  render() {
+    const e = this.items.length;
+    return e === 0 ? p : d`
+      ${this.renderStrip()}
+      ${this.bubble ? this.renderCompact(e) : p}
+      ${this.bubble && this._showDropdown ? this.renderDropdown() : p}
+    `;
+  }
+  renderStrip() {
+    return d`
+      <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="list" 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>
+    `;
+  }
+  renderCompact(e) {
+    return d`
+      <div class="gui-pills__compact">
+        <button
+          type="button"
+          class="gui-pills__count"
+          aria-label=${this.compactAriaLabel ?? `${e} items`}
+          aria-expanded=${this._showDropdown}
+          ?disabled=${this.disabled || this.readOnly}
+          @click=${(t) => {
+      t.stopPropagation(), this.toggleDropdown();
+    }}
+        >
+          ${e}
+        </button>
+      </div>
+    `;
+  }
+  renderDropdown() {
+    return d`
+      <div class="gui-pills__dropdown" role="list">
+        ${b(
+      this.items,
+      (e) => `dd-${e.key}`,
+      (e, t) => this.renderPill(e, t, !0)
+    )}
+      </div>
+    `;
+  }
+  renderPill(e, t, i) {
+    const s = e.ariaLabel ?? `${this.removeAriaLabel}: ${e.label}`, n = this.clickable && !this.disabled && !this.readOnly;
+    return d`
+      <div
+        class=${c({
+      "gui-pills__pill": !0,
+      "gui-pills__pill--clickable": n
+    })}
+        role="listitem"
+        data-key=${e.key}
+        data-index=${t}
+        data-in-dropdown=${i}
+        tabindex=${this.tabbable && !this.disabled && !this.readOnly ? 0 : -1}
+        aria-label=${s}
+        @click=${(a) => this.onPillClick(a, e)}
+        @focus=${this.handlePillFocus}
+        @keydown=${(a) => this.onPillKeydown(a, e, t)}
+      >
+        <span class="gui-pills__pill-text">${e.label}</span>
+        ${this.removable ? this.renderRemoveButton(e) : p}
+      </div>
+    `;
+  }
+  renderRemoveButton(e) {
+    return d`
+      <button
+        type="button"
+        class="gui-pills__pill-remove"
+        tabindex="-1"
+        aria-hidden="true"
+        ?disabled=${this.disabled || this.readOnly}
+        @click=${(t) => {
+      t.stopPropagation(), this.emitRemove(e.key, this.items.indexOf(e));
+    }}
+      >
+        ${this.removeIcon ? d`<span class=${`gui-widget-icon ${this.removeIcon}`} data-icon=${this.removeIcon}></span>` : d`<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>`}
+      </button>
+    `;
+  }
+  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 s = this._showDropdown, n = s ? "ArrowUp" : "ArrowLeft", a = s ? "ArrowDown" : "ArrowRight";
+    if (e.key === n) {
+      i > 0 ? (e.preventDefault(), this.focusPillAt(i - 1)) : this.emitKeydown(t.key, e);
+      return;
+    }
+    if (e.key === a) {
+      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" && s) {
+      e.preventDefault(), 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 s = Math.max(0, Math.min(e, i.length - 1));
+      i[s].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: Array })
+], r.prototype, "items", 2);
+o([
+  l({ type: Boolean })
+], r.prototype, "clickable", 2);
+o([
+  l({ type: Boolean })
+], r.prototype, "removable", 2);
+o([
+  l({ type: Boolean })
+], r.prototype, "bubble", 2);
+o([
+  l({ type: Boolean })
+], r.prototype, "tabbable", 2);
+o([
+  l({ type: Boolean })
+], r.prototype, "disabled", 2);
+o([
+  l({ type: Boolean, attribute: "readonly" })
+], r.prototype, "readOnly", 2);
+o([
+  l({ type: String, attribute: "remove-aria-label" })
+], r.prototype, "removeAriaLabel", 2);
+o([
+  l({ type: String, attribute: "remove-icon" })
+], r.prototype, "removeIcon", 2);
+o([
+  l({ type: String, attribute: "compact-aria-label" })
+], r.prototype, "compactAriaLabel", 2);
+o([
+  u()
+], r.prototype, "_isStartVisible", 2);
+o([
+  u()
+], r.prototype, "_isEndVisible", 2);
+o([
+  u()
+], r.prototype, "_showDropdown", 2);
+r = o([
+  w("gui-pills")
+], r);
+typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", r);