@nectary/components 5.38.1 → 5.39.0

package/progress-stepper-v2/compact.js

@@ -0,0 +1,330 @@
+import { isProgressStepperItemActive, ATTR_PROGRESS_STEPPER_ITEM_STATUS } from "../progress-stepper-item-v2/utils.js";
+import { subscribeContext } from "../utils/context.js";
+import { getBooleanAttribute, updateBooleanAttribute, getAttribute, createScopedElement, updateAttribute } from "../utils/dom.js";
+import { resolveCompactMenuAndPopAriaLabel, formatCompactTemplate, resolveCompactCounterFormat, resolveCompactTriggerAriaLabel } from "./compact-format.js";
+import { fillProgressStepperStepChipHost } from "./step-chip.js";
+class ProgressStepperCompactController {
+  #$actionMenu;
+  #$compactPop;
+  #$compactTrigger;
+  #$compactLabel;
+  #$compactCounter;
+  #hostAriaLabel = null;
+  #compactCounterFormat = "";
+  #compactTriggerAriaLabelFormat = "";
+  #warnedMissingHostAriaLabel = false;
+  #compactCurrentIndex = -1;
+  constructor(elements) {
+    this.#$actionMenu = elements.actionMenu;
+    this.#$compactPop = elements.pop;
+    this.#$compactTrigger = elements.trigger;
+    this.#$compactLabel = elements.label;
+    this.#$compactCounter = elements.counter;
+  }
+  connect(signal) {
+    subscribeContext(this.#$actionMenu, "visibility", this.#onActionMenuVisibility, signal);
+  }
+  onTriggerClick(usesCompactActionMenu) {
+    if (!usesCompactActionMenu) {
+      return;
+    }
+    const willOpen = !getBooleanAttribute(this.#$compactPop, "open");
+    updateBooleanAttribute(this.#$compactPop, "open", willOpen);
+  }
+  onPopoverClose() {
+    updateBooleanAttribute(this.#$compactPop, "open", false);
+    queueMicrotask(() => this.#syncCompactMenuListboxSelection(false));
+  }
+  sync(params) {
+    const {
+      usesCompactActionMenu,
+      items,
+      hostAriaLabel,
+      compactCounterFormat,
+      compactTriggerAriaLabelFormat,
+      getCheckedItemIndex,
+      getFirstActiveItemIndex,
+      onChange
+    } = params;
+    if (!usesCompactActionMenu) {
+      this.#compactCurrentIndex = -1;
+      updateBooleanAttribute(this.#$compactPop, "open", false);
+      this.#clearCompactStateAttributes(this.#$compactTrigger);
+      this.#clearActionMenuChildren();
+      return;
+    }
+    this.#hostAriaLabel = hostAriaLabel;
+    this.#compactCounterFormat = compactCounterFormat;
+    this.#compactTriggerAriaLabelFormat = compactTriggerAriaLabelFormat;
+    this.#warnMissingHostAriaLabel(hostAriaLabel);
+    if (items.length === 0) {
+      this.#compactCurrentIndex = -1;
+      this.#clearActionMenuChildren();
+      this.#syncCompactTrigger(items, -1);
+      this.#syncCompactMenuAndPopAccessibleName(null, false);
+      return;
+    }
+    const currentIndex = this.#resolveCurrentIndex(items.length, getCheckedItemIndex, getFirstActiveItemIndex);
+    this.#compactCurrentIndex = currentIndex;
+    const formatVars = this.#buildCompactFormatVars(items, currentIndex);
+    this.#syncCompactMenuAndPopAccessibleName(formatVars, true);
+    if (this.#menuOptionsNeedFullRebuild(items)) {
+      this.#clearActionMenuChildren();
+      for (let i = 0; i < items.length; i++) {
+        const opt = this.#createMenuOptionForItem(items[i], onChange);
+        this.#$actionMenu.appendChild(opt);
+        this.#refreshCompactOptionPresentation(opt, items[i], i, i === currentIndex);
+      }
+      this.#syncCompactTrigger(items, currentIndex, formatVars);
+      this.#syncCompactMenuListboxSelection(false);
+      return;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const opt = this.#$actionMenu.children[i];
+      opt.setAttribute("text", getAttribute(item, "text", ""));
+      opt.toggleAttribute("disabled", !isProgressStepperItemActive(item));
+      if (getBooleanAttribute(item, "invalid")) {
+        opt.setAttribute("aria-invalid", "true");
+      } else {
+        opt.removeAttribute("aria-invalid");
+      }
+      this.#refreshCompactOptionPresentation(opt, item, i, i === currentIndex);
+    }
+    this.#syncCompactTrigger(items, currentIndex, formatVars);
+    this.#syncCompactMenuListboxSelection(false);
+  }
+  #onActionMenuVisibility = (e) => {
+    if (e.detail) {
+      queueMicrotask(() => {
+        requestAnimationFrame(() => {
+          this.#syncCompactMenuListboxSelection(true);
+        });
+      });
+      return;
+    }
+    this.#syncCompactMenuListboxSelection(false);
+  };
+  /**
+   * `sinch-action-menu-option` maps `data-selected` to `aria-selected`. When the popover is open,
+   * highlight the first enabled row (listbox entry point). When closed, mark the current value step.
+   */
+  #syncCompactMenuListboxSelection(focusSelectedOption) {
+    if (getBooleanAttribute(this.#$compactPop, "open")) {
+      this.#syncCompactMenuOpenListboxSelection(focusSelectedOption);
+      return;
+    }
+    this.#syncCompactMenuClosedListboxSelection();
+  }
+  #syncCompactMenuOpenListboxSelection(focusSelectedOption) {
+    const count = this.#$actionMenu.childElementCount;
+    if (count === 0) {
+      return;
+    }
+    const selectedIndex = this.#getFirstActiveMenuOptionIndex();
+    if (selectedIndex < 0) {
+      return;
+    }
+    let selectedOption = null;
+    for (let i = 0; i < count; i++) {
+      const opt = this.#$actionMenu.children[i];
+      const isSelected = i === selectedIndex;
+      updateBooleanAttribute(opt, "data-selected", isSelected);
+      if (isSelected) {
+        selectedOption = opt;
+      }
+    }
+    if (focusSelectedOption && selectedOption !== null) {
+      selectedOption.focus();
+    }
+  }
+  #syncCompactMenuClosedListboxSelection() {
+    const count = this.#$actionMenu.childElementCount;
+    if (count === 0 || this.#compactCurrentIndex < 0) {
+      return;
+    }
+    for (let i = 0; i < count; i++) {
+      const opt = this.#$actionMenu.children[i];
+      const isCurrent = i === this.#compactCurrentIndex && !getBooleanAttribute(opt, "disabled");
+      updateBooleanAttribute(opt, "data-selected", isCurrent);
+    }
+  }
+  #getFirstActiveMenuOptionIndex() {
+    const count = this.#$actionMenu.childElementCount;
+    for (let i = 0; i < count; i++) {
+      const opt = this.#$actionMenu.children[i];
+      if (!getBooleanAttribute(opt, "disabled")) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #clearActionMenuChildren() {
+    while (this.#$actionMenu.firstChild !== null) {
+      this.#$actionMenu.removeChild(this.#$actionMenu.firstChild);
+    }
+  }
+  #menuOptionsNeedFullRebuild(items) {
+    if (this.#$actionMenu.childElementCount !== items.length) {
+      return true;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const opt = this.#$actionMenu.children[i];
+      if (opt === void 0) {
+        return true;
+      }
+      if (getAttribute(opt, "data-step-value", "") !== getAttribute(items[i], "value", "")) {
+        return true;
+      }
+    }
+    return false;
+  }
+  #createMenuOptionForItem(item, onChange) {
+    const opt = createScopedElement(this.#$actionMenu, "sinch-action-menu-option");
+    const text = getAttribute(item, "text", "");
+    const value = getAttribute(item, "value", "");
+    opt.setAttribute("text", text);
+    opt.setAttribute("data-step-value", value);
+    opt.toggleAttribute("disabled", !isProgressStepperItemActive(item));
+    if (getBooleanAttribute(item, "invalid")) {
+      opt.setAttribute("aria-invalid", "true");
+    }
+    opt.addEventListener("-click", () => {
+      if (opt.hasAttribute("disabled")) {
+        return;
+      }
+      updateBooleanAttribute(this.#$compactPop, "open", false);
+      onChange(value);
+    });
+    return opt;
+  }
+  #buildCompactFormatVars(items, currentIndex) {
+    const labelIndex = currentIndex >= 0 ? currentIndex : 0;
+    const item = items[labelIndex];
+    return {
+      current: labelIndex + 1,
+      total: items.length,
+      step: getAttribute(item, "text", ""),
+      label: this.#hostAriaLabel ?? ""
+    };
+  }
+  #syncCompactMenuAndPopAccessibleName(formatVars, hasItems) {
+    if (!hasItems || formatVars === null) {
+      this.#$actionMenu.removeAttribute("aria-label");
+      this.#$compactPop.removeAttribute("aria-label");
+      return;
+    }
+    const name = resolveCompactMenuAndPopAriaLabel(
+      this.#hostAriaLabel,
+      this.#compactTriggerAriaLabelFormat,
+      formatVars
+    );
+    updateAttribute(this.#$actionMenu, "aria-label", name);
+    updateAttribute(this.#$compactPop, "aria-label", name);
+  }
+  #warnMissingHostAriaLabel(hostAriaLabel) {
+    if (hostAriaLabel != null && hostAriaLabel !== "") {
+      this.#warnedMissingHostAriaLabel = false;
+      return;
+    }
+    if (this.#warnedMissingHostAriaLabel) {
+      return;
+    }
+    this.#warnedMissingHostAriaLabel = true;
+    console.warn(
+      "[sinch-progress-stepper-v2] aria-label is recommended in compact layout so the step list has a concise widget name; a derived name from the current step is used when omitted."
+    );
+  }
+  #syncCompactTrigger(items, currentIndex, formatVars) {
+    const total = items.length;
+    if (total === 0) {
+      this.#$compactCounter.textContent = "";
+      this.#$compactLabel.textContent = " ";
+      this.#clearCompactStateAttributes(this.#$compactTrigger);
+      this.#$compactTrigger.removeAttribute("aria-label");
+      return;
+    }
+    const labelIndex = currentIndex >= 0 ? currentIndex : 0;
+    const item = items[labelIndex];
+    const vars = formatVars ?? this.#buildCompactFormatVars(items, currentIndex);
+    this.#$compactCounter.textContent = formatCompactTemplate(
+      resolveCompactCounterFormat(this.#compactCounterFormat),
+      vars
+    );
+    this.#$compactLabel.textContent = getAttribute(item, "text", " ");
+    updateAttribute(
+      this.#$compactTrigger,
+      "aria-label",
+      resolveCompactTriggerAriaLabel(
+        this.#compactTriggerAriaLabelFormat,
+        this.#hostAriaLabel,
+        vars
+      )
+    );
+    this.#syncCompactStateAttributes(this.#$compactTrigger, item, true);
+  }
+  #clearCompactStateAttributes(el) {
+    el.removeAttribute("data-step-status");
+    el.removeAttribute("data-step-checked");
+    el.removeAttribute("data-step-invalid");
+  }
+  #syncCompactStateAttributes(el, item, isCurrent = false) {
+    if (item === void 0) {
+      this.#clearCompactStateAttributes(el);
+      return;
+    }
+    updateAttribute(el, "data-step-status", getAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_STATUS, "incomplete"));
+    updateBooleanAttribute(el, "data-step-checked", isCurrent);
+    updateBooleanAttribute(el, "data-step-invalid", getBooleanAttribute(item, "invalid"));
+  }
+  #ensureOptionIconSlot(opt) {
+    const found = opt.querySelector(':scope > [slot="icon"]');
+    if (found instanceof HTMLElement) {
+      return found;
+    }
+    const wrap = document.createElement("span");
+    wrap.slot = "icon";
+    opt.appendChild(wrap);
+    return wrap;
+  }
+  #renderCompactOptionIcon(wrap, item, index, isCurrent) {
+    Object.assign(wrap.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      marginLeft: "0"
+    });
+    const stepNum = String(index + 1);
+    const rawStepIndex = getAttribute(item, "data-step-index", "");
+    const stepIdx = rawStepIndex !== "" ? rawStepIndex : stepNum;
+    fillProgressStepperStepChipHost(wrap, {
+      stepIndexDisplay: stepIdx,
+      status: getAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_STATUS, "incomplete"),
+      invalid: getBooleanAttribute(item, "invalid"),
+      checked: isCurrent
+    });
+  }
+  #refreshCompactOptionPresentation(opt, item, index, isCurrent) {
+    const wrap = this.#ensureOptionIconSlot(opt);
+    this.#renderCompactOptionIcon(wrap, item, index, isCurrent);
+    this.#syncCompactStateAttributes(opt, item, isCurrent);
+  }
+  #resolveCurrentIndex(totalItems, getCheckedItemIndex, getFirstActiveItemIndex) {
+    if (totalItems <= 0) {
+      return -1;
+    }
+    const checkedIndex = getCheckedItemIndex();
+    if (checkedIndex >= 0 && checkedIndex < totalItems) {
+      return checkedIndex;
+    }
+    const firstActiveIndex = getFirstActiveItemIndex();
+    if (firstActiveIndex >= 0 && firstActiveIndex < totalItems) {
+      return firstActiveIndex;
+    }
+    return 0;
+  }
+}
+export {
+  ProgressStepperCompactController
+};

package/progress-stepper-v2/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/progress-stepper-v2/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-progress-stepper-v2");

package/progress-stepper-v2/index.d.ts

@@ -0,0 +1,31 @@
+import '../action-menu';
+import '../action-menu-option';
+import '../icon';
+import '../pop';
+import { NectaryElement } from '../utils';
+import type { TRect } from '../types';
+export * from './types';
+export { computeOrientationLayout, deriveStepStatuses, } from './model';
+export type { TDerivedStepStatus, TOrientationLayout, TOrientationMode, TStepItemSnapshot, } from './model';
+export { OrientationScheduler } from './orientation';
+export declare class ProgressStepperV2 extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, _newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set progressValue(value: string);
+    get progressValue(): string;
+    set noCompletionOrder(value: boolean);
+    get noCompletionOrder(): boolean;
+    set noAutoOrientation(value: boolean);
+    get noAutoOrientation(): boolean;
+    set compactCounterFormat(value: string);
+    get compactCounterFormat(): string;
+    set compactTriggerAriaLabelFormat(value: string);
+    get compactTriggerAriaLabelFormat(): string;
+    nthOptionRect(index: number): TRect | null;
+}