@ixfx/components 0.2.2 → 0.2.4

package/dist/crumbs/crumb-path.js

@@ -0,0 +1,691 @@
+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;
+};
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { popupSurfaceStyles } from '../styles/popup.js';
+import '../ac-text/ac-text.js';
+const INVALID_ANCHOR_CHARS_RE = /[^\w-]/g;
+let CrumbPathElement = class CrumbPathElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.path = ``;
+        this.separator = `/`;
+        this.pathRoot = ``;
+        this._openIdx = null;
+        this._editing = false;
+        this._cachedSiblings = new Map();
+        this._leafSegmentIndex = null;
+        this._confirmedLeafIndices = new Set();
+        this._dropdownActiveIndex = -1;
+        this._editingCancelled = false;
+        this._editStartIndex = null;
+        this._openCumPath = null;
+        this.#uid = Math.random().toString(36).slice(2, 8);
+        this.#onPopoverToggle = (e) => {
+            if (e.newState === `closed` && this._openIdx !== null) {
+                this._openIdx = null;
+                this._dropdownActiveIndex = -1;
+                this.#cleanupPending();
+            }
+        };
+        this.#onDropdownKeyDown = (e) => {
+            if (this._openIdx === null)
+                return;
+            const siblings = this._cachedSiblings.get(this._openCumPath ?? String(this._openIdx)) ?? [];
+            if (!siblings.length) {
+                if (e.key === `Escape`) {
+                    e.preventDefault();
+                    this.#closeDropdown();
+                }
+                return;
+            }
+            switch (e.key) {
+                case `ArrowDown`:
+                    e.preventDefault();
+                    this._dropdownActiveIndex = (this._dropdownActiveIndex + 1) % siblings.length;
+                    this.#scrollDropdownActiveIntoView();
+                    break;
+                case `ArrowUp`:
+                    e.preventDefault();
+                    this._dropdownActiveIndex = this._dropdownActiveIndex <= 0
+                        ? siblings.length - 1
+                        : this._dropdownActiveIndex - 1;
+                    this.#scrollDropdownActiveIntoView();
+                    break;
+                case `Enter`:
+                    if (this._dropdownActiveIndex >= 0) {
+                        e.preventDefault();
+                        this.#selectSibling(this._openIdx, siblings[this._dropdownActiveIndex]);
+                    }
+                    break;
+                case `Escape`:
+                    e.preventDefault();
+                    this.#closeDropdown();
+                    break;
+            }
+        };
+        this.#onHostKeyDown = (e) => {
+            if (this._editing)
+                return;
+            const nonEditKeys = [`ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight`, `Enter`];
+            if (!nonEditKeys.includes(e.key)) {
+                this._editing = true;
+            }
+        };
+    }
+    #pendingController;
+    #pendingIndex;
+    #uid;
+    #anchorName(cumPath) {
+        return `--cp-${this.#uid}-${cumPath
+            .replaceAll(this.separator, `-`)
+            .replaceAll(` `, `-`)
+            .replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
+    }
+    #closeDropdown() {
+        if (this._openIdx !== null) {
+            this._openIdx = null;
+            this._openCumPath = null;
+            this._dropdownActiveIndex = -1;
+            this.#cleanupPending();
+            const popup = this.shadowRoot?.querySelector(`.crumb-dropdown`);
+            try {
+                popup?.hidePopover();
+            }
+            catch { /* unsupported */ }
+        }
+    }
+    #onPopoverToggle;
+    updated(changedProperties) {
+        if (this._editing) {
+            const el = this.shadowRoot?.querySelector(`ixfx-ac-text`);
+            if (el instanceof LitElement) {
+                const editValue = this.path;
+                if (this._editStartIndex !== null) {
+                    const segments = this.#getSegments();
+                    const segmentLabel = segments[this._editStartIndex];
+                    const startPos = this.path.indexOf(segmentLabel);
+                    el.focusWithValue(editValue, startPos);
+                }
+                else {
+                    el.focusWithValue(editValue);
+                }
+            }
+        }
+        if (changedProperties.has(`_openIdx`) && this._openIdx !== null) {
+            this.updateComplete.then(() => {
+                const popup = this.shadowRoot?.querySelector(`.crumb-dropdown`);
+                if (popup) {
+                    popup.style.setProperty(`position-anchor`, this.#anchorName(this._openCumPath ?? String(this._openIdx)));
+                    try {
+                        popup.showPopover();
+                    }
+                    catch { /* unsupported */ }
+                    popup.focus();
+                }
+            });
+        }
+    }
+    #cleanupPending() {
+        if (this.#pendingController) {
+            this.#pendingController.abort();
+            this.#pendingController = undefined;
+            this.#pendingIndex = undefined;
+        }
+    }
+    #getSegments() {
+        const fullPath = this.path;
+        if (this.pathRoot.length > 0 && fullPath.startsWith(this.pathRoot)) {
+            const relativePath = fullPath.slice(this.pathRoot.length);
+            return relativePath.split(this.separator).filter(p => p.length > 0);
+        }
+        return this.path.split(this.separator).filter(p => p.length > 0);
+    }
+    #getRootSegments() {
+        if (this.pathRoot.length === 0)
+            return [];
+        return this.pathRoot.split(this.separator).filter(p => p.length > 0);
+    }
+    #getCumulativePath(index, isRoot) {
+        const segments = this.#getSegments();
+        const rootSegments = this.#getRootSegments();
+        if (isRoot) {
+            return rootSegments.slice(0, index + 1).join(this.separator);
+        }
+        return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
+    }
+    setPath(newPath) {
+        this.#cleanupPending();
+        if (this.pathRoot.length > 0 && !newPath.startsWith(this.pathRoot)) {
+            newPath = this.pathRoot;
+        }
+        this.path = newPath;
+        this._cachedSiblings = new Map();
+        this._openIdx = null;
+        this._leafSegmentIndex = null;
+        this._confirmedLeafIndices = new Set();
+    }
+    getPath() {
+        return this.path;
+    }
+    #onCaretClick(index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._openIdx === index) {
+            this.#closeDropdown();
+            return;
+        }
+        const target = event.currentTarget;
+        const cumPath = target.dataset.cumulative;
+        this._openIdx = index;
+        this._openCumPath = cumPath ?? null;
+        this._dropdownActiveIndex = -1;
+        const segments = this.#getSegments();
+        const rootSegments = this.#getRootSegments();
+        const pathSegments = cumPath
+            ? cumPath.split(this.separator).filter(p => p.length > 0)
+            : (index === -1 ? rootSegments : segments.slice(0, index + 1));
+        const cacheKey = cumPath ?? String(index);
+        if (!this._cachedSiblings.has(cacheKey) && this.siblingLookup) {
+            this.#cleanupPending();
+            const controller = new AbortController();
+            this.#pendingController = controller;
+            this.#pendingIndex = index;
+            this.siblingLookup(pathSegments, index, controller.signal)
+                .then((siblings) => {
+                if (!controller.signal.aborted) {
+                    this._cachedSiblings.set(cacheKey, siblings);
+                    if (siblings.length === 0) {
+                        this._confirmedLeafIndices.add(cumPath ?? ``);
+                    }
+                    this.#pendingController = undefined;
+                    this.#pendingIndex = undefined;
+                    this.requestUpdate();
+                }
+            })
+                .catch((err) => {
+                if (err.name !== `AbortError`) {
+                    console.error(`Sibling lookup failed:`, err);
+                }
+                this.#pendingController = undefined;
+                this.#pendingIndex = undefined;
+            });
+            this.dispatchEvent(new CustomEvent(`expand`, {
+                detail: { index, segments: pathSegments, path: pathSegments.join(this.separator), signal: controller.signal },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        this.requestUpdate();
+    }
+    #onLabelClick(index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#closeDropdown();
+        const segments = this.#getSegments();
+        const truncatedSegments = segments.slice(0, index + 1);
+        const hadLeading = this.path.startsWith(this.separator);
+        const newPath = truncatedSegments.join(this.separator);
+        this.path = hadLeading ? this.separator + newPath : newPath;
+        this._cachedSiblings = new Map();
+        this._leafSegmentIndex = null;
+        const parentPath = truncatedSegments.slice(0, -1).join(this.separator);
+        this.dispatchEvent(new CustomEvent(`navigate`, {
+            detail: { index, label: truncatedSegments[index], parentPath, fullPath: newPath },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #selectSibling(index, segment) {
+        const cumPath = this._openCumPath;
+        this.#closeDropdown();
+        const segments = this.#getSegments();
+        const rootSegments = this.#getRootSegments();
+        let newSegments;
+        if (cumPath) {
+            newSegments = [...cumPath.split(this.separator).filter(p => p.length > 0), segment.label];
+        }
+        else if (this.pathRoot.length > 0 && index < rootSegments.length) {
+            newSegments = [...rootSegments.slice(0, index + 1), segment.label];
+        }
+        else {
+            newSegments = [...rootSegments, ...segments.slice(0, index + 1 - rootSegments.length), segment.label];
+        }
+        const hadLeading = this.path.startsWith(this.separator);
+        const newPath = newSegments.join(this.separator);
+        this.path = hadLeading ? this.separator + newPath : newPath;
+        this._cachedSiblings = new Map();
+        const leafIndex = segment.isLeaf ? newSegments.length - 1 : null;
+        this._leafSegmentIndex = leafIndex;
+        if (segment.isLeaf) {
+            this._confirmedLeafIndices.add(cumPath ?? ``);
+        }
+        const parentPath = newSegments.slice(0, -1).join(this.separator);
+        this.dispatchEvent(new CustomEvent(`navigate`, {
+            detail: { index, label: segment.label, parentPath, fullPath: newPath },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #onSiblingClick(index, segment, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#selectSibling(index, segment);
+    }
+    #onDropdownKeyDown;
+    #scrollDropdownActiveIntoView() {
+        this.updateComplete.then(() => {
+            this.shadowRoot?.querySelector(`.crumb-option.active`)
+                ?.scrollIntoView({ block: `nearest` });
+        });
+    }
+    #renderDropdownContent(index) {
+        const siblings = this._cachedSiblings.get(this._openCumPath ?? String(index)) ?? [];
+        const isPending = this.#pendingIndex === index;
+        return html `
+      ${isPending ? html `<span class="loading-spinner"></span>` : nothing}
+      ${siblings.length === 0 && !isPending
+            ? html `<span class="crumb-option crumb-option-label">No items</span>`
+            : siblings.map((segment, i) => html `
+          <div class="crumb-option ${i === this._dropdownActiveIndex ? `active` : ``}"
+               @click=${(e) => this.#onSiblingClick(index, segment, e)}>
+            ${segment.icon
+                ? html `<ixfx-icon class="crumb-icon" name="${segment.icon}"></ixfx-icon>`
+                : nothing}
+            <span class="option-label">${segment.label}</span>
+          </div>
+        `)}
+    `;
+    }
+    #renderSegment(label, index, isLast) {
+        const isOpen = this._openIdx === index;
+        const cumPath = this.#getCumulativePath(index, false);
+        return html `
+      <div class="seg" data-cumulative=${cumPath} @click=${(e) => this.#onSegmentClick(index, e)}>
+        <label title=${label} @click=${(e) => this.#onLabelClick(index, e)}>
+          ${label}
+        </label>
+        ${(!isLast || this.siblingLookup) && this._leafSegmentIndex !== index
+            ? html `
+          <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               style="anchor-name: ${this.#anchorName(cumPath)}"
+               data-cumulative=${cumPath}
+               @click=${(e) => this.#onCaretClick(index, e)}>
+            ${this.separator}
+          </div>
+        `
+            : nothing}
+      </div>
+    `;
+    }
+    #renderRootSegment(label, index) {
+        const rootSegments = this.#getRootSegments();
+        const isLast = index === rootSegments.length - 1;
+        const isOpen = this._openIdx === index;
+        const cumPath = this.#getCumulativePath(index, true);
+        return html `
+      <div class="seg seg-root" data-cumulative=${cumPath} @click=${(e) => this.#onRootSegmentClick(index, e)}>
+        <label title=${label}>${label}</label>
+        ${isLast && this.siblingLookup
+            ? html `
+          <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               style="anchor-name: ${this.#anchorName(cumPath)}"
+               data-cumulative=${cumPath}
+               @click=${(e) => this.#onCaretClick(index, e)}>
+            ${this.separator}
+          </div>
+        `
+            : nothing}
+      </div>
+    `;
+    }
+    #onRootSegmentClick(index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const rootSegments = this.#getRootSegments();
+        const newPath = rootSegments.slice(0, index + 1).join(this.separator);
+        this.setPath(newPath);
+    }
+    #onSegmentClick(index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#closeDropdown();
+        this._editing = true;
+        this._editStartIndex = index;
+    }
+    #onTrailingClick() {
+        this.#closeDropdown();
+        this._editing = true;
+        this._editStartIndex = null;
+    }
+    #makeCompletionProvider() {
+        return async (query, signal) => {
+            if (!this.siblingLookup)
+                return [];
+            const endsWithSep = query.endsWith(this.separator);
+            const parts = query.split(this.separator).filter(p => p.length > 0);
+            const parentSegments = endsWithSep ? parts : parts.slice(0, -1);
+            const lastSegment = endsWithSep ? `` : (parts.at(-1) ?? ``);
+            const hadLeading = query.startsWith(this.separator);
+            const children = await this.siblingLookup(parentSegments, parentSegments.length - 1, signal);
+            return children
+                .filter(c => c.label.toLowerCase().startsWith(lastSegment.toLowerCase()))
+                .map((c) => {
+                const joined = [...parentSegments, c.label].join(this.separator);
+                return { label: hadLeading ? this.separator + joined : joined, icon: c.icon, isLeaf: c.isLeaf };
+            });
+        };
+    }
+    #onAcChange(e) {
+        e.stopPropagation();
+        const newPath = e.detail.value;
+        this.path = newPath;
+        this._cachedSiblings = new Map();
+        this._leafSegmentIndex = newPath.endsWith(this.separator) ? null : newPath.split(this.separator).filter((p) => p.length > 0).length - 1;
+        this._editing = false;
+        this._editingCancelled = false;
+        this._editStartIndex = null;
+        this.#dispatchChangeEvent(newPath);
+    }
+    #onAcFocusOut() {
+        if (this._editing) {
+            this._editing = false;
+            if (!this._editingCancelled) {
+                const el = this.shadowRoot?.querySelector(`ixfx-ac-text`);
+                const newPath = el?.value ?? this.path;
+                if (newPath !== this.path) {
+                    this.path = newPath;
+                    this._cachedSiblings = new Map();
+                    this._leafSegmentIndex = newPath.endsWith(this.separator) ? null : newPath.split(this.separator).filter((p) => p.length > 0).length - 1;
+                    this.#dispatchChangeEvent(newPath);
+                }
+            }
+            this._editingCancelled = false;
+            this._editStartIndex = null;
+        }
+    }
+    #dispatchChangeEvent(newPath) {
+        const segments = newPath.split(this.separator).filter(p => p.length > 0);
+        const label = segments.at(-1) ?? ``;
+        const parentPath = segments.slice(0, -1).join(this.separator);
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: { label, parentPath, fullPath: newPath },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #onAcKeyDown(e) {
+        if (e.key === `Escape`) {
+            this._editingCancelled = true;
+            this._editing = false;
+            this._editStartIndex = null;
+        }
+    }
+    #onHostKeyDown;
+    render() {
+        const segments = this.#getSegments();
+        if (this._editing) {
+            const editValue = this.path;
+            return html `
+        <ixfx-ac-text
+          .value=${editValue}
+          .tabSuffix=${this.separator}
+          .completionProvider=${this.#makeCompletionProvider()}
+          @change=${this.#onAcChange}
+          @focusout=${this.#onAcFocusOut}
+          @keydown=${this.#onAcKeyDown}
+        ></ixfx-ac-text>
+      `;
+        }
+        const rootSegments = this.#getRootSegments();
+        const leadingCaret = this.siblingLookup && rootSegments.length === 0
+            ? html `
+      <div class="caret ${this._openIdx === -1 ? `open` : ``} ${this._confirmedLeafIndices.has(``) ? `disabled` : ``}"
+           style="anchor-name: ${this.#anchorName(``)}"
+           data-cumulative=""
+           @click=${(e) => this.#onCaretClick(-1, e)}>
+        ${this.separator}
+      </div>`
+            : nothing;
+        return html `
+      <div class="crumbs" tabindex="0" @keydown=${this.#onHostKeyDown}>
+        ${rootSegments.length > 0
+            ? rootSegments.map((label, i) => this.#renderRootSegment(label, i))
+            : nothing}
+        ${leadingCaret}
+        ${segments.map((label, i) => this.#renderSegment(label, i, i === segments.length - 1))}
+        <div class="trailing" @click=${this.#onTrailingClick}></div>
+      </div>
+      ${this._openIdx !== null
+            ? html `
+        <div class="crumb-dropdown popup-surface" popover="auto" tabindex="-1"
+             @toggle=${this.#onPopoverToggle}
+             @keydown=${this.#onDropdownKeyDown}
+             @click=${(e) => e.stopPropagation()}>
+          ${this.#renderDropdownContent(this._openIdx)}
+        </div>
+      `
+            : nothing}
+    `;
+    }
+    static { this.styles = [popupSurfaceStyles, css `
+    :host {
+      --text-highlight: var(--accent);
+      --separator: var(--surface-muted-text);
+      --padding-s: var(--space-xs);
+      --padding-m: var(--space-s);
+
+      display: flex;
+      width: 100%;
+      gap: var(--padding-s);
+      position: relative;
+    }
+
+    ixfx-ac-text {
+      flex: 1;
+      font-size: inherit;
+      --ac-input-padding: var(--padding-s) var(--padding-m);
+      --ac-input-background: var(--surface-4);
+      --ac-input-border-radius: var(--radius-s, 3px);
+      --ac-popup-font-size: var(--text-s, 11px);
+    }
+
+    .crumbs {
+      display: flex;
+      width: 100%;
+      overflow-x:scroll;
+      scroll-snap-type:x proximity;
+      scrollbar-width: none;
+    }
+
+    .trailing {
+      flex: 1;
+      min-width: 1em;
+      cursor: text;
+    }
+
+    .seg {
+      scroll-snap-align:start;
+
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      user-select: none;
+      pointer-events: auto;
+    }
+
+    .seg:hover {
+      overflow: unset;
+    }
+
+    .seg-root {
+      opacity: 0.8;
+    }
+
+    .seg-root:hover {
+      opacity: 1;
+    }
+
+    .seg-root label {
+      font-weight: normal;
+    }
+
+    label {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      align-content: center;
+      overflow: hidden;
+      padding: 0 var(--padding-m);
+      transition: all 0.2s ease-in-out;
+      border-radius: var(--radius-m);
+    }
+
+    label:hover,.caret:hover {
+      color: var(--item-text-tickled);
+      background: var(--item-bg-tickled);
+    }
+
+    .caret {
+      scroll-snap-align:start;
+
+      position: relative;
+      padding: var(--padding-m);
+      transition: all 0.2s ease-in-out;
+
+      border-radius: var(--radius-m);
+    }
+
+
+    .caret.open {
+      background: color-mix(in srgb, var(--hover-bg) 40%, transparent);
+    }
+
+    .caret.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .crumb-icon {
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+    }
+
+    .crumb-dropdown {
+      /* Reset popover UA defaults */
+      inset: unset;
+      margin: 0;
+
+      /* Anchor positioning — position-anchor set dynamically via JS */
+      position: fixed;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin-block-start: 2px;
+
+      min-width: 10ch;
+      max-width: min(40ch, 80vw);
+      max-height: 280px;
+      overflow-y: auto;
+      padding: var(--padding-s);
+      outline: none;
+    }
+
+    .crumb-option {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-s);
+      padding: var(--padding-s) var(--padding-m);
+      cursor: pointer;
+      border-radius: var(--radius-s, 4px);
+      transition: background 0.15s ease-out;
+      overflow: hidden;
+    }
+
+    .crumb-option:hover,
+    .crumb-option.active {
+      background: var(--hover-bg);
+      color: var(--hover-fg);
+    }
+
+    .option-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .crumb-option-label {
+      font-style: italic;
+      opacity: 0.6;
+      pointer-events: none;
+      user-select: none;
+    }
+
+    .loading-spinner {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: crumb-spin 0.7s linear infinite;
+    }
+
+    @keyframes crumb-spin {
+      to { transform: rotate(360deg); }
+    }
+  `]; }
+};
+__decorate([
+    property({ type: String })
+], CrumbPathElement.prototype, "path", void 0);
+__decorate([
+    property({ type: String })
+], CrumbPathElement.prototype, "separator", void 0);
+__decorate([
+    property({ type: String, attribute: `path-root` })
+], CrumbPathElement.prototype, "pathRoot", void 0);
+__decorate([
+    property({ type: Object })
+], CrumbPathElement.prototype, "siblingLookup", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_openIdx", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_editing", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_cachedSiblings", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_leafSegmentIndex", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_confirmedLeafIndices", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_editingCancelled", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_editStartIndex", void 0);
+__decorate([
+    state()
+], CrumbPathElement.prototype, "_openCumPath", void 0);
+CrumbPathElement = __decorate([
+    customElement(`ixfx-crumb-path`)
+], CrumbPathElement);
+export { CrumbPathElement };
+//# sourceMappingURL=crumb-path.js.map