@ixfx/components 0.2.3 → 0.2.4

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

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