@vscode-elements/elements 2.4.1-pre.0 → 2.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 (53) hide show
  1. package/LICENSE +1 -1
  2. package/custom-elements.json +752 -708
  3. package/dist/bundled.js +40 -40
  4. package/dist/includes/VscElement.js +1 -1
  5. package/dist/includes/VscElement.js.map +1 -1
  6. package/dist/includes/sizes.d.ts +12 -0
  7. package/dist/includes/sizes.d.ts.map +1 -0
  8. package/dist/includes/sizes.js +30 -0
  9. package/dist/includes/sizes.js.map +1 -0
  10. package/dist/includes/vscode-select/styles.d.ts.map +1 -1
  11. package/dist/includes/vscode-select/styles.js +12 -14
  12. package/dist/includes/vscode-select/styles.js.map +1 -1
  13. package/dist/vscode-button/vscode-button.styles.js +4 -4
  14. package/dist/vscode-button/vscode-button.styles.js.map +1 -1
  15. package/dist/vscode-checkbox/vscode-checkbox.js +1 -1
  16. package/dist/vscode-checkbox/vscode-checkbox.js.map +1 -1
  17. package/dist/vscode-collapsible/vscode-collapsible.d.ts +1 -1
  18. package/dist/vscode-collapsible/vscode-collapsible.d.ts.map +1 -1
  19. package/dist/vscode-collapsible/vscode-collapsible.js +5 -3
  20. package/dist/vscode-collapsible/vscode-collapsible.js.map +1 -1
  21. package/dist/vscode-icon/vscode-icon.js +1 -1
  22. package/dist/vscode-icon/vscode-icon.js.map +1 -1
  23. package/dist/vscode-multi-select/vscode-multi-select.js +1 -1
  24. package/dist/vscode-multi-select/vscode-multi-select.js.map +1 -1
  25. package/dist/vscode-radio/vscode-radio.js +1 -1
  26. package/dist/vscode-radio/vscode-radio.js.map +1 -1
  27. package/dist/vscode-single-select/vscode-single-select.js +1 -1
  28. package/dist/vscode-single-select/vscode-single-select.js.map +1 -1
  29. package/dist/vscode-table/ColumnResizeController.d.ts +4 -3
  30. package/dist/vscode-table/ColumnResizeController.d.ts.map +1 -1
  31. package/dist/vscode-table/ColumnResizeController.js +10 -5
  32. package/dist/vscode-table/ColumnResizeController.js.map +1 -1
  33. package/dist/vscode-table/calculations.d.ts +2 -12
  34. package/dist/vscode-table/calculations.d.ts.map +1 -1
  35. package/dist/vscode-table/calculations.js +4 -32
  36. package/dist/vscode-table/calculations.js.map +1 -1
  37. package/dist/vscode-table/vscode-table.d.ts +2 -0
  38. package/dist/vscode-table/vscode-table.d.ts.map +1 -1
  39. package/dist/vscode-table/vscode-table.js +55 -28
  40. package/dist/vscode-table/vscode-table.js.map +1 -1
  41. package/dist/vscode-table-header-cell/vscode-table-header-cell.d.ts +12 -1
  42. package/dist/vscode-table-header-cell/vscode-table-header-cell.d.ts.map +1 -1
  43. package/dist/vscode-table-header-cell/vscode-table-header-cell.js +18 -0
  44. package/dist/vscode-table-header-cell/vscode-table-header-cell.js.map +1 -1
  45. package/dist/vscode-textarea/vscode-textarea.styles.js +1 -1
  46. package/dist/vscode-textarea/vscode-textarea.styles.js.map +1 -1
  47. package/dist/vscode-textfield/vscode-textfield.js +1 -1
  48. package/dist/vscode-textfield/vscode-textfield.js.map +1 -1
  49. package/dist/vscode-textfield/vscode-textfield.styles.js +1 -1
  50. package/dist/vscode-textfield/vscode-textfield.styles.js.map +1 -1
  51. package/package.json +1 -2
  52. package/vscode.css-custom-data.json +18 -18
  53. package/vscode.html-custom-data.json +34 -34
@@ -19,7 +19,7 @@ export default [
19
19
  .combobox-face {
20
20
  background-color: var(--vscode-settings-dropdownBackground, #313131);
21
21
  border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);
22
- border-radius: 2px;
22
+ border-radius: 4px;
23
23
  border-style: solid;
24
24
  border-width: 1px;
25
25
  box-sizing: border-box;
@@ -86,10 +86,16 @@ export default [
86
86
  :host(:focus) .combobox-face,
87
87
  :host([focused]) .select-face,
88
88
  :host([focused]) .combobox-face {
89
- border-color: var(--vscode-focusBorder, #0078d4);
90
89
  outline: none;
91
90
  }
92
91
 
92
+ :host(:focus:not([open])) .select-face,
93
+ :host(:focus:not([open])) .combobox-face,
94
+ :host([focused]:not([open])) .select-face,
95
+ :host([focused]:not([open])) .combobox-face {
96
+ border-color: var(--vscode-focusBorder, #0078d4);
97
+ }
98
+
93
99
  .combobox-input {
94
100
  background-color: transparent;
95
101
  box-sizing: border-box;
@@ -161,16 +167,14 @@ export default [
161
167
  .dropdown {
162
168
  background-color: var(--vscode-settings-dropdownBackground, #313131);
163
169
  border-color: var(--vscode-settings-dropdownListBorder, #454545);
164
- border-radius: 0 0 3px 3px;
170
+ border-radius: 4px;
165
171
  border-style: solid;
166
172
  border-width: 1px;
167
173
  bottom: unset;
174
+ box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
168
175
  box-sizing: border-box;
169
176
  display: none;
170
- padding-bottom: 2px;
171
- padding-left: 0;
172
- padding-right: 0;
173
- padding-top: 0;
177
+ padding: 0;
174
178
  right: unset;
175
179
  }
176
180
 
@@ -179,22 +183,16 @@ export default [
179
183
  }
180
184
 
181
185
  :host([position='above']) .dropdown {
182
- border-radius: 3px 3px 0 0;
183
186
  bottom: 26px;
184
187
  padding-bottom: 0;
185
188
  padding-top: 2px;
186
189
  top: unset;
187
190
  }
188
191
 
189
- :host(:focus) .dropdown,
190
- :host([focused]) .dropdown {
191
- border-color: var(--vscode-focusBorder, #0078d4);
192
- }
193
-
194
192
  .scrollable {
195
193
  display: block;
196
194
  max-height: 222px;
197
- margin: 1px;
195
+ margin: 0;
198
196
  outline: none;
199
197
  overflow: hidden;
200
198
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ZF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n padding-right: 20px;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n align-items: center;\n background-color: transparent;\n border: 0;\n border-radius: 2px;\n box-sizing: content-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n height: 16px;\n justify-content: center;\n margin: 1px 1px 0 0;\n padding: 3px;\n width: 22px;\n }\n\n .combobox-button:hover,\n .combobox-button:focus-visible {\n background-color: var(\n --vscode-toolbar-hoverBackground,\n rgba(90, 93, 94, 0.31)\n );\n outline-style: dashed;\n outline-color: var(--vscode-toolbar-hoverOutline, transparent);\n }\n\n .combobox-button:focus-visible {\n outline: none;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n width: 14px;\n }\n\n .select-face .icon {\n position: absolute;\n right: 6px;\n top: 5px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n bottom: unset;\n box-sizing: border-box;\n display: none;\n padding-bottom: 2px;\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n right: unset;\n }\n\n .dropdown.open {\n display: block;\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: unset;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .scrollable {\n display: block;\n max-height: 222px;\n margin: 1px;\n outline: none;\n overflow: hidden;\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .option {\n box-sizing: border-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 22px;\n line-height: 20px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n outline-color: transparent;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .option.single-select {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .option.multi-select {\n align-items: center;\n display: flex;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n outline-style: dotted;\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-width: 1px;\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n outline-style: solid;\n outline-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n .placeholder {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .placeholder span {\n font-weight: bold;\n }\n\n .placeholder:not(.disabled):hover {\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-style: dashed;\n }\n\n .option-label {\n display: block;\n overflow: hidden;\n pointer-events: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n outline-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n align-items: center;\n background-color: var(--vscode-checkbox-background, #313131);\n border-radius: 2px;\n border: 1px solid var(--vscode-checkbox-border);\n box-sizing: border-box;\n color: var(--vscode-checkbox-foreground);\n display: flex;\n flex-basis: 15px;\n flex-shrink: 0;\n height: 15px;\n justify-content: center;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 15px;\n }\n\n .checkbox-icon svg {\n display: none;\n height: 13px;\n width: 13px;\n }\n\n .checkbox-icon.checked svg {\n display: block;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwZF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 4px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n padding-right: 20px;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n outline: none;\n }\n\n :host(:focus:not([open])) .select-face,\n :host(:focus:not([open])) .combobox-face,\n :host([focused]:not([open])) .select-face,\n :host([focused]:not([open])) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n align-items: center;\n background-color: transparent;\n border: 0;\n border-radius: 2px;\n box-sizing: content-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n height: 16px;\n justify-content: center;\n margin: 1px 1px 0 0;\n padding: 3px;\n width: 22px;\n }\n\n .combobox-button:hover,\n .combobox-button:focus-visible {\n background-color: var(\n --vscode-toolbar-hoverBackground,\n rgba(90, 93, 94, 0.31)\n );\n outline-style: dashed;\n outline-color: var(--vscode-toolbar-hoverOutline, transparent);\n }\n\n .combobox-button:focus-visible {\n outline: none;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n width: 14px;\n }\n\n .select-face .icon {\n position: absolute;\n right: 6px;\n top: 5px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 4px;\n border-style: solid;\n border-width: 1px;\n bottom: unset;\n box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));\n box-sizing: border-box;\n display: none;\n padding: 0;\n right: unset;\n }\n\n .dropdown.open {\n display: block;\n }\n\n :host([position='above']) .dropdown {\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: unset;\n }\n\n .scrollable {\n display: block;\n max-height: 222px;\n margin: 0;\n outline: none;\n overflow: hidden;\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .option {\n box-sizing: border-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 22px;\n line-height: 20px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n outline-color: transparent;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .option.single-select {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .option.multi-select {\n align-items: center;\n display: flex;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n outline-style: dotted;\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-width: 1px;\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n outline-style: solid;\n outline-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n .placeholder {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .placeholder span {\n font-weight: bold;\n }\n\n .placeholder:not(.disabled):hover {\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-style: dashed;\n }\n\n .option-label {\n display: block;\n overflow: hidden;\n pointer-events: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n outline-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n align-items: center;\n background-color: var(--vscode-checkbox-background, #313131);\n border-radius: 2px;\n border: 1px solid var(--vscode-checkbox-border);\n box-sizing: border-box;\n color: var(--vscode-checkbox-foreground);\n display: flex;\n flex-basis: 15px;\n flex-shrink: 0;\n height: 15px;\n justify-content: center;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 15px;\n }\n\n .checkbox-icon svg {\n display: none;\n height: 13px;\n width: 13px;\n }\n\n .checkbox-icon.checked svg {\n display: block;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
@@ -19,15 +19,15 @@ const styles = [
19
19
  .base {
20
20
  align-items: center;
21
21
  background-color: var(--vscode-button-background, #0078d4);
22
- border-bottom-left-radius: var(--vsc-border-left-radius, 2px);
23
- border-bottom-right-radius: var(--vsc-border-right-radius, 2px);
22
+ border-bottom-left-radius: var(--vsc-border-left-radius, 4px);
23
+ border-bottom-right-radius: var(--vsc-border-right-radius, 4px);
24
24
  border-bottom-width: 1px;
25
25
  border-color: var(--vscode-button-border, transparent);
26
26
  border-left-width: var(--vsc-border-left-width, 1px);
27
27
  border-right-width: var(--vsc-border-right-width, 1px);
28
28
  border-style: solid;
29
- border-top-left-radius: var(--vsc-border-left-radius, 2px);
30
- border-top-right-radius: var(--vsc-border-right-radius, 2px);
29
+ border-top-left-radius: var(--vsc-border-left-radius, 4px);
30
+ border-top-right-radius: var(--vsc-border-right-radius, 4px);
31
31
  border-top-width: 1px;
32
32
  box-sizing: border-box;
33
33
  color: var(--vscode-button-foreground, #ffffff);
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-button.styles.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAkB,SAAS,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAE3D,MAAM,gBAAgB,GAAG,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA4B0C,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4J5D;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup, unsafeCSS} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport {getDefaultFontStack} from '../includes/helpers.js';\n\nconst defaultFontStack = unsafeCSS(getDefaultFontStack());\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n cursor: pointer;\n display: inline-block;\n width: auto;\n }\n\n :host([block]) {\n display: block;\n width: 100%;\n }\n\n .base {\n align-items: center;\n background-color: var(--vscode-button-background, #0078d4);\n border-bottom-left-radius: var(--vsc-border-left-radius, 2px);\n border-bottom-right-radius: var(--vsc-border-right-radius, 2px);\n border-bottom-width: 1px;\n border-color: var(--vscode-button-border, transparent);\n border-left-width: var(--vsc-border-left-width, 1px);\n border-right-width: var(--vsc-border-right-width, 1px);\n border-style: solid;\n border-top-left-radius: var(--vsc-border-left-radius, 2px);\n border-top-right-radius: var(--vsc-border-right-radius, 2px);\n border-top-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-button-foreground, #ffffff);\n display: flex;\n font-family: var(--vscode-font-family, ${defaultFontStack});\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 100%;\n justify-content: center;\n line-height: 22px;\n overflow: hidden;\n padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px))\n 1px 13px;\n position: relative;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n }\n\n :host([block]) .base {\n min-height: 28px;\n text-align: center;\n width: 100%;\n }\n\n .base:after {\n background-color: var(\n --vscode-button-separator,\n rgba(255, 255, 255, 0.4)\n );\n content: var(--vsc-base-after-content);\n display: var(--vsc-divider-display, none);\n position: absolute;\n right: 0;\n top: 4px;\n bottom: 4px;\n width: 1px;\n }\n\n :host([secondary]) .base:after {\n background-color: var(--vscode-button-secondaryForeground, #cccccc);\n opacity: 0.4;\n }\n\n :host([secondary]) .base {\n color: var(--vscode-button-secondaryForeground, #cccccc);\n background-color: var(--vscode-button-secondaryBackground, #313131);\n border-color: var(\n --vscode-button-border,\n var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07))\n );\n }\n\n :host([disabled]) {\n cursor: default;\n opacity: 0.4;\n pointer-events: none;\n }\n\n :host(:hover) .base {\n background-color: var(--vscode-button-hoverBackground, #026ec1);\n }\n\n :host([disabled]:hover) .base {\n background-color: var(--vscode-button-background, #0078d4);\n }\n\n :host([secondary]:hover) .base {\n background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c);\n }\n\n :host([secondary][disabled]:hover) .base {\n background-color: var(--vscode-button-secondaryBackground, #313131);\n }\n\n :host(:focus),\n :host(:active) {\n outline: none;\n }\n\n :host(:focus) .base {\n background-color: var(--vscode-button-hoverBackground, #026ec1);\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: 2px;\n }\n\n :host([disabled]:focus) .base {\n background-color: var(--vscode-button-background, #0078d4);\n outline: 0;\n }\n\n :host([secondary]:focus) .base {\n background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c);\n }\n\n :host([secondary][disabled]:focus) .base {\n background-color: var(--vscode-button-secondaryBackground, #313131);\n }\n\n ::slotted(*) {\n display: inline-block;\n margin-left: 4px;\n margin-right: 4px;\n }\n\n ::slotted(*:first-child) {\n margin-left: 0;\n }\n\n ::slotted(*:last-child) {\n margin-right: 0;\n }\n\n ::slotted(vscode-icon) {\n color: inherit;\n }\n\n .content {\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n padding: 1px 13px;\n }\n\n :host(:empty) .base,\n .base.icon-only {\n min-height: 24px;\n min-width: 26px;\n padding: 1px 4px;\n }\n\n slot {\n align-items: center;\n display: flex;\n height: 100%;\n }\n\n .has-content-before slot[name='content-before'] {\n margin-right: 4px;\n }\n\n .has-content-after slot[name='content-after'] {\n margin-left: 4px;\n }\n\n .icon,\n .icon-after {\n color: inherit;\n display: block;\n }\n\n :host(:not(:empty)) .icon {\n margin-right: 3px;\n }\n\n :host(:not(:empty)) .icon-after,\n :host([icon]) .icon-after {\n margin-left: 3px;\n }\n `,\n];\n\nexport default styles;\n"]}
1
+ {"version":3,"file":"vscode-button.styles.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAkB,SAAS,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAE3D,MAAM,gBAAgB,GAAG,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA4B0C,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4J5D;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup, unsafeCSS} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport {getDefaultFontStack} from '../includes/helpers.js';\n\nconst defaultFontStack = unsafeCSS(getDefaultFontStack());\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n cursor: pointer;\n display: inline-block;\n width: auto;\n }\n\n :host([block]) {\n display: block;\n width: 100%;\n }\n\n .base {\n align-items: center;\n background-color: var(--vscode-button-background, #0078d4);\n border-bottom-left-radius: var(--vsc-border-left-radius, 4px);\n border-bottom-right-radius: var(--vsc-border-right-radius, 4px);\n border-bottom-width: 1px;\n border-color: var(--vscode-button-border, transparent);\n border-left-width: var(--vsc-border-left-width, 1px);\n border-right-width: var(--vsc-border-right-width, 1px);\n border-style: solid;\n border-top-left-radius: var(--vsc-border-left-radius, 4px);\n border-top-right-radius: var(--vsc-border-right-radius, 4px);\n border-top-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-button-foreground, #ffffff);\n display: flex;\n font-family: var(--vscode-font-family, ${defaultFontStack});\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 100%;\n justify-content: center;\n line-height: 22px;\n overflow: hidden;\n padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px))\n 1px 13px;\n position: relative;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n }\n\n :host([block]) .base {\n min-height: 28px;\n text-align: center;\n width: 100%;\n }\n\n .base:after {\n background-color: var(\n --vscode-button-separator,\n rgba(255, 255, 255, 0.4)\n );\n content: var(--vsc-base-after-content);\n display: var(--vsc-divider-display, none);\n position: absolute;\n right: 0;\n top: 4px;\n bottom: 4px;\n width: 1px;\n }\n\n :host([secondary]) .base:after {\n background-color: var(--vscode-button-secondaryForeground, #cccccc);\n opacity: 0.4;\n }\n\n :host([secondary]) .base {\n color: var(--vscode-button-secondaryForeground, #cccccc);\n background-color: var(--vscode-button-secondaryBackground, #313131);\n border-color: var(\n --vscode-button-border,\n var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07))\n );\n }\n\n :host([disabled]) {\n cursor: default;\n opacity: 0.4;\n pointer-events: none;\n }\n\n :host(:hover) .base {\n background-color: var(--vscode-button-hoverBackground, #026ec1);\n }\n\n :host([disabled]:hover) .base {\n background-color: var(--vscode-button-background, #0078d4);\n }\n\n :host([secondary]:hover) .base {\n background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c);\n }\n\n :host([secondary][disabled]:hover) .base {\n background-color: var(--vscode-button-secondaryBackground, #313131);\n }\n\n :host(:focus),\n :host(:active) {\n outline: none;\n }\n\n :host(:focus) .base {\n background-color: var(--vscode-button-hoverBackground, #026ec1);\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: 2px;\n }\n\n :host([disabled]:focus) .base {\n background-color: var(--vscode-button-background, #0078d4);\n outline: 0;\n }\n\n :host([secondary]:focus) .base {\n background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c);\n }\n\n :host([secondary][disabled]:focus) .base {\n background-color: var(--vscode-button-secondaryBackground, #313131);\n }\n\n ::slotted(*) {\n display: inline-block;\n margin-left: 4px;\n margin-right: 4px;\n }\n\n ::slotted(*:first-child) {\n margin-left: 0;\n }\n\n ::slotted(*:last-child) {\n margin-right: 0;\n }\n\n ::slotted(vscode-icon) {\n color: inherit;\n }\n\n .content {\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n padding: 1px 13px;\n }\n\n :host(:empty) .base,\n .base.icon-only {\n min-height: 24px;\n min-width: 26px;\n padding: 1px 4px;\n }\n\n slot {\n align-items: center;\n display: flex;\n height: 100%;\n }\n\n .has-content-before slot[name='content-before'] {\n margin-right: 4px;\n }\n\n .has-content-after slot[name='content-after'] {\n margin-left: 4px;\n }\n\n .icon,\n .icon-after {\n color: inherit;\n display: block;\n }\n\n :host(:not(:empty)) .icon {\n margin-right: 3px;\n }\n\n :host(:not(:empty)) .icon-after,\n :host([icon]) .icon-after {\n margin-left: 3px;\n }\n `,\n];\n\nexport default styles;\n"]}
@@ -233,7 +233,7 @@ let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(F
233
233
  role=${ifDefined(this.toggle ? 'switch' : undefined)}
234
234
  aria-checked=${ifDefined(this.toggle ? (this.checked ? 'true' : 'false') : undefined)}
235
235
  value=${this.value}
236
- >
236
+ />
237
237
  <div class=${iconClasses}>${iconContent}</div>
238
238
  <label for="input" class="label" @click=${this._handleClick}>
239
239
  <span class=${labelInnerClasses}>
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-checkbox.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {FormButtonWidgetBase} from '../includes/form-button-widget/FormButtonWidgetBase.js';\nimport {LabelledCheckboxOrRadioMixin} from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';\nimport styles from './vscode-checkbox.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Allows users to select one or more options from a set. When participating in a form, it supports\n * the `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`\n * property.\n *\n * @tag vscode-checkbox\n *\n * @attr name - Name which is used as a variable name in the data of the form-container.\n * @attr label - Attribute pair of the `label` property.\n * @prop label - Label text. It is only applied if component's innerHTML doesn't contain any text.\n *\n * @fires {Event} change - Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the `CheckboxGroup`.\n * @fires {Event} invalid - Dispatched when the element is invalid and `checkValidity()` has been called or the form containing this element is submitted.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-checkboxBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxForeground=#cccccc]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n */\n@customElement('vscode-checkbox')\nexport class VscodeCheckbox\n extends LabelledCheckboxOrRadioMixin(FormButtonWidgetBase)\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Automatically focus on the element when the page loads.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n */\n @property({type: Boolean, reflect: true})\n override autofocus = false;\n\n @property({type: Boolean, reflect: true})\n set checked(newVal: boolean) {\n this._checked = newVal;\n this._manageRequired();\n this.requestUpdate();\n }\n get checked(): boolean {\n return this._checked;\n }\n\n private _checked = false;\n\n /**\n * The element's initial checked state, which will be restored when the containing form is reset.\n */\n @property({type: Boolean, reflect: true, attribute: 'default-checked'})\n defaultChecked = false;\n\n @property({type: Boolean, reflect: true})\n invalid = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n /**\n * When true, renders as a toggle switch instead of a checkbox.\n */\n @property({type: Boolean, reflect: true})\n toggle = false;\n\n /**\n * Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:\n *\n * - If it is unchecked, the value will not be submitted.\n * - If it is checked but the value is not set, `on` will be submitted.\n * - If it is checked and value is set, the value will be submitted.\n */\n @property()\n value = '';\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n indeterminate = false;\n\n @property({type: Boolean, reflect: true})\n set required(newVal: boolean) {\n this._required = newVal;\n this._manageRequired();\n this.requestUpdate();\n }\n get required() {\n return this._required;\n }\n private _required = false;\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** @internal */\n @property()\n type = 'checkbox';\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate(): boolean {\n return this._internals.willValidate;\n }\n\n /**\n * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n * If the element's value is invalid, an invalid event is triggered on the element.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)\n */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /**\n * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n * If the element's value is invalid, an invalid event is triggered on the element, and the\n * browser displays an error message to the user.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)\n */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('keydown', this._handleKeyDown);\n\n this.updateComplete.then(() => {\n this._manageRequired();\n this._setActualFormValue();\n });\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('keydown', this._handleKeyDown);\n }\n\n /** @internal */\n formResetCallback(): void {\n this.checked = this.defaultChecked;\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: string,\n _mode: 'restore' | 'autocomplete'\n ): void {\n if (state) {\n this.checked = true;\n }\n }\n\n @query('#input')\n private _inputEl!: HTMLInputElement;\n\n private _internals: ElementInternals;\n\n // Sets the value of the control according to the native checkbox behavior.\n // - If the checkbox is unchecked, the value will be null, so the control will\n // excluded from the form.\n // - If the control is checked but the value is not set, the value will be \"on\".\n // - If the control is checked and value is set, the value won't be changed.\n private _setActualFormValue() {\n let actualValue: string | null = '';\n\n if (this.checked) {\n actualValue = !this.value ? 'on' : this.value;\n } else {\n actualValue = null;\n }\n\n this._internals.setFormValue(actualValue);\n }\n\n private _toggleState() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this._setActualFormValue();\n this._manageRequired();\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n private _handleClick = (ev: MouseEvent): void => {\n ev.preventDefault();\n\n if (this.disabled) {\n return;\n }\n\n this._toggleState();\n };\n\n private _handleKeyDown = (ev: KeyboardEvent): void => {\n if (!this.disabled && (ev.key === 'Enter' || ev.key === ' ')) {\n ev.preventDefault();\n\n if (ev.key === ' ') {\n this._toggleState();\n }\n\n if (ev.key === 'Enter') {\n this._internals.form?.requestSubmit();\n }\n }\n };\n\n private _manageRequired() {\n if (!this.checked && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please check this box if you want to proceed.',\n this._inputEl ?? undefined\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n override render(): TemplateResult {\n const iconClasses = classMap({\n icon: true,\n checked: this.checked,\n indeterminate: this.indeterminate,\n });\n const labelInnerClasses = classMap({\n 'label-inner': true,\n });\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"check-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z\"\n />\n </svg>`;\n const check = this.checked && !this.indeterminate ? icon : nothing;\n const indeterminate = this.indeterminate\n ? html`<span class=\"indeterminate-icon\"></span>`\n : nothing;\n\n const iconContent = this.toggle\n ? html`<span class=\"thumb\"></span>`\n : html`${indeterminate}${check}`;\n\n return html`\n <div class=\"wrapper\">\n <input\n ?autofocus=${this.autofocus}\n id=\"input\"\n class=\"checkbox\"\n type=\"checkbox\"\n ?checked=${this.checked}\n role=${ifDefined(this.toggle ? 'switch' : undefined)}\n aria-checked=${ifDefined(\n this.toggle ? (this.checked ? 'true' : 'false') : undefined\n )}\n value=${this.value}\n >\n <div class=${iconClasses}>${iconContent}</div>\n <label for=\"input\" class=\"label\" @click=${this._handleClick}>\n <span class=${labelInnerClasses}>\n ${this._renderLabelAttribute()}\n <slot @slotchange=${this._handleSlotChange}></slot>\n </span>\n </label>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-checkbox': VscodeCheckbox;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-checkbox.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {FormButtonWidgetBase} from '../includes/form-button-widget/FormButtonWidgetBase.js';\nimport {LabelledCheckboxOrRadioMixin} from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';\nimport styles from './vscode-checkbox.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Allows users to select one or more options from a set. When participating in a form, it supports\n * the `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`\n * property.\n *\n * @tag vscode-checkbox\n *\n * @attr name - Name which is used as a variable name in the data of the form-container.\n * @attr label - Attribute pair of the `label` property.\n * @prop label - Label text. It is only applied if component's innerHTML doesn't contain any text.\n *\n * @fires {Event} change - Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the `CheckboxGroup`.\n * @fires {Event} invalid - Dispatched when the element is invalid and `checkValidity()` has been called or the form containing this element is submitted.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-checkboxBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxForeground=#cccccc]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n */\n@customElement('vscode-checkbox')\nexport class VscodeCheckbox\n extends LabelledCheckboxOrRadioMixin(FormButtonWidgetBase)\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Automatically focus on the element when the page loads.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n */\n @property({type: Boolean, reflect: true})\n override autofocus = false;\n\n @property({type: Boolean, reflect: true})\n set checked(newVal: boolean) {\n this._checked = newVal;\n this._manageRequired();\n this.requestUpdate();\n }\n get checked(): boolean {\n return this._checked;\n }\n\n private _checked = false;\n\n /**\n * The element's initial checked state, which will be restored when the containing form is reset.\n */\n @property({type: Boolean, reflect: true, attribute: 'default-checked'})\n defaultChecked = false;\n\n @property({type: Boolean, reflect: true})\n invalid = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n /**\n * When true, renders as a toggle switch instead of a checkbox.\n */\n @property({type: Boolean, reflect: true})\n toggle = false;\n\n /**\n * Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:\n *\n * - If it is unchecked, the value will not be submitted.\n * - If it is checked but the value is not set, `on` will be submitted.\n * - If it is checked and value is set, the value will be submitted.\n */\n @property()\n value = '';\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n indeterminate = false;\n\n @property({type: Boolean, reflect: true})\n set required(newVal: boolean) {\n this._required = newVal;\n this._manageRequired();\n this.requestUpdate();\n }\n get required() {\n return this._required;\n }\n private _required = false;\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** @internal */\n @property()\n type = 'checkbox';\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate(): boolean {\n return this._internals.willValidate;\n }\n\n /**\n * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n * If the element's value is invalid, an invalid event is triggered on the element.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)\n */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /**\n * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n * If the element's value is invalid, an invalid event is triggered on the element, and the\n * browser displays an error message to the user.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)\n */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('keydown', this._handleKeyDown);\n\n this.updateComplete.then(() => {\n this._manageRequired();\n this._setActualFormValue();\n });\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('keydown', this._handleKeyDown);\n }\n\n /** @internal */\n formResetCallback(): void {\n this.checked = this.defaultChecked;\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: string,\n _mode: 'restore' | 'autocomplete'\n ): void {\n if (state) {\n this.checked = true;\n }\n }\n\n @query('#input')\n private _inputEl!: HTMLInputElement;\n\n private _internals: ElementInternals;\n\n // Sets the value of the control according to the native checkbox behavior.\n // - If the checkbox is unchecked, the value will be null, so the control will\n // excluded from the form.\n // - If the control is checked but the value is not set, the value will be \"on\".\n // - If the control is checked and value is set, the value won't be changed.\n private _setActualFormValue() {\n let actualValue: string | null = '';\n\n if (this.checked) {\n actualValue = !this.value ? 'on' : this.value;\n } else {\n actualValue = null;\n }\n\n this._internals.setFormValue(actualValue);\n }\n\n private _toggleState() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this._setActualFormValue();\n this._manageRequired();\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n private _handleClick = (ev: MouseEvent): void => {\n ev.preventDefault();\n\n if (this.disabled) {\n return;\n }\n\n this._toggleState();\n };\n\n private _handleKeyDown = (ev: KeyboardEvent): void => {\n if (!this.disabled && (ev.key === 'Enter' || ev.key === ' ')) {\n ev.preventDefault();\n\n if (ev.key === ' ') {\n this._toggleState();\n }\n\n if (ev.key === 'Enter') {\n this._internals.form?.requestSubmit();\n }\n }\n };\n\n private _manageRequired() {\n if (!this.checked && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please check this box if you want to proceed.',\n this._inputEl ?? undefined\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n override render(): TemplateResult {\n const iconClasses = classMap({\n icon: true,\n checked: this.checked,\n indeterminate: this.indeterminate,\n });\n const labelInnerClasses = classMap({\n 'label-inner': true,\n });\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"check-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z\"\n />\n </svg>`;\n const check = this.checked && !this.indeterminate ? icon : nothing;\n const indeterminate = this.indeterminate\n ? html`<span class=\"indeterminate-icon\"></span>`\n : nothing;\n\n const iconContent = this.toggle\n ? html`<span class=\"thumb\"></span>`\n : html`${indeterminate}${check}`;\n\n return html`\n <div class=\"wrapper\">\n <input\n ?autofocus=${this.autofocus}\n id=\"input\"\n class=\"checkbox\"\n type=\"checkbox\"\n ?checked=${this.checked}\n role=${ifDefined(this.toggle ? 'switch' : undefined)}\n aria-checked=${ifDefined(\n this.toggle ? (this.checked ? 'true' : 'false') : undefined\n )}\n value=${this.value}\n />\n <div class=${iconClasses}>${iconContent}</div>\n <label for=\"input\" class=\"label\" @click=${this._handleClick}>\n <span class=${labelInnerClasses}>\n ${this._renderLabelAttribute()}\n <slot @slotchange=${this._handleSlotChange}></slot>\n </span>\n </label>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-checkbox': VscodeCheckbox;\n }\n}\n"]}
@@ -48,7 +48,7 @@ export declare class VscodeCollapsible extends VscElement {
48
48
  private _emitToggleEvent;
49
49
  private _onHeaderClick;
50
50
  private _onHeaderKeyDown;
51
- private _onActionClick;
51
+ private _onHeaderSlotClick;
52
52
  render(): TemplateResult;
53
53
  }
54
54
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,+BAAU;IAEhC;;;;OAIG;IAMH,uBAAuB,UAAS;IAEhC;;;;;OAKG;IAEM,KAAK,EAAE,MAAM,CAAM;IAE5B;;OAEG;IAEH,OAAO,SAAM;IAEb,yCAAyC;IAEzC,WAAW,SAAM;IAGjB,IAAI,UAAS;IAEb,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAIb,MAAM,IAAI,cAAc;CAkDlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;IAED,UAAU,2BAA2B;QACnC,wBAAwB,EAAE,yBAAyB,CAAC;KACrD;CACF"}
1
+ {"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,+BAAU;IAEhC;;;;OAIG;IAMH,uBAAuB,UAAS;IAEhC;;;;;OAKG;IAEM,KAAK,EAAE,MAAM,CAAM;IAE5B;;OAEG;IAEH,OAAO,SAAM;IAEb,yCAAyC;IAEzC,WAAW,SAAM;IAGjB,IAAI,UAAS;IAEb,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,kBAAkB;IAIjB,MAAM,IAAI,cAAc;CAoDlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;IAED,UAAU,2BAA2B;QACnC,wBAAwB,EAAE,yBAAyB,CAAC;KACrD;CACF"}
@@ -68,7 +68,7 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
68
68
  this._emitToggleEvent();
69
69
  }
70
70
  }
71
- _onActionClick(event) {
71
+ _onHeaderSlotClick(event) {
72
72
  event.stopPropagation();
73
73
  }
74
74
  render() {
@@ -107,9 +107,11 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
107
107
  <h3 class="title">${heading}${descriptionMarkup}</h3>
108
108
  <div class="header-slots">
109
109
  <div class=${classMap(actionsClasses)}>
110
- <slot name="actions" @click=${this._onActionClick}></slot>
110
+ <slot name="actions" @click=${this._onHeaderSlotClick}></slot>
111
+ </div>
112
+ <div class="decorations">
113
+ <slot name="decorations" @click=${this._onHeaderSlotClick}></slot>
111
114
  </div>
112
- <div class="decorations"><slot name="decorations"></slot></div>
113
115
  </div>
114
116
  </div>
115
117
  <div class="collapsible-body" part="body">
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-collapsible.styles.js';\n\nexport type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;\n\n/**\n * Allows users to reveal or hide related content on a page.\n *\n * @tag vscode-collapsible\n *\n * @slot - Main content.\n * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n * @slot decorations - The elements placed in the decorations slot are always visible.\n *\n * @fires {VscCollapsibleToggleEvent} vsc-collapsible-toggle - Dispatched when the content visibility is changed.\n *\n * @cssprop [--vscode-sideBar-background=#181818] - Background color\n * @cssprop [--vscode-focusBorder=#0078d4] - Focus border color\n * @cssprop [--vscode-font-family=sans-serif] - Header font family\n * @cssprop [--vscode-sideBarSectionHeader-background=#181818] - Header background\n * @cssprop [--vscode-icon-foreground=#cccccc] - Arrow icon color\n * @cssprop [--vscode-sideBarTitle-foreground=#cccccc] - Header font color\n *\n * @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.\n */\n@customElement('vscode-collapsible')\nexport class VscodeCollapsible extends VscElement {\n static override styles = styles;\n\n /**\n * When enabled, header actions are always visible; otherwise, they appear only when the cursor\n * hovers over the component. Actions are shown only when the Collapsible component is open. This\n * property is designed to use the `workbench.view.alwaysShowHeaderActions` setting.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'always-show-header-actions',\n })\n alwaysShowHeaderActions = false;\n\n /**\n * Component heading text\n *\n * @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native\n * tooltip on the component. Use the `heading` property instead.\n */\n @property({type: String})\n override title: string = '';\n\n /**\n * Heading text.\n */\n @property()\n heading = '';\n\n /** Less prominent text in the header. */\n @property()\n description = '';\n\n @property({type: Boolean, reflect: true})\n open = false;\n\n private _emitToggleEvent() {\n this.dispatchEvent(\n new CustomEvent('vsc-collapsible-toggle', {\n detail: {open: this.open},\n }) as VscCollapsibleToggleEvent\n );\n }\n\n private _onHeaderClick() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private _onHeaderKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n }\n\n private _onActionClick(event: PointerEvent) {\n event.stopPropagation();\n }\n\n override render(): TemplateResult {\n const classes = {collapsible: true, open: this.open};\n const actionsClasses = {\n actions: true,\n 'always-visible': this.alwaysShowHeaderActions,\n };\n const heading = this.heading ? this.heading : this.title;\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"header-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z\"\n />\n </svg>`;\n\n const descriptionMarkup = this.description\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing;\n\n return html`\n <div class=${classMap(classes)}>\n <div\n class=\"collapsible-header\"\n tabindex=\"0\"\n @click=${this._onHeaderClick}\n @keydown=${this._onHeaderKeyDown}\n >\n ${icon}\n <h3 class=\"title\">${heading}${descriptionMarkup}</h3>\n <div class=\"header-slots\">\n <div class=${classMap(actionsClasses)}>\n <slot name=\"actions\" @click=${this._onActionClick}></slot>\n </div>\n <div class=\"decorations\"><slot name=\"decorations\"></slot></div>\n </div>\n </div>\n <div class=\"collapsible-body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-collapsible': VscodeCollapsible;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-collapsible-toggle': VscCollapsibleToggleEvent;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-collapsible.styles.js';\n\nexport type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;\n\n/**\n * Allows users to reveal or hide related content on a page.\n *\n * @tag vscode-collapsible\n *\n * @slot - Main content.\n * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n * @slot decorations - The elements placed in the decorations slot are always visible.\n *\n * @fires {VscCollapsibleToggleEvent} vsc-collapsible-toggle - Dispatched when the content visibility is changed.\n *\n * @cssprop [--vscode-sideBar-background=#181818] - Background color\n * @cssprop [--vscode-focusBorder=#0078d4] - Focus border color\n * @cssprop [--vscode-font-family=sans-serif] - Header font family\n * @cssprop [--vscode-sideBarSectionHeader-background=#181818] - Header background\n * @cssprop [--vscode-icon-foreground=#cccccc] - Arrow icon color\n * @cssprop [--vscode-sideBarTitle-foreground=#cccccc] - Header font color\n *\n * @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.\n */\n@customElement('vscode-collapsible')\nexport class VscodeCollapsible extends VscElement {\n static override styles = styles;\n\n /**\n * When enabled, header actions are always visible; otherwise, they appear only when the cursor\n * hovers over the component. Actions are shown only when the Collapsible component is open. This\n * property is designed to use the `workbench.view.alwaysShowHeaderActions` setting.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'always-show-header-actions',\n })\n alwaysShowHeaderActions = false;\n\n /**\n * Component heading text\n *\n * @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native\n * tooltip on the component. Use the `heading` property instead.\n */\n @property({type: String})\n override title: string = '';\n\n /**\n * Heading text.\n */\n @property()\n heading = '';\n\n /** Less prominent text in the header. */\n @property()\n description = '';\n\n @property({type: Boolean, reflect: true})\n open = false;\n\n private _emitToggleEvent() {\n this.dispatchEvent(\n new CustomEvent('vsc-collapsible-toggle', {\n detail: {open: this.open},\n }) as VscCollapsibleToggleEvent\n );\n }\n\n private _onHeaderClick() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private _onHeaderKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n }\n\n private _onHeaderSlotClick(event: PointerEvent) {\n event.stopPropagation();\n }\n\n override render(): TemplateResult {\n const classes = {collapsible: true, open: this.open};\n const actionsClasses = {\n actions: true,\n 'always-visible': this.alwaysShowHeaderActions,\n };\n const heading = this.heading ? this.heading : this.title;\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"header-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z\"\n />\n </svg>`;\n\n const descriptionMarkup = this.description\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing;\n\n return html`\n <div class=${classMap(classes)}>\n <div\n class=\"collapsible-header\"\n tabindex=\"0\"\n @click=${this._onHeaderClick}\n @keydown=${this._onHeaderKeyDown}\n >\n ${icon}\n <h3 class=\"title\">${heading}${descriptionMarkup}</h3>\n <div class=\"header-slots\">\n <div class=${classMap(actionsClasses)}>\n <slot name=\"actions\" @click=${this._onHeaderSlotClick}></slot>\n </div>\n <div class=\"decorations\">\n <slot name=\"decorations\" @click=${this._onHeaderSlotClick}></slot>\n </div>\n </div>\n </div>\n <div class=\"collapsible-body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-collapsible': VscodeCollapsible;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-collapsible-toggle': VscCollapsibleToggleEvent;\n }\n}\n"]}
@@ -110,7 +110,7 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
110
110
  rel="stylesheet"
111
111
  href=${ifDefined(stylesheetHref)}
112
112
  nonce=${ifDefined(nonce)}
113
- >
113
+ />
114
114
  ${wrapped}
115
115
  `;
116
116
  }
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-icon.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-icon.styles.js';\n\n/**\n * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).\n * In \"action-icon\" mode it behaves like a button. In this case, it is\n * recommended that a meaningful label is specified with the `label` property.\n *\n * @tag vscode-icon\n *\n * @cssprop [--vscode-icon-foreground=#cccccc]\n * @cssprop [--vscode-toolbar-hoverBackground=rgba(90, 93, 94, 0.31)] - Hover state background color in `active-icon` mode\n * @cssprop [--vscode-toolbar-activeBackground=rgba(99, 102, 103, 0.31)] - Active state background color in `active-icon` mode\n * @cssprop [--vscode-focusBorder=#0078d4]\n */\n@customElement('vscode-icon')\nexport class VscodeIcon extends VscElement {\n static override styles = styles;\n /**\n * Set a meaningful label in `action-icon` mode for the screen readers\n */\n @property()\n label = '';\n\n /**\n * [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) icon name.\n */\n @property({type: String})\n name = '';\n\n /**\n * Icon size in pixels\n */\n @property({type: Number})\n size = 16;\n\n /**\n * Enable rotation animation\n */\n @property({type: Boolean, reflect: true})\n spin = false;\n\n /**\n * Animation duration in seconds\n */\n @property({type: Number, attribute: 'spin-duration'})\n spinDuration = 1.5;\n\n /**\n * Behaves like a button\n */\n @property({type: Boolean, reflect: true, attribute: 'action-icon'})\n actionIcon = false;\n\n private static stylesheetHref: string | undefined = '';\n\n private static nonce: string | undefined = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const {href, nonce} = this._getStylesheetConfig();\n\n VscodeIcon.stylesheetHref = href;\n VscodeIcon.nonce = nonce;\n }\n\n /**\n * For using web fonts in web components, the font stylesheet must be included\n * twice: on the page and in the web component. This function looks for the\n * font stylesheet on the page and returns the stylesheet URL and the nonce\n * id.\n */\n private _getStylesheetConfig(): {\n href: string | undefined;\n nonce: string | undefined;\n } {\n const linkElement = document.getElementById('vscode-codicon-stylesheet');\n const href = linkElement?.getAttribute('href') || undefined;\n const nonce = linkElement?.nonce || undefined;\n\n if (!linkElement) {\n let msg =\n 'To use the Icon component, the codicons.css file must be included in the page with the id \"vscode-codicon-stylesheet\"! ';\n msg +=\n 'See https://vscode-elements.github.io/components/icon/ for more details.';\n\n this.warn(msg);\n }\n\n return {nonce, href};\n }\n\n private _onButtonClick = (ev: MouseEvent) => {\n this.dispatchEvent(\n new CustomEvent('vsc-click', {detail: {originalEvent: ev}})\n );\n };\n\n override render(): TemplateResult {\n const {stylesheetHref, nonce} = VscodeIcon;\n\n const content = html`<span\n class=${classMap({\n codicon: true,\n ['codicon-' + this.name]: true,\n spin: this.spin,\n })}\n .style=${stylePropertyMap({\n animationDuration: String(this.spinDuration) + 's',\n fontSize: this.size + 'px',\n height: this.size + 'px',\n width: this.size + 'px',\n })}\n ></span>`;\n\n const wrapped = this.actionIcon\n ? html` <button\n class=\"button\"\n @click=${this._onButtonClick}\n aria-label=${this.label}\n >\n ${content}\n </button>`\n : html` <span class=\"icon\" aria-hidden=\"true\" role=\"presentation\"\n >${content}</span\n >`;\n\n return html`\n <link\n rel=\"stylesheet\"\n href=${ifDefined(stylesheetHref)}\n nonce=${ifDefined(nonce)}\n >\n ${wrapped}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-icon': VscodeIcon;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-icon.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-icon.styles.js';\n\n/**\n * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).\n * In \"action-icon\" mode it behaves like a button. In this case, it is\n * recommended that a meaningful label is specified with the `label` property.\n *\n * @tag vscode-icon\n *\n * @cssprop [--vscode-icon-foreground=#cccccc]\n * @cssprop [--vscode-toolbar-hoverBackground=rgba(90, 93, 94, 0.31)] - Hover state background color in `active-icon` mode\n * @cssprop [--vscode-toolbar-activeBackground=rgba(99, 102, 103, 0.31)] - Active state background color in `active-icon` mode\n * @cssprop [--vscode-focusBorder=#0078d4]\n */\n@customElement('vscode-icon')\nexport class VscodeIcon extends VscElement {\n static override styles = styles;\n /**\n * Set a meaningful label in `action-icon` mode for the screen readers\n */\n @property()\n label = '';\n\n /**\n * [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) icon name.\n */\n @property({type: String})\n name = '';\n\n /**\n * Icon size in pixels\n */\n @property({type: Number})\n size = 16;\n\n /**\n * Enable rotation animation\n */\n @property({type: Boolean, reflect: true})\n spin = false;\n\n /**\n * Animation duration in seconds\n */\n @property({type: Number, attribute: 'spin-duration'})\n spinDuration = 1.5;\n\n /**\n * Behaves like a button\n */\n @property({type: Boolean, reflect: true, attribute: 'action-icon'})\n actionIcon = false;\n\n private static stylesheetHref: string | undefined = '';\n\n private static nonce: string | undefined = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const {href, nonce} = this._getStylesheetConfig();\n\n VscodeIcon.stylesheetHref = href;\n VscodeIcon.nonce = nonce;\n }\n\n /**\n * For using web fonts in web components, the font stylesheet must be included\n * twice: on the page and in the web component. This function looks for the\n * font stylesheet on the page and returns the stylesheet URL and the nonce\n * id.\n */\n private _getStylesheetConfig(): {\n href: string | undefined;\n nonce: string | undefined;\n } {\n const linkElement = document.getElementById('vscode-codicon-stylesheet');\n const href = linkElement?.getAttribute('href') || undefined;\n const nonce = linkElement?.nonce || undefined;\n\n if (!linkElement) {\n let msg =\n 'To use the Icon component, the codicons.css file must be included in the page with the id \"vscode-codicon-stylesheet\"! ';\n msg +=\n 'See https://vscode-elements.github.io/components/icon/ for more details.';\n\n this.warn(msg);\n }\n\n return {nonce, href};\n }\n\n private _onButtonClick = (ev: MouseEvent) => {\n this.dispatchEvent(\n new CustomEvent('vsc-click', {detail: {originalEvent: ev}})\n );\n };\n\n override render(): TemplateResult {\n const {stylesheetHref, nonce} = VscodeIcon;\n\n const content = html`<span\n class=${classMap({\n codicon: true,\n ['codicon-' + this.name]: true,\n spin: this.spin,\n })}\n .style=${stylePropertyMap({\n animationDuration: String(this.spinDuration) + 's',\n fontSize: this.size + 'px',\n height: this.size + 'px',\n width: this.size + 'px',\n })}\n ></span>`;\n\n const wrapped = this.actionIcon\n ? html` <button\n class=\"button\"\n @click=${this._onButtonClick}\n aria-label=${this.label}\n >\n ${content}\n </button>`\n : html` <span class=\"icon\" aria-hidden=\"true\" role=\"presentation\"\n >${content}</span\n >`;\n\n return html`\n <link\n rel=\"stylesheet\"\n href=${ifDefined(stylesheetHref)}\n nonce=${ifDefined(nonce)}\n />\n ${wrapped}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-icon': VscodeIcon;\n }\n}\n"]}
@@ -280,7 +280,7 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
280
280
  @input=${this._onComboboxInputInput}
281
281
  @click=${this._onComboboxInputClick}
282
282
  @keydown=${this._onComboboxInputSpaceKeyDown}
283
- >
283
+ />
284
284
  <button
285
285
  aria-label="Open the list of options"
286
286
  class="combobox-button"
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\nexport type VscMultiSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select multiple items from a list of options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-multi-select\n *\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n this._opts.selectedIndexes = val;\n }\n get selectedIndexes(): number[] {\n return this._opts.selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[]) {\n this._opts.multiSelectValue = val;\n\n if (this._opts.selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._opts.multiSelectValue;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /** @internal */\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n selectAll() {\n this._opts.selectAll();\n }\n\n selectNone() {\n this._opts.selectNone();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._opts.multiSelect = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' | 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n protected override _dispatchChangeEvent(): void {\n super._dispatchChangeEvent();\n }\n\n protected override _onFaceClick(): void {\n super._onFaceClick();\n this._opts.activeIndex = 0;\n }\n\n protected override _toggleComboboxDropdown(): void {\n super._toggleComboboxDropdown();\n this._opts.activeIndex = -1;\n }\n\n protected override _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override async _createAndSelectSuggestedOption() {\n super._createAndSelectSuggestedOption();\n const nextIndex = this._createSuggestedOption();\n\n await this.updateComplete;\n\n this.selectedIndexes = [...this.selectedIndexes, nextIndex];\n this._dispatchChangeEvent();\n const opCreateEvent: VscMultiSelectCreateOptionEvent = new CustomEvent(\n 'vsc-multi-select-create-option',\n {detail: {value: this._opts.getOptionByIndex(nextIndex)?.value ?? ''}}\n );\n this.dispatchEvent(opCreateEvent);\n this.open = false;\n this._isPlaceholderOptionActive = false;\n }\n\n //#region event handlers\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this._opts.expandMultiSelection(this._requestedValueToSetLater);\n this._requestedValueToSetLater = this._requestedValueToSetLater.filter(\n (v) => this._opts.findOptionIndex(v) === -1\n );\n }\n }\n\n protected override _onOptionClick = (ev: MouseEvent) => {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const isPlaceholderOption = (optEl as HTMLElement).classList.contains(\n 'placeholder'\n );\n\n if (isPlaceholderOption) {\n this._createAndSelectSuggestedOption();\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n this._opts.toggleOptionSelected(index);\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n };\n\n protected override _onEnterKeyDown(ev: KeyboardEvent): void {\n super._onEnterKeyDown(ev);\n\n if (!this.open) {\n this._opts.filterPattern = '';\n this.open = true;\n } else {\n if (this._isPlaceholderOptionActive) {\n this._createAndSelectSuggestedOption();\n } else {\n this._opts.toggleActiveMultiselectOption();\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n }\n }\n\n private _onMultiAcceptClick(): void {\n this.open = false;\n }\n\n private _onMultiDeselectAllClick(): void {\n this._opts.selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._opts.selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n protected override _onComboboxInputBlur(): void {\n super._onComboboxInputBlur();\n this._opts.filterPattern = '';\n }\n //#endregion\n\n //#region render functions\n private _renderLabel() {\n switch (this._opts.selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\">0 Selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._opts.selectedIndexes.length} Selected</span\n >`;\n }\n }\n\n protected override _renderComboboxFace(): TemplateResult {\n const activeDescendant =\n this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n const expanded = this.open ? 'true' : 'false';\n\n return html`\n <div class=\"combobox-face face\">\n ${this._opts.multiSelect ? this._renderLabel() : nothing}\n <input\n aria-activedescendant=${activeDescendant}\n aria-autocomplete=\"list\"\n aria-controls=\"select-listbox\"\n aria-expanded=${expanded}\n aria-haspopup=\"listbox\"\n aria-label=${ifDefined(this.label)}\n class=\"combobox-input\"\n role=\"combobox\"\n spellcheck=\"false\"\n type=\"text\"\n autocomplete=\"off\"\n .value=${this._opts.filterPattern}\n @focus=${this._onComboboxInputFocus}\n @blur=${this._onComboboxInputBlur}\n @input=${this._onComboboxInputInput}\n @click=${this._onComboboxInputClick}\n @keydown=${this._onComboboxInputSpaceKeyDown}\n >\n <button\n aria-label=\"Open the list of options\"\n class=\"combobox-button\"\n type=\"button\"\n @click=${this._onComboboxButtonClick}\n @keydown=${this._onComboboxButtonKeyDown}\n tabindex=\"-1\"\n >\n ${chevronDownIcon}\n </button>\n </div>\n `;\n }\n\n protected override _renderSelectFace(): TemplateResult {\n const activeDescendant =\n this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n const expanded = this.open ? 'true' : 'false';\n\n return html`\n <div\n aria-activedescendant=${ifDefined(\n this._opts.multiSelect ? undefined : activeDescendant\n )}\n aria-controls=\"select-listbox\"\n aria-expanded=${ifDefined(\n this._opts.multiSelect ? undefined : expanded\n )}\n aria-haspopup=\"listbox\"\n aria-label=${ifDefined(this.label ?? undefined)}\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n .tabIndex=${this.disabled ? -1 : 0}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return this._filteredOptions.length > 0\n ? html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button\n class=\"button-accept\"\n @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `\n : html`${nothing}`;\n }\n\n override render(): TemplateResult {\n return html`\n <div class=\"multi-select\">\n <slot class=\"main-slot\" @slotchange=${this._onSlotChange}></slot>\n ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}\n ${this._renderDropdown()}\n </div>\n `;\n }\n //#endregion\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-multi-select-create-option': VscMultiSelectCreateOptionEvent;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\nexport type VscMultiSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select multiple items from a list of options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-multi-select\n *\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n this._opts.selectedIndexes = val;\n }\n get selectedIndexes(): number[] {\n return this._opts.selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[]) {\n this._opts.multiSelectValue = val;\n\n if (this._opts.selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._opts.multiSelectValue;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /** @internal */\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n selectAll() {\n this._opts.selectAll();\n }\n\n selectNone() {\n this._opts.selectNone();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._opts.multiSelect = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' | 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n protected override _dispatchChangeEvent(): void {\n super._dispatchChangeEvent();\n }\n\n protected override _onFaceClick(): void {\n super._onFaceClick();\n this._opts.activeIndex = 0;\n }\n\n protected override _toggleComboboxDropdown(): void {\n super._toggleComboboxDropdown();\n this._opts.activeIndex = -1;\n }\n\n protected override _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override async _createAndSelectSuggestedOption() {\n super._createAndSelectSuggestedOption();\n const nextIndex = this._createSuggestedOption();\n\n await this.updateComplete;\n\n this.selectedIndexes = [...this.selectedIndexes, nextIndex];\n this._dispatchChangeEvent();\n const opCreateEvent: VscMultiSelectCreateOptionEvent = new CustomEvent(\n 'vsc-multi-select-create-option',\n {detail: {value: this._opts.getOptionByIndex(nextIndex)?.value ?? ''}}\n );\n this.dispatchEvent(opCreateEvent);\n this.open = false;\n this._isPlaceholderOptionActive = false;\n }\n\n //#region event handlers\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this._opts.expandMultiSelection(this._requestedValueToSetLater);\n this._requestedValueToSetLater = this._requestedValueToSetLater.filter(\n (v) => this._opts.findOptionIndex(v) === -1\n );\n }\n }\n\n protected override _onOptionClick = (ev: MouseEvent) => {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const isPlaceholderOption = (optEl as HTMLElement).classList.contains(\n 'placeholder'\n );\n\n if (isPlaceholderOption) {\n this._createAndSelectSuggestedOption();\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n this._opts.toggleOptionSelected(index);\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n };\n\n protected override _onEnterKeyDown(ev: KeyboardEvent): void {\n super._onEnterKeyDown(ev);\n\n if (!this.open) {\n this._opts.filterPattern = '';\n this.open = true;\n } else {\n if (this._isPlaceholderOptionActive) {\n this._createAndSelectSuggestedOption();\n } else {\n this._opts.toggleActiveMultiselectOption();\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n }\n }\n\n private _onMultiAcceptClick(): void {\n this.open = false;\n }\n\n private _onMultiDeselectAllClick(): void {\n this._opts.selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._opts.selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n protected override _onComboboxInputBlur(): void {\n super._onComboboxInputBlur();\n this._opts.filterPattern = '';\n }\n //#endregion\n\n //#region render functions\n private _renderLabel() {\n switch (this._opts.selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\">0 Selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._opts.selectedIndexes.length} Selected</span\n >`;\n }\n }\n\n protected override _renderComboboxFace(): TemplateResult {\n const activeDescendant =\n this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n const expanded = this.open ? 'true' : 'false';\n\n return html`\n <div class=\"combobox-face face\">\n ${this._opts.multiSelect ? this._renderLabel() : nothing}\n <input\n aria-activedescendant=${activeDescendant}\n aria-autocomplete=\"list\"\n aria-controls=\"select-listbox\"\n aria-expanded=${expanded}\n aria-haspopup=\"listbox\"\n aria-label=${ifDefined(this.label)}\n class=\"combobox-input\"\n role=\"combobox\"\n spellcheck=\"false\"\n type=\"text\"\n autocomplete=\"off\"\n .value=${this._opts.filterPattern}\n @focus=${this._onComboboxInputFocus}\n @blur=${this._onComboboxInputBlur}\n @input=${this._onComboboxInputInput}\n @click=${this._onComboboxInputClick}\n @keydown=${this._onComboboxInputSpaceKeyDown}\n />\n <button\n aria-label=\"Open the list of options\"\n class=\"combobox-button\"\n type=\"button\"\n @click=${this._onComboboxButtonClick}\n @keydown=${this._onComboboxButtonKeyDown}\n tabindex=\"-1\"\n >\n ${chevronDownIcon}\n </button>\n </div>\n `;\n }\n\n protected override _renderSelectFace(): TemplateResult {\n const activeDescendant =\n this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n const expanded = this.open ? 'true' : 'false';\n\n return html`\n <div\n aria-activedescendant=${ifDefined(\n this._opts.multiSelect ? undefined : activeDescendant\n )}\n aria-controls=\"select-listbox\"\n aria-expanded=${ifDefined(\n this._opts.multiSelect ? undefined : expanded\n )}\n aria-haspopup=\"listbox\"\n aria-label=${ifDefined(this.label ?? undefined)}\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n .tabIndex=${this.disabled ? -1 : 0}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return this._filteredOptions.length > 0\n ? html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button\n class=\"button-accept\"\n @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `\n : html`${nothing}`;\n }\n\n override render(): TemplateResult {\n return html`\n <div class=\"multi-select\">\n <slot class=\"main-slot\" @slotchange=${this._onSlotChange}></slot>\n ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}\n ${this._renderDropdown()}\n </div>\n `;\n }\n //#endregion\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-multi-select-create-option': VscMultiSelectCreateOptionEvent;\n }\n}\n"]}
@@ -233,7 +233,7 @@ let VscodeRadio = class VscodeRadio extends LabelledCheckboxOrRadioMixin(FormBut
233
233
  ?checked=${this.checked}
234
234
  value=${this.value}
235
235
  tabindex=${this.tabIndex}
236
- >
236
+ />
237
237
  <div class=${iconClasses}></div>
238
238
  <label for="input" class="label" @click=${this._handleClick}>
239
239
  <span class=${labelInnerClasses}>