@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/web/search-palette/viking-search-palette-wc.ts

@@ -1,495 +0,0 @@
-import {
-  attachShadowStyles,
-  readBoolAttr,
-  closeModalDialog,
-  showModalDialog,
-} from "../core/base";
-import {
-  defineCustomElement,
-  defineCustomElementAlias,
-  escapeHtml,
-  HTMLElementBase,
-  modKeyLabel,
-  vikingWcUid,
-} from "../core/dom";
-import { renderInlineIcon } from "../core/icons-inline";
-import { VIKING_SEARCH_PALETTE_STYLES } from "../core/styles";
-import type { VikingSearchPaletteItem } from "../core/types";
-
-export type { VikingSearchPaletteItem };
-
-const parseItems = (el: HTMLElement): VikingSearchPaletteItem[] => {
-  const raw = el.getAttribute("items");
-  if (!raw) {
-    return [];
-  }
-  try {
-    const parsed = JSON.parse(raw) as VikingSearchPaletteItem[];
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-};
-
-const matchesQuery = (
-  item: VikingSearchPaletteItem,
-  query: string,
-): boolean => {
-  const haystack = [
-    item.title,
-    item.snippet ?? "",
-    item.group ?? "",
-    item.href,
-    ...(item.keywords ?? []),
-  ]
-    .join(" ")
-    .toLowerCase();
-  return haystack.includes(query);
-};
-
-const filterItems = (
-  items: VikingSearchPaletteItem[],
-  query: string,
-): VikingSearchPaletteItem[] => {
-  const q = query.trim().toLowerCase();
-  if (!q) {
-    return items;
-  }
-  return items.filter((item) => matchesQuery(item, q));
-};
-
-const groupItems = (
-  items: VikingSearchPaletteItem[],
-): { group: string | null; items: VikingSearchPaletteItem[] }[] => {
-  const groups = new Map<string | null, VikingSearchPaletteItem[]>();
-  items.forEach((item) => {
-    const key = item.group ?? null;
-    const bucket = groups.get(key) ?? [];
-    bucket.push(item);
-    groups.set(key, bucket);
-  });
-  return Array.from(groups.entries()).map(([group, grouped]) => ({
-    group,
-    items: grouped,
-  }));
-};
-
-/**
- * Framework-agnostic command palette / search overlay Web Component.
- * Tag: `viking-command-palette`
- * Aliases: `viking-search-palette`, `viking-search-palette-wc`
- *
- * @attr open - When present, shows the palette
- * @attr global-shortcut - Bind ⌘K / Ctrl+K to open
- * @attr placeholder - Search input placeholder
- * @attr items - JSON array of `{ title, href, snippet?, group? }`
- *
- * @method openPalette() - Programmatically open
- * @method closePalette() - Programmatically close
- *
- * @event viking-close - Palette closed
- * @event viking-query - `{ detail: { query: string } }` on input
- * @event viking-select - `{ detail: { item } }` when a result is activated
- *
- * @example
- * <viking-command-palette
- *   global-shortcut
- *   items='[{"title":"Components","href":"/components","group":"Docs"}]'
- * ></viking-command-palette>
- */
-export class VikingSearchPaletteWc extends HTMLElementBase {
-  static readonly tag = "viking-command-palette";
-  static readonly searchTag = "viking-search-palette";
-  static readonly legacyTag = "viking-search-palette-wc";
-
-  static get observedAttributes(): string[] {
-    return ["open", "placeholder", "items", "global-shortcut"];
-  }
-
-  private readonly shadow: ShadowRoot;
-  private dialogEl: HTMLDialogElement | null = null;
-  private inputEl: HTMLInputElement | null = null;
-  private resultsEl: HTMLDivElement | null = null;
-  private globalKeyHandler: ((event: KeyboardEvent) => void) | null = null;
-  private readonly resultsId = vikingWcUid("viking-search-results");
-  private readonly inputId = vikingWcUid("viking-search-input");
-  private query = "";
-  private activeIndex = 0;
-  private flatResults: VikingSearchPaletteItem[] = [];
-
-  constructor() {
-    super();
-    this.shadow = this.attachShadow({ mode: "open" });
-    attachShadowStyles(this.shadow, VIKING_SEARCH_PALETTE_STYLES);
-  }
-
-  connectedCallback(): void {
-    this.render();
-    this.removeAttribute("open");
-    this.syncOpen();
-    this.bindGlobalShortcut();
-    this.dialogEl?.addEventListener("close", this.onClose);
-    this.dialogEl?.addEventListener("click", this.onBackdropClick);
-    this.inputEl?.addEventListener("input", this.onInput);
-    this.inputEl?.addEventListener("keydown", this.onInputKeydown);
-  }
-
-  disconnectedCallback(): void {
-    this.dialogEl?.removeEventListener("close", this.onClose);
-    this.dialogEl?.removeEventListener("click", this.onBackdropClick);
-    this.inputEl?.removeEventListener("input", this.onInput);
-    this.inputEl?.removeEventListener("keydown", this.onInputKeydown);
-    this.unbindGlobalShortcut();
-  }
-
-  attributeChangedCallback(name: string): void {
-    if (!this.isConnected) {
-      return;
-    }
-    if (name === "open") {
-      this.syncOpen();
-    }
-    if (name === "global-shortcut") {
-      this.unbindGlobalShortcut();
-      this.bindGlobalShortcut();
-    }
-    if (name === "items" || name === "placeholder") {
-      if (name === "placeholder" && this.inputEl) {
-        const placeholder =
-          this.getAttribute("placeholder") ??
-          "Search documentation, dashboard, API…";
-        this.inputEl.placeholder = placeholder;
-        this.inputEl.setAttribute("aria-label", placeholder);
-      } else {
-        this.renderResults();
-      }
-    }
-  }
-
-  /** Opens the command palette. */
-  openPalette(): void {
-    this.setAttribute("open", "");
-    this.syncOpen();
-  }
-
-  /** Closes the command palette. */
-  closePalette(): void {
-    this.removeAttribute("open");
-    closeModalDialog(this.dialogEl);
-  }
-
-  /** Sets the query string and re-renders filtered results. */
-  search(query: string): void {
-    this.query = query;
-    if (this.inputEl) {
-      this.inputEl.value = query;
-    }
-    this.activeIndex = 0;
-    this.renderResults();
-    this.dispatchEvent(
-      new CustomEvent("viking-query", {
-        bubbles: true,
-        composed: true,
-        detail: { query: this.query },
-      }),
-    );
-  }
-
-  private readonly onClose = (): void => {
-    this.removeAttribute("open");
-    this.query = "";
-    this.activeIndex = 0;
-    if (this.inputEl) {
-      this.inputEl.value = "";
-    }
-    this.dispatchEvent(
-      new CustomEvent("viking-close", { bubbles: true, composed: true }),
-    );
-  };
-
-  private readonly onBackdropClick = (event: MouseEvent): void => {
-    if (event.target === this.dialogEl) {
-      this.closePalette();
-    }
-  };
-
-  private readonly onInput = (event: Event): void => {
-    this.query =
-      (event.target as HTMLInputElement).value ?? this.inputEl?.value ?? "";
-    this.activeIndex = 0;
-    this.renderResults();
-    this.dispatchEvent(
-      new CustomEvent("viking-query", {
-        bubbles: true,
-        composed: true,
-        detail: { query: this.query },
-      }),
-    );
-  };
-
-  private readonly onInputKeydown = (event: KeyboardEvent): void => {
-    if (this.flatResults.length === 0) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        this.closePalette();
-      }
-      return;
-    }
-
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      this.activeIndex = Math.min(
-        this.flatResults.length - 1,
-        this.activeIndex + 1,
-      );
-      this.renderResults();
-      this.scrollActiveIntoView();
-      return;
-    }
-
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      this.activeIndex = Math.max(0, this.activeIndex - 1);
-      this.renderResults();
-      this.scrollActiveIntoView();
-      return;
-    }
-
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const item = this.flatResults[this.activeIndex];
-      if (item) {
-        this.activateItem(item);
-      }
-    }
-  };
-
-  private bindGlobalShortcut(): void {
-    if (!readBoolAttr(this, "global-shortcut")) {
-      return;
-    }
-    this.globalKeyHandler = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        if (this.hasAttribute("open")) {
-          this.closePalette();
-        } else {
-          this.openPalette();
-        }
-      }
-    };
-    document.addEventListener("keydown", this.globalKeyHandler);
-  }
-
-  private unbindGlobalShortcut(): void {
-    if (this.globalKeyHandler) {
-      document.removeEventListener("keydown", this.globalKeyHandler);
-      this.globalKeyHandler = null;
-    }
-  }
-
-  private syncOpen(): void {
-    if (!this.dialogEl) {
-      return;
-    }
-    const shouldOpen = this.hasAttribute("open");
-    if (shouldOpen && !this.dialogEl.open) {
-      this.dialogEl.removeAttribute("aria-hidden");
-      showModalDialog(this.dialogEl);
-      this.activeIndex = 0;
-      this.renderResults();
-      queueMicrotask(() => this.inputEl?.focus());
-    } else if (!shouldOpen && this.dialogEl.open) {
-      closeModalDialog(this.dialogEl);
-      this.dialogEl.setAttribute("aria-hidden", "true");
-    } else if (!shouldOpen) {
-      this.dialogEl.setAttribute("aria-hidden", "true");
-    }
-  }
-
-  private scrollActiveIntoView(): void {
-    const active = this.resultsEl?.querySelector(
-      ".viking-search-result.is-selected",
-    );
-    active?.scrollIntoView({ block: "nearest" });
-  }
-
-  private activateItem(item: VikingSearchPaletteItem): void {
-    this.dispatchEvent(
-      new CustomEvent("viking-select", {
-        bubbles: true,
-        composed: true,
-        detail: { item },
-      }),
-    );
-    this.closePalette();
-
-    if (item.action === "cookie-settings") {
-      const widgets = (
-        globalThis as { DemlWidgets?: { openCookieSettings?: () => void } }
-      ).DemlWidgets;
-      widgets?.openCookieSettings?.();
-      return;
-    }
-
-    if (item.action === "bug-report") {
-      const widgets = (
-        globalThis as { DemlWidgets?: { openBugReport?: () => void } }
-      ).DemlWidgets;
-      if (widgets?.openBugReport) {
-        widgets.openBugReport();
-        return;
-      }
-    }
-
-    if (item.href && item.href !== "#") {
-      window.location.assign(item.href);
-    }
-  }
-
-  private renderResults(): void {
-    if (!this.resultsEl) {
-      return;
-    }
-
-    const items = parseItems(this);
-    const q = this.query.trim().toLowerCase();
-    const filtered = filterItems(items, q);
-    this.flatResults = filtered;
-
-    if (filtered.length === 0) {
-      const q = this.query.trim();
-      this.resultsEl.innerHTML = `<p class="viking-search-empty" role="status">${q ? "No results found" : "Start typing to search…"}</p>`;
-      this.inputEl?.removeAttribute("aria-activedescendant");
-      return;
-    }
-
-    if (this.activeIndex >= filtered.length) {
-      this.activeIndex = filtered.length - 1;
-    }
-
-    let resultIndex = 0;
-    const grouped = groupItems(filtered);
-
-    const markup = grouped
-      .map(({ group, items: groupItemsList }) => {
-        const groupLabel = group
-          ? `<p class="viking-search-group-label" role="presentation">${escapeHtml(group)}</p>`
-          : "";
-        const rows = groupItemsList
-          .map((item) => {
-            const id = `${this.resultsId}-result-${resultIndex}`;
-            const selected = resultIndex === this.activeIndex;
-            resultIndex += 1;
-            return `
-              <a
-                id="${id}"
-                class="viking-search-result${selected ? " is-selected" : ""}"
-                role="option"
-                aria-selected="${selected}"
-                href="${escapeHtml(item.href)}"
-                part="result"
-                data-index="${resultIndex - 1}"
-              >
-                <div>
-                  <div class="viking-search-result-title">${escapeHtml(item.title)}</div>
-                  ${item.snippet ? `<div class="viking-search-result-snippet">${escapeHtml(item.snippet)}</div>` : ""}
-                </div>
-              </a>`;
-          })
-          .join("");
-        return `${groupLabel}${rows}`;
-      })
-      .join("");
-
-    this.resultsEl.innerHTML = `<div class="viking-search-results" id="${this.resultsId}" role="listbox" aria-label="Search results">${markup}</div>`;
-
-    const activeId = `${this.resultsId}-result-${this.activeIndex}`;
-    this.inputEl?.setAttribute("aria-activedescendant", activeId);
-    this.inputEl?.setAttribute("role", "combobox");
-    this.inputEl?.setAttribute("aria-expanded", "true");
-    this.inputEl?.setAttribute("aria-controls", this.resultsId);
-
-    this.resultsEl.querySelectorAll(".viking-search-result").forEach((node) => {
-      node.addEventListener("click", (event) => {
-        event.preventDefault();
-        const index = Number((node as HTMLElement).dataset["index"] ?? 0);
-        const item = this.flatResults[index];
-        if (item) {
-          this.activateItem(item);
-        }
-      });
-      node.addEventListener("mouseenter", () => {
-        const index = Number((node as HTMLElement).dataset["index"] ?? 0);
-        this.activeIndex = index;
-        this.renderResults();
-      });
-    });
-  }
-
-  private render(): void {
-    const placeholder =
-      this.getAttribute("placeholder") ??
-      "Search documentation, dashboard, API…";
-    const mod = modKeyLabel();
-
-    this.shadow.innerHTML = `
-      <dialog class="viking-search-palette-backdrop" aria-label="Search" aria-hidden="true">
-        <div class="viking-search-palette" part="panel" role="document">
-          <div class="viking-search-palette-header" part="header">
-            <span class="viking-search-palette-icon" aria-hidden="true">${renderInlineIcon("search", 24)}</span>
-            <input
-              id="${this.inputId}"
-              type="search"
-              class="viking-search-palette-input"
-              part="input"
-              placeholder="${escapeHtml(placeholder)}"
-              aria-label="${escapeHtml(placeholder)}"
-              aria-autocomplete="list"
-              autocomplete="off"
-              spellcheck="false"
-            />
-            <button type="button" class="viking-search-palette-close" part="close" aria-label="Close search">${renderInlineIcon("x", 20)}</button>
-          </div>
-          <div class="viking-search-palette-body" part="body">
-            <slot></slot>
-            <div class="viking-search-results-host"></div>
-          </div>
-          <footer class="viking-search-palette-footer" part="footer">
-            <span class="viking-kbd">${mod}</span><span class="viking-kbd">K</span> toggle ·
-            <span class="viking-kbd">↑</span><span class="viking-kbd">↓</span> navigate ·
-            <span class="viking-kbd">Enter</span> open ·
-            <span class="viking-kbd">Esc</span> close
-          </footer>
-        </div>
-      </dialog>
-    `;
-
-    this.dialogEl = this.shadow.querySelector("dialog");
-    this.inputEl = this.shadow.querySelector("input");
-    this.resultsEl = this.shadow.querySelector(".viking-search-results-host");
-
-    this.shadow
-      .querySelector(".viking-search-palette-close")
-      ?.addEventListener("click", () => this.closePalette());
-
-    this.dialogEl?.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        this.closePalette();
-      }
-    });
-  }
-}
-
-export const registerVikingSearchPaletteWc = (): void => {
-  defineCustomElement(VikingSearchPaletteWc.tag, VikingSearchPaletteWc);
-  defineCustomElementAlias(
-    VikingSearchPaletteWc.searchTag,
-    VikingSearchPaletteWc,
-  );
-  defineCustomElementAlias(
-    VikingSearchPaletteWc.legacyTag,
-    VikingSearchPaletteWc,
-  );
-};

package/src/web/select/viking-select-wc.ts

@@ -1,218 +0,0 @@
-import {
-  attachElementInternals,
-  attachShadowStyles,
-  setFormValue,
-} from "../core/base";
-import {
-  defineCustomElement,
-  defineCustomElementAlias,
-  escapeHtml,
-  HTMLElementBase,
-  vikingWcUid,
-} from "../core/dom";
-import { VIKING_SELECT_STYLES } from "../core/styles";
-
-/**
- * Framework-agnostic native select Web Component with form association.
- * Tag: `viking-select` (legacy alias: `viking-select-wc`)
- *
- * Place `<option>` elements as light DOM children; they are mirrored into the shadow select.
- *
- * @attr label - Visible field label
- * @attr name - Form field name (participates in form submission via ElementInternals)
- * @attr value - Selected option value
- * @attr placeholder - Placeholder option text when no value is selected
- * @attr description - Helper text below the control
- * @attr error - Validation message; sets aria-invalid
- * @attr width - full | half (default: half)
- * @attr disabled - Disables the control
- * @attr required - Marks field as required
- *
- * @event viking-change - `{ detail: { value: string } }`
- *
- * @example
- * <viking-select-wc label="Retention" name="retention" value="30d">
- *   <option value="7d">7 days</option>
- *   <option value="30d">30 days</option>
- * </viking-select-wc>
- */
-export class VikingSelectWc extends HTMLElementBase {
-  static readonly formAssociated = true;
-  static readonly tag = "viking-select";
-  static readonly legacyTag = "viking-select-wc";
-
-  static get observedAttributes(): string[] {
-    return [
-      "label",
-      "name",
-      "value",
-      "placeholder",
-      "description",
-      "error",
-      "width",
-      "disabled",
-      "required",
-    ];
-  }
-
-  private readonly shadow: ShadowRoot;
-  private readonly internals: ElementInternals | null;
-  private selectEl: HTMLSelectElement | null = null;
-  private optionObserver: MutationObserver | null = null;
-  private readonly controlId = vikingWcUid("viking-select");
-
-  constructor() {
-    super();
-    this.shadow = this.attachShadow({ mode: "open" });
-    this.internals = attachElementInternals(this);
-    attachShadowStyles(this.shadow, VIKING_SELECT_STYLES);
-  }
-
-  connectedCallback(): void {
-    this.render();
-    this.syncOptions();
-    this.observeOptions();
-    this.selectEl?.addEventListener("change", this.onChange);
-  }
-
-  disconnectedCallback(): void {
-    this.selectEl?.removeEventListener("change", this.onChange);
-    this.optionObserver?.disconnect();
-    this.optionObserver = null;
-  }
-
-  attributeChangedCallback(name: string): void {
-    if (!this.isConnected) {
-      return;
-    }
-    if (name === "value" && this.selectEl) {
-      this.selectEl.value = this.getAttribute("value") ?? "";
-      this.syncFormValue();
-      return;
-    }
-    if (name === "error" || name === "description" || name === "label") {
-      this.render();
-      this.syncOptions();
-      return;
-    }
-    this.render();
-    this.syncOptions();
-  }
-
-  get value(): string {
-    return this.selectEl?.value ?? this.getAttribute("value") ?? "";
-  }
-
-  set value(next: string) {
-    this.setAttribute("value", next);
-    if (this.selectEl) {
-      this.selectEl.value = next;
-    }
-    this.syncFormValue();
-  }
-
-  private readonly onChange = (): void => {
-    const value = this.selectEl?.value ?? "";
-    this.setAttribute("value", value);
-    this.syncFormValue();
-    this.dispatchEvent(
-      new CustomEvent("viking-change", {
-        bubbles: true,
-        composed: true,
-        detail: { value },
-      }),
-    );
-  };
-
-  private syncFormValue(): void {
-    setFormValue(this.internals, this.value);
-  }
-
-  private observeOptions(): void {
-    this.optionObserver?.disconnect();
-    this.optionObserver = new MutationObserver(() => this.syncOptions());
-    this.optionObserver.observe(this, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
-  }
-
-  private render(): void {
-    const label = this.getAttribute("label") ?? "";
-    const name = this.getAttribute("name") ?? "";
-    const disabled = this.hasAttribute("disabled");
-    const required = this.hasAttribute("required");
-    const error = this.getAttribute("error") ?? "";
-    const description = this.getAttribute("description") ?? "";
-    const describedBy = [
-      description && `${this.controlId}-desc`,
-      error && `${this.controlId}-error`,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    this.shadow.innerHTML = `
-      <div class="viking-field" part="field">
-        ${label ? `<label class="viking-field-label" part="label" for="${this.controlId}">${escapeHtml(label)}</label>` : ""}
-        <select
-          id="${this.controlId}"
-          class="viking-select-native"
-          part="control"
-          ${name ? `name="${escapeHtml(name)}"` : ""}
-          ${disabled ? "disabled" : ""}
-          ${required ? "required" : ""}
-          ${error ? 'aria-invalid="true"' : ""}
-          ${describedBy ? `aria-describedby="${describedBy}"` : ""}
-        ></select>
-        ${description ? `<p id="${this.controlId}-desc" class="viking-field-description" part="description">${escapeHtml(description)}</p>` : ""}
-        ${error ? `<p id="${this.controlId}-error" class="viking-field-error" part="error" role="alert">${escapeHtml(error)}</p>` : ""}
-      </div>
-    `;
-
-    this.selectEl = this.shadow.querySelector("select");
-    const value = this.getAttribute("value");
-    if (this.selectEl && value) {
-      this.selectEl.value = value;
-    }
-    this.syncFormValue();
-  }
-
-  private syncOptions(): void {
-    if (!this.selectEl) {
-      return;
-    }
-
-    const currentValue = this.selectEl.value;
-    this.selectEl.innerHTML = "";
-    const options = this.querySelectorAll("option");
-
-    if (options.length === 0) {
-      const placeholder = this.getAttribute("placeholder") ?? "Select…";
-      const opt = document.createElement("option");
-      opt.value = "";
-      opt.textContent = placeholder;
-      opt.disabled = true;
-      opt.selected = !this.getAttribute("value");
-      this.selectEl.append(opt);
-      return;
-    }
-
-    options.forEach((opt) => {
-      this.selectEl?.append(opt.cloneNode(true));
-    });
-
-    const value = this.getAttribute("value");
-    if (value) {
-      this.selectEl.value = value;
-    } else if (currentValue) {
-      this.selectEl.value = currentValue;
-    }
-    this.syncFormValue();
-  }
-}
-
-export const registerVikingSelectWc = (): void => {
-  defineCustomElement(VikingSelectWc.tag, VikingSelectWc);
-  defineCustomElementAlias(VikingSelectWc.legacyTag, VikingSelectWc);
-};