@ixfx/components 0.5.11 → 0.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/index.d.ts +8 -5
- package/bundle/index.d.ts.map +1 -1
- package/bundle/index.js +30 -7
- package/bundle/index.js.map +1 -1
- package/dist/index.js +8 -7
- package/dist/index.js.map +1 -1
- package/dist/narrowed-text.d.ts +3 -0
- package/dist/narrowed-text.d.ts.map +1 -1
- package/dist/narrowed-text.js +22 -0
- package/dist/narrowed-text.js.map +1 -1
- package/dist/tab-list-VtWT-_FG.d.ts.map +1 -1
- package/docs-user/narrowed-text.md +11 -2
- package/docs-user/tabs.md +9 -6
- package/package.json +1 -1
package/dist/narrowed-text.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ type NarrowedTextItem = Readonly<{
|
|
|
6
6
|
label?: string;
|
|
7
7
|
description?: string;
|
|
8
8
|
iconName?: string;
|
|
9
|
+
selected?: boolean;
|
|
9
10
|
}>;
|
|
10
11
|
type NarrowedTextChangeDetail = {
|
|
11
12
|
readonly item: NarrowedTextItem | undefined;
|
|
@@ -59,6 +60,8 @@ declare class NarrowedTextElement extends LitElement {
|
|
|
59
60
|
private _applyHighlights;
|
|
60
61
|
focus(): void;
|
|
61
62
|
blur(): void;
|
|
63
|
+
setContents(contents: NarrowedTextItem[]): void;
|
|
64
|
+
deleteItem(value: string): boolean;
|
|
62
65
|
private _selectItem;
|
|
63
66
|
private _updateValueFromSelected;
|
|
64
67
|
protected render(): import("lit").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"narrowed-text.d.ts","names":[],"sources":["../src/narrowed-text/types.ts","../src/narrowed-text/narrowed-text.ts"],"mappings":";;;KAAY,mBAAmB;EAC7B;EACA;EACA;EACA;;KAGU;WACD,MAAM;WACN;WACA,mBAAmB;;KAGlB,0BAA0B,YAAY;KAEtC;KAEA;KAEA;EACV,MAAM;EACN,WAAW;EACX;;;;
|
|
1
|
+
{"version":3,"file":"narrowed-text.d.ts","names":[],"sources":["../src/narrowed-text/types.ts","../src/narrowed-text/narrowed-text.ts"],"mappings":";;;KAAY,mBAAmB;EAC7B;EACA;EACA;EACA;EACA;;KAGU;WACD,MAAM;WACN;WACA,mBAAmB;;KAGlB,0BAA0B,YAAY;KAEtC;KAEA;KAEA;EACV,MAAM;EACN,WAAW;EACX;;;;cCEW,4BAA4B;;EACkB,eAAe;EACV;EACR,aAAa;EACjB;EACE;EACJ;EACC;EACU;EAC/B;EAG5B,UAAU;UAEO;UACA;UACA;UACA;UACM;UAEf;UACA;UACA;UAIA;UACA;UAGA;MAqBJ;MAQA,SAAS;EAgBb;EA0BA;EAmBS;EA+BA;YAcU;YAIA,QAAQ,mBAAmB;UAWtC;UAiBA;UAeA;UAIA;EAiJR;EAUA;EASA,YAAY,UAAU;EAyBtB,WAAW;UAsCH;UAmCA;YA4BW,wBAAM;UAqCjB;SAWQ,sBAAM;;QA6IhB;YACI;IACR,sBAAsB"}
|
package/dist/narrowed-text.js
CHANGED
|
@@ -307,6 +307,28 @@ let NarrowedTextElement = class NarrowedTextElement extends LitElement {
|
|
|
307
307
|
if (input) input.blur();
|
|
308
308
|
else super.blur();
|
|
309
309
|
}
|
|
310
|
+
setContents(contents) {
|
|
311
|
+
while (this.firstChild) this.firstChild.remove();
|
|
312
|
+
for (const item of contents) {
|
|
313
|
+
const span = document.createElement(`span`);
|
|
314
|
+
span.setAttribute(`data-value`, item.value);
|
|
315
|
+
if (item.label !== void 0) span.setAttribute(`data-label`, item.label);
|
|
316
|
+
if (item.description !== void 0) span.setAttribute(`data-description`, item.description);
|
|
317
|
+
if (item.iconName !== void 0) span.setAttribute(`data-icon-name`, item.iconName);
|
|
318
|
+
this.appendChild(span);
|
|
319
|
+
}
|
|
320
|
+
this._selectedValues.clear();
|
|
321
|
+
const selectedValues = contents.filter((i) => i.selected).map((i) => i.value);
|
|
322
|
+
for (const v of selectedValues) this._selectedValues.add(v);
|
|
323
|
+
if (selectedValues.length > 0) this.requestUpdate();
|
|
324
|
+
}
|
|
325
|
+
deleteItem(value) {
|
|
326
|
+
const el = this.querySelector(`[data-value="${CSS.escape(value)}"]`);
|
|
327
|
+
if (!el) return false;
|
|
328
|
+
el.remove();
|
|
329
|
+
this._selectedValues.delete(value);
|
|
330
|
+
return true;
|
|
331
|
+
}
|
|
310
332
|
#onBlur;
|
|
311
333
|
#onFocusTriggerClick;
|
|
312
334
|
#onContainerClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"narrowed-text.js","names":["#onNarrowedTextInit","#onItemClick","#handleSlotChange","#onContainerClick","#onInput","#onKeyDown","#onFocus","#onBlur","#onFocusTriggerClick","#renderItem","customElement"],"sources":["../src/narrowed-text/narrowed-text.ts"],"sourcesContent":["import type { CommandRegistry } from '@clinth/ui-commands';\nimport type { PropertyValues } from 'lit';\nimport type { IncrSearch, IncrSearchState } from '../incr-search/index.js';\nimport type {\n NarrowedTextChangeDetail,\n NarrowedTextItem,\n Orientation,\n SelectionMode,\n} from './types.js';\nimport { createCommandRegistry } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport {\n applyHighlights,\n buildHighlightTargets,\n clearHighlights,\n createIncrSearch,\n} from '../incr-search/index.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nconst HIGHLIGHT_KEY = `narrowed-text-highlight`;\n\n@customElement(`ixfx-narrowed-text`)\nexport class NarrowedTextElement extends LitElement {\n @property({ type: String, attribute: `selection-mode` }) selectionMode: SelectionMode = `single`;\n @property({ type: Boolean, attribute: `required-selection` }) requiredSelection = false;\n @property({ type: String, attribute: `orientation` }) orientation: Orientation = `horizontal`;\n @property({ type: Boolean, attribute: `nowrap` }) nowrap = false;\n @property({ type: String, attribute: `separator` }) separator = ` `;\n @property({ type: String, attribute: `width` }) width: string | undefined;\n @property({ type: String, attribute: `height` }) height: string | undefined;\n @property({ type: Boolean, attribute: `preserve-filter` }) preserveFilter = false;\n @property({ type: String }) value = ``;\n\n @property({ attribute: false })\n registry: CommandRegistry<unknown> | undefined = undefined;\n\n @state() private _query = ``;\n @state() private _computedItems: NarrowedTextItem[] = [];\n @state() private _filteredItems: NarrowedTextItem[] = [];\n @state() private _isFocused = false;\n @query(`slot`) private _slot!: HTMLSlotElement;\n\n private _selectedValues: Set<string> = new Set();\n private _ownedRegistry: CommandRegistry<unknown> | undefined;\n private _search: IncrSearch<NarrowedTextItem> = createIncrSearch<NarrowedTextItem>({\n selector: item => item.label ?? item.value,\n });\n\n private _searchState: IncrSearchState<NarrowedTextItem> | undefined;\n private _unsubSearch: (() => void) | undefined;\n\n // TickledController manages hover and keyboard focus\n private tickled = new TickledController<number>(this, {\n getItems: () => {\n return this._filteredItems.map((_, i) => ({\n id: i,\n enabled: true,\n }));\n },\n onTickle: (id) => {\n if (id === undefined || !this.shadowRoot)\n return;\n const itemsContainer = this.shadowRoot.querySelector(`.items`);\n if (!itemsContainer)\n return;\n const itemEls = itemsContainer.querySelectorAll(`.item`);\n const itemEl = itemEls[id];\n if (itemEl) {\n itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });\n }\n },\n });\n\n get selected(): string | string[] {\n if (this.selectionMode === `single`) {\n return this._selectedValues.values().next().value ?? ``;\n } else {\n return [...this._selectedValues];\n }\n }\n\n set selected(value: string | string[]) {\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n if (value) {\n this._selectedValues.add(value as string);\n }\n } else {\n this._selectedValues.clear();\n if (Array.isArray(value)) {\n value.forEach(v => this._selectedValues.add(v));\n }\n }\n\n this._updateFilteredItems();\n }\n\n selectAll(): void {\n const items = this._filteredItems;\n if (items.length === 0)\n return;\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n this._selectedValues.add(items[0].value);\n } else {\n this._selectedValues.clear();\n for (const item of items) {\n this._selectedValues.add(item.value);\n }\n }\n this._updateValueFromSelected();\n this._updateFilteredItems();\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: {\n item: undefined,\n query: this._query,\n selected: this._computedItems.filter(i => this._selectedValues.has(i.value)),\n },\n bubbles: true,\n composed: true,\n }));\n }\n\n deselectAll(): void {\n if (this.requiredSelection && this._selectedValues.size <= 1)\n return;\n if (this._selectedValues.size === 0)\n return;\n this._selectedValues.clear();\n this._updateValueFromSelected();\n this._updateFilteredItems();\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: {\n item: undefined,\n query: this._query,\n selected: [],\n },\n bubbles: true,\n composed: true,\n }));\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._unsubSearch = this._search.onChange((state) => {\n const results = state.results.map(r => r.item);\n for (const item of this._computedItems) {\n if (this._selectedValues.has(item.value) && !results.includes(item)) {\n results.push(item);\n }\n }\n this._filteredItems = results;\n this._searchState = state;\n this.requestUpdate();\n });\n this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n\n const registry = this._ownedRegistry = createCommandRegistry();\n registry.register({\n id: `select-all`,\n label: `Select All`,\n description: `Select every currently-filtered item (or first in single mode)`,\n execute: () => this.selectAll(),\n });\n registry.register({\n id: `deselect-all`,\n label: `Deselect All`,\n description: `Clear all selection`,\n execute: () => this.deselectAll(),\n });\n this.registry = registry;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._unsubSearch?.();\n this._search.dispose();\n clearHighlights({ key: HIGHLIGHT_KEY });\n this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n if (this._ownedRegistry) {\n this._ownedRegistry.unregister(`select-all`);\n this._ownedRegistry.unregister(`deselect-all`);\n this._ownedRegistry = undefined;\n this.registry = undefined;\n }\n }\n\n protected override firstUpdated(): void {\n this._updateComputedItems();\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n if (changedProperties.has(`value`)) {\n this._updateSelectedFromValue();\n }\n this._applyHighlights();\n }\n\n #handleSlotChange = (): void => {\n this._updateComputedItems();\n };\n\n private _updateComputedItems(): void {\n const slottedElements = this.querySelectorAll(`[data-value]`);\n const items: NarrowedTextItem[] = [];\n\n slottedElements.forEach((el) => {\n const value = el.getAttribute(`data-value`) ?? ``;\n const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;\n const description = el.getAttribute(`data-description`) ?? undefined;\n const iconName = el.getAttribute(`data-icon-name`) ?? undefined;\n\n items.push({ value, label, description, iconName });\n });\n\n this._computedItems = items;\n void this._search.setItems(items);\n }\n\n private _updateSelectedFromValue(): void {\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n if (this.value) {\n this._selectedValues.add(this.value);\n }\n } else {\n const values = this.value.split(`,`).filter(v => v.trim());\n this._selectedValues.clear();\n values.forEach(v => this._selectedValues.add(v.trim()));\n }\n\n this._updateFilteredItems();\n }\n\n private _updateFilteredItems(): void {\n void this._search.setQuery(this._query);\n }\n\n private _applyHighlights(): void {\n if (!this._query.trim() || !this._searchState || !this.shadowRoot) {\n clearHighlights({ key: HIGHLIGHT_KEY });\n return;\n }\n\n const targets = buildHighlightTargets(\n this.shadowRoot,\n `.item-label`,\n this._searchState.positionsByItem,\n (el) => {\n const v = el.getAttribute(`data-item-value`);\n return this._computedItems.find(i => i.value === v);\n },\n (el) => {\n const v = el.getAttribute(`data-item-value`);\n const i = this._computedItems.find(x => x.value === v);\n return i?.label ?? i?.value ?? ``;\n },\n );\n applyHighlights(targets, { key: HIGHLIGHT_KEY });\n }\n\n #onInput = (e: Event): void => {\n const input = e.target as HTMLInputElement;\n this._query = input.value;\n // Reset tickled to first item when query changes\n if (this._query.trim() && this._filteredItems.length > 0) {\n this.tickled.setTickled(0);\n } else {\n this.tickled.clearTickled();\n }\n this._updateFilteredItems();\n };\n\n #onKeyDown = (e: KeyboardEvent): void => {\n if (this._filteredItems.length === 0) {\n return;\n }\n\n switch (e.key) {\n case `Tab`: {\n if (e.shiftKey) {\n e.preventDefault();\n this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {\n bubbles: true,\n composed: true,\n }));\n }\n return;\n }\n case `ArrowRight`: {\n if (this.orientation !== `horizontal`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n const lastIndex = this._filteredItems.length - 1;\n if (currentTickled !== undefined && currentTickled >= lastIndex) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`next`);\n break;\n }\n case `ArrowLeft`: {\n if (this.orientation !== `horizontal`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n if (currentTickled !== undefined && currentTickled <= 0) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`previous`);\n break;\n }\n case `ArrowDown`: {\n if (this.orientation !== `vertical`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n const lastIndex = this._filteredItems.length - 1;\n if (currentTickled !== undefined && currentTickled >= lastIndex) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`next`);\n break;\n }\n case `ArrowUp`: {\n if (this.orientation !== `vertical`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n if (currentTickled !== undefined && currentTickled <= 0) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`previous`);\n break;\n }\n case `Enter`: {\n e.preventDefault();\n const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n if (tickledItem) {\n this._selectItem(tickledItem, false);\n // Enter always clears filter regardless of preserveFilter\n this._query = ``;\n this._updateFilteredItems();\n }\n break;\n }\n case ` `: {\n e.preventDefault();\n if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {\n this._selectItem(this._filteredItems[this.tickled.tickledId], false);\n }\n break;\n }\n case `Escape`: {\n e.preventDefault();\n this._query = ``;\n this.tickled.clearTickled();\n this._updateFilteredItems();\n break;\n }\n }\n };\n\n #onFocus = (): void => {\n this._isFocused = true;\n if (this._query.trim() && this._filteredItems.length > 0) {\n this.tickled.setTickled(0);\n }\n };\n\n #onNarrowedTextInit = (): void => {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n requestAnimationFrame(() => {\n input.focus();\n });\n }\n };\n\n focus(): void {\n // Override focus to focus internal input\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n input.focus();\n } else {\n super.focus();\n }\n }\n\n blur(): void {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n input.blur();\n } else {\n super.blur();\n }\n };\n\n #onBlur = (): void => {\n this._isFocused = false;\n this.tickled.clearTickled();\n this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));\n };\n\n #onFocusTriggerClick = (): void => {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n };\n\n #onContainerClick = (e: MouseEvent): void => {\n const target = e.target as HTMLElement;\n if (target.classList.contains(`item`) || target.closest(`.item`)) {\n return;\n }\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n };\n\n #onItemClick(item: NarrowedTextItem): void {\n this._selectItem(item);\n const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);\n if (clickedIndex >= 0) {\n this.tickled.handlePointerEnter(clickedIndex);\n }\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n }\n\n private _selectItem(item: NarrowedTextItem, clearFilter = true): void {\n if (this.selectionMode === `single`) {\n if (this._selectedValues.has(item.value) && !this.requiredSelection) {\n this._selectedValues.clear();\n } else {\n this._selectedValues.clear();\n this._selectedValues.add(item.value);\n }\n } else {\n if (this._selectedValues.has(item.value)) {\n if (!this.requiredSelection || this._selectedValues.size > 1) {\n this._selectedValues.delete(item.value);\n }\n } else {\n this._selectedValues.add(item.value);\n }\n }\n\n this._updateValueFromSelected();\n this._updateFilteredItems();\n\n const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));\n\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: { item, query: this._query, selected: selectedItems },\n bubbles: true,\n composed: true,\n }));\n\n if (clearFilter && !this.preserveFilter && this._query) {\n this._query = ``;\n this._updateFilteredItems();\n }\n }\n\n private _updateValueFromSelected(): void {\n if (this.selectionMode === `single`) {\n this.value = [...this._selectedValues][0] ?? ``;\n } else {\n this.value = [...this._selectedValues].join(`,`);\n }\n }\n\n #renderItem(item: NarrowedTextItem, index: number) {\n const isTickled = this.tickled.isTickled(index);\n const isSelected = this._selectedValues.has(item.value);\n const label = item.label ?? item.value;\n\n return html`\n <div\n class=\"item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}\"\n part=\"item\"\n role=\"option\"\n aria-selected=${isSelected}\n @click=${() => this.#onItemClick(item)}\n @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n >\n ${item.iconName ? html`<ixfx-icon class=\"item-icon\" name=${item.iconName}></ixfx-icon>` : nothing}\n <span class=\"item-label\" part=\"label\" data-item-value=${item.value}>${label}</span>\n </div>\n `;\n }\n\n protected override render() {\n const isScrollable = this.width !== undefined || this.height !== undefined;\n\n return html`\n <slot @slotchange=${this.#handleSlotChange} style=\"display: none;\"></slot>\n <div\n class=\"container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}\"\n part=\"container\"\n style=${this._getContainerStyle()}\n data-input-mode=${this.tickled.inputMode}\n @click=${this.#onContainerClick}\n >\n <input\n type=\"text\"\n class=\"search-input\"\n .value=${this._query}\n autocomplete=\"off\"\n spellcheck=\"false\"\n aria-label=\"Search items\"\n @input=${this.#onInput}\n @keydown=${this.#onKeyDown}\n @focus=${this.#onFocus}\n @blur=${this.#onBlur}\n >\n <div class=\"focus-trigger\" @click=${this.#onFocusTriggerClick}></div>\n <div \n class=\"items\" \n part=\"items\" \n role=\"listbox\"\n @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n >\n ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}\n </div>\n </div>\n `;\n }\n\n private _getContainerStyle(): string {\n const styles: string[] = [];\n if (this.width) {\n styles.push(`width: ${this.width}`);\n }\n if (this.height) {\n styles.push(`height: ${this.height}`);\n }\n return styles.join(`; `);\n }\n\n static override styles = [themeFallbacks, tickledStyles, tickledItemStyles, css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--font-family, system-ui, sans-serif);\n font-size: var(--text-m, 12px);\n color: var(--surface-2-text);\n --item-padding: var(--space-xs, 3px) var(--space-m, 8px);\n --item-border-radius: var(--radius-s, 3px);\n --item-icon-spacing: var(--space-xs, 3px);\n }\n\n .container {\n display: flex;\n position: relative;\n min-width: min-content;\n min-height: min-content;\n }\n\n .container.horizontal {\n flex-direction: row;\n align-items: stretch;\n }\n\n .container.vertical {\n flex-direction: column;\n }\n\n .container.scrollable {\n scrollbar-width: none;\n overflow-x: auto;\n overflow-y: hidden;\n .vertical {\n overflow-x: hidden;\n overflow-y: auto;\n }\n }\n\n .container.focused {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n .search-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: text;\n z-index: 1;\n pointer-events: none;\n }\n\n .search-input:focus {\n outline: none;\n }\n\n .focus-trigger {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n cursor: text;\n }\n\n .items {\n display: flex;\n flex-wrap: wrap;\n gap: var(--item-spacing, var(--space-xs, 3px));\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: var(--item-height, 28px);\n position: relative;\n z-index: 2;\n pointer-events: auto;\n }\n\n .container.horizontal .items {\n flex-direction: row;\n }\n\n .container.vertical .items {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host([nowrap]) .items {\n flex-wrap: nowrap;\n }\n\n .item-icon {\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n }\n\n .item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--item-label-color, var(--item-text, inherit));\n font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));\n text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));\n text-underline-offset: var(--item-label-text-underline-offset, auto);\n }\n\n .item.selected .item-label {\n --item-label-color: var(--item-text-selected);\n --item-label-font-style: var(--item-label-font-style-selected, italic);\n }\n\n .item.tickled .item-label {\n --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n }\n\n .item.active .item-label {\n --item-label-color: var(--item-text-selected);\n }\n\n .item.selected.tickled .item-label {\n --item-label-color: var(--item-text-selected);\n --item-label-font-style: var(--item-label-font-style-selected, italic);\n --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n }\n\n ::highlight(narrowed-text-highlight) {\n background: var(--highlight-background, var(--accent));\n color: var(--highlight-color, var(--accent-text, #fff));\n border-radius: 2px;\n padding: 0 1px;\n }\n `];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-narrowed-text': NarrowedTextElement;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"narrowed-text.js","names":["#onNarrowedTextInit","#onItemClick","#handleSlotChange","#onContainerClick","#onInput","#onKeyDown","#onFocus","#onBlur","#onFocusTriggerClick","#renderItem","customElement"],"sources":["../src/narrowed-text/narrowed-text.ts"],"sourcesContent":["import type { CommandRegistry } from '@clinth/ui-commands';\nimport type { PropertyValues } from 'lit';\nimport type { IncrSearch, IncrSearchState } from '../incr-search/index.js';\nimport type {\n NarrowedTextChangeDetail,\n NarrowedTextItem,\n Orientation,\n SelectionMode,\n} from './types.js';\nimport { createCommandRegistry } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport {\n applyHighlights,\n buildHighlightTargets,\n clearHighlights,\n createIncrSearch,\n} from '../incr-search/index.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nconst HIGHLIGHT_KEY = `narrowed-text-highlight`;\n\n@customElement(`ixfx-narrowed-text`)\nexport class NarrowedTextElement extends LitElement {\n @property({ type: String, attribute: `selection-mode` }) selectionMode: SelectionMode = `single`;\n @property({ type: Boolean, attribute: `required-selection` }) requiredSelection = false;\n @property({ type: String, attribute: `orientation` }) orientation: Orientation = `horizontal`;\n @property({ type: Boolean, attribute: `nowrap` }) nowrap = false;\n @property({ type: String, attribute: `separator` }) separator = ` `;\n @property({ type: String, attribute: `width` }) width: string | undefined;\n @property({ type: String, attribute: `height` }) height: string | undefined;\n @property({ type: Boolean, attribute: `preserve-filter` }) preserveFilter = false;\n @property({ type: String }) value = ``;\n\n @property({ attribute: false })\n registry: CommandRegistry<unknown> | undefined = undefined;\n\n @state() private _query = ``;\n @state() private _computedItems: NarrowedTextItem[] = [];\n @state() private _filteredItems: NarrowedTextItem[] = [];\n @state() private _isFocused = false;\n @query(`slot`) private _slot!: HTMLSlotElement;\n\n private _selectedValues: Set<string> = new Set();\n private _ownedRegistry: CommandRegistry<unknown> | undefined;\n private _search: IncrSearch<NarrowedTextItem> = createIncrSearch<NarrowedTextItem>({\n selector: item => item.label ?? item.value,\n });\n\n private _searchState: IncrSearchState<NarrowedTextItem> | undefined;\n private _unsubSearch: (() => void) | undefined;\n\n // TickledController manages hover and keyboard focus\n private tickled = new TickledController<number>(this, {\n getItems: () => {\n return this._filteredItems.map((_, i) => ({\n id: i,\n enabled: true,\n }));\n },\n onTickle: (id) => {\n if (id === undefined || !this.shadowRoot)\n return;\n const itemsContainer = this.shadowRoot.querySelector(`.items`);\n if (!itemsContainer)\n return;\n const itemEls = itemsContainer.querySelectorAll(`.item`);\n const itemEl = itemEls[id];\n if (itemEl) {\n itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });\n }\n },\n });\n\n get selected(): string | string[] {\n if (this.selectionMode === `single`) {\n return this._selectedValues.values().next().value ?? ``;\n } else {\n return [...this._selectedValues];\n }\n }\n\n set selected(value: string | string[]) {\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n if (value) {\n this._selectedValues.add(value as string);\n }\n } else {\n this._selectedValues.clear();\n if (Array.isArray(value)) {\n value.forEach(v => this._selectedValues.add(v));\n }\n }\n\n this._updateFilteredItems();\n }\n\n selectAll(): void {\n const items = this._filteredItems;\n if (items.length === 0)\n return;\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n this._selectedValues.add(items[0].value);\n } else {\n this._selectedValues.clear();\n for (const item of items) {\n this._selectedValues.add(item.value);\n }\n }\n this._updateValueFromSelected();\n this._updateFilteredItems();\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: {\n item: undefined,\n query: this._query,\n selected: this._computedItems.filter(i => this._selectedValues.has(i.value)),\n },\n bubbles: true,\n composed: true,\n }));\n }\n\n deselectAll(): void {\n if (this.requiredSelection && this._selectedValues.size <= 1)\n return;\n if (this._selectedValues.size === 0)\n return;\n this._selectedValues.clear();\n this._updateValueFromSelected();\n this._updateFilteredItems();\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: {\n item: undefined,\n query: this._query,\n selected: [],\n },\n bubbles: true,\n composed: true,\n }));\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._unsubSearch = this._search.onChange((state) => {\n const results = state.results.map(r => r.item);\n for (const item of this._computedItems) {\n if (this._selectedValues.has(item.value) && !results.includes(item)) {\n results.push(item);\n }\n }\n this._filteredItems = results;\n this._searchState = state;\n this.requestUpdate();\n });\n this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n\n const registry = this._ownedRegistry = createCommandRegistry();\n registry.register({\n id: `select-all`,\n label: `Select All`,\n description: `Select every currently-filtered item (or first in single mode)`,\n execute: () => this.selectAll(),\n });\n registry.register({\n id: `deselect-all`,\n label: `Deselect All`,\n description: `Clear all selection`,\n execute: () => this.deselectAll(),\n });\n this.registry = registry;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._unsubSearch?.();\n this._search.dispose();\n clearHighlights({ key: HIGHLIGHT_KEY });\n this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n if (this._ownedRegistry) {\n this._ownedRegistry.unregister(`select-all`);\n this._ownedRegistry.unregister(`deselect-all`);\n this._ownedRegistry = undefined;\n this.registry = undefined;\n }\n }\n\n protected override firstUpdated(): void {\n this._updateComputedItems();\n }\n\n protected override updated(changedProperties: PropertyValues): void {\n if (changedProperties.has(`value`)) {\n this._updateSelectedFromValue();\n }\n this._applyHighlights();\n }\n\n #handleSlotChange = (): void => {\n this._updateComputedItems();\n };\n\n private _updateComputedItems(): void {\n const slottedElements = this.querySelectorAll(`[data-value]`);\n const items: NarrowedTextItem[] = [];\n\n slottedElements.forEach((el) => {\n const value = el.getAttribute(`data-value`) ?? ``;\n const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;\n const description = el.getAttribute(`data-description`) ?? undefined;\n const iconName = el.getAttribute(`data-icon-name`) ?? undefined;\n\n items.push({ value, label, description, iconName });\n });\n\n this._computedItems = items;\n void this._search.setItems(items);\n }\n\n private _updateSelectedFromValue(): void {\n if (this.selectionMode === `single`) {\n this._selectedValues.clear();\n if (this.value) {\n this._selectedValues.add(this.value);\n }\n } else {\n const values = this.value.split(`,`).filter(v => v.trim());\n this._selectedValues.clear();\n values.forEach(v => this._selectedValues.add(v.trim()));\n }\n\n this._updateFilteredItems();\n }\n\n private _updateFilteredItems(): void {\n void this._search.setQuery(this._query);\n }\n\n private _applyHighlights(): void {\n if (!this._query.trim() || !this._searchState || !this.shadowRoot) {\n clearHighlights({ key: HIGHLIGHT_KEY });\n return;\n }\n\n const targets = buildHighlightTargets(\n this.shadowRoot,\n `.item-label`,\n this._searchState.positionsByItem,\n (el) => {\n const v = el.getAttribute(`data-item-value`);\n return this._computedItems.find(i => i.value === v);\n },\n (el) => {\n const v = el.getAttribute(`data-item-value`);\n const i = this._computedItems.find(x => x.value === v);\n return i?.label ?? i?.value ?? ``;\n },\n );\n applyHighlights(targets, { key: HIGHLIGHT_KEY });\n }\n\n #onInput = (e: Event): void => {\n const input = e.target as HTMLInputElement;\n this._query = input.value;\n // Reset tickled to first item when query changes\n if (this._query.trim() && this._filteredItems.length > 0) {\n this.tickled.setTickled(0);\n } else {\n this.tickled.clearTickled();\n }\n this._updateFilteredItems();\n };\n\n #onKeyDown = (e: KeyboardEvent): void => {\n if (this._filteredItems.length === 0) {\n return;\n }\n\n switch (e.key) {\n case `Tab`: {\n if (e.shiftKey) {\n e.preventDefault();\n this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {\n bubbles: true,\n composed: true,\n }));\n }\n return;\n }\n case `ArrowRight`: {\n if (this.orientation !== `horizontal`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n const lastIndex = this._filteredItems.length - 1;\n if (currentTickled !== undefined && currentTickled >= lastIndex) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`next`);\n break;\n }\n case `ArrowLeft`: {\n if (this.orientation !== `horizontal`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n if (currentTickled !== undefined && currentTickled <= 0) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`previous`);\n break;\n }\n case `ArrowDown`: {\n if (this.orientation !== `vertical`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n const lastIndex = this._filteredItems.length - 1;\n if (currentTickled !== undefined && currentTickled >= lastIndex) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`next`);\n break;\n }\n case `ArrowUp`: {\n if (this.orientation !== `vertical`) {\n return;\n }\n const currentTickled = this.tickled.tickledId;\n if (currentTickled !== undefined && currentTickled <= 0) {\n return;\n }\n e.preventDefault();\n this.tickled.handleKeyboardNavigation(`previous`);\n break;\n }\n case `Enter`: {\n e.preventDefault();\n const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n if (tickledItem) {\n this._selectItem(tickledItem, false);\n // Enter always clears filter regardless of preserveFilter\n this._query = ``;\n this._updateFilteredItems();\n }\n break;\n }\n case ` `: {\n e.preventDefault();\n if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {\n this._selectItem(this._filteredItems[this.tickled.tickledId], false);\n }\n break;\n }\n case `Escape`: {\n e.preventDefault();\n this._query = ``;\n this.tickled.clearTickled();\n this._updateFilteredItems();\n break;\n }\n }\n };\n\n #onFocus = (): void => {\n this._isFocused = true;\n if (this._query.trim() && this._filteredItems.length > 0) {\n this.tickled.setTickled(0);\n }\n };\n\n #onNarrowedTextInit = (): void => {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n requestAnimationFrame(() => {\n input.focus();\n });\n }\n };\n\n focus(): void {\n // Override focus to focus internal input\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n input.focus();\n } else {\n super.focus();\n }\n }\n\n blur(): void {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n if (input) {\n input.blur();\n } else {\n super.blur();\n }\n };\n\n setContents(contents: NarrowedTextItem[]): void {\n while (this.firstChild) {\n this.firstChild.remove();\n }\n\n for (const item of contents) {\n const span = document.createElement(`span`);\n span.setAttribute(`data-value`, item.value);\n if (item.label !== undefined) span.setAttribute(`data-label`, item.label);\n if (item.description !== undefined) span.setAttribute(`data-description`, item.description);\n if (item.iconName !== undefined) span.setAttribute(`data-icon-name`, item.iconName);\n this.appendChild(span);\n }\n\n this._selectedValues.clear();\n const selectedValues = contents.filter(i => i.selected).map(i => i.value);\n for (const v of selectedValues) {\n this._selectedValues.add(v);\n }\n\n if (selectedValues.length > 0) {\n this.requestUpdate();\n }\n }\n\n deleteItem(value: string): boolean {\n const el = this.querySelector(`[data-value=\"${CSS.escape(value)}\"]`);\n if (!el) return false;\n el.remove();\n this._selectedValues.delete(value);\n return true;\n }\n\n #onBlur = (): void => {\n this._isFocused = false;\n this.tickled.clearTickled();\n this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));\n };\n\n #onFocusTriggerClick = (): void => {\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n };\n\n #onContainerClick = (e: MouseEvent): void => {\n const target = e.target as HTMLElement;\n if (target.classList.contains(`item`) || target.closest(`.item`)) {\n return;\n }\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n };\n\n #onItemClick(item: NarrowedTextItem): void {\n this._selectItem(item);\n const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);\n if (clickedIndex >= 0) {\n this.tickled.handlePointerEnter(clickedIndex);\n }\n const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n input?.focus();\n }\n\n private _selectItem(item: NarrowedTextItem, clearFilter = true): void {\n if (this.selectionMode === `single`) {\n if (this._selectedValues.has(item.value) && !this.requiredSelection) {\n this._selectedValues.clear();\n } else {\n this._selectedValues.clear();\n this._selectedValues.add(item.value);\n }\n } else {\n if (this._selectedValues.has(item.value)) {\n if (!this.requiredSelection || this._selectedValues.size > 1) {\n this._selectedValues.delete(item.value);\n }\n } else {\n this._selectedValues.add(item.value);\n }\n }\n\n this._updateValueFromSelected();\n this._updateFilteredItems();\n\n const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));\n\n this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n detail: { item, query: this._query, selected: selectedItems },\n bubbles: true,\n composed: true,\n }));\n\n if (clearFilter && !this.preserveFilter && this._query) {\n this._query = ``;\n this._updateFilteredItems();\n }\n }\n\n private _updateValueFromSelected(): void {\n if (this.selectionMode === `single`) {\n this.value = [...this._selectedValues][0] ?? ``;\n } else {\n this.value = [...this._selectedValues].join(`,`);\n }\n }\n\n #renderItem(item: NarrowedTextItem, index: number) {\n const isTickled = this.tickled.isTickled(index);\n const isSelected = this._selectedValues.has(item.value);\n const label = item.label ?? item.value;\n\n return html`\n <div\n class=\"item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}\"\n part=\"item\"\n role=\"option\"\n aria-selected=${isSelected}\n @click=${() => this.#onItemClick(item)}\n @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n >\n ${item.iconName ? html`<ixfx-icon class=\"item-icon\" name=${item.iconName}></ixfx-icon>` : nothing}\n <span class=\"item-label\" part=\"label\" data-item-value=${item.value}>${label}</span>\n </div>\n `;\n }\n\n protected override render() {\n const isScrollable = this.width !== undefined || this.height !== undefined;\n\n return html`\n <slot @slotchange=${this.#handleSlotChange} style=\"display: none;\"></slot>\n <div\n class=\"container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}\"\n part=\"container\"\n style=${this._getContainerStyle()}\n data-input-mode=${this.tickled.inputMode}\n @click=${this.#onContainerClick}\n >\n <input\n type=\"text\"\n class=\"search-input\"\n .value=${this._query}\n autocomplete=\"off\"\n spellcheck=\"false\"\n aria-label=\"Search items\"\n @input=${this.#onInput}\n @keydown=${this.#onKeyDown}\n @focus=${this.#onFocus}\n @blur=${this.#onBlur}\n >\n <div class=\"focus-trigger\" @click=${this.#onFocusTriggerClick}></div>\n <div \n class=\"items\" \n part=\"items\" \n role=\"listbox\"\n @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n >\n ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}\n </div>\n </div>\n `;\n }\n\n private _getContainerStyle(): string {\n const styles: string[] = [];\n if (this.width) {\n styles.push(`width: ${this.width}`);\n }\n if (this.height) {\n styles.push(`height: ${this.height}`);\n }\n return styles.join(`; `);\n }\n\n static override styles = [themeFallbacks, tickledStyles, tickledItemStyles, css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--font-family, system-ui, sans-serif);\n font-size: var(--text-m, 12px);\n color: var(--surface-2-text);\n --item-padding: var(--space-xs, 3px) var(--space-m, 8px);\n --item-border-radius: var(--radius-s, 3px);\n --item-icon-spacing: var(--space-xs, 3px);\n }\n\n .container {\n display: flex;\n position: relative;\n min-width: min-content;\n min-height: min-content;\n }\n\n .container.horizontal {\n flex-direction: row;\n align-items: stretch;\n }\n\n .container.vertical {\n flex-direction: column;\n }\n\n .container.scrollable {\n scrollbar-width: none;\n overflow-x: auto;\n overflow-y: hidden;\n .vertical {\n overflow-x: hidden;\n overflow-y: auto;\n }\n }\n\n .container.focused {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n .search-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: text;\n z-index: 1;\n pointer-events: none;\n }\n\n .search-input:focus {\n outline: none;\n }\n\n .focus-trigger {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n cursor: text;\n }\n\n .items {\n display: flex;\n flex-wrap: wrap;\n gap: var(--item-spacing, var(--space-xs, 3px));\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: var(--item-height, 28px);\n position: relative;\n z-index: 2;\n pointer-events: auto;\n }\n\n .container.horizontal .items {\n flex-direction: row;\n }\n\n .container.vertical .items {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host([nowrap]) .items {\n flex-wrap: nowrap;\n }\n\n .item-icon {\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n }\n\n .item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--item-label-color, var(--item-text, inherit));\n font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));\n text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));\n text-underline-offset: var(--item-label-text-underline-offset, auto);\n }\n\n .item.selected .item-label {\n --item-label-color: var(--item-text-selected);\n --item-label-font-style: var(--item-label-font-style-selected, italic);\n }\n\n .item.tickled .item-label {\n --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n }\n\n .item.active .item-label {\n --item-label-color: var(--item-text-selected);\n }\n\n .item.selected.tickled .item-label {\n --item-label-color: var(--item-text-selected);\n --item-label-font-style: var(--item-label-font-style-selected, italic);\n --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n }\n\n ::highlight(narrowed-text-highlight) {\n background: var(--highlight-background, var(--accent));\n color: var(--highlight-color, var(--accent-text, #fff));\n border-radius: 2px;\n padding: 0 1px;\n }\n `];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-narrowed-text': NarrowedTextElement;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-list-VtWT-_FG.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;
|
|
1
|
+
{"version":3,"file":"tab-list-VtWT-_FG.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA4GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCrNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}
|
|
@@ -79,8 +79,17 @@ keyboard.attach(document.body);
|
|
|
79
79
|
### Methods
|
|
80
80
|
|
|
81
81
|
```ts
|
|
82
|
-
el.selectAll(); //
|
|
83
|
-
el.deselectAll(); //
|
|
82
|
+
el.selectAll(); // Selects all filtered items
|
|
83
|
+
el.deselectAll(); // Clears all selection
|
|
84
|
+
el.setContents([ // Replaces all items. Each item can have value (required),
|
|
85
|
+
{ value: string, // label, description, iconName, and selected (boolean)
|
|
86
|
+
label?: string,
|
|
87
|
+
description?: string,
|
|
88
|
+
iconName?: string,
|
|
89
|
+
selected?: boolean
|
|
90
|
+
}
|
|
91
|
+
]);
|
|
92
|
+
el.deleteItem(value); // Removes item with given data-value. Returns true if found.
|
|
84
93
|
```
|
|
85
94
|
|
|
86
95
|
### Properties of slotted items
|
package/docs-user/tabs.md
CHANGED
|
@@ -217,12 +217,15 @@ When a command is invoked (via keyboard shortcut or `commands.invoke('tab-home')
|
|
|
217
217
|
|
|
218
218
|
### CSS custom properties
|
|
219
219
|
|
|
220
|
-
| Property
|
|
221
|
-
|
|
222
|
-
| `--selected-
|
|
223
|
-
| `--selected-border-width
|
|
224
|
-
| `--ixfx-tab-
|
|
225
|
-
| `--
|
|
220
|
+
| Property | Default | Description |
|
|
221
|
+
|-----------------------------------|----------------------|-----------------------------------------------------------------------------|
|
|
222
|
+
| `--ixfx-selected-tab-color` | `var(--surface-2-text)` | Text color when selected. Can be set on `ixfx-tab-list` or individual items |
|
|
223
|
+
| `--ixfx-selected-tab-border-width`| `1px` | Border width when selected |
|
|
224
|
+
| `--ixfx-selected-tab-weight` | `bold` | Font weight when selected |
|
|
225
|
+
| `--ixfx-tab-selected-background` | `var(--surface-5)` | Background when selected. Can be set on `ixfx-tab-list` or individual items |
|
|
226
|
+
| `--padding` | `var(--space-m)` | Tab padding |
|
|
227
|
+
|
|
228
|
+
All `--ixfx-*` properties use internal bridge variables to work across the Shadow DOM boundary.
|
|
226
229
|
|
|
227
230
|
### CSS parts
|
|
228
231
|
|