@triptease/tt-combobox 5.8.0 → 5.8.2

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.
Files changed (15) hide show
  1. package/dist/cjs/src/TtCombobox.js +9 -4
  2. package/dist/cjs/src/TtCombobox.js.map +1 -1
  3. package/dist/cjs/src/styles.js +1 -0
  4. package/dist/cjs/src/styles.js.map +1 -1
  5. package/dist/cjs/src/types.js.map +1 -1
  6. package/dist/esm/src/TtCombobox.d.ts +1 -0
  7. package/dist/esm/src/TtCombobox.js +9 -4
  8. package/dist/esm/src/TtCombobox.js.map +1 -1
  9. package/dist/esm/src/styles.js +1 -0
  10. package/dist/esm/src/styles.js.map +1 -1
  11. package/dist/esm/src/types.d.ts +2 -1
  12. package/dist/esm/src/types.js.map +1 -1
  13. package/dist/esm/test/tt-combobox.test.js +14 -0
  14. package/dist/esm/test/tt-combobox.test.js.map +1 -1
  15. package/package.json +2 -2
package/dist/cjs/src/TtCombobox.js CHANGED
@@ -41,6 +41,7 @@ class TtCombobox extends lit_1.LitElement {
41
41
  this.ariaLabelledby = lit_1.nothing;
42
42
  this.hideCaret = false;
43
43
  this.openUpward = false;
44
+ this.placeholderPluralNoun = 'options';
44
45
  this._activeOption = -1;
45
46
  this._expanded = false;
46
47
  this._filter = '';
@@ -105,7 +106,8 @@ class TtCombobox extends lit_1.LitElement {
105
106
  exportparts="option, checkbox"
106
107
  part="option"
107
108
  value="select-all"
108
- >Select all</tt-option
109
+ >Select all
110
+ </tt-option
109
111
  >
110
112
  `;
111
113
  };
@@ -317,7 +319,7 @@ class TtCombobox extends lit_1.LitElement {
317
319
  return 'Disabled';
318
320
  }
319
321
  if (!this.value.length) {
320
- return 'No options selected';
322
+ return `No ${this.placeholderPluralNoun} selected`;
321
323
  }
322
324
  if (this.value.length === 1) {
323
325
  return Array.from(this._selectableVisibleOptions)
@@ -332,9 +334,9 @@ class TtCombobox extends lit_1.LitElement {
332
334
  // Only show "All options selected" when truly all non-hidden options are selected
333
335
  const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;
334
336
  if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {
335
- return this.selectAllPlaceholder || 'All options selected';
337
+ return this.selectAllPlaceholder || `All ${this.placeholderPluralNoun} selected`;
336
338
  }
337
- return `${selectedCount} options selected`;
339
+ return `${selectedCount} ${this.placeholderPluralNoun} selected`;
338
340
  });
339
341
  return (0, lit_1.html) ` <input
340
342
  type="text"
@@ -471,6 +473,9 @@ __decorate([
471
473
  __decorate([
472
474
  (0, decorators_js_1.property)({ type: String, attribute: 'default-placeholder' })
473
475
  ], TtCombobox.prototype, "defaultPlaceholder", void 0);
476
+ __decorate([
477
+ (0, decorators_js_1.property)({ type: String, attribute: 'placeholder-plural-noun' })
478
+ ], TtCombobox.prototype, "placeholderPluralNoun", void 0);
474
479
  __decorate([
475
480
  (0, decorators_js_1.state)()
476
481
  ], TtCombobox.prototype, "_activeOption", void 0);
package/dist/cjs/src/TtCombobox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n @property({ type: String, attribute: 'default-placeholder' })\n defaultPlaceholder?: string;\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n this._expanded = false;\n }\n this._filter = '';\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string | undefined {\n if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter, this.defaultPlaceholder],\n () => {\n if (!this.value.length && this.defaultPlaceholder) {\n return this.defaultPlaceholder;\n }\n\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return 'No options selected';\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n // Count all selected values, excluding only those that correspond to permanently hidden options\n const permanentlyHiddenValues = Array.from(this.options)\n .filter((option) => option.hidden)\n .map((option) => option.value);\n\n const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;\n\n // Only show \"All options selected\" when truly all non-hidden options are selected\n const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n return this.selectAllPlaceholder || 'All options selected';\n }\n\n return `${selectedCount} options selected`;\n }\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect || !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all</tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n option.hidden\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
1
+ {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n @property({ type: String, attribute: 'default-placeholder' })\n defaultPlaceholder?: string;\n\n @property({ type: String, attribute: 'placeholder-plural-noun' })\n placeholderPluralNoun: string = 'options';\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n this._expanded = false;\n }\n this._filter = '';\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput,\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string | undefined {\n if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)]),\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter, this.defaultPlaceholder],\n () => {\n if (!this.value.length && this.defaultPlaceholder) {\n return this.defaultPlaceholder;\n }\n\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return `No ${this.placeholderPluralNoun} selected`;\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n // Count all selected values, excluding only those that correspond to permanently hidden options\n const permanentlyHiddenValues = Array.from(this.options)\n .filter((option) => option.hidden)\n .map((option) => option.value);\n\n const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;\n\n // Only show \"All options selected\" when truly all non-hidden options are selected\n const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n return this.selectAllPlaceholder || `All ${this.placeholderPluralNoun} selected`;\n }\n\n return `${selectedCount} ${this.placeholderPluralNoun} selected`;\n },\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect || !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all\n </tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n option.hidden,\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
package/dist/cjs/src/styles.js CHANGED
@@ -206,6 +206,7 @@ exports.styles = (0, lit_1.css) `
206
206
  display: inline-block;
207
207
  max-width: var(--tt-combobox-icon-size, 1rem);
208
208
  aspect-ratio: 1;
209
+ margin-right: 0.25rem;
209
210
  }
210
211
 
211
212
  tt-option.select-all::part(option) {
package/dist/cjs/src/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 2;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 2;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n margin-right: 0.25rem;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
package/dist/cjs/src/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n placeholder?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n value?: string[];\n 'default-placeholder'?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtCombobox>;\n };\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n value?: string[];\n placeholder?: string;\n 'default-placeholder'?: string;\n 'placeholder-plural-noun'?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtCombobox>;\n };\n }\n }\n }\n}\n"]}
package/dist/esm/src/TtCombobox.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare class TtCombobox extends LitElement {
23
23
  selectAllPlaceholder?: string;
24
24
  openUpward: boolean;
25
25
  defaultPlaceholder?: string;
26
+ placeholderPluralNoun: string;
26
27
  get form(): HTMLFormElement | null;
27
28
  protected _activeOption: number;
28
29
  protected _expanded: boolean;
package/dist/esm/src/TtCombobox.js CHANGED
@@ -38,6 +38,7 @@ export class TtCombobox extends LitElement {
38
38
  this.ariaLabelledby = nothing;
39
39
  this.hideCaret = false;
40
40
  this.openUpward = false;
41
+ this.placeholderPluralNoun = 'options';
41
42
  this._activeOption = -1;
42
43
  this._expanded = false;
43
44
  this._filter = '';
@@ -102,7 +103,8 @@ export class TtCombobox extends LitElement {
102
103
  exportparts="option, checkbox"
103
104
  part="option"
104
105
  value="select-all"
105
- >Select all</tt-option
106
+ >Select all
107
+ </tt-option
106
108
  >
107
109
  `;
108
110
  };
@@ -314,7 +316,7 @@ export class TtCombobox extends LitElement {
314
316
  return 'Disabled';
315
317
  }
316
318
  if (!this.value.length) {
317
- return 'No options selected';
319
+ return `No ${this.placeholderPluralNoun} selected`;
318
320
  }
319
321
  if (this.value.length === 1) {
320
322
  return Array.from(this._selectableVisibleOptions)
@@ -329,9 +331,9 @@ export class TtCombobox extends LitElement {
329
331
  // Only show "All options selected" when truly all non-hidden options are selected
330
332
  const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;
331
333
  if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {
332
- return this.selectAllPlaceholder || 'All options selected';
334
+ return this.selectAllPlaceholder || `All ${this.placeholderPluralNoun} selected`;
333
335
  }
334
- return `${selectedCount} options selected`;
336
+ return `${selectedCount} ${this.placeholderPluralNoun} selected`;
335
337
  });
336
338
  return html ` <input
337
339
  type="text"
@@ -467,6 +469,9 @@ __decorate([
467
469
  __decorate([
468
470
  property({ type: String, attribute: 'default-placeholder' })
469
471
  ], TtCombobox.prototype, "defaultPlaceholder", void 0);
472
+ __decorate([
473
+ property({ type: String, attribute: 'placeholder-plural-noun' })
474
+ ], TtCombobox.prototype, "placeholderPluralNoun", void 0);
470
475
  __decorate([
471
476
  state()
472
477
  ], TtCombobox.prototype, "_activeOption", void 0);
package/dist/esm/src/TtCombobox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n @property({ type: String, attribute: 'default-placeholder' })\n defaultPlaceholder?: string;\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n this._expanded = false;\n }\n this._filter = '';\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string | undefined {\n if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter, this.defaultPlaceholder],\n () => {\n if (!this.value.length && this.defaultPlaceholder) {\n return this.defaultPlaceholder;\n }\n\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return 'No options selected';\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n // Count all selected values, excluding only those that correspond to permanently hidden options\n const permanentlyHiddenValues = Array.from(this.options)\n .filter((option) => option.hidden)\n .map((option) => option.value);\n\n const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;\n\n // Only show \"All options selected\" when truly all non-hidden options are selected\n const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n return this.selectAllPlaceholder || 'All options selected';\n }\n\n return `${selectedCount} options selected`;\n }\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect || !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all</tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n option.hidden\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
1
+ {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n @property({ type: String, attribute: 'default-placeholder' })\n defaultPlaceholder?: string;\n\n @property({ type: String, attribute: 'placeholder-plural-noun' })\n placeholderPluralNoun: string = 'options';\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n this._expanded = false;\n }\n this._filter = '';\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput,\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string | undefined {\n if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)]),\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter, this.defaultPlaceholder],\n () => {\n if (!this.value.length && this.defaultPlaceholder) {\n return this.defaultPlaceholder;\n }\n\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return `No ${this.placeholderPluralNoun} selected`;\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n // Count all selected values, excluding only those that correspond to permanently hidden options\n const permanentlyHiddenValues = Array.from(this.options)\n .filter((option) => option.hidden)\n .map((option) => option.value);\n\n const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;\n\n // Only show \"All options selected\" when truly all non-hidden options are selected\n const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n return this.selectAllPlaceholder || `All ${this.placeholderPluralNoun} selected`;\n }\n\n return `${selectedCount} ${this.placeholderPluralNoun} selected`;\n },\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect || !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all\n </tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n option.hidden,\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
package/dist/esm/src/styles.js CHANGED
@@ -203,6 +203,7 @@ export const styles = css `
203
203
  display: inline-block;
204
204
  max-width: var(--tt-combobox-icon-size, 1rem);
205
205
  aspect-ratio: 1;
206
+ margin-right: 0.25rem;
206
207
  }
207
208
 
208
209
  tt-option.select-all::part(option) {
package/dist/esm/src/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 2;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: flex;\n flex-direction: var(--tt-combobox-flex-direction, row);\n align-items: var(--tt-combobox-align-items, center);\n justify-content: var(--tt-combobox-justify-content, initial);\n align-content: var(--tt-combobox-align-content, initial);\n gap: var(--tt-combobox-gap, 0.5rem);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n color: var(--tt-combobox-color, var(--color-text-400));\n }\n\n :host([disabled]) .tt-combobox-container {\n border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200));\n color: var(--tt-combobox-disabled-color, var(--color-text-200));\n background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200));\n pointer-events: none;\n }\n\n .tt-combobox-container:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n .tt-combobox-container:hover {\n background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300));\n }\n\n :host([invalid]) .tt-combobox-container,\n :host(:state(interacted):invalid) .tt-combobox-container {\n outline: 1px solid var(--color-alert-strong);\n }\n\n .errormessage {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: var(--space-scale-0-5);\n color: var(--color-alert-strong);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-strong);\n height: 20px;\n }\n\n .tt-combobox-container:has([role='combobox'][aria-invalid='true']) ~ .errormessage {\n visibility: visible;\n }\n\n :has([role='combobox'][aria-invalid='true']) ::slotted([slot='error']) {\n color: var(--color-alert-strong);\n font-size: var(--font-size-100);\n margin: 0;\n font-weight: var(--font-weight-regular);\n line-height: 1.2;\n }\n\n slot[name='option']::slotted(*) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n cursor: inherit;\n }\n\n .tt-combobox-container {\n position: relative;\n max-width: var(--tt-combobox-max-width, 300px);\n min-width: var(--tt-combobox-min-width, 250px);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n border-color: var(--tt-combobox-border-color, var(--color-border-400));\n border-style: solid;\n border-width: var(--tt-combobox-border-width, 1px);\n background-color: var(--tt-combobox-background-color, var(--color-surface-100));\n padding: 0.5rem;\n gap: 0.25rem;\n //width: 100%;\n }\n\n [role='listbox'] {\n display: none;\n }\n\n [role='combobox'] {\n width: 100%;\n border-style: none;\n background-color: transparent;\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n .hide-caret {\n caret-color: transparent;\n }\n\n [role='combobox']::placeholder {\n color: var(--tt-combobox-placeholder-color, var(--color-text-300));\n font-family: var(--font-family-inter);\n font-size: var(--tt-combobox-font-size, var(--font-size-200));\n }\n\n :host([disabled]) [role='combobox']::placeholder {\n color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200));\n }\n\n [role='combobox']:placeholder-shown {\n text-overflow: ellipsis;\n overflow: clip;\n }\n\n [role='combobox']:focus {\n outline: none;\n }\n\n [role='combobox'] ~ button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n aspect-ratio: 1;\n }\n\n [role='combobox'] ~ button svg {\n transition: transform 0.2s ease-in-out;\n color: var(--tt-combobox-dropdown-color, var(--color-text-400));\n }\n\n [role='combobox'][aria-expanded='true'] ~ button svg {\n transform: rotate(180deg);\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'] {\n display: block;\n width: max-content;\n max-width: var(--tt-combobox-list-max-width, 35ch);\n min-width: 100%;\n background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white));\n border: 1px solid var(--tt-combobox-border-color, var(--color-border-300));\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow-lg);\n padding: 0;\n position: absolute;\n top: var(--tt-combobox-top, calc(100% + 0.5rem));\n left: var(--tt-combobox-left, 0);\n right: var(--tt-combobox-right, unset);\n bottom: var(--tt-combobox-bottom, unset);\n z-index: 2;\n margin: 0;\n list-style: none;\n max-height: var(--tt-combobox-max-height, 400px);\n overflow-y: auto;\n\n .no-results {\n display: none;\n }\n\n &:not(:has(tt-option:not([hidden], .select-all))) {\n .no-results {\n display: flex;\n padding: 0.5rem;\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n align-items: center;\n gap: 0.25rem;\n max-width: 100%;\n width: 100%;\n overflow-y: visible;\n flex: 1;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n line-height: 1.1;\n }\n }\n\n .select-all {\n display: none;\n }\n }\n }\n\n [role='combobox'][aria-expanded='true'] ~ [role='listbox'][data-open-upward] {\n top: unset;\n bottom: calc(100% + 0.5rem);\n }\n\n slot[name='icon'] {\n display: inline-block;\n max-width: var(--tt-combobox-icon-size, 1rem);\n aspect-ratio: 1;\n margin-right: 0.25rem;\n }\n\n tt-option.select-all::part(option) {\n border-bottom: 1px solid var(--color-border-300);\n }\n\n label {\n font-size: var(--tt-combobox-label-font-size, inherit);\n color: var(--tt-combobox-label-color, inherit);\n font-weight: var(--tt-combobox-label-font-weight, inherit);\n\n &[data-hidden] {\n display: none;\n }\n }\n`;\n"]}
package/dist/esm/src/types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { TtCombobox } from './TtCombobox.js';
2
2
  interface TtComboboxExternalAttributes {
3
3
  id?: string;
4
- placeholder?: string;
5
4
  disabled?: boolean;
6
5
  multiselect?: boolean;
7
6
  'display-select-all'?: boolean;
@@ -12,7 +11,9 @@ interface TtComboboxExternalAttributes {
12
11
  'aria-labelledby'?: string;
13
12
  class?: string;
14
13
  value?: string[];
14
+ placeholder?: string;
15
15
  'default-placeholder'?: string;
16
+ 'placeholder-plural-noun'?: string;
16
17
  }
17
18
  declare global {
18
19
  interface HTMLElementTagNameMap {
package/dist/esm/src/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n placeholder?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n value?: string[];\n 'default-placeholder'?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtCombobox>;\n };\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n value?: string[];\n placeholder?: string;\n 'default-placeholder'?: string;\n 'placeholder-plural-noun'?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtCombobox>;\n };\n }\n }\n }\n}\n"]}
package/dist/esm/test/tt-combobox.test.js CHANGED
@@ -58,6 +58,20 @@ describe('TtCombobox', () => {
58
58
  await elementUpdated(el);
59
59
  expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');
60
60
  });
61
+ it('should update the placeholder with the selected option when the default placeholder is set', async () => {
62
+ const placeholder = 'Nothing selected!';
63
+ const el = await fixture(html ` <tt-combobox id="combobox" default-placeholder=${placeholder}>
64
+ <span slot="label">Test combobox</span>
65
+ <option slot="option" value="1">Option 1</option>
66
+ <option slot="option" value="2">Option 2</option>
67
+ <option slot="option" value="3">Option 3</option>
68
+ </tt-combobox>`);
69
+ const combobox = getCombobox(el);
70
+ const option = el.shadowRoot.querySelector('tt-option[value="2"]');
71
+ option.click();
72
+ await elementUpdated(el);
73
+ expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');
74
+ });
61
75
  it('should update the placeholder with the selected option when setting it via selectedValues', async () => {
62
76
  const el = await fixture(html ` <tt-combobox id="combobox" multiselect>
63
77
  <span slot="label">Test combobox</span>
package/dist/esm/test/tt-combobox.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tt-combobox.test.js","sourceRoot":"","sources":["../../../test/tt-combobox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing';\nimport { TtCombobox } from '../src/index.js';\nimport '../src/tt-combobox.js';\nimport { TtOption } from '../src/tt-option/TtOption.js';\n\ndescribe('TtCombobox', () => {\n const getCombobox = (el: TtCombobox) => el.shadowRoot!.querySelector('[role=\"combobox\"]') as HTMLInputElement;\n\n const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');\n\n const filterCombobox = (combobox: HTMLInputElement, text: string) => {\n combobox.value = text;\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n };\n\n it('Should render with the default placeholder text', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');\n });\n\n it('should render with empty placeholder text when it is set', async () => {\n const placeholder = 'Nothing selected!'\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" default-placeholder=${placeholder}>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal(placeholder);\n })\n\n it('should render with the options visible when clicking the combobox', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const options = el.shadowRoot!.querySelectorAll('tt-option');\n await expect(options.length).to.equal(3);\n options.forEach((option) => {\n expect(option.checkVisibility()).to.be.true;\n });\n });\n\n it('should update the placeholder with the selected option', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n await elementUpdated(el);\n expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');\n });\n\n it('should update the placeholder with the selected option when setting it via selectedValues', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n el.value = ['2'];\n await elementUpdated(el);\n await expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');\n });\n\n it('should display select all option when multiselect is true and display-select-all is true, and select all options when clicked', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as HTMLLIElement;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await oneEvent(el, 'change');\n\n const options = el.shadowRoot!.querySelectorAll('tt-option');\n options.forEach((option) => {\n expect(option.selected).to.be.true;\n });\n });\n\n it('should display total selected count after filtering when options were selected before filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n await elementUpdated(el);\n\n // Select options 1, 2, and 3 (all of them)\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as HTMLLIElement;\n option1.click();\n await elementUpdated(el);\n const option2 = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option2.click();\n await elementUpdated(el);\n const option3 = el.shadowRoot!.querySelector('tt-option[value=\"3\"]') as HTMLLIElement;\n option3.click();\n await elementUpdated(el);\n\n // Should show 3 options selected\n expect(comboboxPlaceholderText(combobox)).to.equal('All options selected');\n\n // Now filter to show only \"Option 1\"\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Should still show 3 options selected (not 1)\n expect(comboboxPlaceholderText(combobox)).to.equal('3 options selected');\n });\n\n it('should show correct count after clearing filter when only filtered options were selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"11\">Option 11</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\">Option 4</option>\n <option slot=\"option\" value=\"5\">Option 5</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n await elementUpdated(el);\n\n // Filter to show only 2 options (Option 1 and Option 11 match \"1\")\n filterCombobox(combobox, '1');\n await elementUpdated(el);\n\n // Select both visible filtered options\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as HTMLLIElement;\n option1.click();\n await elementUpdated(el);\n const option11 = el.shadowRoot!.querySelector('tt-option[value=\"11\"]') as HTMLLIElement;\n option11.click();\n await elementUpdated(el);\n\n // Verify 2 options selected while filter is active\n expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Should show \"2 options selected\", NOT \"All options selected\"\n // This is the critical test - when filter is cleared, it should count\n // all selected options (2), not say \"all\" just because all visible options\n // during filtering were selected\n expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');\n });\n\n it('should not allow a disabled option to be selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\" disabled>Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n await combobox.click();\n\n await elementUpdated(el);\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as TtOption;\n\n await expect(option.disabled).to.be.true;\n option.click();\n\n await elementUpdated(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');\n await expect(el.value).to.deep.equal([]);\n });\n\n it('should disable the combobox when the disabled attribute is set', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" disabled>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n expect(combobox.disabled).to.be.true;\n });\n\n xit('should render the error message', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <span slot=\"error\">There was an error</span>\n </tt-combobox>`\n );\n await elementUpdated(el);\n const combobox = getCombobox(el);\n const ariaInvalid = combobox.getAttribute('aria-invalid');\n expect(ariaInvalid).to.equal('false');\n\n const errorMessage = el.shadowRoot!.querySelector('[id=\"error-msg-combobox\"]');\n expect(errorMessage!.checkVisibility()).to.be.false;\n\n el.invalid = true;\n\n await elementUpdated(el);\n\n expect(combobox).to.have.attribute('aria-invalid');\n expect(errorMessage!.checkVisibility()).to.be.true;\n });\n\n it('should call the event handler when the value changes', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n combobox.click();\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n\n const event = await oneEvent(el, 'change');\n const eventValue = (event.target! as HTMLLIElement).value;\n expect(eventValue).to.be.an('array').that.includes('2');\n });\n\n it(\"Should prevent the form from submitting when it's required and no option is selected\", async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" required>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const form = document.createElement('form');\n form.appendChild(el);\n document.body.appendChild(form);\n\n const submitEvent = new Event('submit', { bubbles: true });\n form.dispatchEvent(submitEvent);\n\n await elementUpdated(el);\n\n expect(form.checkValidity()).to.be.false;\n });\n\n it('passes the a11y audit', async () => {\n const el = await fixture<TtCombobox>(html` <tt-combobox></tt-combobox>`);\n\n await expect(el).shadowDom.to.be.accessible();\n });\n\n it('should allow hidden options', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" hidden>Option 4</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n const changeEvent = await oneEvent<InputEvent>(el, 'change');\n\n expect(changeEvent).to.exist;\n expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '3', '4']);\n\n const hiddenOption = el.shadowRoot!.querySelector('tt-option[value=\"4\"][hidden]') as TtOption;\n expect(hiddenOption).to.exist;\n });\n\n it('should not include hidden options in the placeholder text', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" hidden>Option 4</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n\n (<TtOption>el.shadowRoot!.querySelector('tt-option[value=\"3\"]')).click();\n\n const changeEvent = await oneEvent<InputEvent>(el, 'change');\n\n expect(changeEvent).to.exist;\n expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '4']);\n\n expect(combobox.placeholder).to.equal('2 options selected');\n });\n\n it('should close after selecting an option when multiselect is false', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n let options = el.shadowRoot!.querySelectorAll('tt-option');\n expect(options.length).to.equal(3);\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n await elementUpdated(el);\n\n options = el.shadowRoot!.querySelectorAll('tt-option');\n options.forEach((o) => {\n expect(o.checkVisibility()).to.be.false;\n });\n });\n\n it('should include selected options in the value', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" selected>Option 4</option>\n </tt-combobox>`\n );\n\n await elementUpdated(el);\n expect(el.value).to.deep.equal(['4']);\n\n const option = el.querySelector('option[value=\"3\"]') as HTMLOptionElement;\n option.setAttribute('selected', 'true');\n\n await elementUpdated(el);\n await elementUpdated(el); // We have to update twice because we handle the value change, and then rerender\n\n expect(el.value).to.be.an('array').that.includes('4').and.includes('3');\n });\n\n it('should accept a JSON string as value', async () => {\n const value = ['1', '2'];\n\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all value=\"${JSON.stringify(value)}\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n await expect(el.value).to.deep.equal(value);\n const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]') as NodeListOf<TtOption>;\n expect(selectedOptions).to.have.lengthOf(2);\n await expect(Array.from(selectedOptions).map((option) => option.value)).to.deep.equal(value);\n });\n\n it('should display the passed placeholder when all options are selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await oneEvent(el, 'change');\n\n expect(comboboxPlaceholderText(combobox)).to.equal('Everything');\n });\n\n it('should render selected options correctly after filtering and deselecting', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n // Select all options\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await elementUpdated(el);\n\n // Filter options by typing \"Option 1\"\n combobox.value = 'Option 1';\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n await elementUpdated(el);\n\n // Deselect \"Option 1\"\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as TtOption;\n expect(option1).to.exist;\n\n option1.click();\n await elementUpdated(el);\n\n // Clear the filter\n combobox.value = '';\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n await elementUpdated(el);\n\n // Verify selected options\n const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]');\n expect(selectedOptions).to.have.lengthOf(2);\n });\n\n it('should only add the visible options to the value when select all is clicked after filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n // Open the combobox\n const combobox = getCombobox(el);\n combobox.click();\n\n // Filter options by typing \"Option 1\" to only show that option\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Only Option 1 should be visible\n const visibleOptions = el.shadowRoot!.querySelectorAll('tt-option:not(.select-all, [hidden])');\n await expect(visibleOptions.length).to.equal(1);\n await expect(visibleOptions[0].getAttribute('value')).to.equal('1');\n\n // Click \"Select All\"\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n selectAll.click();\n await elementUpdated(el);\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Verify that only \"Option 1\" is selected\n await expect(el.value).to.deep.equal(['1']);\n });\n\n it('should only remove the visible options from the value when deselecting select all after filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n // Open the combobox\n const combobox = getCombobox(el);\n combobox.click();\n\n // Click \"Select All\"\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n selectAll.click();\n await elementUpdated(el);\n\n // Filter options by typing \"Option 1\" to only show that option\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Click \"Select All\" again to deselect visible options\n selectAll.click();\n await elementUpdated(el);\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Verify that only \"Option 1\" is selected\n await expect(el.value).to.deep.equal(['2', '3']);\n });\n\n describe('Form Integration', () => {\n it('should include its values in FormData when submitted', async () => {\n // Create a form with the combobox component\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <input type=\"text\" name=\"text_field\" value=\"test_input\" />\n <tt-combobox name=\"country_select\" id=\"combobox\">\n <option slot=\"option\" value=\"us\">United States</option>\n <option slot=\"option\" value=\"ca\">Canada</option>\n <option slot=\"option\" value=\"mx\">Mexico</option>\n </tt-combobox>\n <button type=\"submit\">Submit</button>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n expect(combobox).to.exist;\n\n // Select an option by setting the value directly\n combobox.value = ['ca'];\n await elementUpdated(combobox);\n\n // Create FormData from the form and verify the combobox's value is included\n const formData = new FormData(form);\n const comboboxValue = formData.get('country_select');\n\n expect(comboboxValue).to.exist;\n const parsedValue = JSON.parse(comboboxValue as string);\n expect(parsedValue).to.deep.equal(['ca']);\n });\n\n it('should include multiple selected values in FormData when multiselect is true', async () => {\n // Create a form with a multiselect combobox\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <tt-combobox name=\"countries\" multiselect id=\"multiselect-combobox\">\n <option slot=\"option\" value=\"us\">United States</option>\n <option slot=\"option\" value=\"ca\">Canada</option>\n <option slot=\"option\" value=\"mx\">Mexico</option>\n <option slot=\"option\" value=\"uk\">United Kingdom</option>\n </tt-combobox>\n <button type=\"submit\">Submit</button>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n\n // Select multiple options\n combobox.value = ['us', 'mx', 'uk'];\n await elementUpdated(combobox);\n\n // Verify FormData contains the multiple selected values\n const formData = new FormData(form);\n const comboboxValue = formData.get('countries');\n\n expect(comboboxValue).to.exist;\n const parsedValue = JSON.parse(comboboxValue as string);\n expect(parsedValue).to.be.an('array').that.includes('us');\n expect(parsedValue).to.be.an('array').that.includes('mx');\n expect(parsedValue).to.be.an('array').that.includes('uk');\n expect(parsedValue).to.have.lengthOf(3);\n });\n\n it('should update FormData when selections change', async () => {\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <tt-combobox name=\"selection\" id=\"combobox\">\n <option slot=\"option\" value=\"option1\">Option 1</option>\n <option slot=\"option\" value=\"option2\">Option 2</option>\n <option slot=\"option\" value=\"option3\">Option 3</option>\n </tt-combobox>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n\n // Initial selection\n combobox.value = ['option1'];\n await elementUpdated(combobox);\n\n // Check initial FormData\n let formData = new FormData(form);\n let value = JSON.parse(formData.get('selection') as string);\n expect(value).to.deep.equal(['option1']);\n\n // Change selection\n combobox.value = ['option2'];\n await elementUpdated(combobox);\n\n // Check updated FormData\n formData = new FormData(form);\n value = JSON.parse(formData.get('selection') as string);\n expect(value).to.deep.equal(['option2']);\n });\n });\n});\n"]}
1
+ {"version":3,"file":"tt-combobox.test.js","sourceRoot":"","sources":["../../../test/tt-combobox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing';\nimport { TtCombobox } from '../src/index.js';\nimport '../src/tt-combobox.js';\nimport { TtOption } from '../src/tt-option/TtOption.js';\n\ndescribe('TtCombobox', () => {\n const getCombobox = (el: TtCombobox) => el.shadowRoot!.querySelector('[role=\"combobox\"]') as HTMLInputElement;\n\n const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');\n\n const filterCombobox = (combobox: HTMLInputElement, text: string) => {\n combobox.value = text;\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n };\n\n it('Should render with the default placeholder text', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');\n });\n\n it('should render with empty placeholder text when it is set', async () => {\n const placeholder = 'Nothing selected!'\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" default-placeholder=${placeholder}>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal(placeholder);\n })\n\n it('should render with the options visible when clicking the combobox', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const options = el.shadowRoot!.querySelectorAll('tt-option');\n await expect(options.length).to.equal(3);\n options.forEach((option) => {\n expect(option.checkVisibility()).to.be.true;\n });\n });\n\n it('should update the placeholder with the selected option', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n await elementUpdated(el);\n expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');\n });\n\n it('should update the placeholder with the selected option when the default placeholder is set', async () => {\n const placeholder = 'Nothing selected!'\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" default-placeholder=${placeholder}>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n await elementUpdated(el);\n expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');\n })\n\n it('should update the placeholder with the selected option when setting it via selectedValues', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n el.value = ['2'];\n await elementUpdated(el);\n await expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');\n });\n\n it('should display select all option when multiselect is true and display-select-all is true, and select all options when clicked', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as HTMLLIElement;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await oneEvent(el, 'change');\n\n const options = el.shadowRoot!.querySelectorAll('tt-option');\n options.forEach((option) => {\n expect(option.selected).to.be.true;\n });\n });\n\n it('should display total selected count after filtering when options were selected before filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n await elementUpdated(el);\n\n // Select options 1, 2, and 3 (all of them)\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as HTMLLIElement;\n option1.click();\n await elementUpdated(el);\n const option2 = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option2.click();\n await elementUpdated(el);\n const option3 = el.shadowRoot!.querySelector('tt-option[value=\"3\"]') as HTMLLIElement;\n option3.click();\n await elementUpdated(el);\n\n // Should show 3 options selected\n expect(comboboxPlaceholderText(combobox)).to.equal('All options selected');\n\n // Now filter to show only \"Option 1\"\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Should still show 3 options selected (not 1)\n expect(comboboxPlaceholderText(combobox)).to.equal('3 options selected');\n });\n\n it('should show correct count after clearing filter when only filtered options were selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"11\">Option 11</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\">Option 4</option>\n <option slot=\"option\" value=\"5\">Option 5</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n await elementUpdated(el);\n\n // Filter to show only 2 options (Option 1 and Option 11 match \"1\")\n filterCombobox(combobox, '1');\n await elementUpdated(el);\n\n // Select both visible filtered options\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as HTMLLIElement;\n option1.click();\n await elementUpdated(el);\n const option11 = el.shadowRoot!.querySelector('tt-option[value=\"11\"]') as HTMLLIElement;\n option11.click();\n await elementUpdated(el);\n\n // Verify 2 options selected while filter is active\n expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Should show \"2 options selected\", NOT \"All options selected\"\n // This is the critical test - when filter is cleared, it should count\n // all selected options (2), not say \"all\" just because all visible options\n // during filtering were selected\n expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');\n });\n\n it('should not allow a disabled option to be selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\" disabled>Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n await combobox.click();\n\n await elementUpdated(el);\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as TtOption;\n\n await expect(option.disabled).to.be.true;\n option.click();\n\n await elementUpdated(el);\n\n await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');\n await expect(el.value).to.deep.equal([]);\n });\n\n it('should disable the combobox when the disabled attribute is set', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" disabled>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n expect(combobox.disabled).to.be.true;\n });\n\n xit('should render the error message', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <span slot=\"error\">There was an error</span>\n </tt-combobox>`\n );\n await elementUpdated(el);\n const combobox = getCombobox(el);\n const ariaInvalid = combobox.getAttribute('aria-invalid');\n expect(ariaInvalid).to.equal('false');\n\n const errorMessage = el.shadowRoot!.querySelector('[id=\"error-msg-combobox\"]');\n expect(errorMessage!.checkVisibility()).to.be.false;\n\n el.invalid = true;\n\n await elementUpdated(el);\n\n expect(combobox).to.have.attribute('aria-invalid');\n expect(errorMessage!.checkVisibility()).to.be.true;\n });\n\n it('should call the event handler when the value changes', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n\n combobox.click();\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n\n const event = await oneEvent(el, 'change');\n const eventValue = (event.target! as HTMLLIElement).value;\n expect(eventValue).to.be.an('array').that.includes('2');\n });\n\n it(\"Should prevent the form from submitting when it's required and no option is selected\", async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" required>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const form = document.createElement('form');\n form.appendChild(el);\n document.body.appendChild(form);\n\n const submitEvent = new Event('submit', { bubbles: true });\n form.dispatchEvent(submitEvent);\n\n await elementUpdated(el);\n\n expect(form.checkValidity()).to.be.false;\n });\n\n it('passes the a11y audit', async () => {\n const el = await fixture<TtCombobox>(html` <tt-combobox></tt-combobox>`);\n\n await expect(el).shadowDom.to.be.accessible();\n });\n\n it('should allow hidden options', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" hidden>Option 4</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n const changeEvent = await oneEvent<InputEvent>(el, 'change');\n\n expect(changeEvent).to.exist;\n expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '3', '4']);\n\n const hiddenOption = el.shadowRoot!.querySelector('tt-option[value=\"4\"][hidden]') as TtOption;\n expect(hiddenOption).to.exist;\n });\n\n it('should not include hidden options in the placeholder text', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" hidden>Option 4</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n await combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n\n (<TtOption>el.shadowRoot!.querySelector('tt-option[value=\"3\"]')).click();\n\n const changeEvent = await oneEvent<InputEvent>(el, 'change');\n\n expect(changeEvent).to.exist;\n expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '4']);\n\n expect(combobox.placeholder).to.equal('2 options selected');\n });\n\n it('should close after selecting an option when multiselect is false', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n let options = el.shadowRoot!.querySelectorAll('tt-option');\n expect(options.length).to.equal(3);\n\n const option = el.shadowRoot!.querySelector('tt-option[value=\"2\"]') as HTMLLIElement;\n option.click();\n await elementUpdated(el);\n\n options = el.shadowRoot!.querySelectorAll('tt-option');\n options.forEach((o) => {\n expect(o.checkVisibility()).to.be.false;\n });\n });\n\n it('should include selected options in the value', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all>\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n <option slot=\"option\" value=\"4\" selected>Option 4</option>\n </tt-combobox>`\n );\n\n await elementUpdated(el);\n expect(el.value).to.deep.equal(['4']);\n\n const option = el.querySelector('option[value=\"3\"]') as HTMLOptionElement;\n option.setAttribute('selected', 'true');\n\n await elementUpdated(el);\n await elementUpdated(el); // We have to update twice because we handle the value change, and then rerender\n\n expect(el.value).to.be.an('array').that.includes('4').and.includes('3');\n });\n\n it('should accept a JSON string as value', async () => {\n const value = ['1', '2'];\n\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all value=\"${JSON.stringify(value)}\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n await expect(el.value).to.deep.equal(value);\n const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]') as NodeListOf<TtOption>;\n expect(selectedOptions).to.have.lengthOf(2);\n await expect(Array.from(selectedOptions).map((option) => option.value)).to.deep.equal(value);\n });\n\n it('should display the passed placeholder when all options are selected', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await oneEvent(el, 'change');\n\n expect(comboboxPlaceholderText(combobox)).to.equal('Everything');\n });\n\n it('should render selected options correctly after filtering and deselecting', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n const combobox = getCombobox(el);\n combobox.click();\n\n // Select all options\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n expect(selectAll).to.exist;\n\n selectAll.click();\n await elementUpdated(el);\n\n // Filter options by typing \"Option 1\"\n combobox.value = 'Option 1';\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n await elementUpdated(el);\n\n // Deselect \"Option 1\"\n const option1 = el.shadowRoot!.querySelector('tt-option[value=\"1\"]') as TtOption;\n expect(option1).to.exist;\n\n option1.click();\n await elementUpdated(el);\n\n // Clear the filter\n combobox.value = '';\n combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n await elementUpdated(el);\n\n // Verify selected options\n const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]');\n expect(selectedOptions).to.have.lengthOf(2);\n });\n\n it('should only add the visible options to the value when select all is clicked after filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n // Open the combobox\n const combobox = getCombobox(el);\n combobox.click();\n\n // Filter options by typing \"Option 1\" to only show that option\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Only Option 1 should be visible\n const visibleOptions = el.shadowRoot!.querySelectorAll('tt-option:not(.select-all, [hidden])');\n await expect(visibleOptions.length).to.equal(1);\n await expect(visibleOptions[0].getAttribute('value')).to.equal('1');\n\n // Click \"Select All\"\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n selectAll.click();\n await elementUpdated(el);\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Verify that only \"Option 1\" is selected\n await expect(el.value).to.deep.equal(['1']);\n });\n\n it('should only remove the visible options from the value when deselecting select all after filtering', async () => {\n const el = await fixture<TtCombobox>(\n html` <tt-combobox id=\"combobox\" multiselect display-select-all select-all-placeholder=\"Everything\">\n <span slot=\"label\">Test combobox</span>\n <option slot=\"option\" value=\"1\">Option 1</option>\n <option slot=\"option\" value=\"2\">Option 2</option>\n <option slot=\"option\" value=\"3\">Option 3</option>\n </tt-combobox>`\n );\n\n // Open the combobox\n const combobox = getCombobox(el);\n combobox.click();\n\n // Click \"Select All\"\n const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;\n selectAll.click();\n await elementUpdated(el);\n\n // Filter options by typing \"Option 1\" to only show that option\n filterCombobox(combobox, 'Option 1');\n await elementUpdated(el);\n\n // Click \"Select All\" again to deselect visible options\n selectAll.click();\n await elementUpdated(el);\n\n // Clear the filter\n filterCombobox(combobox, '');\n await elementUpdated(el);\n\n // Verify that only \"Option 1\" is selected\n await expect(el.value).to.deep.equal(['2', '3']);\n });\n\n describe('Form Integration', () => {\n it('should include its values in FormData when submitted', async () => {\n // Create a form with the combobox component\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <input type=\"text\" name=\"text_field\" value=\"test_input\" />\n <tt-combobox name=\"country_select\" id=\"combobox\">\n <option slot=\"option\" value=\"us\">United States</option>\n <option slot=\"option\" value=\"ca\">Canada</option>\n <option slot=\"option\" value=\"mx\">Mexico</option>\n </tt-combobox>\n <button type=\"submit\">Submit</button>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n expect(combobox).to.exist;\n\n // Select an option by setting the value directly\n combobox.value = ['ca'];\n await elementUpdated(combobox);\n\n // Create FormData from the form and verify the combobox's value is included\n const formData = new FormData(form);\n const comboboxValue = formData.get('country_select');\n\n expect(comboboxValue).to.exist;\n const parsedValue = JSON.parse(comboboxValue as string);\n expect(parsedValue).to.deep.equal(['ca']);\n });\n\n it('should include multiple selected values in FormData when multiselect is true', async () => {\n // Create a form with a multiselect combobox\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <tt-combobox name=\"countries\" multiselect id=\"multiselect-combobox\">\n <option slot=\"option\" value=\"us\">United States</option>\n <option slot=\"option\" value=\"ca\">Canada</option>\n <option slot=\"option\" value=\"mx\">Mexico</option>\n <option slot=\"option\" value=\"uk\">United Kingdom</option>\n </tt-combobox>\n <button type=\"submit\">Submit</button>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n\n // Select multiple options\n combobox.value = ['us', 'mx', 'uk'];\n await elementUpdated(combobox);\n\n // Verify FormData contains the multiple selected values\n const formData = new FormData(form);\n const comboboxValue = formData.get('countries');\n\n expect(comboboxValue).to.exist;\n const parsedValue = JSON.parse(comboboxValue as string);\n expect(parsedValue).to.be.an('array').that.includes('us');\n expect(parsedValue).to.be.an('array').that.includes('mx');\n expect(parsedValue).to.be.an('array').that.includes('uk');\n expect(parsedValue).to.have.lengthOf(3);\n });\n\n it('should update FormData when selections change', async () => {\n const form = await fixture<HTMLFormElement>(html`\n <form method=\"post\" action=\"#\">\n <tt-combobox name=\"selection\" id=\"combobox\">\n <option slot=\"option\" value=\"option1\">Option 1</option>\n <option slot=\"option\" value=\"option2\">Option 2</option>\n <option slot=\"option\" value=\"option3\">Option 3</option>\n </tt-combobox>\n </form>\n `);\n\n const combobox = form.querySelector('tt-combobox') as TtCombobox;\n\n // Initial selection\n combobox.value = ['option1'];\n await elementUpdated(combobox);\n\n // Check initial FormData\n let formData = new FormData(form);\n let value = JSON.parse(formData.get('selection') as string);\n expect(value).to.deep.equal(['option1']);\n\n // Change selection\n combobox.value = ['option2'];\n await elementUpdated(combobox);\n\n // Check updated FormData\n formData = new FormData(form);\n value = JSON.parse(formData.get('selection') as string);\n expect(value).to.deep.equal(['option2']);\n });\n });\n});\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent tt-combobox following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "@triptease",
6
- "version": "5.8.0",
6
+ "version": "5.8.2",
7
7
  "type": "module",
8
8
  "files": [
9
9
  "dist/esm",
@@ -42,7 +42,7 @@
42
42
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
43
43
  },
44
44
  "dependencies": {
45
- "@triptease/icons": "1.4.3",
45
+ "@triptease/icons": "1.5.0",
46
46
  "lit": "^3.1.4"
47
47
  },
48
48
  "devDependencies": {