@triptease/tt-combobox 5.4.1 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +200 -16
- package/dist/src/TtCombobox.d.ts +7 -5
- package/dist/src/TtCombobox.js +50 -53
- package/dist/src/TtCombobox.js.map +1 -1
- package/dist/src/styles.js +23 -81
- package/dist/src/styles.js.map +1 -1
- package/dist/src/tt-combobox.d.ts +1 -0
- package/dist/src/tt-combobox.js +1 -0
- package/dist/src/tt-combobox.js.map +1 -1
- package/dist/src/tt-option/TtOption.d.ts +26 -0
- package/dist/src/tt-option/TtOption.js +73 -0
- package/dist/src/tt-option/TtOption.js.map +1 -0
- package/dist/src/tt-option/styles.d.ts +1 -0
- package/dist/src/tt-option/styles.js +71 -0
- package/dist/src/tt-option/styles.js.map +1 -0
- package/dist/src/tt-option/tt-option.d.ts +2 -0
- package/dist/src/tt-option/tt-option.js +8 -0
- package/dist/src/tt-option/tt-option.js.map +1 -0
- package/package.json +3 -2
- package/test/tt-combobox.test.ts +32 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { 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';\n\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 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: 'option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n protected _visibleOptions!: Array<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n protected _selectableOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n protected _selectableVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n protected _selectedOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\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 Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\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 }\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 (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\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 this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.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.dataset.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 valueMissing: true\n }, errorMessage, this._comboboxInput);\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 const option = event.currentTarget as HTMLElement;\n const selectedValue = option.dataset.value as string;\n\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.toLowerCase();\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(new Event('change', {\n bubbles: true,\n composed: true\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 = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value!);\n this.value = this.value.filter(value => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value!)]));\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map(option => option.dataset.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],\n () => {\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this._selectedVisibleOptions.length) {\n return 'No options selected';\n }\n if (this._selectedVisibleOptions.length === 1) {\n return this._selectedVisibleOptions[0].textContent?.trim();\n }\n\n if (this._isAllSelected) {\n return this.selectAllPlaceholder || 'All options selected';\n }\n\n return `${this._selectedVisibleOptions.length} options selected`;\n });\n\n return html`\n <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 // eslint-disable-next-line lit-a11y/click-events-have-key-events\n return html`\n <li\n class=\"select-all\"\n role=\"option\"\n id=\"${this.id}-option-select-all\"\n aria-selected=\"${selected}\"\n data-active=${active}\n @click=\"${this._selectAll}\"\n @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n data-value=\"select-all\"\n part=\"option\"\n >\n <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n Select all\n </li>`;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);\n\n // if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n // return nothing;\n // }\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = Boolean(this.multiselect && option.selected);\n\n return html`\n <li\n role=\"option\"\n id=\"${this.id}-option-${option.value}\"\n aria-selected=${this.multiselect && option.selected}\n data-active=${active}\n @click=\"${this._onClickOption}\"\n @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n data-value=\"${option.value}\"\n aria-disabled=${option.disabled}\n aria-hidden=${hidden || nothing}\n data-deselectable=${!option.selected}\n part=\"option\"\n >\n ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n <span>${unsafeHTML(option.innerHTML)}</span>\n </li>`;\n }\n\n private _renderChevron = () => html`\n <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\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 class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\" part=\"container\">\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()}\n ${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()}\n\n ${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 class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\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":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { 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\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 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 Boolean(this._visibleOptionsNotSelectAll.length) && Array.from(this._visibleOptionsNotSelectAll).every(option => this.value.includes(option.value));\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 }\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 (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\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 tt-option' : 'Please select an tt-option';\n\n this.internals.setValidity({\n valueMissing: true\n }, errorMessage, this._comboboxInput);\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(new Event('change', {\n bubbles: true,\n composed: true\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(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.value)]));\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],\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).find(option => option.value === this.value[0])?.textContent?.trim();\n }\n\n if (this._isAllSelected) {\n return this.selectAllPlaceholder || 'All options selected';\n }\n\n return `${this._selectedVisibleOptions.length} options selected`;\n });\n\n return html`\n <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 // eslint-disable-next-line lit-a11y/click-events-have-key-events\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 private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter.toLowerCase()) && !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) || option.hidden);\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 type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\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 class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\" part=\"container\">\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()}\n ${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()}\n\n ${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 class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
|
package/dist/src/styles.js
CHANGED
|
@@ -161,56 +161,39 @@ export const styles = css `
|
|
|
161
161
|
overflow-y: auto;
|
|
162
162
|
|
|
163
163
|
|
|
164
|
-
|
|
165
|
-
display:
|
|
166
|
-
|
|
167
|
-
box-sizing: border-box;
|
|
168
|
-
text-align: left;
|
|
169
|
-
text-overflow: ellipsis;
|
|
170
|
-
text-wrap: nowrap;
|
|
171
|
-
align-items: center;
|
|
172
|
-
gap: 0.25rem;
|
|
173
|
-
max-width: 100%;
|
|
174
|
-
width: 100%;
|
|
175
|
-
overflow-y: visible;
|
|
176
|
-
flex: 1;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
input[type="checkbox"] {
|
|
180
|
-
width: var(--checkbox-size, var(--space-scale-2));
|
|
181
|
-
aspect-ratio: 1;
|
|
182
|
-
flex: 0 0 auto;
|
|
183
|
-
}
|
|
164
|
+
.no-results {
|
|
165
|
+
display: none;
|
|
166
|
+
}
|
|
184
167
|
|
|
185
|
-
|
|
186
|
-
|
|
168
|
+
&:not(:has(tt-option:not([hidden], .select-all))) {
|
|
169
|
+
.no-results {
|
|
170
|
+
display: flex;
|
|
171
|
+
padding: 0.5rem;
|
|
172
|
+
box-sizing: border-box;
|
|
173
|
+
text-align: left;
|
|
187
174
|
text-overflow: ellipsis;
|
|
188
|
-
|
|
175
|
+
text-wrap: nowrap;
|
|
176
|
+
align-items: center;
|
|
177
|
+
gap: 0.25rem;
|
|
178
|
+
max-width: 100%;
|
|
179
|
+
width: 100%;
|
|
180
|
+
overflow-y: visible;
|
|
189
181
|
flex: 1;
|
|
190
|
-
line-height: 1.1;
|
|
191
|
-
}
|
|
192
182
|
|
|
193
|
-
&.no-results {
|
|
194
|
-
display: none;
|
|
195
|
-
}
|
|
196
183
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
.no-results {
|
|
205
|
-
display: flex;
|
|
184
|
+
span {
|
|
185
|
+
overflow: hidden;
|
|
186
|
+
text-overflow: ellipsis;
|
|
187
|
+
white-space: nowrap;
|
|
188
|
+
flex: 1;
|
|
189
|
+
line-height: 1.1;
|
|
190
|
+
}
|
|
206
191
|
}
|
|
207
192
|
|
|
208
193
|
.select-all {
|
|
209
194
|
display: none;
|
|
210
195
|
}
|
|
211
196
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
197
|
}
|
|
215
198
|
|
|
216
199
|
[role="combobox"][aria-expanded="true"] ~ [role="listbox"][data-open-upward] {
|
|
@@ -224,50 +207,10 @@ export const styles = css `
|
|
|
224
207
|
aspect-ratio: 1;
|
|
225
208
|
}
|
|
226
209
|
|
|
227
|
-
|
|
210
|
+
tt-option.select-all::part(option) {
|
|
228
211
|
border-bottom: 1px solid var(--color-border-300);
|
|
229
212
|
}
|
|
230
213
|
|
|
231
|
-
[aria-multiselectable="false"] [role="option"][aria-selected="true"] {
|
|
232
|
-
color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
|
|
233
|
-
font-weight: var(--font-weight-medium);
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
[role="option"]:is(:hover, [data-active="true"]) {
|
|
237
|
-
background-color: var(--tt-combobox-option-background-color-hover, inherit);
|
|
238
|
-
color: var(--tt-combobox-option-color-hover, inherit);
|
|
239
|
-
|
|
240
|
-
&:first-child {
|
|
241
|
-
border-top-left-radius: var(--border-radius);
|
|
242
|
-
border-top-right-radius: var(--border-radius);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
&:last-child {
|
|
246
|
-
border-bottom-left-radius: var(--border-radius);
|
|
247
|
-
border-bottom-right-radius: var(--border-radius);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
[role="option"]:hover {
|
|
252
|
-
cursor: pointer;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
[role="option"][aria-disabled="true"] {
|
|
256
|
-
pointer-events: none;
|
|
257
|
-
opacity: 0.5;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
[role="listbox"][aria-multiselectable="true"] [role="option"] input[type="checkbox"] {
|
|
261
|
-
accent-color: var(--color-primary-400);
|
|
262
|
-
width: var(--checkbox-size, var(--space-scale-2));
|
|
263
|
-
aspect-ratio: 1;
|
|
264
|
-
pointer-events: none;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
[role="listbox"][aria-multiselectable="true"] [role="option"][aria-disabled="true"] input[type="checkbox"] {
|
|
268
|
-
pointer-events: none;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
214
|
label {
|
|
272
215
|
font-size: var(--tt-combobox-label-font-size, inherit);
|
|
273
216
|
color: var(--tt-combobox-label-color, inherit);
|
|
@@ -276,7 +219,6 @@ export const styles = css `
|
|
|
276
219
|
&[data-hidden] {
|
|
277
220
|
display: none;
|
|
278
221
|
}
|
|
279
|
-
|
|
280
222
|
}
|
|
281
223
|
`;
|
|
282
224
|
//# sourceMappingURL=styles.js.map
|
package/dist/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,GAAE,GAAG,CAAA
|
|
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,GAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NvB,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-400, red);\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-400, red);\n\n &[data-hidden] {\n display: none;\n }\n }\n\n .errormessage svg path {\n fill: var(--color-alert-400, red);\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-400, darkred);\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\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\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"]}
|
package/dist/src/tt-combobox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"tt-combobox.js","sourceRoot":"","sources":["../../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAElC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAC1D,CAAC;AAEH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\nimport './tt-option/tt-option.js';\n\nif (typeof window !== 'undefined') {\n if (!window.customElements.get('tt-combobox')) {\n window.customElements.define('tt-combobox', TtCombobox);\n }\n\n}\n\nexport { TtCombobox };\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class TtOption extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult;
|
|
4
|
+
static shadowRootOptions: {
|
|
5
|
+
delegatesFocus: boolean;
|
|
6
|
+
mode: ShadowRootMode;
|
|
7
|
+
serializable?: boolean;
|
|
8
|
+
slotAssignment?: SlotAssignmentMode;
|
|
9
|
+
customElements?: CustomElementRegistry;
|
|
10
|
+
registry?: CustomElementRegistry;
|
|
11
|
+
};
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
selected: boolean;
|
|
14
|
+
active: boolean;
|
|
15
|
+
value: string;
|
|
16
|
+
includeCheckbox: boolean;
|
|
17
|
+
connectedCallback(): void;
|
|
18
|
+
disconnectedCallback(): void;
|
|
19
|
+
private _onClick;
|
|
20
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
21
|
+
}
|
|
22
|
+
declare global {
|
|
23
|
+
interface HTMLElementTagNameMap {
|
|
24
|
+
'tt-option': TtOption;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { styles } from './styles.js';
|
|
5
|
+
export class TtOption extends LitElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.disabled = false;
|
|
9
|
+
this.selected = false;
|
|
10
|
+
this.active = false;
|
|
11
|
+
this.value = '';
|
|
12
|
+
this.includeCheckbox = false;
|
|
13
|
+
this._onClick = (event) => {
|
|
14
|
+
if (this.disabled) {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
event.stopImmediatePropagation();
|
|
17
|
+
event.stopPropagation();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
super.connectedCallback();
|
|
23
|
+
this.addEventListener('click', this._onClick);
|
|
24
|
+
}
|
|
25
|
+
disconnectedCallback() {
|
|
26
|
+
super.disconnectedCallback();
|
|
27
|
+
this.removeEventListener('click', this._onClick);
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
return html `
|
|
31
|
+
<li
|
|
32
|
+
role="option"
|
|
33
|
+
aria-selected="${this.selected}"
|
|
34
|
+
aria-disabled="${this.disabled}"
|
|
35
|
+
?aria-hidden="${this.hidden}"
|
|
36
|
+
data-active="${this.active}"
|
|
37
|
+
data-value="${this.value}"
|
|
38
|
+
@click="${this._onClick}"
|
|
39
|
+
@mousedown="${(event) => event.preventDefault()}"
|
|
40
|
+
part="option"
|
|
41
|
+
>
|
|
42
|
+
${this.includeCheckbox
|
|
43
|
+
? html `<input type="checkbox" ?checked=${this.selected}
|
|
44
|
+
role="presentation" tabindex="-1" part="checkbox">`
|
|
45
|
+
: nothing}
|
|
46
|
+
<span>
|
|
47
|
+
<slot></slot>
|
|
48
|
+
</span>
|
|
49
|
+
</li>
|
|
50
|
+
`;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
TtOption.styles = styles;
|
|
54
|
+
TtOption.shadowRootOptions = {
|
|
55
|
+
...LitElement.shadowRootOptions,
|
|
56
|
+
delegatesFocus: true
|
|
57
|
+
};
|
|
58
|
+
__decorate([
|
|
59
|
+
property({ type: Boolean })
|
|
60
|
+
], TtOption.prototype, "disabled", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
property({ type: Boolean })
|
|
63
|
+
], TtOption.prototype, "selected", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
property({ type: Boolean })
|
|
66
|
+
], TtOption.prototype, "active", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
property({ type: String })
|
|
69
|
+
], TtOption.prototype, "value", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
property({ type: Boolean, attribute: 'include-checkbox' })
|
|
72
|
+
], TtOption.prototype, "includeCheckbox", void 0);
|
|
73
|
+
//# sourceMappingURL=TtOption.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TtOption.js","sourceRoot":"","sources":["../../../src/tt-option/TtOption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QASE,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,WAAM,GAAG,KAAK,CAAC;QAGf,UAAK,GAAG,EAAE,CAAC;QAGX,oBAAe,GAAG,KAAK,CAAC;QAahB,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;gBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAA;IAyBH,CAAC;IA1CC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAUD,MAAM;QACJ,OAAO,IAAI,CAAA;;;yBAGU,IAAI,CAAC,QAAQ;yBACb,IAAI,CAAC,QAAQ;wBACd,IAAI,CAAC,MAAM;uBACZ,IAAI,CAAC,MAAM;sBACZ,IAAI,CAAC,KAAK;kBACd,IAAI,CAAC,QAAQ;sBACT,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;;;UAGzD,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,QAAQ;2EACW;YACjE,CAAC,CAAC,OAAO;;;;;KAKd,CAAA;IACH,CAAC;;AA/DM,eAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,0BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACnC","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\n\nexport class TtOption extends LitElement {\n static styles = styles;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n selected = false;\n\n @property({ type: Boolean })\n active = false;\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean, attribute: 'include-checkbox' })\n includeCheckbox = false;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this._onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this._onClick);\n }\n\n private _onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n }\n\n render() {\n return html`\n <li\n role=\"option\"\n aria-selected=\"${this.selected}\"\n aria-disabled=\"${this.disabled}\"\n ?aria-hidden=\"${this.hidden}\"\n data-active=\"${this.active}\"\n data-value=\"${this.value}\"\n @click=\"${this._onClick}\"\n @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n part=\"option\"\n >\n ${this.includeCheckbox\n ? html`<input type=\"checkbox\" ?checked=${this.selected}\n role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">`\n : nothing}\n <span>\n <slot></slot>\n </span>\n </li>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-option': TtOption;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
li {
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
display: flex;
|
|
6
|
+
padding: 0.5rem;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
text-align: left;
|
|
9
|
+
text-overflow: ellipsis;
|
|
10
|
+
text-wrap: nowrap;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: 0.25rem;
|
|
13
|
+
max-width: 100%;
|
|
14
|
+
width: 100%;
|
|
15
|
+
overflow-y: visible;
|
|
16
|
+
flex: 1;
|
|
17
|
+
|
|
18
|
+
input[type="checkbox"] {
|
|
19
|
+
width: var(--checkbox-size, var(--space-scale-2));
|
|
20
|
+
aspect-ratio: 1;
|
|
21
|
+
flex: 0 0 auto;
|
|
22
|
+
accent-color: var(--color-primary-400);
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
span {
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
text-overflow: ellipsis;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
flex: 1;
|
|
31
|
+
line-height: 1.1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[aria-hidden="true"] {
|
|
35
|
+
visibility: hidden;
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&[aria-disabled="true"] {
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
opacity: 0.5;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&[aria-selected="true"]:not(:has(input[type="checkbox"])) {
|
|
45
|
+
color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
|
|
46
|
+
font-weight: var(--font-weight-medium);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:host([active]), :host(:hover) {
|
|
51
|
+
li {
|
|
52
|
+
background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));
|
|
53
|
+
color: var(--tt-combobox-option-color-hover, inherit);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&:first-child li {
|
|
57
|
+
border-top-left-radius: var(--border-radius);
|
|
58
|
+
border-top-right-radius: var(--border-radius);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:last-child li {
|
|
62
|
+
border-bottom-left-radius: var(--border-radius);
|
|
63
|
+
border-bottom-right-radius: var(--border-radius);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([disabled]) {
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
}
|
|
70
|
+
`;
|
|
71
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tt-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\nli {\n cursor: pointer;\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 input[type=\"checkbox\"] {\n width: var(--checkbox-size, var(--space-scale-2));\n aspect-ratio: 1;\n flex: 0 0 auto;\n accent-color: var(--color-primary-400);\n pointer-events: none;\n }\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 &[aria-hidden=\"true\"] {\n visibility: hidden;\n display: none;\n }\n\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &[aria-selected=\"true\"]:not(:has(input[type=\"checkbox\"])) {\n color: var(--tt-combobox-option-selected-color, var(--color-primary-400));\n font-weight: var(--font-weight-medium);\n }\n}\n\n:host([active]), :host(:hover) {\n li {\n background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));\n color: var(--tt-combobox-option-color-hover, inherit);\n }\n\n &:first-child li {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n\n &:last-child li {\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n`\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tt-option.js","sourceRoot":"","sources":["../../../src/tt-option/tt-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAG,QAAQ,CAAC,CAAC;IACvD,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA","sourcesContent":["import { TtOption } from './TtOption.js';\n\nif (typeof window !== 'undefined') {\n if (!window.customElements.get('tt-option')) {\n window.customElements.define('tt-option', TtOption);\n }\n}\n\nexport { TtOption }\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.
|
|
6
|
+
"version": "5.5.0",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/src/index.js",
|
|
9
9
|
"module": "dist/src/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@triptease/icons": "
|
|
30
|
+
"@triptease/icons": "1.3.1",
|
|
31
31
|
"lit": "^3.1.4"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"husky": "^9.0.11",
|
|
46
46
|
"lint-staged": "^15.2.7",
|
|
47
47
|
"prettier": "^3.3.2",
|
|
48
|
+
"storybook": "^10.0.7",
|
|
48
49
|
"tslib": "^2.6.3",
|
|
49
50
|
"typescript": "^5.5.3"
|
|
50
51
|
},
|