@digital-realty/ix-multi-select 1.2.7 → 1.3.1

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.
@@ -321,6 +321,7 @@ export class IxMultiSelect extends ixMultiSelectBaseClass {
321
321
  class="menu"
322
322
  anchor="field"
323
323
  role="listbox"
324
+ aria-label=${this.label || 'Options'}
324
325
  tabindex="-1"
325
326
  quick
326
327
  .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}
@@ -1 +1 @@
1
- {"version":3,"file":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';\nimport { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\nimport { IxMultiSelectTestIds as TestIds } from './ix-multi-select-test-ids.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nconst ixMultiSelectBaseClass = mixinDelegatesAria(\n mixinElementInternals(LitElement)\n);\n\nexport class IxMultiSelect extends ixMultiSelectBaseClass {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n /**\n * Whether the menu should be aligned to the start or the end of the select's\n * textbox.\n */\n @property({ attribute: 'menu-align' }) menuAlign: 'start' | 'end' = 'end';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' | 'popover' = 'absolute';\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private menuOpening = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n get selectedItems() {\n return this._items.filter(item => item.selected);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._items = [...this.items];\n this.internals.setFormValue(this.value);\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n }\n\n private optionSelect = (e: InputEvent | KeyboardEvent, id: number) => {\n let ischecked: boolean;\n if (e instanceof KeyboardEvent) {\n e.preventDefault();\n ischecked = !this._items[id].selected;\n } else {\n ischecked = (<HTMLInputElement>e.target).checked;\n }\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.focused = true;\n this.menu.show();\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.id !== 'filter' || this.disabled) return;\n if (this.menuOpen || this.menuOpening) return;\n this.focusin();\n };\n\n handleFocusout = () => {\n this.focused = false;\n };\n\n handleMenuOpening = () => {\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n this.focused = true;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n const fieldWidth =\n this.shadowRoot?.querySelector('ix-field')?.clientWidth;\n innerMenu.style.width = `${fieldWidth}px`;\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpen = false;\n this.menuOpening = false;\n this.focused = this.selectedItems.length > 0;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n } else {\n if (this.menuOpening) return;\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.filterValue = '';\n this.focused = false;\n this.menuOpen = false;\n this.menuOpening = false;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('clear-multi-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this._items = this._items.map(item => ({ ...item, selected: false }));\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"multi-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n part=\"field\"\n id=\"field\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.errorText\n : nothing}\n label=${this.label}\n @click=${this.handleFocusin}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected) ||\n this.filterValue.length ||\n this.menuOpen}\n >\n <div class=\"field-content\">\n ${this._items.filter(item => item.selected).length\n ? html`<ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n truncate\n data-testid=${TestIds.SELECTED_CHIP(item.label)}\n ></ix-chip\n ></span>`\n : nothing\n )}\n </ix-chip-set>`\n : nothing}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n .value=${this.filterValue}\n type=\"text\"\n autocomplete=\"off\"\n data-testid=${TestIds.FILTER_INPUT}\n />\n </div>\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n data-testid=${TestIds.TOGGLE_BUTTON}\n ></ix-icon-button>\n </slot>\n </ix-field>\n <ix-menu\n id=\"listbox\"\n class=\"menu\"\n anchor=\"field\"\n role=\"listbox\"\n tabindex=\"-1\"\n quick\n .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}\n .menuCorner=${this.menuAlign === 'start'\n ? 'start-start'\n : 'start-end'}\n .positioning=${this.menuPositioning}\n @opened=${() => {\n this.menuOpened();\n this.dispatchEvent(\n new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: { value: 'open' },\n })\n );\n }}\n @opening=${this.handleMenuOpening}\n @closing=${() => {\n this.dispatchEvent(\n new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: { value: 'close' },\n })\n );\n }}\n @closed=${this.handleMenuClosed}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.optionSelect(e, id);\n }\n }}\n >\n <div slot=\"headline\">\n <label\n data-testid=${TestIds.OPTION_LABEL(item.label)}\n >\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n data-testid=${TestIds.OPTION_CHECKBOX(item.label)}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';\nimport { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\nimport { IxMultiSelectTestIds as TestIds } from './ix-multi-select-test-ids.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nconst ixMultiSelectBaseClass = mixinDelegatesAria(\n mixinElementInternals(LitElement)\n);\n\nexport class IxMultiSelect extends ixMultiSelectBaseClass {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n /**\n * Whether the menu should be aligned to the start or the end of the select's\n * textbox.\n */\n @property({ attribute: 'menu-align' }) menuAlign: 'start' | 'end' = 'end';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' | 'popover' = 'absolute';\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private menuOpening = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n get selectedItems() {\n return this._items.filter(item => item.selected);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._items = [...this.items];\n this.internals.setFormValue(this.value);\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n }\n\n private optionSelect = (e: InputEvent | KeyboardEvent, id: number) => {\n let ischecked: boolean;\n if (e instanceof KeyboardEvent) {\n e.preventDefault();\n ischecked = !this._items[id].selected;\n } else {\n ischecked = (<HTMLInputElement>e.target).checked;\n }\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.focused = true;\n this.menu.show();\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.id !== 'filter' || this.disabled) return;\n if (this.menuOpen || this.menuOpening) return;\n this.focusin();\n };\n\n handleFocusout = () => {\n this.focused = false;\n };\n\n handleMenuOpening = () => {\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n this.focused = true;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n const fieldWidth =\n this.shadowRoot?.querySelector('ix-field')?.clientWidth;\n innerMenu.style.width = `${fieldWidth}px`;\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpen = false;\n this.menuOpening = false;\n this.focused = this.selectedItems.length > 0;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n } else {\n if (this.menuOpening) return;\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.filterValue = '';\n this.focused = false;\n this.menuOpen = false;\n this.menuOpening = false;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('clear-multi-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this._items = this._items.map(item => ({ ...item, selected: false }));\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"multi-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n part=\"field\"\n id=\"field\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.errorText\n : nothing}\n label=${this.label}\n @click=${this.handleFocusin}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected) ||\n this.filterValue.length ||\n this.menuOpen}\n >\n <div class=\"field-content\">\n ${this._items.filter(item => item.selected).length\n ? html`<ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n truncate\n data-testid=${TestIds.SELECTED_CHIP(item.label)}\n ></ix-chip\n ></span>`\n : nothing\n )}\n </ix-chip-set>`\n : nothing}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n .value=${this.filterValue}\n type=\"text\"\n autocomplete=\"off\"\n data-testid=${TestIds.FILTER_INPUT}\n />\n </div>\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n data-testid=${TestIds.TOGGLE_BUTTON}\n ></ix-icon-button>\n </slot>\n </ix-field>\n <ix-menu\n id=\"listbox\"\n class=\"menu\"\n anchor=\"field\"\n role=\"listbox\"\n aria-label=${this.label || 'Options'}\n tabindex=\"-1\"\n quick\n .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}\n .menuCorner=${this.menuAlign === 'start'\n ? 'start-start'\n : 'start-end'}\n .positioning=${this.menuPositioning}\n @opened=${() => {\n this.menuOpened();\n this.dispatchEvent(\n new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: { value: 'open' },\n })\n );\n }}\n @opening=${this.handleMenuOpening}\n @closing=${() => {\n this.dispatchEvent(\n new CustomEvent('select-menu', {\n bubbles: true,\n composed: true,\n detail: { value: 'close' },\n })\n );\n }}\n @closed=${this.handleMenuClosed}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.optionSelect(e, id);\n }\n }}\n >\n <div slot=\"headline\">\n <label\n data-testid=${TestIds.OPTION_LABEL(item.label)}\n >\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n data-testid=${TestIds.OPTION_CHECKBOX(item.label)}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n `;\n }\n}\n"]}
@@ -1,5 +1,183 @@
1
- import{__decorate}from"tslib";import{css,LitElement,nothing,html}from"lit";import{property,query,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{mixinDelegatesAria}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import"@digital-realty/ix-chip/ix-chip-set.js";import"@digital-realty/ix-chip/ix-chip.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";let IxMultiSelectStyles=css`:host{display:block}:host([disabled]){pointer-events:none}ix-field{display:block}ix-field label{display:none}.field-content{display:flex;flex-wrap:wrap;min-height:var(--ix-custom-field-min-height,24px)}.menu{position:relative}.menu input,.menu label{cursor:pointer}input{border:none;background:0 0;outline:0;min-width:3rem;line-height:var(--_content-line-height)}#filter{min-width:30%;line-height:var(--_content-line-height);flex-grow:1}ix-chip-set{min-height:var(--_content-line-height);display:flex;padding-right:.5rem}ix-menu{--md-menu-container-color:#fff;max-height:500px}@media (max-height:1024px){ix-menu{max-height:300px}}ix-menu-item{position:relative;min-height:var(--ix-menu-item-height,2.5rem)}ix-menu-item label{display:flex;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0}ix-menu-item label input[type=checkbox]{margin:0 1rem 2px}ix-menu-item.selected{background:var(--md-menu-item-selected-container-color,--md-sys-color-tertiary-container)}ix-icon-button{--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-hover-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-hover-state-layer-color:var(
1
+ import{__decorate as e}from"tslib";import{css as t,LitElement as i,nothing as s,html as n}from"lit";import{property as o,query as l,state as r}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{mixinDelegatesAria as d}from"@material/web/internal/aria/delegate.js";import{mixinElementInternals as h}from"@material/web/labs/behaviors/element-internals.js";import"@digital-realty/ix-chip/ix-chip-set.js";import"@digital-realty/ix-chip/ix-chip.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";const m=t`
2
+ :host {
3
+ display: block;
4
+ }
5
+ :host([disabled]) {
6
+ pointer-events: none;
7
+ }
8
+ ix-field {
9
+ display: block;
10
+ }
11
+ ix-field label {
12
+ display: none;
13
+ }
14
+ .field-content {
15
+ display: flex;
16
+ flex-wrap: wrap;
17
+ min-height: var(--ix-custom-field-min-height, 24px);
18
+ }
19
+ .menu {
20
+ position: relative;
21
+ }
22
+ .menu label,
23
+ .menu input {
24
+ cursor: pointer;
25
+ }
26
+ input {
27
+ border: none;
28
+ background: transparent;
29
+ outline: none;
30
+ min-width: 3rem;
31
+ line-height: var(--_content-line-height);
32
+ }
33
+ #filter {
34
+ min-width: 30%;
35
+ line-height: var(--_content-line-height);
36
+ flex-grow: 1;
37
+ }
38
+ ix-chip-set {
39
+ min-height: var(--_content-line-height);
40
+ display: flex;
41
+ padding-right: 0.5rem;
42
+ }
43
+ ix-menu {
44
+ --md-menu-container-color: #fff;
45
+ max-height: 500px;
46
+ }
47
+ @media (max-height: 1024px) {
48
+ ix-menu {
49
+ max-height: 300px; /* Reduced max-height for smaller viewport heights */
50
+ }
51
+ }
52
+ ix-menu-item {
53
+ position: relative;
54
+ min-height: var(--ix-menu-item-height, 2.5rem);
55
+ }
56
+ ix-menu-item label {
57
+ display: flex;
58
+ align-items: center;
59
+ position: absolute;
60
+ top: 0;
61
+ left: 0;
62
+ right: 0;
63
+ bottom: 0;
64
+ }
65
+ ix-menu-item label input[type='checkbox'] {
66
+ margin: 0 1rem 2px;
67
+ }
68
+ ix-menu-item.selected {
69
+ background: var(
70
+ --md-menu-item-selected-container-color,
71
+ --md-sys-color-tertiary-container
72
+ );
73
+ }
74
+ ix-icon-button {
75
+ --md-icon-button-icon-color: var(--md-sys-text-color-secondary);
76
+ --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);
77
+ --md-icon-button-hover-state-layer-color: var(
2
78
  --md-sys-text-color-secondary
3
- );--md-icon-button-pressed-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
79
+ );
80
+ --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);
81
+ --md-icon-button-pressed-state-layer-color: var(
4
82
  --md-sys-text-color-secondary
5
- )}.open-icon{margin-right:.5rem}.multi-select{position:relative}`;class IxMultiSelectTestIds{}IxMultiSelectTestIds.SELECTED_CHIP=e=>"ix-ms-selected-chip-"+e,IxMultiSelectTestIds.OPTION_LABEL=e=>"ix-ms-select-option-label-"+e,IxMultiSelectTestIds.OPTION_CHECKBOX=e=>"ix-ms-select-option-checkbox-"+e,IxMultiSelectTestIds.FILTER_INPUT="ix-ms-select-filter-input",IxMultiSelectTestIds.TOGGLE_BUTTON="ix-ms-select-toggle-button";let ixMultiSelectBaseClass=mixinDelegatesAria(mixinElementInternals(LitElement));class IxMultiSelect extends ixMultiSelectBaseClass{constructor(){super(...arguments),this.menuAlign="end",this.menuPositioning="absolute",this.internals=this.attachInternals(),this.items=[],this.label="",this.errorText="Invalid error text",this.disabled=!1,this.tabIndex=0,this.error=!1,this.required=!1,this._items=[],this.filterValue="",this.menuOpen=!1,this.menuOpening=!1,this.focused=!1,this.noFilteredOptions="No options",this.optionSelect=(e,i)=>{let s;s=e instanceof KeyboardEvent?(e.preventDefault(),!this._items[i].selected):e.target.checked,this._items=this._items.map((e,t)=>i===t?{...e,selected:s,filtered:!1}:{...e,filtered:!1}),this.dispatchEvent(new CustomEvent("toggle-multi-select-item",{detail:{label:this._items[i].label,selected:s},bubbles:!0,composed:!0})),this.filterValue=""},this.chipRemove=i=>{this._items=this._items.map((e,t)=>i===t?{...e,selected:!1}:{...e}),this.dispatchEvent(new CustomEvent("remove-multi-select-item",{detail:this._items[i].label,bubbles:!0,composed:!0}))},this.filterOptions=e=>{let i=e.target.value.toLocaleLowerCase();this.filterValue=i,this._items=this._items.map(e=>{var t=-1===e.label.toLowerCase().indexOf(i);return{...e,filtered:t}})},this.focusin=()=>{this.focused=!0,this.menu.show(),this.setMenuPosition(),this.internals.setFormValue(this.value)},this.handleFocusin=e=>{"filter"!==e.target.id||this.disabled||this.menuOpen||this.menuOpening||this.focusin()},this.handleFocusout=()=>{this.focused=!1},this.handleMenuOpening=()=>{this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition(),this.internals.setFormValue(this.value)},this.menuOpened=()=>{this.setMenuPosition(),this.menuOpening=!1,this.focused=!0},this.setMenuPosition=()=>{var e,t=null==(t=null==(t=this.menu)?void 0:t.shadowRoot)?void 0:t.querySelector(".menu");t&&(e=null==(e=null==(e=this.shadowRoot)?void 0:e.querySelector("ix-field"))?void 0:e.clientWidth,t.style.width=e+"px")},this.handleMenuClosed=()=>{this.menuOpen=!1,this.menuOpening=!1,this.focused=0<this.selectedItems.length},this.toggleOpen=e=>{e.stopPropagation(),this.menu.open?this.menuOpening||this.menu.close():(this.menu.show(),this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition())},this.clear=e=>{e.stopPropagation(),this._items=this._items.map(e=>({...e,selected:!1})),this.filterValue="",this.focused=!1,this.menuOpen=!1,this.menuOpening=!1,this.menu.close(),this.dispatchEvent(new CustomEvent("clear-multi-select",{bubbles:!0,composed:!0}))}}static get styles(){return[IxMultiSelectStyles]}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}get value(){return this._items.filter(e=>e.selected).map(e=>e.label).join(", ")}set value(e){let t=e.split(",").map(e=>e.trim());this._items=this._items.map(e=>({...e,selected:t.includes(e.label)}))}get selectedItems(){return this._items.filter(e=>e.selected)}connectedCallback(){super.connectedCallback(),this._items=[...this.items],this.internals.setFormValue(this.value)}updated(e){e.has("disabled")&&(this.tabIndex=this.disabled?-1:0),this.setMenuPosition(),this.internals.setFormValue(this.value)}formResetCallback(){this.reset()}reset(){this._items=this._items.map(e=>({...e,selected:!1}))}render(){var e={disabled:this.disabled,error:!this.disabled&&this.error};return html`<div class="multi-select"><ix-field class="${classMap(e)}" part="field" id="field" ?focused="${this.focused}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.error}" error-text="${this.menuOpen||this.menuOpening?nothing:this.errorText}" label="${this.label}" @click="${this.handleFocusin}" @focusin="${this.handleFocusin}" @focusout="${this.handleFocusout}" ?populated="${this._items.find(e=>e.selected)||this.filterValue.length||this.menuOpen}"><div class="field-content">${this._items.filter(e=>e.selected).length?html`<ix-chip-set>${this._items.map((e,t)=>e.selected?html`<span><ix-chip @remove="${()=>this.chipRemove(t)}" label="${e.label}" appearance="input" removable remove-only truncate data-testid="${IxMultiSelectTestIds.SELECTED_CHIP(e.label)}"></ix-chip></span>`:nothing)}</ix-chip-set>`:nothing} <input id="filter" @input="${this.filterOptions}" .value="${this.filterValue}" type="text" autocomplete="off" data-testid="${IxMultiSelectTestIds.FILTER_INPUT}"></div><slot name="end" slot="end">${this.value.length?html`<ix-icon-button @click="${this.clear}" icon="close" aria-label="clear"></ix-icon-button>`:nothing}<ix-icon-button @click="${this.toggleOpen}" class="open-icon" icon="${"arrow_drop_"+(this.menuOpen?"up":"down")}" aria-label="options" data-testid="${IxMultiSelectTestIds.TOGGLE_BUTTON}"></ix-icon-button></slot></ix-field><ix-menu id="listbox" class="menu" anchor="field" role="listbox" tabindex="-1" quick .anchorCorner="${"start"===this.menuAlign?"end-start":"end-end"}" .menuCorner="${"start"===this.menuAlign?"start-start":"start-end"}" .positioning="${this.menuPositioning}" @opened="${()=>{this.menuOpened(),this.dispatchEvent(new CustomEvent("select-menu",{bubbles:!0,composed:!0,detail:{value:"open"}}))}}" @opening="${this.handleMenuOpening}" @closing="${()=>{this.dispatchEvent(new CustomEvent("select-menu",{bubbles:!0,composed:!0,detail:{value:"close"}}))}}" @closed="${this.handleMenuClosed}">${this._items.filter(e=>!e.filtered).length?this._items.map((e,t)=>html`${e.filtered?nothing:html`<ix-menu-item keep-open class="${e.selected?"selected":""}" @keydown="${e=>{[" ","Enter"].includes(e.key)&&this.optionSelect(e,t)}}"><div slot="headline"><label data-testid="${IxMultiSelectTestIds.OPTION_LABEL(e.label)}"><input type="checkbox" @change="${e=>this.optionSelect(e,t)}" .checked="${e.selected}" data-testid="${IxMultiSelectTestIds.OPTION_CHECKBOX(e.label)}"> ${e.label}</label></div></ix-menu-item>`}`):html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}</ix-menu></div>`}}IxMultiSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxMultiSelect.formAssociated=!0,__decorate([property({attribute:"menu-align"})],IxMultiSelect.prototype,"menuAlign",void 0),__decorate([property({attribute:"menu-positioning"})],IxMultiSelect.prototype,"menuPositioning",void 0),__decorate([query("ix-menu")],IxMultiSelect.prototype,"menu",void 0),__decorate([query("ix-chip-set")],IxMultiSelect.prototype,"chips",void 0),__decorate([query("#filter")],IxMultiSelect.prototype,"inputFilter",void 0),__decorate([property({type:Array})],IxMultiSelect.prototype,"items",void 0),__decorate([property({type:String})],IxMultiSelect.prototype,"label",void 0),__decorate([property({type:String,attribute:"error-text"})],IxMultiSelect.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"disabled",void 0),__decorate([property({type:Number,reflect:!0})],IxMultiSelect.prototype,"tabIndex",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"error",void 0),__decorate([property({type:Boolean,reflect:!0})],IxMultiSelect.prototype,"required",void 0),__decorate([state()],IxMultiSelect.prototype,"_items",void 0),__decorate([state()],IxMultiSelect.prototype,"filterValue",void 0),__decorate([state()],IxMultiSelect.prototype,"menuOpen",void 0),__decorate([state()],IxMultiSelect.prototype,"menuOpening",void 0),__decorate([state()],IxMultiSelect.prototype,"focused",void 0),window.customElements.define("ix-multi-select",IxMultiSelect);
83
+ );
84
+ }
85
+ .open-icon {
86
+ margin-right: 0.5rem;
87
+ }
88
+ .multi-select {
89
+ position: relative;
90
+ }
91
+ `;class c{}c.SELECTED_CHIP=e=>`ix-ms-selected-chip-${e}`,c.OPTION_LABEL=e=>`ix-ms-select-option-label-${e}`,c.OPTION_CHECKBOX=e=>`ix-ms-select-option-checkbox-${e}`,c.FILTER_INPUT="ix-ms-select-filter-input",c.TOGGLE_BUTTON="ix-ms-select-toggle-button";const u=d(h(i));class p extends u{constructor(){super(...arguments),this.menuAlign="end",this.menuPositioning="absolute",this.internals=this.attachInternals(),this.items=[],this.label="",this.errorText="Invalid error text",this.disabled=!1,this.tabIndex=0,this.error=!1,this.required=!1,this._items=[],this.filterValue="",this.menuOpen=!1,this.menuOpening=!1,this.focused=!1,this.noFilteredOptions="No options",this.optionSelect=(e,t)=>{let i;e instanceof KeyboardEvent?(e.preventDefault(),i=!this._items[t].selected):i=e.target.checked,this._items=this._items.map((e,s)=>t===s?{...e,selected:i,filtered:!1}:{...e,filtered:!1}),this.dispatchEvent(new CustomEvent("toggle-multi-select-item",{detail:{label:this._items[t].label,selected:i},bubbles:!0,composed:!0})),this.filterValue=""},this.chipRemove=e=>{this._items=this._items.map((t,i)=>e===i?{...t,selected:!1}:{...t}),this.dispatchEvent(new CustomEvent("remove-multi-select-item",{detail:this._items[e].label,bubbles:!0,composed:!0}))},this.filterOptions=e=>{const t=e.target.value.toLocaleLowerCase();this.filterValue=t,this._items=this._items.map(e=>{const i=-1===e.label.toLowerCase().indexOf(t);return{...e,filtered:i}})},this.focusin=()=>{this.focused=!0,this.menu.show(),this.setMenuPosition(),this.internals.setFormValue(this.value)},this.handleFocusin=e=>{"filter"!==e.target.id||this.disabled||this.menuOpen||this.menuOpening||this.focusin()},this.handleFocusout=()=>{this.focused=!1},this.handleMenuOpening=()=>{this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition(),this.internals.setFormValue(this.value)},this.menuOpened=()=>{this.setMenuPosition(),this.menuOpening=!1,this.focused=!0},this.setMenuPosition=()=>{var e,t,i,s;const n=null===(t=null===(e=this.menu)||void 0===e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector(".menu");if(n){const e=null===(s=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("ix-field"))||void 0===s?void 0:s.clientWidth;n.style.width=`${e}px`}},this.handleMenuClosed=()=>{this.menuOpen=!1,this.menuOpening=!1,this.focused=this.selectedItems.length>0},this.toggleOpen=e=>{if(e.stopPropagation(),this.menu.open){if(this.menuOpening)return;this.menu.close()}else this.menu.show(),this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition()},this.clear=e=>{e.stopPropagation(),this._items=this._items.map(e=>({...e,selected:!1})),this.filterValue="",this.focused=!1,this.menuOpen=!1,this.menuOpening=!1,this.menu.close(),this.dispatchEvent(new CustomEvent("clear-multi-select",{bubbles:!0,composed:!0}))}}static get styles(){return[m]}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var e;return null!==(e=this.getAttribute("name"))&&void 0!==e?e:""}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}get value(){return this._items.filter(e=>e.selected).map(e=>e.label).join(", ")}set value(e){const t=e.split(",").map(e=>e.trim());this._items=this._items.map(e=>({...e,selected:t.includes(e.label)}))}get selectedItems(){return this._items.filter(e=>e.selected)}connectedCallback(){super.connectedCallback(),this._items=[...this.items],this.internals.setFormValue(this.value)}updated(e){e.has("disabled")&&(this.tabIndex=this.disabled?-1:0),this.setMenuPosition(),this.internals.setFormValue(this.value)}formResetCallback(){this.reset()}reset(){this._items=this._items.map(e=>({...e,selected:!1}))}render(){const e={disabled:this.disabled,error:!this.disabled&&this.error};return n`
92
+ <div class="multi-select">
93
+ <ix-field
94
+ class="${a(e)}"
95
+ part="field"
96
+ id="field"
97
+ ?focused=${this.focused}
98
+ ?disabled=${this.disabled}
99
+ ?required=${this.required}
100
+ ?error=${this.error}
101
+ error-text=${this.menuOpen||this.menuOpening?s:this.errorText}
102
+ label=${this.label}
103
+ @click=${this.handleFocusin}
104
+ @focusin=${this.handleFocusin}
105
+ @focusout=${this.handleFocusout}
106
+ ?populated=${this._items.find(e=>e.selected)||this.filterValue.length||this.menuOpen}
107
+ >
108
+ <div class="field-content">
109
+ ${this._items.filter(e=>e.selected).length?n`<ix-chip-set>
110
+ ${this._items.map((e,t)=>e.selected?n`<span
111
+ ><ix-chip
112
+ @remove=${()=>this.chipRemove(t)}
113
+ label=${e.label}
114
+ appearance="input"
115
+ removable
116
+ remove-only
117
+ truncate
118
+ data-testid=${c.SELECTED_CHIP(e.label)}
119
+ ></ix-chip
120
+ ></span>`:s)}
121
+ </ix-chip-set>`:s}
122
+ <input
123
+ id="filter"
124
+ @input=${this.filterOptions}
125
+ .value=${this.filterValue}
126
+ type="text"
127
+ autocomplete="off"
128
+ data-testid=${c.FILTER_INPUT}
129
+ />
130
+ </div>
131
+ <slot name="end" slot="end">
132
+ ${this.value.length?n`<ix-icon-button
133
+ @click=${this.clear}
134
+ icon="close"
135
+ aria-label="clear"
136
+ ></ix-icon-button>`:s}
137
+ <ix-icon-button
138
+ @click=${this.toggleOpen}
139
+ class="open-icon"
140
+ icon=${"arrow_drop_"+(this.menuOpen?"up":"down")}
141
+ aria-label="options"
142
+ data-testid=${c.TOGGLE_BUTTON}
143
+ ></ix-icon-button>
144
+ </slot>
145
+ </ix-field>
146
+ <ix-menu
147
+ id="listbox"
148
+ class="menu"
149
+ anchor="field"
150
+ role="listbox"
151
+ aria-label=${this.label||"Options"}
152
+ tabindex="-1"
153
+ quick
154
+ .anchorCorner=${"start"===this.menuAlign?"end-start":"end-end"}
155
+ .menuCorner=${"start"===this.menuAlign?"start-start":"start-end"}
156
+ .positioning=${this.menuPositioning}
157
+ @opened=${()=>{this.menuOpened(),this.dispatchEvent(new CustomEvent("select-menu",{bubbles:!0,composed:!0,detail:{value:"open"}}))}}
158
+ @opening=${this.handleMenuOpening}
159
+ @closing=${()=>{this.dispatchEvent(new CustomEvent("select-menu",{bubbles:!0,composed:!0,detail:{value:"close"}}))}}
160
+ @closed=${this.handleMenuClosed}
161
+ >
162
+ ${this._items.filter(e=>!e.filtered).length?this._items.map((e,t)=>n`${e.filtered?s:n`<ix-menu-item
163
+ keep-open
164
+ class=${e.selected?"selected":""}
165
+ @keydown=${e=>{[" ","Enter"].includes(e.key)&&this.optionSelect(e,t)}}
166
+ >
167
+ <div slot="headline">
168
+ <label
169
+ data-testid=${c.OPTION_LABEL(e.label)}
170
+ >
171
+ <input
172
+ type="checkbox"
173
+ @change=${e=>this.optionSelect(e,t)}
174
+ .checked=${e.selected}
175
+ data-testid=${c.OPTION_CHECKBOX(e.label)}
176
+ />
177
+ ${e.label}
178
+ </label>
179
+ </div>
180
+ </ix-menu-item>`}`):n`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}
181
+ </ix-menu>
182
+ </div>
183
+ `}}p.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},p.formAssociated=!0,e([o({attribute:"menu-align"})],p.prototype,"menuAlign",void 0),e([o({attribute:"menu-positioning"})],p.prototype,"menuPositioning",void 0),e([l("ix-menu")],p.prototype,"menu",void 0),e([l("ix-chip-set")],p.prototype,"chips",void 0),e([l("#filter")],p.prototype,"inputFilter",void 0),e([o({type:Array})],p.prototype,"items",void 0),e([o({type:String})],p.prototype,"label",void 0),e([o({type:String,attribute:"error-text"})],p.prototype,"errorText",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([o({type:Number,reflect:!0})],p.prototype,"tabIndex",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"error",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([r()],p.prototype,"_items",void 0),e([r()],p.prototype,"filterValue",void 0),e([r()],p.prototype,"menuOpen",void 0),e([r()],p.prototype,"menuOpening",void 0),e([r()],p.prototype,"focused",void 0),window.customElements.define("ix-multi-select",p);
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-multi-select following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.2.7",
6
+ "version": "1.3.1",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -20,47 +20,41 @@
20
20
  "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
21
21
  "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
22
22
  "prepublish": "tsc && npm run analyze -- --exclude dist",
23
- "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
24
- "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
23
+ "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
24
+ "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
25
25
  "test": "tsc && wtr --coverage",
26
26
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
27
27
  },
28
28
  "dependencies": {
29
- "@digital-realty/ix-chip": "^1.2.5",
30
- "@digital-realty/ix-field": "^1.2.4",
31
- "@digital-realty/ix-icon-button": "^1.2.7",
32
- "@digital-realty/ix-menu": "^1.2.4",
29
+ "@digital-realty/ix-chip": "^1.3.1",
30
+ "@digital-realty/ix-field": "^1.3.1",
31
+ "@digital-realty/ix-icon-button": "^1.3.1",
32
+ "@digital-realty/ix-menu": "^1.3.1",
33
33
  "@material/web": "2.4.0",
34
34
  "lit": "^3.2.1"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@custom-elements-manifest/analyzer": "^0.4.17",
38
- "@open-wc/eslint-config": "^9.2.1",
39
38
  "@open-wc/testing": "^3.1.6",
40
- "@typescript-eslint/eslint-plugin": "^5.48.0",
41
- "@typescript-eslint/parser": "^5.48.0",
39
+ "@rollup/plugin-terser": "^1.0.0",
40
+ "@typescript-eslint/eslint-plugin": "^8.58.2",
41
+ "@typescript-eslint/parser": "^8.58.2",
42
42
  "@web/dev-server": "^0.4.6",
43
43
  "@web/test-runner": "^0.20.2",
44
- "concurrently": "^9.1.0",
45
- "eslint": "^8.31.0",
44
+ "concurrently": "^9.2.1",
45
+ "eslint": "^9.39.4",
46
46
  "eslint-config-prettier": "^8.3.0",
47
47
  "husky": "^4.3.8",
48
48
  "lint-staged": "^10.5.4",
49
49
  "prettier": "^2.4.1",
50
50
  "rollup": "^4.29.1",
51
- "rollup-plugin-minify-html-literals": "^1.2.6",
52
51
  "rollup-plugin-summary": "^2.0.0",
53
- "rollup-plugin-uglify": "^6.0.4",
54
52
  "tslib": "^2.3.1",
55
53
  "typescript": "^4.5.2"
56
54
  },
57
55
  "customElements": "custom-elements.json",
58
56
  "eslintConfig": {
59
57
  "parser": "@typescript-eslint/parser",
60
- "extends": [
61
- "@open-wc",
62
- "prettier"
63
- ],
64
58
  "plugins": [
65
59
  "@typescript-eslint"
66
60
  ],
@@ -101,5 +95,5 @@
101
95
  "README.md",
102
96
  "LICENSE"
103
97
  ],
104
- "gitHead": "4cd8803f4c5f3b3833ae6ebb5791f73a057863f8"
98
+ "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
105
99
  }