@ixfx/components 0.2.4 → 0.2.6

package/dist/crumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crumbs.js","names":["#getTickledItems","#onTickled","#onMenuKeyNav","#currentOpenTrigger","#menuOpenedByKeyboard","#findPath","#hasChildOptions","#shiftFocusToNarrowedText","#handleOpenCaretMenu","#handleEnter","#shiftFocusToPath","#pendingNode","#propagateInputModeToMenu","#setSelected","#modelUnsubscribe","#runLayoutUpdate","#previousSelectionKey","#scrollToValue","#pendingController","#abortPending","#invokeLoadChildren","#onChildClick","#findNodePath","#onLabelClick","#onSegmentMenuCommand","#renderChildOptions","#onFocus","#onBlur","#onKeyDown","#onHostClick","#onMenuTriggerClose","#onMenuCommand","#getChildOptionsWidth","#onNarrowedTextChange","#onNarrowedTextBlur","#onNarrowedTextShiftTab","customElement"],"sources":["../src/crumbs/crumb-navigation.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { LoadChildrenCallback, TreeNode } from '../tree/types.js';\nimport type {\n  TreeComponent,\n  TreeSelectDetail,\n  TreeTickleDetail,\n} from '../common/tree-component.js';\nimport type {\n  TreeExclusivity,\n  TreeFilterPredicate,\n  TreeSelectionFilter,\n} from '../common/types.js';\nimport { TreeDataModel } from '../common/tree-data-model.js';\nimport { TickledController, tickledStyles, tickledItemStyles } from '../interaction/index.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nimport type { MenuTrigger } from '../menu/menu-trigger.js';\nimport '../menu/menu-trigger.js';\nimport '../menu/menu-container.js';\nimport '../menu/menu-item.js';\nimport '../narrowed-text/index.js';\n\n/** @deprecated Use TreeSelectDetail from src/common/tree-component.ts */\nexport type CrumbNavigationChangeDetail = {\n  readonly selected: TreeNode;\n  readonly previous: TreeNode | undefined;\n};\n\nexport type CrumbNavigationChangeEvent = CustomEvent<CrumbNavigationChangeDetail>;\n\nexport type CrumbNavigationItemClickDetail = { node: TreeNode; depth: number };\nexport type CrumbNavigationItemClickEvent = CustomEvent<CrumbNavigationItemClickDetail>;\n\nexport type CrumbNavigationExpandDetail = { node: TreeNode; depth: number };\nexport type CrumbNavigationExpandEvent = CustomEvent<CrumbNavigationExpandDetail>;\n\n/**\n * Breadcrumb navigation with lazy-loading support.\n *\n * Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`,\n * so the two components can be swapped with minimal code changes.\n *\n * Events\n * - `navigate`: fired when user clicks a breadcrumb label. detail: `{ node: TreeNode }`\n * - `change`: fired when selected node changes. detail: `{ selected: TreeNode, previous: TreeNode | undefined }`\n * - `expand`: fired when user clicks a caret whose node has no children yet.\n *             detail: `{ node: TreeNode, depth: number, signal: AbortSignal }`\n *             Populate `node.children` then call `requestUpdate()` on the element.\n *\n * CSS variables\n * --text-highlight: var(--accent); // highlight on mouse hover\n * --separator: var(--surface-muted-text);   // text colour of separator character\n * --padding-s: var(--space-xs);   // padding between items\n */\n@customElement(`ixfx-crumb-navigation`)\nexport class CrumbNavigationElement extends LitElement implements TreeComponent {\n  @property({ type: Object })\n  root: TreeNode | undefined;\n\n  @property({ attribute: false })\n  model: TreeDataModel | undefined;\n\n  @property({ type: Object })\n  selectedNode: TreeNode | undefined;\n\n  @state()\n  private _selectedNodes = new Set<TreeNode>();\n\n  get selectedNodes(): ReadonlySet<TreeNode> {\n    return this._selectedNodes;\n  }\n\n  /** Callback to lazily load children for a node. When set, replaces event-based lazy loading. */\n  @property({ attribute: false })\n  loadChildren: LoadChildrenCallback | undefined;\n\n  @property({ attribute: false })\n  filterPredicate: TreeFilterPredicate | undefined;\n\n  @property({ reflect: true, attribute: 'exclusivity' })\n  exclusivity: TreeExclusivity = 'none';\n\n  @property({ reflect: true, attribute: 'selection-filter' })\n  selectionFilter: TreeSelectionFilter = 'leaf';\n\n  @state()\n  private _openIdx = -1;\n\n  @state()\n  private _isFocused = false;\n\n  @state()\n  private _menuOpen = false;\n\n  @state()\n  private _focusOnNarrowedText = false;\n\n  @property({ reflect: true, attribute: 'input-mode' })\n  inputMode: string = '';\n\n  #pendingNode: TreeNode | undefined;\n  #pendingController: AbortController | undefined;\n  #modelUnsubscribe: (() => void) | undefined;\n\n  #previousSelectionKey = ``;\n  #menuOpenedByKeyboard = false;\n  #currentOpenTrigger: MenuTrigger | null = null;\n\n  private tickled = new TickledController<number>(this, {\n    getItems: () => this.#getTickledItems(),\n    onTickle: (index) => {\n      if (index !== undefined) {\n        this.#onTickled(index);\n      }\n    },\n  });\n\n  #getTickledItems() {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return [];\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const items: Array<{ id: number; enabled: boolean }> = [];\n\n    pathNodes.forEach((_node, i) => {\n      items.push({ id: i, enabled: true });\n    });\n\n    if (this.#hasChildOptions()) {\n      items.push({ id: pathNodes.length, enabled: true });\n    }\n\n    return items;\n  }\n\n  #onTickled(index: number) {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n\n    if (index < pathNodes.length) {\n      this._openIdx = index;\n    } else if (hasChildOptions && index === pathNodes.length) {\n      this._openIdx = pathNodes.length - 1;\n    }\n  }\n\n  #hasChildOptions(): boolean {\n    const s = this.selectedNode;\n    if (s === undefined) return false;\n\n    const isPending = this.#pendingNode === s;\n    const children = s.children ?? [];\n\n    return children.length > 0 || isPending;\n  }\n\n  #onFocus = (): void => {\n    this._isFocused = true;\n  };\n\n  #onBlur = (): void => {\n    this._isFocused = false;\n  };\n\n  #onHostClick = (): void => {\n    this.shadowRoot?.querySelector<HTMLElement>(`.host-container`)?.focus();\n  };\n\n  #handleOpenCaretMenu() {\n    const currentTickled = this.tickled.tickledId;\n    if (currentTickled === undefined) return;\n\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n\n    // For non-last segments: open the inline caret menu for that segment\n    if (currentTickled < pathNodes.length - 1) {\n      const segments = this.shadowRoot?.querySelectorAll<HTMLElement>(`.crumb-segment`);\n      const trigger = segments?.[currentTickled]?.querySelector<MenuTrigger>(`.caret ixfx-menu-trigger`);\n      if (trigger) {\n        this.#menuOpenedByKeyboard = true;\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n        return;\n      }\n    }\n\n    // Last segment or the child-options separator: open the child-options menu\n    if (this.#hasChildOptions()) {\n      const trigger = this.shadowRoot?.querySelector<MenuTrigger>(`#child-options-trigger`);\n      if (trigger) {\n        this.#menuOpenedByKeyboard = true;\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n      }\n    }\n  }\n\n  #propagateInputModeToMenu(): void {\n    const inputMode = this.tickled.inputMode;\n    requestAnimationFrame(() => {\n      const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);\n      if (container) {\n        container.setAttribute(`data-input-mode`, inputMode);\n      }\n    });\n  }\n\n#onMenuTriggerClose = (): void => {\n    document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n    this.#currentOpenTrigger = null;\n    this.#menuOpenedByKeyboard = false;\n    requestAnimationFrame(() => {\n      this.shadowRoot?.querySelector<HTMLElement>(`.host-container`)?.focus();\n    });\n  };\n\n  #onMenuKeyNav = (e: KeyboardEvent): void => {\n    // Only handle ArrowLeft/ArrowRight - close menu and navigate to previous/next breadcrumb segment\n    // ArrowDown/ArrowUp should pass through to let the menu handle them\n    const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);\n    if (!container || !this.#currentOpenTrigger?.isOpen) return;\n\n    switch (e.key) {\n      case `ArrowLeft`:\n      case `ArrowRight`: {\n        e.preventDefault();\n        e.stopPropagation();\n        this.#currentOpenTrigger.closeMenu();\n        const r = this.root;\n        const sel = this.selectedNode;\n        if (!r || !sel) break;\n        const pathNodes = this.#findPath(r, sel) ?? [r];\n        const totalItems = pathNodes.length + (this.#hasChildOptions() ? 1 : 0);\n        const currentTickled = this.tickled.tickledId ?? -1;\n        if (e.key === `ArrowLeft`) {\n          if (currentTickled > 0) {\n            this.tickled.handleKeyboardNavigation(`previous`);\n          }\n        } else {\n          if (currentTickled < totalItems - 1) {\n            this.tickled.handleKeyboardNavigation(`next`);\n          }\n        }\n        break;\n      }\n    }\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const totalItems = pathNodes.length + (this.#hasChildOptions() ? 1 : 0);\n    const currentTickled = this.tickled.tickledId ?? -1;\n\n    switch (e.key) {\n      case `ArrowRight`: {\n        e.preventDefault();\n        if (currentTickled < totalItems - 1) {\n          this.tickled.handleKeyboardNavigation(`next`);\n        } else if (currentTickled === totalItems - 1) {\n          this.#shiftFocusToNarrowedText();\n        }\n        break;\n      }\n      case `ArrowLeft`: {\n        e.preventDefault();\n        if (currentTickled > 0) {\n          this.tickled.handleKeyboardNavigation(`previous`);\n        }\n        break;\n      }\n      case `ArrowDown`:\n      case `ArrowUp`: {\n        if (this.tickled.tickledId !== undefined) {\n          e.preventDefault();\n          if (this.#currentOpenTrigger?.isOpen) {\n            // Menu is already open - dispatch ArrowDown to the popover element for it to handle\n            const container = this.#currentOpenTrigger.querySelector(`ixfx-menu-container`);\n            const popover = container?.shadowRoot?.querySelector(`.popover`);\n            if (popover) {\n              popover.dispatchEvent(new KeyboardEvent(`keydown`, { key: e.key, bubbles: true }));\n            }\n          } else {\n            this.#handleOpenCaretMenu();\n          }\n        }\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        this.#handleEnter();\n        break;\n      }\n      case `Escape`: {\n        e.preventDefault();\n        this._menuOpen = false;\n        this.tickled.clearTickled();\n        this.blur();\n        break;\n      }\n      case `Tab`: {\n        if (e.shiftKey) {\n          e.preventDefault();\n          this.#shiftFocusToPath();\n        } else if (currentTickled === totalItems - 1) {\n          e.preventDefault();\n          this._menuOpen = false;\n          this._focusOnNarrowedText = true;\n          const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);\n          if (narrowedText) {\n            narrowedText.focus();\n          }\n        }\n        break;\n      }\n    }\n  };\n\n  #handleEnter() {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n    const currentTickled = this.tickled.tickledId ?? -1;\n\n    if (currentTickled < pathNodes.length) {\n      const node = pathNodes[currentTickled];\n      this.#setSelected(node);\n      this._menuOpen = false;\n      this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n        detail: { node, depth: currentTickled },\n        bubbles: true,\n        composed: true,\n      }));\n    } else if (hasChildOptions && currentTickled === pathNodes.length) {\n      this._menuOpen = true;\n      this.#menuOpenedByKeyboard = true;\n      const trigger = this.shadowRoot?.querySelector<MenuTrigger>(`#child-options-trigger`);\n      if (trigger) {\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n      }\n    }\n  }\n\n  #shiftFocusToNarrowedText() {\n    const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);\n    if (narrowedText) {\n      this._focusOnNarrowedText = true;\n      narrowedText.focus();\n    }\n  }\n\n  #shiftFocusToPath() {\n    this._focusOnNarrowedText = false;\n    const hostContainer = this.shadowRoot?.querySelector<HTMLElement>(`.host-container`);\n    if (hostContainer) {\n      hostContainer.focus();\n    }\n  }\n\n  #onNarrowedTextBlur = (): void => {\n    this._focusOnNarrowedText = false;\n    this.#shiftFocusToPath();\n  }\n\n  #onNarrowedTextShiftTab = (): void => {\n    this._focusOnNarrowedText = false;\n    this.#shiftFocusToPath();\n  }\n\n  // --- TreeComponent methods ---\n\n  select(node: TreeNode): void {\n    this.#setSelected(node);\n  }\n\n  deselect(_node: TreeNode): void {\n    // Crumb navigation is single-selection; deselect navigates to parent or root\n  }\n\n  clearSelection(): void {\n    if (this.root) this.#setSelected(this.root);\n  }\n\n  getNodes(): ReadonlyArray<{ node: TreeNode; depth: number }> {\n    if (!this.root) return [];\n    const result: Array<{ node: TreeNode; depth: number }> = [];\n    const visit = (node: TreeNode, depth: number) => {\n      result.push({ node, depth });\n      if (node.children) {\n        for (const child of node.children) visit(child, depth + 1);\n      }\n    };\n    for (const child of this.root.children ?? []) visit(child, 0);\n    return result;\n  }\n\n  // --- Lifecycle ---\n\n  override updated(changedProps: PropertyValues): void {\n    if (changedProps.has(`model`)) {\n      this.#modelUnsubscribe?.();\n      this.#modelUnsubscribe = undefined;\n      const model = this.model;\n      if (model) {\n        this.root = model.root;\n        this.#modelUnsubscribe = model._subscribe(event => {\n          if (event.type === 'root') {\n            this.root = event.root;\n            this.requestUpdate();\n          }\n        });\n      }\n    }\n    this.#runLayoutUpdate(changedProps);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#modelUnsubscribe?.();\n    this.#modelUnsubscribe = undefined;\n    document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n    this.#currentOpenTrigger = null;\n  }\n\n  #runLayoutUpdate(_changedProperties: PropertyValues): void {\n    if (!this.shadowRoot)\n      return;\n\n    const hsiElement: HTMLElement | null = this.shadowRoot.querySelector(`.horiz-select-items`);\n    if (!hsiElement)\n      return;\n\n    const ulElement: HTMLElement | null = hsiElement.querySelector(`ul`);\n    if (!ulElement)\n      return;\n\n    const menuTrigger: HTMLElement | null = this.shadowRoot.querySelector(`ixfx-menu-trigger`);\n    if (!menuTrigger)\n      return;\n\n    if (ulElement.getBoundingClientRect().width > hsiElement.getBoundingClientRect().width) {\n      menuTrigger.style.display = `inline-flex`;\n    } else {\n      menuTrigger.style.display = `none`;\n    }\n\n    for (const li of ulElement.querySelectorAll(`li`)) {\n      const key = li.getAttribute(`data-key`) ?? ``;\n      if (key === this.#previousSelectionKey) {\n        this.#scrollToValue(li);\n        break;\n      }\n    }\n\n  }\n\n  #scrollToValue(li: HTMLLIElement) {\n    let l = li.offsetLeft;\n\n    const ul = li.parentElement;\n    if (!ul)\n      return;\n    l -= ul.offsetLeft;\n\n    const horizSelectItems = ul.parentElement;\n    if (!horizSelectItems)\n      return;\n    horizSelectItems.scroll({ left: l, top: 0, behavior: `smooth` });\n\n    const horizSelect = horizSelectItems.parentElement;\n    if (!horizSelect)\n      return;\n    horizSelect.style.minWidth = `${li.getBoundingClientRect().width}px`;\n  }\n\n  #abortPending() {\n    if (this.#pendingController) {\n      this.#pendingController.abort();\n      this.#pendingController = undefined;\n      this.#pendingNode = undefined;\n    }\n  }\n\n  #findPath(node: TreeNode, target: TreeNode, acc: TreeNode[] = []): TreeNode[] | undefined {\n    const path = [...acc, node];\n    if (node === target)\n      return path;\n    if (!node.children)\n      return undefined;\n    for (const child of node.children) {\n      const result = this.#findPath(child, target, path);\n      if (result)\n        return result;\n    }\n    return undefined;\n  }\n\n  #setSelected(node: TreeNode) {\n    const previous = this.selectedNode;\n    if (previous) {\n      this.#previousSelectionKey = previous.item?.key ?? ``;\n    } else {\n      this.#previousSelectionKey = ``;\n    }\n    const previousSet: ReadonlySet<TreeNode> = previous ? new Set([previous]) : new Set();\n    this.selectedNode = node;\n    this._selectedNodes = new Set([node]);\n\n    this.dispatchEvent(new CustomEvent<TreeSelectDetail>(`select`, {\n      detail: { selected: new Set([node]), previous: previousSet },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #onLabelClick(node: TreeNode, depth: number) {\n    this._openIdx = -1;\n    this.#setSelected(node);\n    this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n      detail: { node, depth },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #onCaretClick(node: TreeNode, depth: number, e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (this._openIdx === depth) {\n      this._openIdx = -1;\n      return;\n    }\n    this._openIdx = depth;\n\n    if (node.children === undefined && this.#pendingNode !== node) {\n      this.#abortPending();\n      this.#pendingNode = node;\n      const controller = new AbortController();\n      this.#pendingController = controller;\n\n      if (this.loadChildren) {\n        this.#invokeLoadChildren(node, depth, controller).catch(() => {});\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  async #invokeLoadChildren(node: TreeNode, depth: number, controller: AbortController): Promise<void> {\n    try {\n      const result = this.loadChildren!(node, depth, controller.signal);\n      const children = result instanceof Promise ? await result : result;\n      if (controller.signal.aborted) return;\n      node.children = children;\n      this.#pendingNode = undefined;\n      this.#pendingController = undefined;\n      this.dispatchEvent(new CustomEvent<CrumbNavigationExpandDetail>(`expand`, {\n        detail: { node, depth },\n        bubbles: true,\n        composed: true,\n      }));\n      this.requestUpdate();\n    } catch (err) {\n      if (controller.signal.aborted) return;\n      node.children = [];\n      this.#pendingNode = undefined;\n      this.#pendingController = undefined;\n      this.requestUpdate();\n    }\n  }\n\n  #onSegmentMenuCommand(e: CustomEvent, node: TreeNode, depth: number) {\n    const key = e.detail.command;\n    const child = node.children?.find(c => c.item.key === key);\n    if (child) {\n      this.#onChildClick(child, depth + 1);\n    }\n  }\n\n  #onChildClick(node: TreeNode, depth: number) {\n    this._openIdx = -1;\n    this.#setSelected(node);\n    this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n      detail: { node, depth },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */\n  navigateTo(keys: readonly string[]): boolean {\n    if (!this.root?.children) return false;\n    let current: TreeNode | undefined = this.root;\n    for (const key of keys) {\n      const found: TreeNode | undefined = current?.children?.find(n => n.item.key === key);\n      if (!found) return false;\n      current = found;\n    }\n    if (current && current !== this.root) {\n      this.#setSelected(current);\n    }\n    return true;\n  }\n\n  /** Navigate to the first node matching the predicate. Returns false if not found. */\n  navigateToNode(predicate: (node: TreeNode) => boolean): boolean {\n    if (!this.root) return false;\n    const keyPath = this.#findNodePath(this.root.children ?? [], predicate);\n    if (!keyPath) return false;\n    return this.navigateTo(keyPath);\n  }\n\n  #findNodePath(\n    nodes: TreeNode[],\n    predicate: (node: TreeNode) => boolean,\n    prefix: string[] = [],\n  ): string[] | undefined {\n    for (const node of nodes) {\n      const path = [...prefix, node.item.key];\n      if (predicate(node)) return path;\n      if (node.children?.length) {\n        const result = this.#findNodePath(node.children, predicate, path);\n        if (result) return result;\n      }\n    }\n    return undefined;\n  }\n\n  #onMenuCommand(e: CustomEvent) {\n    const node = this.selectedNode;\n    if (!node?.children)\n      return;\n\n    const key = e.detail.command;\n    const child = node.children.find(c => c.item.key === key);\n    if (child) {\n      const depth = this.root ? (this.#findPath(this.root, node)?.length ?? 1) : 1;\n      this.#onChildClick(child, depth);\n    }\n  }\n\n  render() {\n    const r = this.root;\n    const sel = this.selectedNode;\n\n    if (!r || !sel) {\n      return html``;\n    }\n\n    this.inputMode = this.tickled.inputMode;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n\n    const parts = pathNodes.map((node, i) => {\n      const isLast = i === pathNodes.length - 1;\n      const isPending = this.#pendingNode === node;\n      const isOpen = this._openIdx === i;\n      const hasChildren = node.item.isLeaf !== true && (node.children === undefined || node.children.length > 0);\n      const showCaret = !isLast && hasChildren;\n      const isTickled = this.tickled.isTickled(i);\n\n      const menuItems = (node.children ?? []).map(c => html`\n        <ixfx-menu-item \n          label=\"${c.item.label}\" \n          command=\"${c.item.key}\"\n          icon-name=\"${c.item.icon ?? nothing}\"\n        ></ixfx-menu-item>\n      `);\n\n      return html`\n        <div class=\"item crumb-segment ${isTickled ? `tickled` : ``}\"\n          @pointerenter=${() => {\n            this.tickled.handlePointerEnter(i);\n            this.dispatchEvent(new CustomEvent<TreeTickleDetail>(`tickle`, { detail: { node, depth: i }, bubbles: true, composed: true }));\n          }}\n        >\n          <span class=\"label\" @click=${() => this.#onLabelClick(node, i)}>${node.item.label}</span>\n          ${showCaret\n              ? html`\n            <span class=\"caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}\">\n              ${isPending\n                  ? html`<span class=\"loading-spinner\"></span>`\n                  : html`\n                <ixfx-menu-trigger mode=\"trigger\" label=\"›\" @menu-command=${(e: CustomEvent) => this.#onSegmentMenuCommand(e, node, i)}>\n                  <ixfx-menu-container slot=\"menu\">\n                    ${menuItems}\n                  </ixfx-menu-container>\n                </ixfx-menu-trigger>\n                `\n              }\n            </span>\n            `\n              : nothing\n          }\n        </div>\n      `;\n    });\n\n    const childOptions = this.#renderChildOptions();\n    const isLastItemTickled = this.tickled.isTickled(pathNodes.length);\n    return html`\n      <div\n        class=\"host-container\"\n        tabindex=\"0\"\n        @focus=${this.#onFocus}\n        @blur=${this.#onBlur}\n        @keydown=${this.#onKeyDown}\n        @click=${this.#onHostClick}\n        @menu-trigger-close=${this.#onMenuTriggerClose}\n        @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n      >\n        <div class=\"parts\">${parts}</div>\n        ${childOptions\n          ? html`\n          <ixfx-menu-trigger\n            id=\"child-options-trigger\"\n            class=\"item separator-trigger ${isLastItemTickled ? `tickled` : ``}\"\n            mode=\"trigger\"\n            label=\"›\"\n            @menu-command=${this.#onMenuCommand}\n            @pointerenter=${() => this.tickled.handlePointerEnter(pathNodes.length)}\n          >\n            <ixfx-menu-container slot=\"menu\">\n              ${(this.selectedNode?.children ?? []).map(c => html`\n                <ixfx-menu-item \n                  label=\"${c.item.label}\" \n                  command=\"${c.item.key}\"\n                  icon-name=\"${c.item.icon ?? nothing}\"\n                ></ixfx-menu-item>\n              `)}\n            </ixfx-menu-container>\n          </ixfx-menu-trigger>\n        `\n          : nothing}\n        ${childOptions}\n      </div>\n    `;\n  }\n\n  #renderChildOptions() {\n    const s = this.selectedNode;\n    if (s === undefined) {\n      return nothing;\n    }\n\n    const isPending = this.#pendingNode === s;\n    const children = s.children ?? [];\n\n    if (children.length === 0 && !isPending) {\n      return nothing;\n    }\n\n    if (isPending) {\n      return html`\n        <div class=\"horiz-select\">\n          <div class=\"horiz-select-items\">\n            <span class=\"loading-spinner\"></span>\n          </div>\n        </div>\n      `;\n    }\n\n    return html`\n      <ixfx-narrowed-text\n        class=\"horiz-select\"\n        selection-mode=\"single\"\n        orientation=\"horizontal\"\n        nowrap\n        width=${this.#getChildOptionsWidth()}\n        @change=${this.#onNarrowedTextChange}\n        @narrowed-text-blur=${this.#onNarrowedTextBlur}\n        @narrowed-text-shift-tab=${this.#onNarrowedTextShiftTab}\n      >\n        ${children.map(c => html`\n          <span data-value=\"${c.item.key}\" data-label=\"${c.item.label}\"></span>\n        `)}\n      </ixfx-narrowed-text>\n    `;\n  }\n\n  #onNarrowedTextChange(e: CustomEvent) {\n    const detail = e.detail as { item: { value: string } };\n    const node = this.selectedNode;\n    if (!node?.children) return;\n\n    const child = node.children.find(c => c.item.key === detail.item.value);\n    if (child) {\n      const depth = this.root ? (this.#findPath(this.root, node)?.length ?? 1) : 1;\n      this.#onChildClick(child, depth);\n    }\n  }\n\n  #getChildOptionsWidth(): string {\n    return `var(--child-options-width, 50ch)`;\n  }\n\n  static styles = [tickledStyles, tickledItemStyles, css`\n    :host {\n      --text-highlight: var(--accent);\n      --separator: var(--surface-muted-text);\n      --padding-s: var(--space-xs);\n      display: flex;\n      overflow: scroll;\n      width: 100%;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n\n      /* Breadcrumb tickled overrides — no layout shift: keep transparent border at rest */\n      --item-padding: 0;\n    }\n\n    :host(.focused) {\n      outline: none;\n    }\n\n    :host([input-mode=\"keyboard\"]) .host-container {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .host-container {\n      display: flex;\n      width: 100%;\n      outline: none;\n    }\n\n    .parts {\n      display: flex;\n    }\n\n    .crumb-segment {\n      display: flex;\n      align-items: center;\n    }\n\n    .label {\n      cursor: pointer;\n      margin-right: var(--padding-s);\n      white-space: nowrap;\n    }\n\n    .caret {\n      position: relative;\n      cursor: pointer;\n      padding: var(--padding-m);\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      color: var(--separator);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease-in-out;\n    }\n\n    .caret.open {\n      background: color-mix(in srgb, var(--surface-5) 40%, transparent);\n    }\n\n    .caret.pending {\n      display: inline-flex;\n    }\n\n    .caret > ixfx-menu-trigger {\n      display: inline-flex;\n      margin: 0;\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n\n    .caret > ixfx-menu-trigger::part(base) {\n      background: none;\n      border: none;\n      color: inherit;\n      padding: 0;\n      cursor: pointer;\n      font-size: inherit;\n      line-height: 1;\n    }\n\n    .caret > ixfx-menu-trigger::part(base):hover {\n      background: none;\n      opacity: 0.6;\n    }\n\n    .separator {\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      color: var(--separator);\n    }\n\n    .separator-trigger {\n      display: inline-flex;\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n\n    .separator-trigger::part(base) {\n      background: none;\n      border: none;\n      color: var(--separator);\n      padding: 0;\n      cursor: pointer;\n      font-size: inherit;\n      line-height: 1;\n    }\n\n    .separator-trigger::part(base):hover {\n      background: none;\n      opacity: 0.6;\n    }\n\n    .separator-trigger.tickled::part(base) {\n    }\n\n    ixfx-menu-trigger {\n      display: none;\n    }\n\n    .horiz-select > ixfx-menu-trigger {\n      display: inline-flex;\n    }\n\n    .horiz-select {\n      display: flex;\n      min-width: 5ch;\n    }\n\n    .loading-spinner {\n      display: inline-block;\n      width: 12px;\n      height: 12px;\n      border: 2px solid var(--surface-5);\n      border-top-color: var(--accent);\n      border-radius: 50%;\n      animation: crumb-spin 0.7s linear infinite;\n    }\n\n    @keyframes crumb-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    ::slotted(*), option {\n      user-select: none;\n      scroll-snap-align: start;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-crumb-navigation\": CrumbNavigationElement;\n  }\n}\n\nimport type {\n  TreeActivateEvent,\n  TreeComponentEventMap,\n  TreeExpandEvent,\n  TreeItemClickEvent,\n  TreeSelectEvent,\n  TreeTickleEvent,\n} from '../common/tree-component.js';\n\nexport interface CrumbNavigationElementEventMap extends TreeComponentEventMap {\n  'item-click': TreeItemClickEvent;\n  'expand': TreeExpandEvent;\n  'select': TreeSelectEvent;\n  'tickle': TreeTickleEvent;\n  'activate': TreeActivateEvent;\n}\n\nexport interface CrumbNavigationElement {\n  addEventListener<K extends keyof CrumbNavigationElementEventMap>(\n    type: K,\n    listener: (this: CrumbNavigationElement, event: CrumbNavigationElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n}\n"],"mappings":"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"}

package/dist/data-display.d.ts

@@ -1,22 +1,26 @@
-import { LitElement } from 'lit';
-export type FormattingOptions = {
-    readonly precision?: number;
-    readonly roundNumbers?: number;
+import { LitElement } from "lit";
+
+//#region src/data-display.d.ts
+type FormattingOptions = {
+  readonly precision?: number;
+  readonly roundNumbers?: number;
 };
-export declare class DataDisplayComponent extends LitElement {
-    static styles: import("lit").CSSResult;
-    previousValue: Record<string, unknown> | undefined;
-    _container: HTMLElement;
-    constructor();
-    connectedCallback(): void;
-    formatValue(v: unknown, options?: FormattingOptions): string;
-    displayData(o: Record<string, unknown> | unknown[]): void;
-    getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement;
-    updateData(value: Record<string, unknown>): void;
+declare class DataDisplayComponent extends LitElement {
+  static styles: import("lit").CSSResult;
+  previousValue: Record<string, unknown> | undefined;
+  _container: HTMLElement;
+  constructor();
+  connectedCallback(): void;
+  formatValue(v: unknown, options?: FormattingOptions): string;
+  displayData(o: Record<string, unknown> | unknown[]): void;
+  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement;
+  updateData(value: Record<string, unknown>): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        'ixfx-data-display': DataDisplayComponent;
-    }
-}
+  interface HTMLElementTagNameMap {
+    'ixfx-data-display': DataDisplayComponent;
+  }
+} //# sourceMappingURL=data-display.d.ts.map
+//#endregion
+export { DataDisplayComponent, FormattingOptions };
 //# sourceMappingURL=data-display.d.ts.map

package/dist/data-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-display.d.ts","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"AAGA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAgBpB;IAEF,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IACnD,UAAU,EAAE,WAAW,CAAC;;IAOf,iBAAiB;IAK1B,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAE,iBAAsB,GAAG,MAAM;IAoBhE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE;IA8ClD,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,GAAG,WAAW;IAa5E,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAQ1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,oBAAoB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"data-display.d.ts","names":[],"sources":["../src/data-display.ts"],"mappings":";;;KAMY,iBAAA;EAAA,SACD,SAAA;EAAA,SACA,YAAY;AAAA;AAAA,cAIV,oBAAA,SAA6B,UAAA;EAAA,OACxB,MAAA,gBAAM,SAAA;EAkBtB,aAAA,EAAe,MAAA;EACf,UAAA,EAAY,WAAA;;EAOH,iBAAA,CAAA;EAKT,WAAA,CAAY,CAAA,WAAY,OAAA,GAAS,iBAAA;EAoBjC,WAAA,CAAY,CAAA,EAAG,MAAA;EA8Cf,WAAA,CAAY,IAAA,UAAc,IAAA,IAAQ,MAAA,EAAQ,WAAA,YAAuB,WAAA;EAajE,UAAA,CAAW,KAAA,EAAO,MAAA;AAAA;AAAA,QAUZ,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,oBAAoB;EAAA;AAAA"}

package/dist/data-display.js

@@ -1,17 +1,15 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var DataDisplayComponent_1;
-import { Records } from "@ixfx/core";
-import { round } from "@ixfx/numbers";
-import { css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { c as round } from "./dist-D7kJgnSE.js";
+import { i as records_exports } from "./dist-By5URG0Y.js";
+import { LitElement, css } from "lit";
+//#region src/data-display.ts
+var _DataDisplayComponent;
 let DataDisplayComponent = class DataDisplayComponent extends LitElement {
-    static { DataDisplayComponent_1 = this; }
-    static { this.styles = css `
+	static {
+		_DataDisplayComponent = this;
+	}
+	static {
+		this.styles = css`
     :host {
       display: block;
     }
@@ -27,101 +25,76 @@ let DataDisplayComponent = class DataDisplayComponent extends LitElement {
     div {
       border: var(--border-subtle);
     }
-  `; }
-    constructor() {
-        super();
-        this._container = document.createElement(`section`);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.renderRoot.append(this._container);
-    }
-    formatValue(v, options = {}) {
-        if (v === null)
-            return `(null)`;
-        if (v === undefined)
-            return `(undefined)`;
-        if (typeof v === `boolean`)
-            return v ? `true` : `false`;
-        if (typeof v === `string`)
-            return `"${v}"`;
-        if (typeof v === `number`) {
-            let vAsNumber = v;
-            if (options.roundNumbers !== undefined)
-                vAsNumber = round(options.roundNumbers, v);
-            if (options.precision !== undefined)
-                return vAsNumber.toFixed(options.precision);
-            return vAsNumber.toString();
-        }
-        return JSON.stringify(v);
-    }
-    displayData(o) {
-        if (o === null) {
-            this.innerHTML = ``;
-            return;
-        }
-        for (const [key, value] of Object.entries(o)) {
-            const domKey = `path-${key}`;
-            if (typeof value === `object`) {
-                const element = this.getOrCreate(domKey, (parent) => {
-                    parent.classList.add(`row`, `nested`);
-                    const label = document.createElement(`label`);
-                    label.textContent = key;
-                    const valueElement = new DataDisplayComponent_1();
-                    parent.append(label, valueElement);
-                });
-                const valueElement = element.querySelector(`ixfx-data-display`);
-                if (valueElement !== null) {
-                    valueElement.updateData(value);
-                }
-            }
-            else {
-                const element = this.getOrCreate(domKey, (parent) => {
-                    parent.classList.add(`row`);
-                    const label = document.createElement(`label`);
-                    label.textContent = key;
-                    const valueElement = document.createElement(`div`);
-                    valueElement.textContent = this.formatValue(value);
-                    parent.append(label, valueElement);
-                });
-                const valueElement = element.querySelector(`div`);
-                if (valueElement === null) {
-                    console.warn(`data-display.displayData Unexpected case?`);
-                    // debugger;
-                }
-                else {
-                    valueElement.innerHTML = this.formatValue(value);
-                }
-            }
-        }
-        // const paths = getFieldPaths(o);
-        // console.log(`paths: ${ JSON.stringify(paths) }`);
-        // for (const path of paths) {
-        // }
-    }
-    getOrCreate(path, init) {
-        const element = this.renderRoot.querySelector(`#${path}`);
-        if (element !== null)
-            return element;
-        const elementCreated = document.createElement(`div`);
-        elementCreated.id = path;
-        if (init)
-            init(elementCreated);
-        this._container.append(elementCreated);
-        return elementCreated;
-    }
-    updateData(value) {
-        if (this.previousValue === undefined) {
-            this.displayData(value);
-        }
-        else {
-            this.displayData(Records.changedProperties(this.previousValue, value));
-        }
-        this.previousValue = value;
-    }
+  `;
+	}
+	constructor() {
+		super();
+		this._container = document.createElement(`section`);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.renderRoot.append(this._container);
+	}
+	formatValue(v, options = {}) {
+		if (v === null) return `(null)`;
+		if (v === void 0) return `(undefined)`;
+		if (typeof v === `boolean`) return v ? `true` : `false`;
+		if (typeof v === `string`) return `"${v}"`;
+		if (typeof v === `number`) {
+			let vAsNumber = v;
+			if (options.roundNumbers !== void 0) vAsNumber = round(options.roundNumbers, v);
+			if (options.precision !== void 0) return vAsNumber.toFixed(options.precision);
+			return vAsNumber.toString();
+		}
+		return JSON.stringify(v);
+	}
+	displayData(o) {
+		if (o === null) {
+			this.innerHTML = ``;
+			return;
+		}
+		for (const [key, value] of Object.entries(o)) {
+			const domKey = `path-${key}`;
+			if (typeof value === `object`) {
+				const valueElement = this.getOrCreate(domKey, (parent) => {
+					parent.classList.add(`row`, `nested`);
+					const label = document.createElement(`label`);
+					label.textContent = key;
+					const valueElement = new _DataDisplayComponent();
+					parent.append(label, valueElement);
+				}).querySelector(`ixfx-data-display`);
+				if (valueElement !== null) valueElement.updateData(value);
+			} else {
+				const valueElement = this.getOrCreate(domKey, (parent) => {
+					parent.classList.add(`row`);
+					const label = document.createElement(`label`);
+					label.textContent = key;
+					const valueElement = document.createElement(`div`);
+					valueElement.textContent = this.formatValue(value);
+					parent.append(label, valueElement);
+				}).querySelector(`div`);
+				if (valueElement === null) console.warn(`data-display.displayData Unexpected case?`);
+				else valueElement.innerHTML = this.formatValue(value);
+			}
+		}
+	}
+	getOrCreate(path, init) {
+		const element = this.renderRoot.querySelector(`#${path}`);
+		if (element !== null) return element;
+		const elementCreated = document.createElement(`div`);
+		elementCreated.id = path;
+		if (init) init(elementCreated);
+		this._container.append(elementCreated);
+		return elementCreated;
+	}
+	updateData(value) {
+		if (this.previousValue === void 0) this.displayData(value);
+		else this.displayData(records_exports.changedProperties(this.previousValue, value));
+		this.previousValue = value;
+	}
 };
-DataDisplayComponent = DataDisplayComponent_1 = __decorate([
-    customElement(`ixfx-data-display`)
-], DataDisplayComponent);
+DataDisplayComponent = _DataDisplayComponent = __decorate([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
+//#endregion
 export { DataDisplayComponent };
+
 //# sourceMappingURL=data-display.js.map

package/dist/data-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-display.js","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-display.js","names":["Records","customElement"],"sources":["../src/data-display.ts"],"sourcesContent":["import { Records } from \"@ixfx/core\";\nimport { round } from \"@ixfx/numbers\";\n\nimport { css, LitElement } from 'lit';\nimport { safeCustomElement as customElement } from './util/custom-elements.js';\n\nexport type FormattingOptions = {\n  readonly precision?: number;\n  readonly roundNumbers?: number;\n};\n\n@customElement(`ixfx-data-display`)\nexport class DataDisplayComponent extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n    section {\n      background: var(--surface-3);\n      color: var(--surface-2-text);\n      border: var(--border);\n      padding: var(--space-m);\n      font-family: var(--font-mono);\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n    }\n    div {\n      border: var(--border-subtle);\n    }\n  `;\n\n  previousValue: Record<string, unknown> | undefined;\n  _container: HTMLElement;\n\n  constructor() {\n    super();\n    this._container = document.createElement(`section`);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.renderRoot.append(this._container);\n  }\n\n  formatValue(v: unknown, options: FormattingOptions = {}): string {\n    if (v === null)\n      return `(null)`;\n    if (v === undefined)\n      return `(undefined)`;\n    if (typeof v === `boolean`)\n      return v ? `true` : `false`;\n    if (typeof v === `string`)\n      return `\"${v}\"`;\n    if (typeof v === `number`) {\n      let vAsNumber = v;\n      if (options.roundNumbers !== undefined)\n        vAsNumber = round(options.roundNumbers, v);\n      if (options.precision !== undefined)\n        return vAsNumber.toFixed(options.precision);\n      return vAsNumber.toString();\n    }\n    return JSON.stringify(v);\n  }\n\n  displayData(o: Record<string, unknown> | unknown[]) {\n    if (o === null) {\n      this.innerHTML = ``;\n      return;\n    }\n    for (const [key, value] of Object.entries(o)) {\n      const domKey = `path-${key}`;\n      if (typeof value === `object`) {\n        const element = this.getOrCreate(domKey, (parent) => {\n          parent.classList.add(`row`, `nested`);\n          const label = document.createElement(`label`);\n          label.textContent = key;\n          const valueElement = new DataDisplayComponent();\n          parent.append(label, valueElement);\n        });\n        const valueElement = element.querySelector<DataDisplayComponent>(`ixfx-data-display`);\n        if (valueElement !== null) {\n          valueElement.updateData(value as Record<string, unknown>);\n        }\n      } else {\n        const element = this.getOrCreate(domKey, (parent) => {\n          parent.classList.add(`row`);\n          const label = document.createElement(`label`);\n          label.textContent = key;\n          const valueElement = document.createElement(`div`);\n          valueElement.textContent = this.formatValue(value);\n          parent.append(label, valueElement);\n        });\n        const valueElement = element.querySelector(`div`);\n        if (valueElement === null) {\n          console.warn(`data-display.displayData Unexpected case?`);\n          // debugger;\n        } else {\n          valueElement.innerHTML = this.formatValue(value);\n        }\n      }\n    }\n\n    // const paths = getFieldPaths(o);\n    // console.log(`paths: ${ JSON.stringify(paths) }`);\n\n    // for (const path of paths) {\n\n    // }\n  }\n\n  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement {\n    const element = this.renderRoot.querySelector(`#${path}`) as HTMLElement | null;\n    if (element !== null)\n      return element;\n\n    const elementCreated = document.createElement(`div`);\n    elementCreated.id = path;\n    if (init)\n      init(elementCreated);\n    this._container.append(elementCreated);\n    return elementCreated;\n  }\n\n  updateData(value: Record<string, unknown>) {\n    if (this.previousValue === undefined) {\n      this.displayData(value);\n    } else {\n      this.displayData(Records.changedProperties(this.previousValue, value));\n    }\n    this.previousValue = value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-data-display': DataDisplayComponent;\n  }\n}\n"],"mappings":";;;;;;AAYO,IAAA,uBAAA,MAAM,6BAA6B,WAAW;;;;;gBAC1B,GAAG;;;;;;;;;;;;;;;;;;CAqB5B,cAAc;EACZ,MAAM;EACN,KAAK,aAAa,SAAS,cAAc,SAAS;CACpD;CAEA,oBAA6B;EAC3B,MAAM,kBAAkB;EACxB,KAAK,WAAW,OAAO,KAAK,UAAU;CACxC;CAEA,YAAY,GAAY,UAA6B,CAAC,GAAW;EAC/D,IAAI,MAAM,MACR,OAAO;EACT,IAAI,MAAM,KAAA,GACR,OAAO;EACT,IAAI,OAAO,MAAM,WACf,OAAO,IAAI,SAAS;EACtB,IAAI,OAAO,MAAM,UACf,OAAO,IAAI,EAAE;EACf,IAAI,OAAO,MAAM,UAAU;GACzB,IAAI,YAAY;GAChB,IAAI,QAAQ,iBAAiB,KAAA,GAC3B,YAAY,MAAM,QAAQ,cAAc,CAAC;GAC3C,IAAI,QAAQ,cAAc,KAAA,GACxB,OAAO,UAAU,QAAQ,QAAQ,SAAS;GAC5C,OAAO,UAAU,SAAS;EAC5B;EACA,OAAO,KAAK,UAAU,CAAC;CACzB;CAEA,YAAY,GAAwC;EAClD,IAAI,MAAM,MAAM;GACd,KAAK,YAAY;GACjB;EACF;EACA,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,CAAC,GAAG;GAC5C,MAAM,SAAS,QAAQ;GACvB,IAAI,OAAO,UAAU,UAAU;IAQ7B,MAAM,eAPU,KAAK,YAAY,SAAS,WAAW;KACnD,OAAO,UAAU,IAAI,OAAO,QAAQ;KACpC,MAAM,QAAQ,SAAS,cAAc,OAAO;KAC5C,MAAM,cAAc;KACpB,MAAM,eAAe,IAAA,sBAAyB;KAC9C,OAAO,OAAO,OAAO,YAAY;IACnC,CAC2B,EAAE,cAAoC,mBAAmB;IACpF,IAAI,iBAAiB,MACnB,aAAa,WAAW,KAAgC;GAE5D,OAAO;IASL,MAAM,eARU,KAAK,YAAY,SAAS,WAAW;KACnD,OAAO,UAAU,IAAI,KAAK;KAC1B,MAAM,QAAQ,SAAS,cAAc,OAAO;KAC5C,MAAM,cAAc;KACpB,MAAM,eAAe,SAAS,cAAc,KAAK;KACjD,aAAa,cAAc,KAAK,YAAY,KAAK;KACjD,OAAO,OAAO,OAAO,YAAY;IACnC,CAC2B,EAAE,cAAc,KAAK;IAChD,IAAI,iBAAiB,MACnB,QAAQ,KAAK,2CAA2C;SAGxD,aAAa,YAAY,KAAK,YAAY,KAAK;GAEnD;EACF;CAQF;CAEA,YAAY,MAAc,MAAmD;EAC3E,MAAM,UAAU,KAAK,WAAW,cAAc,IAAI,MAAM;EACxD,IAAI,YAAY,MACd,OAAO;EAET,MAAM,iBAAiB,SAAS,cAAc,KAAK;EACnD,eAAe,KAAK;EACpB,IAAI,MACF,KAAK,cAAc;EACrB,KAAK,WAAW,OAAO,cAAc;EACrC,OAAO;CACT;CAEA,WAAW,OAAgC;EACzC,IAAI,KAAK,kBAAkB,KAAA,GACzB,KAAK,YAAY,KAAK;OAEtB,KAAK,YAAYA,gBAAQ,kBAAkB,KAAK,eAAe,KAAK,CAAC;EAEvE,KAAK,gBAAgB;CACvB;AACF;2DAxHCC,kBAAc,mBAAmB,CAAA,GAAA,oBAAA"}

package/dist/decorate-O4m1U4l3.js

@@ -0,0 +1,25 @@
+//#region src/util/custom-elements.ts
+const getRegistry = () => {
+	if (typeof customElements === `undefined`) return void 0;
+	return customElements;
+};
+const safeDefine = (name, ctor) => {
+	const registry = getRegistry();
+	if (!registry) return;
+	if (registry.get(name) === void 0) registry.define(name, ctor);
+};
+const safeCustomElement = (name) => (ctor) => {
+	safeDefine(name, ctor);
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { safeCustomElement as n, __decorate as t };
+
+//# sourceMappingURL=decorate-O4m1U4l3.js.map

package/dist/decorate-O4m1U4l3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorate-O4m1U4l3.js","names":[],"sources":["../src/util/custom-elements.ts"],"sourcesContent":["type CustomElementCtor = CustomElementConstructor;\n\nconst getRegistry = (): CustomElementRegistry | undefined => {\n  if (typeof customElements === `undefined`) return undefined;\n  return customElements;\n};\n\nexport const safeDefine = (name: string, ctor: CustomElementCtor): void => {\n  const registry = getRegistry();\n  if (!registry) return;\n  const existing = registry.get(name);\n  if (existing === undefined) {\n    registry.define(name, ctor);\n  }\n};\n\nexport const safeCustomElement = (name: string) => (ctor: CustomElementCtor): void => {\n  safeDefine(name, ctor);\n};\n"],"mappings":";AAEA,MAAM,oBAAuD;CAC3D,IAAI,OAAO,mBAAmB,aAAa,OAAO,KAAA;CAClD,OAAO;AACT;AAEA,MAAa,cAAc,MAAc,SAAkC;CACzE,MAAM,WAAW,YAAY;CAC7B,IAAI,CAAC,UAAU;CAEf,IADiB,SAAS,IAAI,IACnB,MAAM,KAAA,GACf,SAAS,OAAO,MAAM,IAAI;AAE9B;AAEA,MAAa,qBAAqB,UAAkB,SAAkC;CACpF,WAAW,MAAM,IAAI;AACvB"}

package/dist/defaults-FEZaGiYZ.js

@@ -0,0 +1,38 @@
+import { i as registerIcon } from "./registry-CZEB1YI9.js";
+//#region src/icons/defaults.ts
+/**
+* Chevron pointing down. Used for split-button dropdown toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>`;
+/**
+* Caret pointing right. Used for tree-basic expand indicator as a CSS mask.
+* fill="black" is correct for CSS mask-image use (shape only, color comes from background-color).
+*/
+const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10 7l6 5-6 5V7z"/></svg>`;
+/**
+* Checkmark. Useful for menu-check-item or confirmation states.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
+/**
+* Close / X icon. Useful for dialogs, notifications, dismissible elements.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+/**
+* Chevron pointing right. Used for split-button switcher toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+function registerDefaults() {
+	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
+	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
+	registerIcon(`caret-right`, ICON_CARET_RIGHT);
+	registerIcon(`check`, ICON_CHECK);
+	registerIcon(`close`, ICON_CLOSE);
+}
+//#endregion
+export { registerDefaults as a, ICON_CLOSE as i, ICON_CHECK as n, ICON_CHEVRON_DOWN as r, ICON_CARET_RIGHT as t };
+
+//# sourceMappingURL=defaults-FEZaGiYZ.js.map

package/dist/defaults-FEZaGiYZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults-FEZaGiYZ.js","names":[],"sources":["../src/icons/defaults.ts"],"sourcesContent":["import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,qBAAqB;AAElC,SAAgB,mBAAyB;CACvC,aAAa,gBAAgB,iBAAiB;CAC9C,aAAa,iBAAiB,kBAAkB;CAChD,aAAa,eAAe,gBAAgB;CAC5C,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;AAClC"}