@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.
Files changed (20) hide show
  1. package/custom-elements.json +200 -16
  2. package/dist/src/TtCombobox.d.ts +7 -5
  3. package/dist/src/TtCombobox.js +50 -53
  4. package/dist/src/TtCombobox.js.map +1 -1
  5. package/dist/src/styles.js +23 -81
  6. package/dist/src/styles.js.map +1 -1
  7. package/dist/src/tt-combobox.d.ts +1 -0
  8. package/dist/src/tt-combobox.js +1 -0
  9. package/dist/src/tt-combobox.js.map +1 -1
  10. package/dist/src/tt-option/TtOption.d.ts +26 -0
  11. package/dist/src/tt-option/TtOption.js +73 -0
  12. package/dist/src/tt-option/TtOption.js.map +1 -0
  13. package/dist/src/tt-option/styles.d.ts +1 -0
  14. package/dist/src/tt-option/styles.js +71 -0
  15. package/dist/src/tt-option/styles.js.map +1 -0
  16. package/dist/src/tt-option/tt-option.d.ts +2 -0
  17. package/dist/src/tt-option/tt-option.js +8 -0
  18. package/dist/src/tt-option/tt-option.js.map +1 -0
  19. package/package.json +3 -2
  20. package/test/tt-combobox.test.ts +32 -28
package/custom-elements.json CHANGED
@@ -184,39 +184,31 @@
184
184
  "kind": "field",
185
185
  "name": "_visibleOptions",
186
186
  "type": {
187
- "text": "Array<HTMLOptionElement>"
187
+ "text": "Array<TtOption>"
188
188
  },
189
189
  "privacy": "protected"
190
190
  },
191
191
  {
192
192
  "kind": "field",
193
- "name": "_selectableOptions",
193
+ "name": "_visibleOptionsNotSelectAll",
194
194
  "type": {
195
- "text": "NodeListOf<HTMLOptionElement>"
195
+ "text": "Array<TtOption>"
196
196
  },
197
197
  "privacy": "protected"
198
198
  },
199
199
  {
200
200
  "kind": "field",
201
- "name": "_selectableVisibleOptions",
202
- "type": {
203
- "text": "NodeListOf<HTMLOptionElement>"
204
- },
205
- "privacy": "protected"
206
- },
207
- {
208
- "kind": "field",
209
- "name": "_selectedOptions",
201
+ "name": "_selectableOptions",
210
202
  "type": {
211
- "text": "NodeListOf<HTMLOptionElement>"
203
+ "text": "NodeListOf<TtOption>"
212
204
  },
213
205
  "privacy": "protected"
214
206
  },
215
207
  {
216
208
  "kind": "field",
217
- "name": "_selectedVisibleOptions",
209
+ "name": "_selectableVisibleOptions",
218
210
  "type": {
219
- "text": "NodeListOf<HTMLOptionElement>"
211
+ "text": "NodeListOf<TtOption>"
220
212
  },
221
213
  "privacy": "protected"
222
214
  },
@@ -263,6 +255,24 @@
263
255
  "privacy": "private",
264
256
  "readonly": true
265
257
  },
258
+ {
259
+ "kind": "field",
260
+ "name": "_selectedVisibleOptions",
261
+ "type": {
262
+ "text": "Array<TtOption>"
263
+ },
264
+ "privacy": "protected",
265
+ "readonly": true
266
+ },
267
+ {
268
+ "kind": "field",
269
+ "name": "_selectedOptions",
270
+ "type": {
271
+ "text": "Array<TtOption>"
272
+ },
273
+ "privacy": "protected",
274
+ "readonly": true
275
+ },
266
276
  {
267
277
  "kind": "field",
268
278
  "name": "_slotObserver",
@@ -608,7 +618,7 @@
608
618
  {
609
619
  "kind": "variable",
610
620
  "name": "styles",
611
- "default": "css` :host { display: flex; flex-direction: var(--tt-combobox-flex-direction, row); align-items: var(--tt-combobox-align-items, center); justify-content: var(--tt-combobox-justify-content, initial); align-content: var(--tt-combobox-align-content, initial); gap: var(--tt-combobox-gap, 0.5rem); font-size: var(--tt-combobox-font-size, var(--font-size-200)); color: var(--tt-combobox-color, var(--color-text-400)); } :host([disabled]) .tt-combobox-container { border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200)); color: var(--tt-combobox-disabled-color, var(--color-text-200)); background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200)); pointer-events: none; } .tt-combobox-container:focus-within { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .tt-combobox-container:hover { background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300)); } :host([invalid]) .tt-combobox-container, :host(:state(interacted):invalid) .tt-combobox-container { outline: 1px solid var(--color-alert-400, red); } .errormessage { visibility: hidden; display: flex; align-items: center; gap: var(--space-scale-0-5); color: var(--color-alert-400, red); &[data-hidden] { display: none; } } .errormessage svg path { fill: var(--color-alert-400, red); height: 20px; } .tt-combobox-container:has([role=\"combobox\"][aria-invalid=\"true\"]) ~ .errormessage { visibility: visible; } :has([role=\"combobox\"][aria-invalid=\"true\"]) ::slotted([slot=\"error\"]) { color: var(--color-alert-400, darkred); font-size: var(--font-size-100); margin: 0; font-weight: var(--font-weight-regular); line-height: 1.2; } slot[name=\"option\"]::slotted(*) { display: none; } * { box-sizing: border-box; font-family: var(--font-family-sans); cursor: inherit; } .tt-combobox-container { position: relative; max-width: var(--tt-combobox-max-width, 300px); min-width: var(--tt-combobox-min-width, 250px); display: flex; flex-direction: row; align-items: center; border-radius: var(--border-radius); border-color: var(--tt-combobox-border-color, var(--color-border-400)); border-style: solid; border-width: var(--tt-combobox-border-width, 1px); background-color: var(--tt-combobox-background-color, var(--color-surface-100)); padding: 0.5rem; gap: 0.25rem; //width: 100%; } [role=\"listbox\"] { display: none; } [role=\"combobox\"] { width: 100%; border-style: none; background-color: transparent; font-size: var(--tt-combobox-font-size, var(--font-size-200)); } .hide-caret { caret-color: transparent; } [role=\"combobox\"]::placeholder { color: var(--tt-combobox-placeholder-color, var(--color-text-300)); font-family: var(--font-family-inter); font-size: var(--tt-combobox-font-size, var(--font-size-200)); } :host([disabled]) [role=\"combobox\"]::placeholder { color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200)); } [role=\"combobox\"]:placeholder-shown { text-overflow: ellipsis; overflow: clip; } [role=\"combobox\"]:focus { outline: none; } [role=\"combobox\"] ~ button { appearance: none; padding: 0; border-width: 0; background-color: transparent; aspect-ratio: 1; } [role=\"combobox\"] ~ button svg { transition: transform 0.2s ease-in-out; color: var(--tt-combobox-dropdown-color, var(--color-text-400)); } [role=\"combobox\"][aria-expanded=\"true\"] ~ button svg { transform: rotate(180deg); } [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"] { display: block; width: max-content; max-width: var(--tt-combobox-list-max-width, 35ch); min-width: 100%; background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white)); border: 1px solid var(--tt-combobox-border-color, var(--color-border-300)); border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); padding: 0; position: absolute; top: var(--tt-combobox-top, calc(100% + 0.5rem)); left: var(--tt-combobox-left, 0); right: var(--tt-combobox-right, unset); bottom: var(--tt-combobox-bottom, unset); z-index: 2; margin: 0; list-style: none; max-height: var(--tt-combobox-max-height, 400px); overflow-y: auto; li { display: flex; padding: 0.5rem; box-sizing: border-box; text-align: left; text-overflow: ellipsis; text-wrap: nowrap; align-items: center; gap: 0.25rem; max-width: 100%; width: 100%; overflow-y: visible; flex: 1; input[type=\"checkbox\"] { width: var(--checkbox-size, var(--space-scale-2)); aspect-ratio: 1; flex: 0 0 auto; } span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; line-height: 1.1; } &.no-results { display: none; } &[aria-hidden=\"true\"] { visibility: hidden; display: none; } } &:not(:has([role=\"option\"]:not([data-value=\"select-all\"]))) { .no-results { display: flex; } .select-all { display: none; } } } [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"][data-open-upward] { top: unset; bottom: calc(100% + 0.5rem); } slot[name=\"icon\"] { display: inline-block; max-width: var(--tt-combobox-icon-size, 1rem); aspect-ratio: 1; } [role=\"option\"].select-all { border-bottom: 1px solid var(--color-border-300); } [aria-multiselectable=\"false\"] [role=\"option\"][aria-selected=\"true\"] { color: var(--tt-combobox-option-selected-color, var(--color-primary-400)); font-weight: var(--font-weight-medium); } [role=\"option\"]:is(:hover, [data-active=\"true\"]) { background-color: var(--tt-combobox-option-background-color-hover, inherit); color: var(--tt-combobox-option-color-hover, inherit); &:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } &:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } } [role=\"option\"]:hover { cursor: pointer; } [role=\"option\"][aria-disabled=\"true\"] { pointer-events: none; opacity: 0.5; } [role=\"listbox\"][aria-multiselectable=\"true\"] [role=\"option\"] input[type=\"checkbox\"] { accent-color: var(--color-primary-400); width: var(--checkbox-size, var(--space-scale-2)); aspect-ratio: 1; pointer-events: none; } [role=\"listbox\"][aria-multiselectable=\"true\"] [role=\"option\"][aria-disabled=\"true\"] input[type=\"checkbox\"] { pointer-events: none; } label { font-size: var(--tt-combobox-label-font-size, inherit); color: var(--tt-combobox-label-color, inherit); font-weight: var(--tt-combobox-label-font-weight, inherit); &[data-hidden] { display: none; } } `"
621
+ "default": "css` :host { display: flex; flex-direction: var(--tt-combobox-flex-direction, row); align-items: var(--tt-combobox-align-items, center); justify-content: var(--tt-combobox-justify-content, initial); align-content: var(--tt-combobox-align-content, initial); gap: var(--tt-combobox-gap, 0.5rem); font-size: var(--tt-combobox-font-size, var(--font-size-200)); color: var(--tt-combobox-color, var(--color-text-400)); } :host([disabled]) .tt-combobox-container { border-color: var(--tt-combobox-disabled-border-color, var(--color-border-200)); color: var(--tt-combobox-disabled-color, var(--color-text-200)); background-color: var(--tt-combobox-disabled-background-color, var(--color-surface-200)); pointer-events: none; } .tt-combobox-container:focus-within { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .tt-combobox-container:hover { background-color: var(--tt-combobox-hover-background-color, var(--color-surface-300)); } :host([invalid]) .tt-combobox-container, :host(:state(interacted):invalid) .tt-combobox-container { outline: 1px solid var(--color-alert-400, red); } .errormessage { visibility: hidden; display: flex; align-items: center; gap: var(--space-scale-0-5); color: var(--color-alert-400, red); &[data-hidden] { display: none; } } .errormessage svg path { fill: var(--color-alert-400, red); height: 20px; } .tt-combobox-container:has([role=\"combobox\"][aria-invalid=\"true\"]) ~ .errormessage { visibility: visible; } :has([role=\"combobox\"][aria-invalid=\"true\"]) ::slotted([slot=\"error\"]) { color: var(--color-alert-400, darkred); font-size: var(--font-size-100); margin: 0; font-weight: var(--font-weight-regular); line-height: 1.2; } slot[name=\"option\"]::slotted(*) { display: none; } * { box-sizing: border-box; font-family: var(--font-family-sans); cursor: inherit; } .tt-combobox-container { position: relative; max-width: var(--tt-combobox-max-width, 300px); min-width: var(--tt-combobox-min-width, 250px); display: flex; flex-direction: row; align-items: center; border-radius: var(--border-radius); border-color: var(--tt-combobox-border-color, var(--color-border-400)); border-style: solid; border-width: var(--tt-combobox-border-width, 1px); background-color: var(--tt-combobox-background-color, var(--color-surface-100)); padding: 0.5rem; gap: 0.25rem; //width: 100%; } [role=\"listbox\"] { display: none; } [role=\"combobox\"] { width: 100%; border-style: none; background-color: transparent; font-size: var(--tt-combobox-font-size, var(--font-size-200)); } .hide-caret { caret-color: transparent; } [role=\"combobox\"]::placeholder { color: var(--tt-combobox-placeholder-color, var(--color-text-300)); font-family: var(--font-family-inter); font-size: var(--tt-combobox-font-size, var(--font-size-200)); } :host([disabled]) [role=\"combobox\"]::placeholder { color: var(--tt-combobox-disabled-placeholder-color, var(--color-text-200)); } [role=\"combobox\"]:placeholder-shown { text-overflow: ellipsis; overflow: clip; } [role=\"combobox\"]:focus { outline: none; } [role=\"combobox\"] ~ button { appearance: none; padding: 0; border-width: 0; background-color: transparent; aspect-ratio: 1; } [role=\"combobox\"] ~ button svg { transition: transform 0.2s ease-in-out; color: var(--tt-combobox-dropdown-color, var(--color-text-400)); } [role=\"combobox\"][aria-expanded=\"true\"] ~ button svg { transform: rotate(180deg); } [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"] { display: block; width: max-content; max-width: var(--tt-combobox-list-max-width, 35ch); min-width: 100%; background-color: var(--tt-combobox-list-background-color, var(--color-surface-100, white)); border: 1px solid var(--tt-combobox-border-color, var(--color-border-300)); border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); padding: 0; position: absolute; top: var(--tt-combobox-top, calc(100% + 0.5rem)); left: var(--tt-combobox-left, 0); right: var(--tt-combobox-right, unset); bottom: var(--tt-combobox-bottom, unset); z-index: 2; margin: 0; list-style: none; max-height: var(--tt-combobox-max-height, 400px); overflow-y: auto; .no-results { display: none; } &:not(:has(tt-option:not([hidden], .select-all))) { .no-results { display: flex; padding: 0.5rem; box-sizing: border-box; text-align: left; text-overflow: ellipsis; text-wrap: nowrap; align-items: center; gap: 0.25rem; max-width: 100%; width: 100%; overflow-y: visible; flex: 1; span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; line-height: 1.1; } } .select-all { display: none; } } } [role=\"combobox\"][aria-expanded=\"true\"] ~ [role=\"listbox\"][data-open-upward] { top: unset; bottom: calc(100% + 0.5rem); } slot[name=\"icon\"] { display: inline-block; max-width: var(--tt-combobox-icon-size, 1rem); aspect-ratio: 1; } tt-option.select-all::part(option) { border-bottom: 1px solid var(--color-border-300); } label { font-size: var(--tt-combobox-label-font-size, inherit); color: var(--tt-combobox-label-color, inherit); font-weight: var(--tt-combobox-label-font-weight, inherit); &[data-hidden] { display: none; } } `"
612
622
  }
613
623
  ],
614
624
  "exports": [
@@ -959,6 +969,180 @@
959
969
  }
960
970
  }
961
971
  ]
972
+ },
973
+ {
974
+ "kind": "javascript-module",
975
+ "path": "src/tt-option/TtOption.ts",
976
+ "declarations": [
977
+ {
978
+ "kind": "class",
979
+ "description": "",
980
+ "name": "TtOption",
981
+ "members": [
982
+ {
983
+ "kind": "field",
984
+ "name": "shadowRootOptions",
985
+ "type": {
986
+ "text": "object"
987
+ },
988
+ "static": true,
989
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
990
+ },
991
+ {
992
+ "kind": "field",
993
+ "name": "disabled",
994
+ "type": {
995
+ "text": "boolean"
996
+ },
997
+ "default": "false",
998
+ "attribute": "disabled"
999
+ },
1000
+ {
1001
+ "kind": "field",
1002
+ "name": "selected",
1003
+ "type": {
1004
+ "text": "boolean"
1005
+ },
1006
+ "default": "false",
1007
+ "attribute": "selected"
1008
+ },
1009
+ {
1010
+ "kind": "field",
1011
+ "name": "active",
1012
+ "type": {
1013
+ "text": "boolean"
1014
+ },
1015
+ "default": "false",
1016
+ "attribute": "active"
1017
+ },
1018
+ {
1019
+ "kind": "field",
1020
+ "name": "value",
1021
+ "type": {
1022
+ "text": "string"
1023
+ },
1024
+ "default": "''",
1025
+ "attribute": "value"
1026
+ },
1027
+ {
1028
+ "kind": "field",
1029
+ "name": "includeCheckbox",
1030
+ "type": {
1031
+ "text": "boolean"
1032
+ },
1033
+ "default": "false",
1034
+ "attribute": "include-checkbox"
1035
+ },
1036
+ {
1037
+ "kind": "field",
1038
+ "name": "_onClick",
1039
+ "privacy": "private"
1040
+ }
1041
+ ],
1042
+ "attributes": [
1043
+ {
1044
+ "name": "disabled",
1045
+ "type": {
1046
+ "text": "boolean"
1047
+ },
1048
+ "default": "false",
1049
+ "fieldName": "disabled"
1050
+ },
1051
+ {
1052
+ "name": "selected",
1053
+ "type": {
1054
+ "text": "boolean"
1055
+ },
1056
+ "default": "false",
1057
+ "fieldName": "selected"
1058
+ },
1059
+ {
1060
+ "name": "active",
1061
+ "type": {
1062
+ "text": "boolean"
1063
+ },
1064
+ "default": "false",
1065
+ "fieldName": "active"
1066
+ },
1067
+ {
1068
+ "name": "value",
1069
+ "type": {
1070
+ "text": "string"
1071
+ },
1072
+ "default": "''",
1073
+ "fieldName": "value"
1074
+ },
1075
+ {
1076
+ "name": "include-checkbox",
1077
+ "type": {
1078
+ "text": "boolean"
1079
+ },
1080
+ "default": "false",
1081
+ "fieldName": "includeCheckbox"
1082
+ }
1083
+ ],
1084
+ "superclass": {
1085
+ "name": "LitElement",
1086
+ "package": "lit"
1087
+ },
1088
+ "tagName": "tt-option",
1089
+ "customElement": true
1090
+ }
1091
+ ],
1092
+ "exports": [
1093
+ {
1094
+ "kind": "js",
1095
+ "name": "TtOption",
1096
+ "declaration": {
1097
+ "name": "TtOption",
1098
+ "module": "src/tt-option/TtOption.ts"
1099
+ }
1100
+ }
1101
+ ]
1102
+ },
1103
+ {
1104
+ "kind": "javascript-module",
1105
+ "path": "src/tt-option/styles.ts",
1106
+ "declarations": [
1107
+ {
1108
+ "kind": "variable",
1109
+ "name": "styles",
1110
+ "default": "css` li { cursor: pointer; display: flex; padding: 0.5rem; box-sizing: border-box; text-align: left; text-overflow: ellipsis; text-wrap: nowrap; align-items: center; gap: 0.25rem; max-width: 100%; width: 100%; overflow-y: visible; flex: 1; input[type=\"checkbox\"] { width: var(--checkbox-size, var(--space-scale-2)); aspect-ratio: 1; flex: 0 0 auto; accent-color: var(--color-primary-400); pointer-events: none; } span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; line-height: 1.1; } &[aria-hidden=\"true\"] { visibility: hidden; display: none; } &[aria-disabled=\"true\"] { pointer-events: none; opacity: 0.5; } &[aria-selected=\"true\"]:not(:has(input[type=\"checkbox\"])) { color: var(--tt-combobox-option-selected-color, var(--color-primary-400)); font-weight: var(--font-weight-medium); } } :host([active]), :host(:hover) { li { background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300)); color: var(--tt-combobox-option-color-hover, inherit); } &:first-child li { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } &:last-child li { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } } :host([disabled]) { pointer-events: none; } `"
1111
+ }
1112
+ ],
1113
+ "exports": [
1114
+ {
1115
+ "kind": "js",
1116
+ "name": "styles",
1117
+ "declaration": {
1118
+ "name": "styles",
1119
+ "module": "src/tt-option/styles.ts"
1120
+ }
1121
+ }
1122
+ ]
1123
+ },
1124
+ {
1125
+ "kind": "javascript-module",
1126
+ "path": "src/tt-option/tt-option.ts",
1127
+ "declarations": [],
1128
+ "exports": [
1129
+ {
1130
+ "kind": "custom-element-definition",
1131
+ "name": "tt-option",
1132
+ "declaration": {
1133
+ "name": "TtOption",
1134
+ "module": "/src/tt-option/TtOption.js"
1135
+ }
1136
+ },
1137
+ {
1138
+ "kind": "js",
1139
+ "name": "TtOption",
1140
+ "declaration": {
1141
+ "name": "TtOption",
1142
+ "module": "src/tt-option/tt-option.ts"
1143
+ }
1144
+ }
1145
+ ]
962
1146
  }
963
1147
  ]
964
1148
  }
package/dist/src/TtCombobox.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { LitElement, PropertyValues } from 'lit';
2
+ import { TtOption } from './tt-option/TtOption.js';
2
3
  export declare class TtCombobox extends LitElement {
3
4
  static styles: import("lit").CSSResult;
4
5
  static formAssociated: boolean;
@@ -28,16 +29,17 @@ export declare class TtCombobox extends LitElement {
28
29
  options: Array<HTMLOptionElement>;
29
30
  activeOptions: Array<HTMLOptionElement>;
30
31
  protected errorElements: Array<HTMLElement>;
31
- protected _visibleOptions: Array<HTMLOptionElement>;
32
- protected _selectableOptions: NodeListOf<HTMLOptionElement>;
33
- protected _selectableVisibleOptions: NodeListOf<HTMLOptionElement>;
34
- protected _selectedOptions: NodeListOf<HTMLOptionElement>;
35
- protected _selectedVisibleOptions: NodeListOf<HTMLOptionElement>;
32
+ protected _visibleOptions: Array<TtOption>;
33
+ protected _visibleOptionsNotSelectAll: Array<TtOption>;
34
+ protected _selectableOptions: NodeListOf<TtOption>;
35
+ protected _selectableVisibleOptions: NodeListOf<TtOption>;
36
36
  protected _comboboxInput: HTMLInputElement;
37
37
  protected _chevronButton: HTMLButtonElement;
38
38
  internals: ReturnType<typeof this.attachInternals>;
39
39
  value: string[];
40
40
  private get _isAllSelected();
41
+ protected get _selectedVisibleOptions(): Array<TtOption>;
42
+ protected get _selectedOptions(): Array<TtOption>;
41
43
  private _slotObserver;
42
44
  constructor();
43
45
  private _handleFocusOut;
package/dist/src/TtCombobox.js CHANGED
@@ -14,7 +14,13 @@ export class TtCombobox extends LitElement {
14
14
  return this.internals.form;
15
15
  }
16
16
  get _isAllSelected() {
17
- return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));
17
+ return Boolean(this._visibleOptionsNotSelectAll.length) && Array.from(this._visibleOptionsNotSelectAll).every(option => this.value.includes(option.value));
18
+ }
19
+ get _selectedVisibleOptions() {
20
+ return Array.from(this._visibleOptions).filter(option => this.value.includes(option.value));
21
+ }
22
+ get _selectedOptions() {
23
+ return Array.from(this._visibleOptionsNotSelectAll).filter(option => this.value.includes(option.value));
18
24
  }
19
25
  constructor() {
20
26
  super();
@@ -40,7 +46,7 @@ export class TtCombobox extends LitElement {
40
46
  });
41
47
  this._valueChanged = () => {
42
48
  this._selectableOptions.forEach(option => {
43
- if (this.value.includes(option.dataset.value)) {
49
+ if (this.value.includes(option.value)) {
44
50
  this._checkOption(option);
45
51
  }
46
52
  else {
@@ -60,17 +66,17 @@ export class TtCombobox extends LitElement {
60
66
  // If filtering, and all visible options are selected, deselect only visible options
61
67
  // Else if filtering, select all visible options
62
68
  if (this._filter !== '' && this._isAllSelected) {
63
- const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value);
69
+ const selectedVisibleValues = this._selectedVisibleOptions.map(option => option.value);
64
70
  this.value = this.value.filter(value => !selectedVisibleValues.includes(value));
65
71
  }
66
72
  else if (this._filter !== '') {
67
- this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value)]));
73
+ this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.value)]));
68
74
  }
69
75
  else if (this.value.length === this._selectableOptions.length) {
70
76
  this.value = [];
71
77
  }
72
78
  else {
73
- this.value = Array.from(this._selectableOptions).map(option => option.dataset.value);
79
+ this.value = Array.from(this._selectableOptions).map(option => option.value);
74
80
  }
75
81
  };
76
82
  this._renderSelectAll = () => {
@@ -82,20 +88,18 @@ export class TtCombobox extends LitElement {
82
88
  const selected = this._isAllSelected;
83
89
  // eslint-disable-next-line lit-a11y/click-events-have-key-events
84
90
  return html `
85
- <li
91
+ <tt-option
92
+ id="${id}"
86
93
  class="select-all"
87
- role="option"
88
- id="${this.id}-option-select-all"
89
- aria-selected="${selected}"
90
- data-active=${active}
94
+ ?selected=${selected}
95
+ ?active=${active}
96
+ include-checkbox
91
97
  @click="${this._selectAll}"
92
- @mousedown="${(evt) => evt.preventDefault()}"
93
- data-value="select-all"
98
+ exportparts="option, checkbox"
94
99
  part="option"
95
- >
96
- <input type="checkbox" ?checked=${selected} role="presentation" tabindex="-1" part="checkbox">
97
- Select all
98
- </li>`;
100
+ value="select-all"
101
+ >Select all</tt-option>
102
+ `;
99
103
  };
100
104
  this._renderChevron = () => html `
101
105
  <button type="button" aria-label="Expand" @click="${this._onChevronClick}" aria-expanded="${this._expanded}"
@@ -140,7 +144,8 @@ export class TtCombobox extends LitElement {
140
144
  }
141
145
  if (changedProperties.has('options')) {
142
146
  this.updateComplete.then(() => {
143
- this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.value)]));
147
+ const selectedAssignedOptions = Array.from(this.options).filter(option => option.selected);
148
+ this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map(option => option.value)]));
144
149
  this._listenForOptionChange();
145
150
  });
146
151
  }
@@ -148,7 +153,7 @@ export class TtCombobox extends LitElement {
148
153
  }
149
154
  _reportValidity() {
150
155
  if (this.required && !this.value.length) {
151
- const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';
156
+ const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';
152
157
  this.internals.setValidity({
153
158
  valueMissing: true
154
159
  }, errorMessage, this._comboboxInput);
@@ -248,7 +253,9 @@ export class TtCombobox extends LitElement {
248
253
  event.preventDefault();
249
254
  event.stopPropagation();
250
255
  const option = event.currentTarget;
251
- const selectedValue = option.dataset.value;
256
+ if (option.disabled)
257
+ return;
258
+ const selectedValue = option.value;
252
259
  if (this.multiselect) {
253
260
  if (this.value.includes(selectedValue)) {
254
261
  this.value = this.value.filter(value => value !== selectedValue);
@@ -264,7 +271,7 @@ export class TtCombobox extends LitElement {
264
271
  }
265
272
  _onInput(event) {
266
273
  const input = event.target;
267
- const filter = input.value.toLowerCase();
274
+ const filter = input.value;
268
275
  if (filter !== '' && !this._expanded) {
269
276
  this._expanded = true;
270
277
  }
@@ -288,11 +295,11 @@ export class TtCombobox extends LitElement {
288
295
  if (this.disabled) {
289
296
  return 'Disabled';
290
297
  }
291
- if (!this._selectedVisibleOptions.length) {
298
+ if (!this.value.length) {
292
299
  return 'No options selected';
293
300
  }
294
- if (this._selectedVisibleOptions.length === 1) {
295
- return this._selectedVisibleOptions[0].textContent?.trim();
301
+ if (this.value.length === 1) {
302
+ return Array.from(this._selectableVisibleOptions).find(option => option.value === this.value[0])?.textContent?.trim();
296
303
  }
297
304
  if (this._isAllSelected) {
298
305
  return this.selectAllPlaceholder || 'All options selected';
@@ -327,31 +334,24 @@ export class TtCombobox extends LitElement {
327
334
  />`;
328
335
  }
329
336
  _renderOption(option) {
330
- const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);
331
- // if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {
332
- // return nothing;
333
- // }
337
+ const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter.toLowerCase()) && !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) || option.hidden);
334
338
  const id = `${this.id}-option-${option.value}`;
335
339
  const active = this._getActiveOptionId() === id;
336
- const selected = Boolean(this.multiselect && option.selected);
340
+ const selected = this.value.includes(option.value);
337
341
  return html `
338
- <li
339
- role="option"
340
- id="${this.id}-option-${option.value}"
341
- aria-selected=${this.multiselect && option.selected}
342
- data-active=${active}
342
+ <tt-option
343
+ id="${id}"
344
+ value="${option.value}"
345
+ ?selected=${selected}
346
+ ?disabled=${option.disabled}
347
+ ?active=${active}
348
+ ?include-checkbox=${this.multiselect}
349
+ ?hidden=${hidden}
343
350
  @click="${this._onClickOption}"
344
- @mousedown="${(event) => event.preventDefault()}"
345
- data-value="${option.value}"
346
- aria-disabled=${option.disabled}
347
- aria-hidden=${hidden || nothing}
348
- data-deselectable=${!option.selected}
349
- part="option"
350
351
  >
351
- ${this.multiselect ? html `<input type="checkbox" ?checked=${selected}
352
- role="presentation" tabindex="-1" part="checkbox">` : nothing}
353
- <span>${unsafeHTML(option.innerHTML)}</span>
354
- </li>`;
352
+ ${unsafeHTML(option.innerHTML)}
353
+ </tt-option>
354
+ `;
355
355
  }
356
356
  _hasErrorContent() {
357
357
  return this.errorElements?.length > 0;
@@ -439,26 +439,23 @@ __decorate([
439
439
  queryAssignedElements({ slot: 'option', selector: 'option' })
440
440
  ], TtCombobox.prototype, "options", void 0);
441
441
  __decorate([
442
- queryAssignedElements({ slot: 'option', selector: 'option:not([disabled])' })
442
+ queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })
443
443
  ], TtCombobox.prototype, "activeOptions", void 0);
444
444
  __decorate([
445
445
  queryAssignedElements({ slot: 'error' })
446
446
  ], TtCombobox.prototype, "errorElements", void 0);
447
447
  __decorate([
448
- queryAll('li[role="option"]:not([aria-disabled="true"], [aria-hidden="true"])')
448
+ queryAll('tt-option:not([hidden], [disabled])')
449
449
  ], TtCombobox.prototype, "_visibleOptions", void 0);
450
450
  __decorate([
451
- queryAll('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"])')
451
+ queryAll('tt-option:not([hidden], .select-all')
452
+ ], TtCombobox.prototype, "_visibleOptionsNotSelectAll", void 0);
453
+ __decorate([
454
+ queryAll('tt-option:not([disabled], .select-all)')
452
455
  ], TtCombobox.prototype, "_selectableOptions", void 0);
453
456
  __decorate([
454
- queryAll('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"], [aria-hidden="true"])')
457
+ queryAll('tt-option:not([disabled], [hidden], .select-all)')
455
458
  ], TtCombobox.prototype, "_selectableVisibleOptions", void 0);
456
- __decorate([
457
- queryAll('li[role="option"]:not([data-value="select-all"])[aria-selected="true"]')
458
- ], TtCombobox.prototype, "_selectedOptions", void 0);
459
- __decorate([
460
- queryAll('li[role="option"]:not([data-value="select-all"], [aria-hidden="true"])[aria-selected="true"]')
461
- ], TtCombobox.prototype, "_selectedVisibleOptions", void 0);
462
459
  __decorate([
463
460
  query('input[role="combobox"]')
464
461
  ], TtCombobox.prototype, "_comboboxInput", void 0);