@nectary/components 5.38.1 → 5.39.0

package/progress-stepper-v2/model.js

@@ -0,0 +1,59 @@
+function deriveStepStatuses(items, params) {
+  const { noCompletionOrder, progressValue } = params;
+  if (noCompletionOrder) {
+    return items.map((item) => {
+      if (item.disabled) {
+        return "inactive";
+      }
+      if (item.complete) {
+        return "complete";
+      }
+      return "incomplete";
+    });
+  }
+  let progressIndex = items.findIndex((it) => it.value === progressValue);
+  if (progressIndex < 0 && items.length > 0) {
+    progressIndex = 0;
+  }
+  return items.map((_, i) => {
+    if (progressIndex < 0 || progressIndex < i) {
+      return "inactive";
+    }
+    if (progressIndex > i) {
+      return "complete";
+    }
+    return "incomplete";
+  });
+}
+function computeOrientationLayout(params) {
+  const {
+    noAutoOrientation,
+    containerWidth,
+    wrapperScrollWidth
+  } = params;
+  if (noAutoOrientation) {
+    return {
+      isHorizontal: true,
+      dataOrientation: "horizontal",
+      mode: "horizontal"
+    };
+  }
+  const safeWidth = Math.max(containerWidth, 1);
+  const isHorizontal = wrapperScrollWidth <= safeWidth;
+  if (isHorizontal) {
+    return {
+      isHorizontal: true,
+      dataOrientation: "horizontal",
+      mode: "horizontal"
+    };
+  }
+  return {
+    isHorizontal: false,
+    dataOrientation: "vertical",
+    mode: "compact"
+  };
+}
+export {
+  computeOrientationLayout,
+  deriveStepStatuses
+};

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

@@ -0,0 +1,8 @@
+/** Coalesces resize observations into a single animation frame. */
+export declare class OrientationScheduler {
+    #private;
+    private readonly run;
+    constructor(run: () => void);
+    schedule(): void;
+    cancel(): void;
+}

package/progress-stepper-v2/orientation.js

@@ -0,0 +1,24 @@
+class OrientationScheduler {
+  constructor(run) {
+    this.run = run;
+  }
+  #rafId = null;
+  schedule() {
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+    }
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
+      this.run();
+    });
+  }
+  cancel() {
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+  }
+}
+export {
+  OrientationScheduler
+};

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

@@ -0,0 +1 @@
+export declare function syncStepSeparators(host: HTMLElement, itemTagName: string): void;

package/progress-stepper-v2/separators.js

@@ -0,0 +1,48 @@
+import { createScopedElement } from "../utils/dom.js";
+const TAG_STEP_SEPARATOR_ICON = "sinch-icon";
+const ATTR_STEP_SEPARATOR = "data-nectary-progress-stepper-v2-separator";
+function isStepSeparatorNode(el) {
+  return el instanceof HTMLElement && el.tagName.toLowerCase() === TAG_STEP_SEPARATOR_ICON && el.hasAttribute(ATTR_STEP_SEPARATOR);
+}
+function separatorsPlacementValid(items) {
+  for (let i = 0; i < items.length - 1; i++) {
+    const between = items[i].nextElementSibling;
+    if (!isStepSeparatorNode(between)) {
+      return false;
+    }
+    if (between.nextElementSibling !== items[i + 1]) {
+      return false;
+    }
+  }
+  return true;
+}
+function createStepSeparator(anchor) {
+  const icon = createScopedElement(anchor, TAG_STEP_SEPARATOR_ICON);
+  icon.setAttribute(ATTR_STEP_SEPARATOR, "");
+  icon.setAttribute("icons-version", "2");
+  icon.setAttribute("name", "fa-chevron-right");
+  icon.setAttribute("aria-hidden", "true");
+  icon.setAttribute("tabindex", "-1");
+  return icon;
+}
+function syncStepSeparators(host, itemTagName) {
+  const normalizedItemTagName = itemTagName.toLowerCase();
+  const items = [...host.children].filter(
+    (el) => el.tagName.toLowerCase() === normalizedItemTagName
+  );
+  const separators = [...host.children].filter(isStepSeparatorNode);
+  if (items.length <= 1) {
+    separators.forEach((n) => n.remove());
+    return;
+  }
+  if (separators.length === items.length - 1 && separatorsPlacementValid(items)) {
+    return;
+  }
+  separators.forEach((n) => n.remove());
+  for (let i = 0; i < items.length - 1; i++) {
+    items[i].insertAdjacentElement("afterend", createStepSeparator(host));
+  }
+}
+export {
+  syncStepSeparators
+};

package/progress-stepper-v2/step-chip.d.ts

@@ -0,0 +1,9 @@
+import '../icon';
+export type TSinchProgressStepperStepChipModel = {
+    /** Resolved step label (e.g. `"3"`). */
+    stepIndexDisplay: string;
+    status: string;
+    invalid: boolean;
+    checked: boolean;
+};
+export declare const fillProgressStepperStepChipHost: (host: HTMLElement, model: TSinchProgressStepperStepChipModel) => void;

package/progress-stepper-v2/step-chip.js

@@ -0,0 +1,126 @@
+import "../icon/index.js";
+import { createScopedElement } from "../utils/dom.js";
+const STEP_CHIP_TOKEN = "--sinch-comp-progress-stepper-v2-step";
+const chipStyles = new CSSStyleSheet();
+chipStyles.replaceSync(`
+.step-chip {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(${STEP_CHIP_TOKEN}-shape-radius-indicator);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: var(--sinch-comp-text-line-height);
+  font: var(--sinch-sys-font-body-s);
+}
+
+.step-chip[data-checked] {
+  font: var(--sinch-sys-font-body-emphasize-s);
+}
+
+.step-chip[data-status="incomplete"] {
+  background: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-container-initial);
+  color: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-initial);
+}
+
+.step-chip[data-status="incomplete"][data-checked] {
+  background: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-container-current);
+  color: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-current);
+}
+
+.step-chip[data-status="complete"] {
+  background: var(${STEP_CHIP_TOKEN}-color-complete-icon-container-initial);
+  color: var(${STEP_CHIP_TOKEN}-color-complete-icon-initial);
+}
+
+.step-chip[data-status="complete"][data-checked] {
+  background: var(${STEP_CHIP_TOKEN}-color-complete-icon-container-current);
+  color: var(${STEP_CHIP_TOKEN}-color-complete-icon-current);
+}
+
+.step-chip[data-invalid] {
+  background: var(${STEP_CHIP_TOKEN}-color-invalid-icon-container-initial);
+  color: var(${STEP_CHIP_TOKEN}-color-invalid-icon-initial);
+}
+
+.step-chip[data-invalid][data-checked] {
+  background: var(${STEP_CHIP_TOKEN}-color-invalid-icon-container-current);
+  color: var(${STEP_CHIP_TOKEN}-color-invalid-icon-current);
+}
+
+.step-chip__num,
+.step-chip__check,
+.step-chip__warn {
+  grid-area: 1 / 1;
+}
+
+.step-chip__check,
+.step-chip__warn {
+  display: none;
+  --sinch-global-size-icon: 20px;
+  --sinch-global-color-icon: currentcolor;
+}
+
+.step-chip[data-invalid] .step-chip__num,
+.step-chip[data-status="complete"] .step-chip__num {
+  display: none;
+}
+
+.step-chip[data-invalid] .step-chip__warn {
+  display: block;
+}
+
+.step-chip[data-status="complete"]:not([data-invalid]) .step-chip__check {
+  display: block;
+}
+`);
+const adoptChipStylesOnce = (root) => {
+  if (!root.adoptedStyleSheets.includes(chipStyles)) {
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, chipStyles];
+  }
+};
+const ensureChipStyles = (host) => {
+  const root = host.getRootNode();
+  if (root instanceof ShadowRoot || root instanceof Document) {
+    adoptChipStylesOnce(root);
+  }
+};
+const buildProgressStepperStepChip = (anchor) => {
+  const chip = document.createElement("span");
+  chip.className = "step-chip";
+  chip.setAttribute("aria-hidden", "true");
+  const num = document.createElement("span");
+  num.className = "step-chip__num";
+  const check = createScopedElement(anchor, "sinch-icon");
+  check.className = "step-chip__check";
+  check.setAttribute("icons-version", "2");
+  check.setAttribute("name", "fa-check");
+  check.setAttribute("aria-hidden", "true");
+  const warn = createScopedElement(anchor, "sinch-icon");
+  warn.className = "step-chip__warn";
+  warn.setAttribute("icons-version", "2");
+  warn.setAttribute("name", "triangle-exclamation");
+  warn.setAttribute("aria-hidden", "true");
+  chip.append(num, check, warn);
+  return chip;
+};
+const fillProgressStepperStepChipHost = (host, model) => {
+  ensureChipStyles(host);
+  let chip = host.querySelector(":scope > .step-chip");
+  if (!(chip instanceof HTMLElement)) {
+    chip = buildProgressStepperStepChip(host);
+    host.appendChild(chip);
+  }
+  chip.toggleAttribute("data-invalid", model.invalid);
+  chip.toggleAttribute("data-checked", model.checked);
+  chip.setAttribute(
+    "data-status",
+    model.status === "inactive" ? "incomplete" : model.status
+  );
+  chip.querySelector(".step-chip__num").textContent = model.stepIndexDisplay;
+};
+export {
+  fillProgressStepperStepChipHost
+};

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

@@ -0,0 +1,66 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export type TSinchProgressStepperV2Props = {
+    /** Current selected item value */
+    value: string;
+    /**
+     * Accessible name for the stepper. Recommended when the layout collapses to compact
+     * (short widget name for the listbox/popover). When omitted in compact mode, the
+     * menu and popover use the same derived name as the trigger (`{current} of {total}, {step}`).
+     */
+    'aria-label'?: string;
+    /**
+     * Template for the compact trigger counter badge.
+     * Placeholders: `{current}`, `{total}`.
+     * Default when unset: `{current} of {total}`.
+     */
+    'compact-counter-format'?: string;
+    /**
+     * Template for the compact trigger `aria-label`.
+     * Placeholders: `{label}`, `{current}`, `{total}`, `{step}`.
+     * Default when unset: `{label}, {current} of {total}, {step}` if `aria-label` is set,
+     * otherwise `{current} of {total}, {step}`.
+     */
+    'compact-trigger-aria-label-format'?: string;
+    /**
+     * Current progress value used to derive each item's status in ordered mode (default).
+     * Ignored when `noCompletionOrder` is set.
+     */
+    progressValue?: string;
+    /**
+     * When set, step statuses are controlled by per-item `complete` / `disabled` attributes
+     * instead of deriving order from `progressValue`.
+     */
+    noCompletionOrder?: boolean;
+    /** When set, orientation stays horizontal and does not auto-switch to vertical on overflow. */
+    noAutoOrientation?: boolean;
+};
+export type TSinchProgressStepperV2Events = {
+    /** Change selected value event */
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchProgressStepperV2 = {
+    props: TSinchProgressStepperV2Props;
+    events: TSinchProgressStepperV2Events;
+};
+export type TSinchProgressStepperV2Element = NectaryComponentVanillaByType<TSinchProgressStepperV2>;
+export type TSinchProgressStepperV2React = NectaryComponentReactByType<TSinchProgressStepperV2>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper-v2': TSinchProgressStepperV2;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper-v2': NectaryComponentVanilla<'sinch-progress-stepper-v2'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper-v2': NectaryComponentReact<'sinch-progress-stepper-v2'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress-stepper-v2': NectaryComponentReact<'sinch-progress-stepper-v2'>;
+        }
+    }
+}

package/progress-stepper-v2/types.js

@@ -0,0 +1 @@
+

package/standalone.d.ts

@@ -43,7 +43,9 @@ import './pagination/index.js';
 import './persistent-overlay/index.js';
 import './pop/index.js';
 import './popover/index.js';
+import './progress-stepper-item-v2/index.js';
 import './progress-stepper-item/index.js';
+import './progress-stepper-v2/index.js';
 import './progress-stepper/index.js';
 import './progress/index.js';
 import './radio-option/index.js';

package/standalone.js

@@ -44,7 +44,9 @@ import "./pagination/index.js";
 import "./persistent-overlay/index.js";
 import "./pop/index.js";
 import "./popover/index.js";
+import "./progress-stepper-item-v2/index.js";
 import "./progress-stepper-item/index.js";
+import "./progress-stepper-v2/index.js";
 import "./progress-stepper/index.js";
 import "./progress/index.js";
 import "./radio-option/index.js";

package/standalone.ts

@@ -51,7 +51,9 @@ import './pagination/index.js'
 import './persistent-overlay/index.js'
 import './pop/index.js'
 import './popover/index.js'
+import './progress-stepper-item-v2/index.js'
 import './progress-stepper-item/index.js'
+import './progress-stepper-v2/index.js'
 import './progress-stepper/index.js'
 import './progress/index.js'
 import './radio-option/index.js'

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "floating-panel", "floating-panel-button", "floating-panel-icon-button", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "floating-panel", "floating-panel-button", "floating-panel-icon-button", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item-v2", "progress-stepper-item", "progress-stepper-v2", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "popover" | "text" | "icon" | "chip" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "progress-stepper-item-v2" | "progress-stepper-item" | "progress-stepper-v2" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -44,7 +44,9 @@ const BASE_COMPONENT_NAMES_LIST = [
   "persistent-overlay",
   "pop",
   "popover",
+  "progress-stepper-item-v2",
   "progress-stepper-item",
+  "progress-stepper-v2",
   "progress-stepper",
   "progress",
   "radio-option",

package/utils/dom.d.ts

@@ -35,6 +35,7 @@ export declare const getDeepActiveElement: (ownerDocument?: Document) => Element
 export declare const composedContains: (container: Node, node: Node | null) => boolean;
 export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
 export declare const getScrollableParents: (node: HTMLElement | null) => (HTMLElement | Document)[];
+export declare const createScopedElement: <K extends keyof HTMLElementTagNameMap>(anchor: Element, tag: K) => HTMLElementTagNameMap[K];
 export declare const isTransformedElement: (element: HTMLElement | null) => element is HTMLElement;
 export declare const getTransformedAncestor: (node: HTMLElement | null) => HTMLElement | null;
 export {};

package/utils/dom.js

@@ -179,6 +179,14 @@ const getScrollableParents = (node) => {
   scrollableParents.push(document);
   return scrollableParents;
 };
+const createScopedElement = (anchor, tag) => {
+  const root = anchor.getRootNode();
+  const shadowCreateElement = root.createElement;
+  if (typeof shadowCreateElement === "function") {
+    return shadowCreateElement.call(root, tag);
+  }
+  return document.createElement(tag);
+};
 const isTransformedElement = (element) => {
   if (element == null) {
     return false;
@@ -217,6 +225,7 @@ export {
   clampNumber,
   cloneNode,
   composedContains,
+  createScopedElement,
   getAttribute,
   getBooleanAttribute,
   getCssVar,

package/utils/element.d.ts

@@ -53,7 +53,9 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"persistent-overlay",
 	"pop",
 	"popover",
+	"progress-stepper-item-v2",
 	"progress-stepper-item",
+	"progress-stepper-v2",
 	"progress-stepper",
 	"progress",
 	"radio-option",

package/utils/index.js

@@ -1,6 +1,6 @@
 import { Context, subscribeContext } from "./context.js";
 import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
-import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, composedContains, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getDeepActiveElement, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
+import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, composedContains, createScopedElement, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getDeepActiveElement, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
 import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
 import { getRect, getTargetRect, rectOverlap } from "./rect.js";
 import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
@@ -20,6 +20,7 @@ export {
   clampNumber,
   cloneNode,
   composedContains,
+  createScopedElement,
   debounceAnimationFrame,
   debounceTimeout,
   defineCustomElement,