@triptease/tt-combobox 5.0.8 → 5.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/custom-elements.json +10 -24
  2. package/dist/src/TtCombobox.d.ts +5 -7
  3. package/dist/src/TtCombobox.js +27 -32
  4. package/dist/src/TtCombobox.js.map +1 -1
  5. package/package.json +1 -1
  6. package/test/tt-combobox.test.ts +4 -39
package/custom-elements.json CHANGED
@@ -56,14 +56,6 @@
56
56
  "default": "false",
57
57
  "attribute": "invalid"
58
58
  },
59
- {
60
- "kind": "field",
61
- "name": "_extValue",
62
- "type": {
63
- "text": "string[]"
64
- },
65
- "default": "[]"
66
- },
67
59
  {
68
60
  "kind": "field",
69
61
  "name": "displaySelectAll",
@@ -183,7 +175,7 @@
183
175
  "kind": "field",
184
176
  "name": "_selectableOptions",
185
177
  "type": {
186
- "text": "Array<HTMLOptionElement>"
178
+ "text": "NodeListOf<HTMLOptionElement>"
187
179
  },
188
180
  "privacy": "protected"
189
181
  },
@@ -191,7 +183,7 @@
191
183
  "kind": "field",
192
184
  "name": "_selectableVisibleOptions",
193
185
  "type": {
194
- "text": "Array<HTMLOptionElement>"
186
+ "text": "NodeListOf<HTMLOptionElement>"
195
187
  },
196
188
  "privacy": "protected"
197
189
  },
@@ -199,7 +191,7 @@
199
191
  "kind": "field",
200
192
  "name": "_selectedOptions",
201
193
  "type": {
202
- "text": "Array<HTMLOptionElement>"
194
+ "text": "NodeListOf<HTMLOptionElement>"
203
195
  },
204
196
  "privacy": "protected"
205
197
  },
@@ -242,6 +234,7 @@
242
234
  "text": "string[]"
243
235
  },
244
236
  "privacy": "public",
237
+ "default": "[]",
245
238
  "attribute": "value"
246
239
  },
247
240
  {
@@ -280,6 +273,11 @@
280
273
  "name": "_onFocus",
281
274
  "privacy": "private"
282
275
  },
276
+ {
277
+ "kind": "field",
278
+ "name": "_valueChanged",
279
+ "privacy": "private"
280
+ },
283
281
  {
284
282
  "kind": "field",
285
283
  "name": "_listenForOptionChange",
@@ -352,19 +350,6 @@
352
350
  }
353
351
  ]
354
352
  },
355
- {
356
- "kind": "method",
357
- "name": "_toggleOption",
358
- "privacy": "private",
359
- "parameters": [
360
- {
361
- "name": "option",
362
- "type": {
363
- "text": "HTMLElement"
364
- }
365
- }
366
- ]
367
- },
368
353
  {
369
354
  "kind": "method",
370
355
  "name": "_getActiveOptionId",
@@ -551,6 +536,7 @@
551
536
  "type": {
552
537
  "text": "string[]"
553
538
  },
539
+ "default": "[]",
554
540
  "fieldName": "value"
555
541
  }
556
542
  ],
package/dist/src/TtCombobox.d.ts CHANGED
@@ -13,7 +13,6 @@ export declare class TtCombobox extends LitElement {
13
13
  multiselect: boolean;
14
14
  disabled: boolean;
15
15
  invalid: boolean;
16
- _extValue: string[];
17
16
  displaySelectAll: boolean;
18
17
  required: boolean;
19
18
  name: string;
@@ -28,15 +27,14 @@ export declare class TtCombobox extends LitElement {
28
27
  activeOptions: Array<HTMLOptionElement>;
29
28
  protected errorElements: Array<HTMLElement>;
30
29
  protected _visibleOptions: Array<HTMLOptionElement>;
31
- protected _selectableOptions: Array<HTMLOptionElement>;
32
- protected _selectableVisibleOptions: Array<HTMLOptionElement>;
33
- protected _selectedOptions: Array<HTMLOptionElement>;
30
+ protected _selectableOptions: NodeListOf<HTMLOptionElement>;
31
+ protected _selectableVisibleOptions: NodeListOf<HTMLOptionElement>;
32
+ protected _selectedOptions: NodeListOf<HTMLOptionElement>;
34
33
  protected _selectedVisibleOptions: NodeListOf<HTMLOptionElement>;
35
34
  protected _comboboxInput: HTMLInputElement;
36
35
  protected _chevronButton: HTMLButtonElement;
37
36
  internals: ReturnType<typeof this.attachInternals>;
38
- get value(): string[];
39
- set value(selection: string[]);
37
+ value: string[];
40
38
  private get _isAllSelected();
41
39
  private _slotObserver;
42
40
  constructor();
@@ -46,6 +44,7 @@ export declare class TtCombobox extends LitElement {
46
44
  disconnectedCallback(): void;
47
45
  protected firstUpdated(changedProperties: PropertyValues): void;
48
46
  protected update(changedProperties: PropertyValues): void;
47
+ private _valueChanged;
49
48
  private _listenForOptionChange;
50
49
  reportValidity(): void;
51
50
  private _reportValidity;
@@ -54,7 +53,6 @@ export declare class TtCombobox extends LitElement {
54
53
  private _onKeyUp;
55
54
  private _uncheckOption;
56
55
  private _checkOption;
57
- private _toggleOption;
58
56
  private _getActiveOptionId;
59
57
  private _onClick;
60
58
  private _onChevronClick;
package/dist/src/TtCombobox.js CHANGED
@@ -13,19 +13,6 @@ export class TtCombobox extends LitElement {
13
13
  get form() {
14
14
  return this.internals.form;
15
15
  }
16
- get value() {
17
- return Array.from(this._selectedOptions).map(option => option.dataset.value);
18
- }
19
- set value(selection) {
20
- this._selectableOptions.forEach(option => {
21
- if (selection.includes(option.dataset.value)) {
22
- this._checkOption(option);
23
- }
24
- else {
25
- this._uncheckOption(option);
26
- }
27
- });
28
- }
29
16
  get _isAllSelected() {
30
17
  return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));
31
18
  }
@@ -34,7 +21,6 @@ export class TtCombobox extends LitElement {
34
21
  this.multiselect = false;
35
22
  this.disabled = false;
36
23
  this.invalid = false;
37
- this._extValue = [];
38
24
  this.displaySelectAll = false;
39
25
  this.required = false;
40
26
  this.name = '';
@@ -43,6 +29,7 @@ export class TtCombobox extends LitElement {
43
29
  this._activeOption = -1;
44
30
  this._expanded = false;
45
31
  this._filter = '';
32
+ this.value = [];
46
33
  this._slotObserver = new MutationObserver((mutations) => {
47
34
  mutations.forEach(mutation => {
48
35
  if (mutation.type === 'attributes') {
@@ -50,6 +37,17 @@ export class TtCombobox extends LitElement {
50
37
  }
51
38
  });
52
39
  });
40
+ this._valueChanged = () => {
41
+ this._selectableOptions.forEach(option => {
42
+ if (this.value.includes(option.dataset.value)) {
43
+ this._checkOption(option);
44
+ }
45
+ else {
46
+ this._uncheckOption(option);
47
+ }
48
+ });
49
+ this.internals.setFormValue(JSON.stringify(this.value));
50
+ };
53
51
  this._listenForOptionChange = () => {
54
52
  this.options.forEach(option => {
55
53
  this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });
@@ -58,15 +56,12 @@ export class TtCombobox extends LitElement {
58
56
  this._selectAll = (event) => {
59
57
  event.preventDefault();
60
58
  event.stopPropagation();
61
- const oldValue = [...this.value];
62
59
  if (this.value.length === this._selectableOptions.length) {
63
- // this.value = this.value.filter(value => ![...this._selectableOptions].some(option => option.dataset.value === value));
64
- this._selectableOptions.forEach(option => this._uncheckOption(option));
60
+ this.value = [];
65
61
  }
66
62
  else {
67
- this._selectableOptions.forEach(option => this._checkOption(option));
63
+ this.value = Array.from(this._selectableOptions).map(option => option.dataset.value);
68
64
  }
69
- this.requestUpdate('value', oldValue);
70
65
  };
71
66
  this._renderSelectAll = () => {
72
67
  if (!this.multiselect || !this.displaySelectAll) {
@@ -123,6 +118,7 @@ export class TtCombobox extends LitElement {
123
118
  }
124
119
  update(changedProperties) {
125
120
  if (changedProperties.has('value') && changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {
121
+ this._valueChanged();
126
122
  this._dispatchSelectedOptions();
127
123
  this._reportValidity();
128
124
  }
@@ -224,14 +220,6 @@ export class TtCombobox extends LitElement {
224
220
  checkbox.checked = true;
225
221
  }
226
222
  }
227
- _toggleOption(option) {
228
- if (option.getAttribute('aria-selected') === 'true') {
229
- this._uncheckOption(option);
230
- }
231
- else {
232
- this._checkOption(option);
233
- }
234
- }
235
223
  _getActiveOptionId() {
236
224
  if (this._activeOption === -1 || this._visibleOptions.length === 0) {
237
225
  return undefined;
@@ -251,9 +239,17 @@ export class TtCombobox extends LitElement {
251
239
  _onClickOption(event) {
252
240
  event.preventDefault();
253
241
  event.stopPropagation();
254
- const oldValue = [...this.value];
255
- this._toggleOption(event.currentTarget);
256
- this.requestUpdate('value', oldValue);
242
+ const option = event.currentTarget;
243
+ const selectedValue = option.dataset.value;
244
+ if (this.value.includes(selectedValue)) {
245
+ this.value = this.value.filter(value => value !== selectedValue);
246
+ }
247
+ else if (this.multiselect) {
248
+ this.value = [...this.value, selectedValue];
249
+ }
250
+ else {
251
+ this.value = [selectedValue];
252
+ }
257
253
  }
258
254
  _onInput(event) {
259
255
  const input = event.target;
@@ -269,7 +265,6 @@ export class TtCombobox extends LitElement {
269
265
  bubbles: true,
270
266
  composed: true
271
267
  }));
272
- this.internals.setFormValue(JSON.stringify(this.value));
273
268
  }
274
269
  get _isValid() {
275
270
  return this.internals.validity.valid && !this.invalid;
@@ -452,5 +447,5 @@ __decorate([
452
447
  ], TtCombobox.prototype, "_chevronButton", void 0);
453
448
  __decorate([
454
449
  property({ type: (Array), attribute: 'value' })
455
- ], TtCombobox.prototype, "value", null);
450
+ ], TtCombobox.prototype, "value", void 0);
456
451
  //# sourceMappingURL=TtCombobox.js.map
package/dist/src/TtCombobox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* 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\n _extValue: string[] = [];\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 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!: Array<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n protected _selectableVisibleOptions!: Array<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n protected _selectedOptions!: Array<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 public get value(): string[] {\n return Array.from(this._selectedOptions).map(option => option.dataset.value!);\n }\n\n @property({type: Array<String>, attribute: 'value'})\n public set value(selection: string[]) {\n this._selectableOptions.forEach(option => {\n if (selection.includes(option.dataset.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n }\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\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value') && changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n this._dispatchSelectedOptions();\n this._reportValidity();\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 _listenForOptionChange = () => {\n this.options.forEach(option => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden']});\n })\n }\n\n public reportValidity() {\n if (!this._isValid) {\n this.internals.states.add('--invalid');\n } else if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid')\n }\n this.internals.reportValidity();\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 } else if (!this.internals.validity.valid){\n this.internals.setValidity({});\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 _toggleOption(option: HTMLElement) {\n if (option.getAttribute('aria-selected') === 'true') {\n this._uncheckOption(option);\n } else {\n this._checkOption(option);\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 oldValue = [...this.value];\n this._toggleOption(event.currentTarget as HTMLElement);\n this.requestUpdate('value', oldValue);\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 this.internals.setFormValue(JSON.stringify(this.value));\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const oldValue = [...this.value];\n\n if (this.value.length === this._selectableOptions.length) {\n // this.value = this.value.filter(value => ![...this._selectableOptions].some(option => option.dataset.value === value));\n this._selectableOptions.forEach(option => this._uncheckOption(option));\n } else {\n this._selectableOptions.forEach(option => this._checkOption(option));\n }\n\n this.requestUpdate('value', oldValue);\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],\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].innerText?.trim();\n }\n\n if (this._isAllSelected) {\n return '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 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 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=${option.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 >\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\" ?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';\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 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\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value') && changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n this._valueChanged();\n this._dispatchSelectedOptions();\n this._reportValidity();\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 public reportValidity() {\n if (!this._isValid) {\n this.internals.states.add('--invalid');\n } else if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid')\n }\n this.internals.reportValidity();\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 } else if (!this.internals.validity.valid){\n this.internals.setValidity({});\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 HTMLElement;\n const selectedValue = option.dataset.value as string;\n\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter(value => value !== selectedValue);\n } else if (this.multiselect) {\n this.value = [...this.value, selectedValue];\n } else {\n this.value = [selectedValue];\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 (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],\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].innerText?.trim();\n }\n\n if (this._isAllSelected) {\n return '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 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 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=${option.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 >\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\" ?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/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.0.8",
6
+ "version": "5.0.10",
7
7
  "type": "module",
8
8
  "main": "dist/src/index.js",
9
9
  "module": "dist/src/index.js",
package/test/tt-combobox.test.ts CHANGED
@@ -265,54 +265,19 @@ describe('TtCombobox', () => {
265
265
  expect(el.value).to.deep.equal(['4']);
266
266
  });
267
267
 
268
- it('should not deselect preselected options', async () => {
269
- const el = await fixture<TtCombobox>(html`
270
- <tt-combobox id="combobox" multiselect display-select-all>
271
- <span slot="label">Test combobox</span>
272
- <option slot="option" value="1">Option 1</option>
273
- <option slot="option" value="2">Option 2</option>
274
- <option slot="option" value="3">Option 3</option>
275
- <option slot="option" value="4" selected>Option 4</option>
276
- </tt-combobox>`);
277
-
278
- await elementUpdated(el);
279
-
280
- const combobox = getCombobox(el);
281
- combobox.click();
282
- const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
283
- selectAll.click();
284
- await elementUpdated(el);
268
+ it('should accept a JSON string as value', async () => {
269
+ const value = ['1', '2'];
285
270
 
286
- expect(el.value).to.have.all.members(['1', '2', '3', '4']);
287
-
288
- selectAll.click();
289
- await elementUpdated(el);
290
-
291
- expect(el.value).to.deep.equal(['4']);
292
- });
293
-
294
- it('should deselect an option when the selected attribute is removed', async () => {
295
271
  const el = await fixture<TtCombobox>(html`
296
- <tt-combobox id="combobox" multiselect display-select-all>
272
+ <tt-combobox id="combobox" multiselect display-select-all value='${JSON.stringify(value)}'>
297
273
  <span slot="label">Test combobox</span>
298
274
  <option slot="option" value="1">Option 1</option>
299
275
  <option slot="option" value="2">Option 2</option>
300
276
  <option slot="option" value="3">Option 3</option>
301
- <option slot="option" value="4" selected>Option 4</option>
302
277
  </tt-combobox>`);
303
278
 
304
279
  await elementUpdated(el);
305
-
306
- expect(el.value).to.deep.equal(['4']);
307
-
308
- const option = el.querySelector('option[selected]');
309
- expect(option).not.to.be.null;
310
-
311
- option!.removeAttribute('selected');
312
-
313
- await elementUpdated(el);
314
-
315
- expect(el.value).to.deep.equal([]);
280
+ expect(el.value).to.deep.equal(value);
316
281
  });
317
282
 
318
283
  describe('Form Integration', () => {