@triptease/tt-combobox 5.3.1 → 5.4.0

package/custom-elements.json

@@ -2,6 +2,321 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "stories/combobox.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ title: 'ComboBox', component: 'tt-combobox', argTypes: { label: { control: 'text' }, id: { control: 'text' }, 'display-select-all': { control: 'boolean' }, 'select-all-placeholder': { control: 'text' }, options: { control: 'object' } }, tags: ['autodocs'] }"
+        },
+        {
+          "kind": "variable",
+          "name": "SingleSelect"
+        },
+        {
+          "kind": "function",
+          "name": "SingleSelectWithDefault",
+          "parameters": [
+            {
+              "name": "{\n                                                           label = 'With default options',\n                                                           id = 'combobox-13',\n                                                           options = [\n                                                             { label: 'Option 1', value: '0' },\n                                                             { label: 'Option 2', value: '1', disabled: true },\n                                                             { label: 'Option 3', value: '2' }\n                                                           ],\n                                                           value = '0'\n                                                         }"
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "MultiSelect"
+        },
+        {
+          "kind": "variable",
+          "name": "MultiSelectSelectAll"
+        },
+        {
+          "kind": "variable",
+          "name": "WithStyles"
+        },
+        {
+          "kind": "function",
+          "name": "WithCustomOptionStyle",
+          "parameters": [
+            {
+              "name": "{\n                                                         label = 'Test label',\n                                                         id = 'combobox-1',\n                                                         displaySelectAll = false,\n                                                         options = [\n                                                           { label: 'Option 1', value: '0' },\n                                                           { label: 'Option 2', value: '1' },\n                                                           { label: 'Option 3', value: '2' }\n                                                         ],\n                                                         multiselect = false\n                                                       }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "WithIcon",
+          "parameters": [
+            {
+              "name": "{\n                                            label = 'With icon',\n                                            id = 'combobox-1',\n                                            displaySelectAll = false,\n                                            options = [\n                                              { label: 'Option 1', value: '0' },\n                                              { label: 'Option 2', value: '1' },\n                                              { label: 'Option 3', value: '2' }\n                                            ],\n                                            multiselect = false\n                                          }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "HiddenCaret",
+          "parameters": [
+            {
+              "name": "{\n  label = 'With hidden caret',\n                                               id = 'combobox-1',\n                                               displaySelectAll = false,\n                                               options = [\n                                                 { label: 'Option 1', value: '0' },\n                                                 { label: 'Option 2', value: '1' },\n                                                 { label: 'Option 3', value: '2' }\n                                               ],\n                                               multiselect = false\n                                             }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "WithError",
+          "parameters": [
+            {
+              "name": "{\n                                             label = 'With error',\n                                             id = 'combobox-1',\n                                             displaySelectAll = false,\n                                             options = [\n                                               { label: 'Option 1', value: '0' },\n                                               { label: 'Option 2', value: '1' },\n                                               { label: 'Option 3', value: '2' }\n                                             ],\n                                             multiselect = false\n                                           }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "WithOptionDisabled",
+          "parameters": [
+            {
+              "name": "{\n                                                      label = 'With option disabled',\n                                                      id = 'combobox-1',\n                                                      displaySelectAll = true,\n                                                      options = [\n                                                        { label: 'Option 1', value: '0' },\n                                                        { label: 'Option 2', value: '1', disabled: true },\n                                                        { label: 'Option 3', value: '2' }\n                                                      ],\n                                                      multiselect = true\n                                                    }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "DisabledComboBox",
+          "parameters": [
+            {
+              "name": "{\n                                                    label = 'Disabled selector',\n                                                    id = 'combobox-1',\n                                                    displaySelectAll = false,\n                                                    options = [\n                                                      { label: 'Option 1', value: '0' },\n                                                      { label: 'Option 2', value: '1' },\n                                                      { label: 'Option 3', value: '2' }\n                                                    ],\n                                                    multiselect = false\n                                                  }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "InsideForm",
+          "parameters": [
+            {
+              "name": "{\n                                              label = 'Combobox submitted inside a form',\n                                              id = 'combobox-1',\n                                              displaySelectAll = false,\n                                              options = [\n                                                { label: 'Option 1', value: '0' },\n                                                { label: 'Option 2', value: '1' },\n                                                { label: 'Option 3', value: '2' }\n                                              ],\n                                              multiselect = false\n                                            }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "WithAriaLabel",
+          "parameters": [
+            {
+              "name": "{\n                                                 label = 'This label is only visible for screen readers, use with caution',\n                                                 id = 'combobox-1',\n                                                 displaySelectAll = false,\n                                                 options = [\n                                                   { label: 'Option 1', value: '0' },\n                                                   { label: 'Option 2', value: '1' },\n                                                   { label: 'Option 3', value: '2' }\n                                                 ],\n                                                 multiselect = false\n                                               }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "WithRequired",
+          "parameters": [
+            {
+              "name": "{\n                                                label = 'Combobox with required attribute',\n                                                id = 'combobox-1',\n                                                displaySelectAll = false,\n                                                options = [\n                                                  { label: 'Option 1', value: '0' },\n                                                  { label: 'Option 2', value: '1' },\n                                                  { label: 'Option 3', value: '2' }\n                                                ],\n                                                multiselect = false\n                                              }"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "MultiSelectWithRequired",
+          "parameters": [
+            {
+              "name": "{\n                                                           label = 'MultiSelect Combobox with required attribute',\n                                                           id = 'combobox-1',\n                                                           displaySelectAll = true,\n                                                           options = [\n                                                             { label: 'Option 1', value: '0' },\n                                                             { label: 'Option 2', value: '1' },\n                                                             { label: 'Option 3', value: '2' }\n                                                           ],\n                                                           multiselect = true\n                                                         }"
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "WithCustomPlaceholder"
+        },
+        {
+          "kind": "variable",
+          "name": "WithHiddenOptions",
+          "type": {
+            "text": "Story<ArgTypes>"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "WithSelectAllPlaceholder"
+        },
+        {
+          "kind": "function",
+          "name": "OpenUpward",
+          "parameters": [
+            {
+              "name": "{\n  label = 'Combobox that opens upward',\n  id = 'combobox-upward',\n  displaySelectAll = false,\n  options = [\n    { label: 'Option 1', value: '0' },\n    { label: 'Option 2', value: '1' },\n    { label: 'Option 3', value: '2' },\n    { label: 'Option 4', value: '3' },\n    { label: 'Option 5', value: '4' }\n  ],\n  multiselect = false\n}"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SingleSelect",
+          "declaration": {
+            "name": "SingleSelect",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SingleSelectWithDefault",
+          "declaration": {
+            "name": "SingleSelectWithDefault",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSelect",
+          "declaration": {
+            "name": "MultiSelect",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSelectSelectAll",
+          "declaration": {
+            "name": "MultiSelectSelectAll",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithStyles",
+          "declaration": {
+            "name": "WithStyles",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithCustomOptionStyle",
+          "declaration": {
+            "name": "WithCustomOptionStyle",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithIcon",
+          "declaration": {
+            "name": "WithIcon",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HiddenCaret",
+          "declaration": {
+            "name": "HiddenCaret",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithError",
+          "declaration": {
+            "name": "WithError",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithOptionDisabled",
+          "declaration": {
+            "name": "WithOptionDisabled",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DisabledComboBox",
+          "declaration": {
+            "name": "DisabledComboBox",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InsideForm",
+          "declaration": {
+            "name": "InsideForm",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithAriaLabel",
+          "declaration": {
+            "name": "WithAriaLabel",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithRequired",
+          "declaration": {
+            "name": "WithRequired",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSelectWithRequired",
+          "declaration": {
+            "name": "MultiSelectWithRequired",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithCustomPlaceholder",
+          "declaration": {
+            "name": "WithCustomPlaceholder",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithHiddenOptions",
+          "declaration": {
+            "name": "WithHiddenOptions",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithSelectAllPlaceholder",
+          "declaration": {
+            "name": "WithSelectAllPlaceholder",
+            "module": "stories/combobox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "OpenUpward",
+          "declaration": {
+            "name": "OpenUpward",
+            "module": "stories/combobox.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/TtCombobox.ts",
@@ -537,425 +852,110 @@
               "fieldName": "hideCaret"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "select-all-placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "selectAllPlaceholder"
-            },
-            {
-              "name": "open-upward",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "openUpward"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "fieldName": "value"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "tt-combobox",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TtCombobox",
-          "declaration": {
-            "name": "TtCombobox",
-            "module": "src/TtCombobox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TtCombobox",
-          "declaration": {
-            "name": "TtCombobox",
-            "module": "./tt-combobox.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "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; } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tt-combobox.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "tt-combobox",
-          "declaration": {
-            "name": "TtCombobox",
-            "module": "/src/TtCombobox.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TtCombobox",
-          "declaration": {
-            "name": "TtCombobox",
-            "module": "src/tt-combobox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "stories/combobox.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ title: 'ComboBox', component: 'tt-combobox', argTypes: { label: { control: 'text' }, id: { control: 'text' }, 'display-select-all': { control: 'boolean' }, 'select-all-placeholder': { control: 'text' }, options: { control: 'object' } }, tags: ['autodocs'] }"
-        },
-        {
-          "kind": "variable",
-          "name": "SingleSelect"
-        },
-        {
-          "kind": "function",
-          "name": "SingleSelectWithDefault",
-          "parameters": [
-            {
-              "name": "{\n                                                           label = 'With default options',\n                                                           id = 'combobox-13',\n                                                           options = [\n                                                             { label: 'Option 1', value: '0' },\n                                                             { label: 'Option 2', value: '1', disabled: true },\n                                                             { label: 'Option 3', value: '2' }\n                                                           ],\n                                                           value = '0'\n                                                         }"
-            }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "MultiSelect"
-        },
-        {
-          "kind": "variable",
-          "name": "MultiSelectSelectAll"
-        },
-        {
-          "kind": "variable",
-          "name": "WithStyles"
-        },
-        {
-          "kind": "function",
-          "name": "WithCustomOptionStyle",
-          "parameters": [
-            {
-              "name": "{\n                                                         label = 'Test label',\n                                                         id = 'combobox-1',\n                                                         displaySelectAll = false,\n                                                         options = [\n                                                           { label: 'Option 1', value: '0' },\n                                                           { label: 'Option 2', value: '1' },\n                                                           { label: 'Option 3', value: '2' }\n                                                         ],\n                                                         multiselect = false\n                                                       }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "WithIcon",
-          "parameters": [
-            {
-              "name": "{\n                                            label = 'With icon',\n                                            id = 'combobox-1',\n                                            displaySelectAll = false,\n                                            options = [\n                                              { label: 'Option 1', value: '0' },\n                                              { label: 'Option 2', value: '1' },\n                                              { label: 'Option 3', value: '2' }\n                                            ],\n                                            multiselect = false\n                                          }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "HiddenCaret",
-          "parameters": [
-            {
-              "name": "{\n  label = 'With hidden caret',\n                                               id = 'combobox-1',\n                                               displaySelectAll = false,\n                                               options = [\n                                                 { label: 'Option 1', value: '0' },\n                                                 { label: 'Option 2', value: '1' },\n                                                 { label: 'Option 3', value: '2' }\n                                               ],\n                                               multiselect = false\n                                             }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "WithError",
-          "parameters": [
-            {
-              "name": "{\n                                             label = 'With error',\n                                             id = 'combobox-1',\n                                             displaySelectAll = false,\n                                             options = [\n                                               { label: 'Option 1', value: '0' },\n                                               { label: 'Option 2', value: '1' },\n                                               { label: 'Option 3', value: '2' }\n                                             ],\n                                             multiselect = false\n                                           }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "WithOptionDisabled",
-          "parameters": [
-            {
-              "name": "{\n                                                      label = 'With option disabled',\n                                                      id = 'combobox-1',\n                                                      displaySelectAll = true,\n                                                      options = [\n                                                        { label: 'Option 1', value: '0' },\n                                                        { label: 'Option 2', value: '1', disabled: true },\n                                                        { label: 'Option 3', value: '2' }\n                                                      ],\n                                                      multiselect = true\n                                                    }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "DisabledComboBox",
-          "parameters": [
-            {
-              "name": "{\n                                                    label = 'Disabled selector',\n                                                    id = 'combobox-1',\n                                                    displaySelectAll = false,\n                                                    options = [\n                                                      { label: 'Option 1', value: '0' },\n                                                      { label: 'Option 2', value: '1' },\n                                                      { label: 'Option 3', value: '2' }\n                                                    ],\n                                                    multiselect = false\n                                                  }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "InsideForm",
-          "parameters": [
-            {
-              "name": "{\n                                              label = 'Combobox submitted inside a form',\n                                              id = 'combobox-1',\n                                              displaySelectAll = false,\n                                              options = [\n                                                { label: 'Option 1', value: '0' },\n                                                { label: 'Option 2', value: '1' },\n                                                { label: 'Option 3', value: '2' }\n                                              ],\n                                              multiselect = false\n                                            }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "WithAriaLabel",
-          "parameters": [
-            {
-              "name": "{\n                                                 label = 'This label is only visible for screen readers, use with caution',\n                                                 id = 'combobox-1',\n                                                 displaySelectAll = false,\n                                                 options = [\n                                                   { label: 'Option 1', value: '0' },\n                                                   { label: 'Option 2', value: '1' },\n                                                   { label: 'Option 3', value: '2' }\n                                                 ],\n                                                 multiselect = false\n                                               }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "WithRequired",
-          "parameters": [
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
             {
-              "name": "{\n                                                label = 'Combobox with required attribute',\n                                                id = 'combobox-1',\n                                                displaySelectAll = false,\n                                                options = [\n                                                  { label: 'Option 1', value: '0' },\n                                                  { label: 'Option 2', value: '1' },\n                                                  { label: 'Option 3', value: '2' }\n                                                ],\n                                                multiselect = false\n                                              }"
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "MultiSelectWithRequired",
-          "parameters": [
+              "name": "select-all-placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "selectAllPlaceholder"
+            },
             {
-              "name": "{\n                                                           label = 'MultiSelect Combobox with required attribute',\n                                                           id = 'combobox-1',\n                                                           displaySelectAll = true,\n                                                           options = [\n                                                             { label: 'Option 1', value: '0' },\n                                                             { label: 'Option 2', value: '1' },\n                                                             { label: 'Option 3', value: '2' }\n                                                           ],\n                                                           multiselect = true\n                                                         }"
-            }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "WithCustomPlaceholder"
-        },
-        {
-          "kind": "variable",
-          "name": "WithHiddenOptions",
-          "type": {
-            "text": "Story<ArgTypes>"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "WithSelectAllPlaceholder"
-        },
-        {
-          "kind": "function",
-          "name": "OpenUpward",
-          "parameters": [
+              "name": "open-upward",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "openUpward"
+            },
             {
-              "name": "{\n  label = 'Combobox that opens upward',\n  id = 'combobox-upward',\n  displaySelectAll = false,\n  options = [\n    { label: 'Option 1', value: '0' },\n    { label: 'Option 2', value: '1' },\n    { label: 'Option 3', value: '2' },\n    { label: 'Option 4', value: '3' },\n    { label: 'Option 5', value: '4' }\n  ],\n  multiselect = false\n}"
+              "name": "value",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "fieldName": "value"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "tt-combobox",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SingleSelect",
-          "declaration": {
-            "name": "SingleSelect",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SingleSelectWithDefault",
-          "declaration": {
-            "name": "SingleSelectWithDefault",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultiSelect",
-          "declaration": {
-            "name": "MultiSelect",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MultiSelectSelectAll",
-          "declaration": {
-            "name": "MultiSelectSelectAll",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithStyles",
-          "declaration": {
-            "name": "WithStyles",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithCustomOptionStyle",
-          "declaration": {
-            "name": "WithCustomOptionStyle",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithIcon",
-          "declaration": {
-            "name": "WithIcon",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HiddenCaret",
-          "declaration": {
-            "name": "HiddenCaret",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithError",
-          "declaration": {
-            "name": "WithError",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithOptionDisabled",
-          "declaration": {
-            "name": "WithOptionDisabled",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DisabledComboBox",
-          "declaration": {
-            "name": "DisabledComboBox",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InsideForm",
-          "declaration": {
-            "name": "InsideForm",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithAriaLabel",
-          "declaration": {
-            "name": "WithAriaLabel",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithRequired",
+          "name": "TtCombobox",
           "declaration": {
-            "name": "WithRequired",
-            "module": "stories/combobox.stories.ts"
+            "name": "TtCombobox",
+            "module": "src/TtCombobox.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
         {
           "kind": "js",
-          "name": "MultiSelectWithRequired",
+          "name": "TtCombobox",
           "declaration": {
-            "name": "MultiSelectWithRequired",
-            "module": "stories/combobox.stories.ts"
+            "name": "TtCombobox",
+            "module": "./tt-combobox.js"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "WithCustomPlaceholder",
-          "declaration": {
-            "name": "WithCustomPlaceholder",
-            "module": "stories/combobox.stories.ts"
-          }
-        },
+          "kind": "variable",
+          "name": "styles",
+          "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; } } `"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "WithHiddenOptions",
+          "name": "styles",
           "declaration": {
-            "name": "WithHiddenOptions",
-            "module": "stories/combobox.stories.ts"
+            "name": "styles",
+            "module": "src/styles.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tt-combobox.ts",
+      "declarations": [],
+      "exports": [
         {
-          "kind": "js",
-          "name": "WithSelectAllPlaceholder",
+          "kind": "custom-element-definition",
+          "name": "tt-combobox",
           "declaration": {
-            "name": "WithSelectAllPlaceholder",
-            "module": "stories/combobox.stories.ts"
+            "name": "TtCombobox",
+            "module": "/src/TtCombobox.js"
           }
         },
         {
           "kind": "js",
-          "name": "OpenUpward",
+          "name": "TtCombobox",
           "declaration": {
-            "name": "OpenUpward",
-            "module": "stories/combobox.stories.ts"
+            "name": "TtCombobox",
+            "module": "src/tt-combobox.ts"
           }
         }
       ]

package/dist/src/TtCombobox.js

@@ -57,7 +57,16 @@ export class TtCombobox extends LitElement {
         this._selectAll = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            if (this.value.length === this._selectableOptions.length) {
+            // If filtering, and all visible options are selected, deselect only visible options
+            // Else if filtering, select all visible options
+            if (this._filter !== '' && this._isAllSelected) {
+                const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value);
+                this.value = this.value.filter(value => !selectedVisibleValues.includes(value));
+            }
+            else if (this._filter !== '') {
+                this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value)]));
+            }
+            else if (this.value.length === this._selectableOptions.length) {
                 this.value = [];
             }
             else {

package/dist/src/TtCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\n\n\nexport class TtCombobox extends LitElement {\n  static styles = styles;\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({ type: Boolean })\n  multiselect = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, attribute: 'display-select-all' })\n  displaySelectAll = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby = nothing;\n\n  @property({ type: Boolean, attribute: 'hide-caret' })\n  hideCaret = false;\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: String, attribute: 'select-all-placeholder' })\n  selectAllPlaceholder?: string;\n\n  @property({ type: Boolean, attribute: 'open-upward' })\n  openUpward = false;\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  @state()\n  protected _activeOption: number = -1;\n\n  @state()\n  protected _expanded = false;\n\n  @state()\n  protected _filter: string = '';\n\n  @queryAssignedElements({ slot: 'option', selector: 'option' })\n  options!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'option', selector: 'option:not([disabled])' })\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'error' })\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n  protected _visibleOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n  protected _selectableOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n  protected _selectableVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n  protected _selectedOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n  protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n  @query('input[role=\"combobox\"]')\n  protected _comboboxInput!: HTMLInputElement;\n\n  @query('button:has(svg)')\n  protected _chevronButton!: HTMLButtonElement;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  @property({ type: Array<String>, attribute: 'value' })\n  public value: string[] = [];\n\n  private get _isAllSelected(): boolean {\n    return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\n  }\n\n  private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        this.requestUpdate('options');\n      }\n    });\n  });\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  private _handleFocusOut(e: FocusEvent) {\n    if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n      this._expanded = false;\n    }\n  }\n\n  private _onFocus() {\n    this._comboboxInput.focus();\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    this.internals.setFormValue(JSON.stringify(this.value));\n\n    this._reportValidity();\n    this._listenForOptionChange();\n\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this._valueChanged();\n\n      if (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n        this._dispatchSelectedOptions();\n        this._reportValidity();\n      }\n    }\n\n    if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n      this.internals.states.add('interacted');\n    }\n\n    if (changedProperties.has('options')) {\n      this.updateComplete.then(() => {\n        this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.value!)]));\n        this._listenForOptionChange();\n      });\n    }\n    super.update(changedProperties);\n  }\n\n  private _valueChanged = () => {\n    this._selectableOptions.forEach(option => {\n      if (this.value.includes(option.dataset.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  };\n\n  private _listenForOptionChange = () => {\n    this.options.forEach(option => {\n      this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n    });\n  };\n\n  private _reportValidity() {\n    if (this.required && !this.value.length) {\n      const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n      this.internals.setValidity({\n        valueMissing: true\n      }, errorMessage, this._comboboxInput);\n      this.internals.states.add('--invalid');\n    } else if (!this.internals.validity.valid) {\n      this.internals.setValidity({});\n\n      if (this.internals.states.has('--invalid')) {\n        this.internals.states.delete('--invalid');\n      }\n    }\n  }\n\n  private get labels(): Array<HTMLElement> {\n    return <Array<HTMLElement>>[...this.internals.labels];\n  }\n\n  private get labelContent(): string {\n    if (this.ariaLabel !== null) {\n      return this.ariaLabel;\n    }\n\n    return this.labels.map(label => label.innerText).join(', ');\n  }\n\n  private _onKeyUp(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this._expanded) {\n          this._expanded = true;\n          this._activeOption = -1;\n        } else {\n          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this._expanded) {\n          this._activeOption = Math.max(0, this._activeOption - 1);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        if (this._expanded) {\n          this._expanded = false;\n        } else if (this._filter !== '') {\n          this._filter = '';\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this._expanded) {\n          this._visibleOptions[this._activeOption].click();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _uncheckOption(option: HTMLElement) {\n    if (option.dataset.deselectable !== 'true') return;\n\n    option.setAttribute('aria-selected', 'false');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = false;\n    }\n  }\n\n  private _checkOption(option: HTMLElement) {\n    if (!this.multiselect) {\n      this._selectableOptions.forEach(opt => {\n        this._uncheckOption(opt);\n      });\n    }\n\n    option.setAttribute('aria-selected', 'true');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = true;\n    }\n  }\n\n  private _getActiveOptionId(): string | undefined {\n    if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n      return undefined;\n    }\n\n    const option = this._visibleOptions[this._activeOption];\n    return option.id;\n  }\n\n  private _onClick() {\n    this._expanded = !this._expanded;\n\n    if (this._expanded) {\n      (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n    }\n  }\n\n  private _onChevronClick() {\n    (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n  }\n\n  private _onClickOption(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    const option = event.currentTarget as HTMLElement;\n    const selectedValue = option.dataset.value as string;\n\n\n    if (this.multiselect) {\n      if (this.value.includes(selectedValue)) {\n        this.value = this.value.filter(value => value !== selectedValue);\n      } else {\n        this.value = [...this.value, selectedValue];\n      }\n    } else {\n      this.value = [selectedValue];\n      this._expanded = false;\n    }\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value.toLowerCase();\n    if (filter !== '' && !this._expanded) {\n      this._expanded = true;\n    }\n    this._activeOption = -1;\n    this._filter = filter;\n  }\n\n  private _dispatchSelectedOptions() {\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.value.length === this._selectableOptions.length) {\n      this.value = [];\n    } else {\n      this.value = Array.from(this._selectableOptions).map(option => option.dataset.value!);\n    }\n  };\n\n  private get _isValid(): boolean {\n    return this.internals.validity.valid && !this.invalid;\n  }\n\n  private _renderCombobox() {\n    const placeHolderValue = guard(\n      [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder],\n      () => {\n        if (this.placeholder) {\n          return this.placeholder;\n        }\n\n        if (this.disabled) {\n          return 'Disabled';\n        }\n        if (!this._selectedVisibleOptions.length) {\n          return 'No options selected';\n        }\n        if (this._selectedVisibleOptions.length === 1) {\n          return this._selectedVisibleOptions[0].textContent?.trim();\n        }\n\n        if (this._isAllSelected) {\n          return this.selectAllPlaceholder || 'All options selected';\n        }\n\n        return `${this._selectedVisibleOptions.length} options selected`;\n      });\n\n    return html`\n      <input\n        type=\"text\"\n        id=\"${this.id}\"\n        name=\"${this.name}\"\n        autocomplete=\"off\"\n        aria-label=\"${this.labelContent}\"\n        aria-labelledby=\"${this.ariaLabelledby}\"\n        role=\"combobox\"\n        aria-controls=\"${this.id}-list\"\n        aria-expanded=\"${this._expanded}\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-disabled=\"${this.disabled}\"\n        aria-invalid=\"${!this._isValid}\"\n        aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n        aria-required=\"${this.required}\"\n        ?disabled=${this.disabled}\n        aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n        @input=\"${this._onInput}\"\n        .value=\"${this._filter}\"\n        .placeholder=\"${placeHolderValue}\"\n        @focusout=\"${this._handleFocusOut}\"\n        part=\"input\"\n        class=${this.hideCaret ? 'hide-caret' : ''}\n      />`;\n  }\n\n  private _renderSelectAll = () => {\n    if (!this.multiselect || !this.displaySelectAll) {\n      return nothing;\n    }\n    const id = `${this.id}-option-select-all`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this._isAllSelected;\n    // eslint-disable-next-line lit-a11y/click-events-have-key-events\n    return html`\n      <li\n        class=\"select-all\"\n        role=\"option\"\n        id=\"${this.id}-option-select-all\"\n        aria-selected=\"${selected}\"\n        data-active=${active}\n        @click=\"${this._selectAll}\"\n        @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n        data-value=\"select-all\"\n        part=\"option\"\n      >\n        <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n        Select all\n      </li>`;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);\n\n    // if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n    //   return nothing;\n    // }\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = Boolean(this.multiselect && option.selected);\n\n    return html`\n      <li\n        role=\"option\"\n        id=\"${this.id}-option-${option.value}\"\n        aria-selected=${this.multiselect && option.selected}\n        data-active=${active}\n        @click=\"${this._onClickOption}\"\n        @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n        data-value=\"${option.value}\"\n        aria-disabled=${option.disabled}\n        aria-hidden=${hidden || nothing}\n        data-deselectable=${!option.selected}\n        part=\"option\"\n      >\n        ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n                                         role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n        <span>${unsafeHTML(option.innerHTML)}</span>\n      </li>`;\n  }\n\n  private _renderChevron = () => html`\n    <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n            aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\n      ${unsafeSVG(chevronDown)}\n    </button>\n  `;\n\n  private _hasErrorContent(): boolean {\n    return this.errorElements?.length > 0;\n  }\n\n  render() {\n    return html`\n      <div class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n           aria-disabled=\"${this.disabled}\" part=\"container\">\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()}\n        ${this._renderChevron()}\n        <ul\n          id=\"${this.id}-list\"\n          role=\"listbox\"\n          aria-multiselectable=\"${this.multiselect}\"\n          aria-label=\"${this.labelContent}\"\n          part=\"listbox\"\n          ?data-open-upward=\"${this.openUpward}\"\n        >\n          ${this._renderSelectAll()}\n\n          ${repeat(this.options, opt => opt.value, this._renderOption.bind(this))}\n\n          <li part=\"no-results\" class=\"no-results\">No results</li>\n        </ul>\n      </div>\n      <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n           ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}
+{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\n\n\nexport class TtCombobox extends LitElement {\n  static styles = styles;\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({ type: Boolean })\n  multiselect = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, attribute: 'display-select-all' })\n  displaySelectAll = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby = nothing;\n\n  @property({ type: Boolean, attribute: 'hide-caret' })\n  hideCaret = false;\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: String, attribute: 'select-all-placeholder' })\n  selectAllPlaceholder?: string;\n\n  @property({ type: Boolean, attribute: 'open-upward' })\n  openUpward = false;\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  @state()\n  protected _activeOption: number = -1;\n\n  @state()\n  protected _expanded = false;\n\n  @state()\n  protected _filter: string = '';\n\n  @queryAssignedElements({ slot: 'option', selector: 'option' })\n  options!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'option', selector: 'option:not([disabled])' })\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'error' })\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n  protected _visibleOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n  protected _selectableOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n  protected _selectableVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n  protected _selectedOptions!: NodeListOf<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n  protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n  @query('input[role=\"combobox\"]')\n  protected _comboboxInput!: HTMLInputElement;\n\n  @query('button:has(svg)')\n  protected _chevronButton!: HTMLButtonElement;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  @property({ type: Array<String>, attribute: 'value' })\n  public value: string[] = [];\n\n  private get _isAllSelected(): boolean {\n    return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\n  }\n\n  private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        this.requestUpdate('options');\n      }\n    });\n  });\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  private _handleFocusOut(e: FocusEvent) {\n    if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n      this._expanded = false;\n    }\n  }\n\n  private _onFocus() {\n    this._comboboxInput.focus();\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    this.internals.setFormValue(JSON.stringify(this.value));\n\n    this._reportValidity();\n    this._listenForOptionChange();\n\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this._valueChanged();\n\n      if (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n        this._dispatchSelectedOptions();\n        this._reportValidity();\n      }\n    }\n\n    if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n      this.internals.states.add('interacted');\n    }\n\n    if (changedProperties.has('options')) {\n      this.updateComplete.then(() => {\n        this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.value!)]));\n        this._listenForOptionChange();\n      });\n    }\n    super.update(changedProperties);\n  }\n\n  private _valueChanged = () => {\n    this._selectableOptions.forEach(option => {\n      if (this.value.includes(option.dataset.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  };\n\n  private _listenForOptionChange = () => {\n    this.options.forEach(option => {\n      this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n    });\n  };\n\n  private _reportValidity() {\n    if (this.required && !this.value.length) {\n      const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n      this.internals.setValidity({\n        valueMissing: true\n      }, errorMessage, this._comboboxInput);\n      this.internals.states.add('--invalid');\n    } else if (!this.internals.validity.valid) {\n      this.internals.setValidity({});\n\n      if (this.internals.states.has('--invalid')) {\n        this.internals.states.delete('--invalid');\n      }\n    }\n  }\n\n  private get labels(): Array<HTMLElement> {\n    return <Array<HTMLElement>>[...this.internals.labels];\n  }\n\n  private get labelContent(): string {\n    if (this.ariaLabel !== null) {\n      return this.ariaLabel;\n    }\n\n    return this.labels.map(label => label.innerText).join(', ');\n  }\n\n  private _onKeyUp(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this._expanded) {\n          this._expanded = true;\n          this._activeOption = -1;\n        } else {\n          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this._expanded) {\n          this._activeOption = Math.max(0, this._activeOption - 1);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        if (this._expanded) {\n          this._expanded = false;\n        } else if (this._filter !== '') {\n          this._filter = '';\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this._expanded) {\n          this._visibleOptions[this._activeOption].click();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _uncheckOption(option: HTMLElement) {\n    if (option.dataset.deselectable !== 'true') return;\n\n    option.setAttribute('aria-selected', 'false');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = false;\n    }\n  }\n\n  private _checkOption(option: HTMLElement) {\n    if (!this.multiselect) {\n      this._selectableOptions.forEach(opt => {\n        this._uncheckOption(opt);\n      });\n    }\n\n    option.setAttribute('aria-selected', 'true');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = true;\n    }\n  }\n\n  private _getActiveOptionId(): string | undefined {\n    if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n      return undefined;\n    }\n\n    const option = this._visibleOptions[this._activeOption];\n    return option.id;\n  }\n\n  private _onClick() {\n    this._expanded = !this._expanded;\n\n    if (this._expanded) {\n      (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n    }\n  }\n\n  private _onChevronClick() {\n    (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n  }\n\n  private _onClickOption(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    const option = event.currentTarget as HTMLElement;\n    const selectedValue = option.dataset.value as string;\n\n\n    if (this.multiselect) {\n      if (this.value.includes(selectedValue)) {\n        this.value = this.value.filter(value => value !== selectedValue);\n      } else {\n        this.value = [...this.value, selectedValue];\n      }\n    } else {\n      this.value = [selectedValue];\n      this._expanded = false;\n    }\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value.toLowerCase();\n    if (filter !== '' && !this._expanded) {\n      this._expanded = true;\n    }\n    this._activeOption = -1;\n    this._filter = filter;\n  }\n\n  private _dispatchSelectedOptions() {\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // If filtering, and all visible options are selected, deselect only visible options\n    // Else if filtering, select all visible options\n\n    if (this._filter !== '' && this._isAllSelected) {\n      const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value!);\n      this.value = this.value.filter(value => !selectedVisibleValues.includes(value));\n    } else if (this._filter !== '') {\n      this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value!)]));\n    } else if (this.value.length === this._selectableOptions.length) {\n      this.value = [];\n    } else {\n      this.value = Array.from(this._selectableOptions).map(option => option.dataset.value!);\n    }\n  };\n\n  private get _isValid(): boolean {\n    return this.internals.validity.valid && !this.invalid;\n  }\n\n  private _renderCombobox() {\n    const placeHolderValue = guard(\n      [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder],\n      () => {\n        if (this.placeholder) {\n          return this.placeholder;\n        }\n\n        if (this.disabled) {\n          return 'Disabled';\n        }\n        if (!this._selectedVisibleOptions.length) {\n          return 'No options selected';\n        }\n        if (this._selectedVisibleOptions.length === 1) {\n          return this._selectedVisibleOptions[0].textContent?.trim();\n        }\n\n        if (this._isAllSelected) {\n          return this.selectAllPlaceholder || 'All options selected';\n        }\n\n        return `${this._selectedVisibleOptions.length} options selected`;\n      });\n\n    return html`\n      <input\n        type=\"text\"\n        id=\"${this.id}\"\n        name=\"${this.name}\"\n        autocomplete=\"off\"\n        aria-label=\"${this.labelContent}\"\n        aria-labelledby=\"${this.ariaLabelledby}\"\n        role=\"combobox\"\n        aria-controls=\"${this.id}-list\"\n        aria-expanded=\"${this._expanded}\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-disabled=\"${this.disabled}\"\n        aria-invalid=\"${!this._isValid}\"\n        aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n        aria-required=\"${this.required}\"\n        ?disabled=${this.disabled}\n        aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n        @input=\"${this._onInput}\"\n        .value=\"${this._filter}\"\n        .placeholder=\"${placeHolderValue}\"\n        @focusout=\"${this._handleFocusOut}\"\n        part=\"input\"\n        class=${this.hideCaret ? 'hide-caret' : ''}\n      />`;\n  }\n\n  private _renderSelectAll = () => {\n    if (!this.multiselect || !this.displaySelectAll) {\n      return nothing;\n    }\n    const id = `${this.id}-option-select-all`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this._isAllSelected;\n    // eslint-disable-next-line lit-a11y/click-events-have-key-events\n    return html`\n      <li\n        class=\"select-all\"\n        role=\"option\"\n        id=\"${this.id}-option-select-all\"\n        aria-selected=\"${selected}\"\n        data-active=${active}\n        @click=\"${this._selectAll}\"\n        @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n        data-value=\"select-all\"\n        part=\"option\"\n      >\n        <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n        Select all\n      </li>`;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);\n\n    // if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n    //   return nothing;\n    // }\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = Boolean(this.multiselect && option.selected);\n\n    return html`\n      <li\n        role=\"option\"\n        id=\"${this.id}-option-${option.value}\"\n        aria-selected=${this.multiselect && option.selected}\n        data-active=${active}\n        @click=\"${this._onClickOption}\"\n        @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n        data-value=\"${option.value}\"\n        aria-disabled=${option.disabled}\n        aria-hidden=${hidden || nothing}\n        data-deselectable=${!option.selected}\n        part=\"option\"\n      >\n        ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n                                         role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n        <span>${unsafeHTML(option.innerHTML)}</span>\n      </li>`;\n  }\n\n  private _renderChevron = () => html`\n    <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n            aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\n      ${unsafeSVG(chevronDown)}\n    </button>\n  `;\n\n  private _hasErrorContent(): boolean {\n    return this.errorElements?.length > 0;\n  }\n\n  render() {\n    return html`\n      <div class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n           aria-disabled=\"${this.disabled}\" part=\"container\">\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()}\n        ${this._renderChevron()}\n        <ul\n          id=\"${this.id}-list\"\n          role=\"listbox\"\n          aria-multiselectable=\"${this.multiselect}\"\n          aria-label=\"${this.labelContent}\"\n          part=\"listbox\"\n          ?data-open-upward=\"${this.openUpward}\"\n        >\n          ${this._renderSelectAll()}\n\n          ${repeat(this.options, opt => opt.value, this._renderOption.bind(this))}\n\n          <li part=\"no-results\" class=\"no-results\">No results</li>\n        </ul>\n      </div>\n      <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n           ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-combobox following open-wc recommendations",
   "license": "MIT",
   "author": "@triptease",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/test/tt-combobox.test.ts

@@ -8,6 +8,12 @@ describe('TtCombobox', () => {
 
   const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');
 
+  const filterCombobox = (combobox: HTMLInputElement, text: string) => {
+    // eslint-disable-next-line no-param-reassign
+    combobox.value = text;
+    combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+  }
+
   it('Should render with the default placeholder text', async () => {
     const el = await fixture<TtCombobox>(html`
       <tt-combobox id="combobox">
@@ -396,6 +402,75 @@ describe('TtCombobox', () => {
     expect(selectedOptions).to.have.lengthOf(2);
   });
 
+  it('should only add the visible options to the value when select all is clicked after filtering', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    // Open the combobox
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    // Filter options by typing "Option 1" to only show that option
+    filterCombobox(combobox, 'Option 1');
+    await elementUpdated(el);
+
+    // Only Option 1 should be visible
+    const visibleOptions = el.shadowRoot!.querySelectorAll('[role="option"]:not([data-value="select-all"]):not([aria-hidden="true"])');
+    await expect(visibleOptions.length).to.equal(1);
+    await expect(visibleOptions[0].getAttribute('data-value')).to.equal('1');
+
+    // Click "Select All"
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    selectAll.click();
+    await elementUpdated(el);
+
+    // Clear the filter
+    filterCombobox(combobox, '');
+    await elementUpdated(el);
+
+    // Verify that only "Option 1" is selected
+    await expect(el.value).to.deep.equal(['1']);
+  });
+
+  it('should only remove the visible options from the value when deselecting select all after filtering', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    // Open the combobox
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    // Click "Select All"
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    selectAll.click();
+    await elementUpdated(el);
+
+    // Filter options by typing "Option 1" to only show that option
+    filterCombobox(combobox, 'Option 1');
+    await elementUpdated(el);
+
+    // Click "Select All" again to deselect visible options
+    selectAll.click();
+    await elementUpdated(el);
+
+    // Clear the filter
+    filterCombobox(combobox, '');
+    await elementUpdated(el);
+
+    // Verify that only "Option 1" is selected
+    await expect(el.value).to.deep.equal(['2', '3']);
+  });
+
   describe('Form Integration', () => {
     it('should include its values in FormData when submitted', async () => {
       // Create a form with the combobox component