@ixfx/components 0.2.4 → 0.2.5

package/dist/crumbs/crumb-path.js

@@ -1,691 +0,0 @@
-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