@ixfx/components 0.2.4 → 0.2.6

package/dist/narrowed-text/narrowed-text.js

@@ -1,668 +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, query, state } from 'lit/decorators.js';
-import { applyHighlights, buildHighlightTargets, clearHighlights, createIncrSearch, } from '../incr-search/index.js';
-import { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';
-const HIGHLIGHT_KEY = `narrowed-text-highlight`;
-let NarrowedTextElement = class NarrowedTextElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.selectionMode = `single`;
-        this.requiredSelection = false;
-        this.orientation = `horizontal`;
-        this.nowrap = false;
-        this.separator = ` `;
-        this.preserveFilter = false;
-        this.value = ``;
-        this._query = ``;
-        this._computedItems = [];
-        this._filteredItems = [];
-        this._isFocused = false;
-        this._selectedValues = new Set();
-        this._search = createIncrSearch({
-            selector: item => item.label ?? item.value,
-        });
-        // TickledController manages hover and keyboard focus
-        this.tickled = new TickledController(this, {
-            getItems: () => {
-                return this._filteredItems.map((_, i) => ({
-                    id: i,
-                    enabled: true,
-                }));
-            },
-            onTickle: (id) => {
-                if (id === undefined || !this.shadowRoot)
-                    return;
-                const itemsContainer = this.shadowRoot.querySelector(`.items`);
-                if (!itemsContainer)
-                    return;
-                const itemEls = itemsContainer.querySelectorAll(`.item`);
-                const itemEl = itemEls[id];
-                if (itemEl) {
-                    itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });
-                }
-            },
-        });
-        this.#handleSlotChange = () => {
-            this._updateComputedItems();
-        };
-        this.#onInput = (e) => {
-            const input = e.target;
-            this._query = input.value;
-            // Reset tickled to first item when query changes
-            if (this._query.trim() && this._filteredItems.length > 0) {
-                this.tickled.setTickled(0);
-            }
-            else {
-                this.tickled.clearTickled();
-            }
-            this._updateFilteredItems();
-        };
-        this.#onKeyDown = (e) => {
-            if (this._filteredItems.length === 0) {
-                return;
-            }
-            switch (e.key) {
-                case `Tab`: {
-                    if (e.shiftKey) {
-                        e.preventDefault();
-                        this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {
-                            bubbles: true,
-                            composed: true,
-                        }));
-                    }
-                    return;
-                }
-                case `ArrowRight`: {
-                    if (this.orientation !== `horizontal`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    const lastIndex = this._filteredItems.length - 1;
-                    if (currentTickled !== undefined && currentTickled >= lastIndex) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`next`);
-                    break;
-                }
-                case `ArrowLeft`: {
-                    if (this.orientation !== `horizontal`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    if (currentTickled !== undefined && currentTickled <= 0) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`previous`);
-                    break;
-                }
-                case `ArrowDown`: {
-                    if (this.orientation !== `vertical`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    const lastIndex = this._filteredItems.length - 1;
-                    if (currentTickled !== undefined && currentTickled >= lastIndex) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`next`);
-                    break;
-                }
-                case `ArrowUp`: {
-                    if (this.orientation !== `vertical`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    if (currentTickled !== undefined && currentTickled <= 0) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`previous`);
-                    break;
-                }
-                case `Enter`: {
-                    e.preventDefault();
-                    const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];
-                    if (this.orientation !== `horizontal`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    const lastIndex = this._filteredItems.length - 1;
-                    if (currentTickled !== undefined && currentTickled >= lastIndex) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`next`);
-                    break;
-                }
-                case `ArrowLeft`: {
-                    if (this.orientation !== `horizontal`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    if (currentTickled !== undefined && currentTickled <= 0) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`previous`);
-                    break;
-                }
-                case `ArrowDown`: {
-                    if (this.orientation !== `vertical`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    const lastIndex = this._filteredItems.length - 1;
-                    if (currentTickled !== undefined && currentTickled >= lastIndex) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`next`);
-                    break;
-                }
-                case `ArrowUp`: {
-                    if (this.orientation !== `vertical`) {
-                        return;
-                    }
-                    const currentTickled = this.tickled.tickledId;
-                    if (currentTickled !== undefined && currentTickled <= 0) {
-                        return;
-                    }
-                    e.preventDefault();
-                    this.tickled.handleKeyboardNavigation(`previous`);
-                    break;
-                }
-                case `Enter`: {
-                    e.preventDefault();
-                    const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];
-                    if (tickledItem) {
-                        this._selectItem(tickledItem, false);
-                        // Enter always clears filter regardless of preserveFilter
-                        this._query = ``;
-                        this._updateFilteredItems();
-                    }
-                    break;
-                }
-                case ` `: {
-                    e.preventDefault();
-                    if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {
-                        this._selectItem(this._filteredItems[this.tickled.tickledId], false);
-                    }
-                    break;
-                }
-                case `Escape`: {
-                    e.preventDefault();
-                    this._query = ``;
-                    this.tickled.clearTickled();
-                    this._updateFilteredItems();
-                    break;
-                }
-            }
-        };
-        this.#onFocus = () => {
-            this._isFocused = true;
-            if (this._query.trim() && this._filteredItems.length > 0) {
-                this.tickled.setTickled(0);
-            }
-        };
-        this.#onNarrowedTextInit = () => {
-            const input = this.shadowRoot?.querySelector(`.search-input`);
-            if (input) {
-                requestAnimationFrame(() => {
-                    input.focus();
-                });
-            }
-        };
-        this.#onBlur = () => {
-            this._isFocused = false;
-            this.tickled.clearTickled();
-            this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));
-        };
-        this.#onFocusTriggerClick = () => {
-            const input = this.shadowRoot?.querySelector(`.search-input`);
-            input?.focus();
-        };
-        this.#onContainerClick = (e) => {
-            const target = e.target;
-            if (target.classList.contains(`item`) || target.closest(`.item`)) {
-                return;
-            }
-            const input = this.shadowRoot?.querySelector(`.search-input`);
-            input?.focus();
-        };
-    }
-    get selected() {
-        if (this.selectionMode === `single`) {
-            return this._selectedValues.values().next().value ?? ``;
-        }
-        else {
-            return [...this._selectedValues];
-        }
-    }
-    set selected(value) {
-        if (this.selectionMode === `single`) {
-            this._selectedValues.clear();
-            if (value) {
-                this._selectedValues.add(value);
-            }
-        }
-        else {
-            this._selectedValues.clear();
-            if (Array.isArray(value)) {
-                value.forEach(v => this._selectedValues.add(v));
-            }
-        }
-        this._updateFilteredItems();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._unsubSearch = this._search.onChange((state) => {
-            const results = state.results.map(r => r.item);
-            for (const item of this._computedItems) {
-                if (this._selectedValues.has(item.value) && !results.includes(item)) {
-                    results.push(item);
-                }
-            }
-            this._filteredItems = results;
-            this._searchState = state;
-            this.requestUpdate();
-        });
-        this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._unsubSearch?.();
-        this._search.dispose();
-        clearHighlights({ key: HIGHLIGHT_KEY });
-        this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());
-    }
-    firstUpdated() {
-        this._updateComputedItems();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has(`value`)) {
-            this._updateSelectedFromValue();
-        }
-        this._applyHighlights();
-    }
-    #handleSlotChange;
-    _updateComputedItems() {
-        const slottedElements = this.querySelectorAll(`[data-value]`);
-        const items = [];
-        slottedElements.forEach((el) => {
-            const value = el.getAttribute(`data-value`) ?? ``;
-            const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;
-            const description = el.getAttribute(`data-description`) ?? undefined;
-            const iconName = el.getAttribute(`data-icon-name`) ?? undefined;
-            items.push({ value, label, description, iconName });
-        });
-        this._computedItems = items;
-        void this._search.setItems(items);
-    }
-    _updateSelectedFromValue() {
-        if (this.selectionMode === `single`) {
-            this._selectedValues.clear();
-            if (this.value) {
-                this._selectedValues.add(this.value);
-            }
-        }
-        else {
-            const values = this.value.split(`,`).filter(v => v.trim());
-            this._selectedValues.clear();
-            values.forEach(v => this._selectedValues.add(v.trim()));
-        }
-        this._updateFilteredItems();
-    }
-    _updateFilteredItems() {
-        void this._search.setQuery(this._query);
-    }
-    _applyHighlights() {
-        if (!this._query.trim() || !this._searchState || !this.shadowRoot) {
-            clearHighlights({ key: HIGHLIGHT_KEY });
-            return;
-        }
-        const targets = buildHighlightTargets(this.shadowRoot, `.item-label`, this._searchState.positionsByItem, (el) => {
-            const v = el.getAttribute(`data-item-value`);
-            return this._computedItems.find(i => i.value === v);
-        }, (el) => {
-            const v = el.getAttribute(`data-item-value`);
-            const i = this._computedItems.find(x => x.value === v);
-            return i?.label ?? i?.value ?? ``;
-        });
-        applyHighlights(targets, { key: HIGHLIGHT_KEY });
-    }
-    #onInput;
-    #onKeyDown;
-    #onFocus;
-    #onNarrowedTextInit;
-    focus() {
-        // Override focus to focus internal input
-        const input = this.shadowRoot?.querySelector(`.search-input`);
-        if (input) {
-            input.focus();
-        }
-        else {
-            super.focus();
-        }
-    }
-    blur() {
-        const input = this.shadowRoot?.querySelector(`.search-input`);
-        if (input) {
-            input.blur();
-        }
-        else {
-            super.blur();
-        }
-    }
-    ;
-    #onBlur;
-    #onFocusTriggerClick;
-    #onContainerClick;
-    #onItemClick(item) {
-        this._selectItem(item);
-        const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);
-        if (clickedIndex >= 0) {
-            this.tickled.handlePointerEnter(clickedIndex);
-        }
-        const input = this.shadowRoot?.querySelector(`.search-input`);
-        input?.focus();
-    }
-    _selectItem(item, clearFilter = true) {
-        if (this.selectionMode === `single`) {
-            if (this._selectedValues.has(item.value) && !this.requiredSelection) {
-                this._selectedValues.clear();
-            }
-            else {
-                this._selectedValues.clear();
-                this._selectedValues.add(item.value);
-            }
-        }
-        else {
-            if (this._selectedValues.has(item.value)) {
-                if (!this.requiredSelection || this._selectedValues.size > 1) {
-                    this._selectedValues.delete(item.value);
-                }
-            }
-            else {
-                this._selectedValues.add(item.value);
-            }
-        }
-        this._updateValueFromSelected();
-        this._updateFilteredItems();
-        const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));
-        this.dispatchEvent(new CustomEvent(`change`, {
-            detail: { item, query: this._query, selected: selectedItems },
-            bubbles: true,
-            composed: true,
-        }));
-        if (clearFilter && !this.preserveFilter && this._query) {
-            this._query = ``;
-            this._updateFilteredItems();
-        }
-    }
-    _updateValueFromSelected() {
-        if (this.selectionMode === `single`) {
-            this.value = [...this._selectedValues][0] ?? ``;
-        }
-        else {
-            this.value = [...this._selectedValues].join(`,`);
-        }
-    }
-    #renderItem(item, index) {
-        const isTickled = this.tickled.isTickled(index);
-        const isSelected = this._selectedValues.has(item.value);
-        const label = item.label ?? item.value;
-        return html `
-      <div
-        class="item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}"
-        part="item"
-        role="option"
-        aria-selected=${isSelected}
-        @click=${() => this.#onItemClick(item)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(index)}
-      >
-        ${item.iconName ? html `<ixfx-icon class="item-icon" name=${item.iconName}></ixfx-icon>` : nothing}
-        <span class="item-label" part="label" data-item-value=${item.value}>${label}</span>
-      </div>
-    `;
-    }
-    render() {
-        const isScrollable = this.width !== undefined || this.height !== undefined;
-        return html `
-      <slot @slotchange=${this.#handleSlotChange} style="display: none;"></slot>
-      <div
-        class="container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}"
-        part="container"
-        style=${this._getContainerStyle()}
-        data-input-mode=${this.tickled.inputMode}
-        @click=${this.#onContainerClick}
-      >
-        <input
-          type="text"
-          class="search-input"
-          .value=${this._query}
-          autocomplete="off"
-          spellcheck="false"
-          aria-label="Search items"
-          @input=${this.#onInput}
-          @keydown=${this.#onKeyDown}
-          @focus=${this.#onFocus}
-          @blur=${this.#onBlur}
-        >
-        <div class="focus-trigger" @click=${this.#onFocusTriggerClick}></div>
-        <div 
-          class="items" 
-          part="items" 
-          role="listbox"
-          @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
-        >
-          ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}
-        </div>
-      </div>
-    `;
-    }
-    _getContainerStyle() {
-        const styles = [];
-        if (this.width) {
-            styles.push(`width: ${this.width}`);
-        }
-        if (this.height) {
-            styles.push(`height: ${this.height}`);
-        }
-        return styles.join(`; `);
-    }
-    static { this.styles = [tickledStyles, tickledItemStyles, css `
-    :host {
-      display: inline-block;
-      position: relative;
-      font-family: var(--font-family, system-ui, sans-serif);
-      font-size: var(--text-m, 12px);
-      color: var(--surface-2-text);
-      --item-padding: var(--space-xs, 3px) var(--space-m, 8px);
-      --item-border-radius: var(--radius-s, 3px);
-      --item-icon-spacing: var(--space-xs, 3px);
-    }
-
-    .container {
-      display: flex;
-      position: relative;
-      min-width: min-content;
-      min-height: min-content;
-    }
-
-    .container.horizontal {
-      flex-direction: row;
-      align-items: stretch;
-    }
-
-    .container.vertical {
-      flex-direction: column;
-    }
-
-    .container.scrollable {
-      scrollbar-width: none;
-      overflow-x: auto;
-      overflow-y: hidden;
-      .vertical {
-        overflow-x: hidden;
-        overflow-y: auto;
-      }
-    }
-
-    .container.focused {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
-
-    .search-input {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: text;
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .search-input:focus {
-      outline: none;
-    }
-
-    .focus-trigger {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      cursor: text;
-    }
-
-    .items {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--item-spacing, var(--space-xs, 3px));
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      min-height: var(--item-height, 28px);
-      position: relative;
-      z-index: 2;
-      pointer-events: auto;
-    }
-
-    .container.horizontal .items {
-      flex-direction: row;
-    }
-
-    .container.vertical .items {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    :host([nowrap]) .items {
-      flex-wrap: nowrap;
-    }
-
-    .item-icon {
-      flex-shrink: 0;
-      width: 1em;
-      height: 1em;
-    }
-
-    .item-label {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--item-label-color, var(--item-text, inherit));
-      font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));
-      text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));
-      text-underline-offset: var(--item-label-text-underline-offset, auto);
-    }
-
-    .item.selected .item-label {
-      --item-label-color: var(--item-text-selected);
-      --item-label-font-style: var(--item-label-font-style-selected, italic);
-    }
-
-    .item.tickled .item-label {
-      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);
-      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);
-    }
-
-    .item.active .item-label {
-      --item-label-color: var(--item-text-selected);
-    }
-
-    .item.selected.tickled .item-label {
-      --item-label-color: var(--item-text-selected);
-      --item-label-font-style: var(--item-label-font-style-selected, italic);
-      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);
-      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);
-    }
-
-    ::highlight(narrowed-text-highlight) {
-      background: var(--highlight-background, var(--accent));
-      color: var(--highlight-color, var(--accent-text, #fff));
-      border-radius: 2px;
-      padding: 0 1px;
-    }
-  `]; }
-};
-__decorate([
-    property({ type: String, attribute: `selection-mode` })
-], NarrowedTextElement.prototype, "selectionMode", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `required-selection` })
-], NarrowedTextElement.prototype, "requiredSelection", void 0);
-__decorate([
-    property({ type: String, attribute: `orientation` })
-], NarrowedTextElement.prototype, "orientation", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `nowrap` })
-], NarrowedTextElement.prototype, "nowrap", void 0);
-__decorate([
-    property({ type: String, attribute: `separator` })
-], NarrowedTextElement.prototype, "separator", void 0);
-__decorate([
-    property({ type: String, attribute: `width` })
-], NarrowedTextElement.prototype, "width", void 0);
-__decorate([
-    property({ type: String, attribute: `height` })
-], NarrowedTextElement.prototype, "height", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `preserve-filter` })
-], NarrowedTextElement.prototype, "preserveFilter", void 0);
-__decorate([
-    property({ type: String })
-], NarrowedTextElement.prototype, "value", void 0);
-__decorate([
-    state()
-], NarrowedTextElement.prototype, "_query", void 0);
-__decorate([
-    state()
-], NarrowedTextElement.prototype, "_computedItems", void 0);
-__decorate([
-    state()
-], NarrowedTextElement.prototype, "_filteredItems", void 0);
-__decorate([
-    state()
-], NarrowedTextElement.prototype, "_isFocused", void 0);
-__decorate([
-    query(`slot`)
-], NarrowedTextElement.prototype, "_slot", void 0);
-NarrowedTextElement = __decorate([
-    customElement(`ixfx-narrowed-text`)
-], NarrowedTextElement);
-export { NarrowedTextElement };
-//# sourceMappingURL=narrowed-text.js.map