@zanichelli/albe-web-components 19.1.2 → 19.1.3-RC1

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 (60) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/web-components-library.cjs.js +1 -1
  3. package/dist/cjs/z-app-header_12.cjs.entry.js +4 -2
  4. package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
  5. package/dist/cjs/z-combobox.cjs.entry.js +49 -61
  6. package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
  7. package/dist/cjs/z-select.cjs.entry.js +62 -27
  8. package/dist/cjs/z-select.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/list/z-list-group/index.js +39 -2
  10. package/dist/collection/components/list/z-list-group/index.js.map +1 -1
  11. package/dist/collection/components/z-combobox/index.js +48 -63
  12. package/dist/collection/components/z-combobox/index.js.map +1 -1
  13. package/dist/collection/components/z-combobox/styles.css +6 -0
  14. package/dist/collection/components/z-select/index.js +62 -27
  15. package/dist/collection/components/z-select/index.js.map +1 -1
  16. package/dist/components/index16.js +7 -3
  17. package/dist/components/index16.js.map +1 -1
  18. package/dist/components/z-combobox.js +51 -65
  19. package/dist/components/z-combobox.js.map +1 -1
  20. package/dist/components/z-select.js +62 -27
  21. package/dist/components/z-select.js.map +1 -1
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/esm/web-components-library.js +1 -1
  24. package/dist/esm/z-app-header_12.entry.js +4 -2
  25. package/dist/esm/z-app-header_12.entry.js.map +1 -1
  26. package/dist/esm/z-combobox.entry.js +49 -61
  27. package/dist/esm/z-combobox.entry.js.map +1 -1
  28. package/dist/esm/z-select.entry.js +62 -27
  29. package/dist/esm/z-select.entry.js.map +1 -1
  30. package/dist/types/components/list/z-list-group/index.d.ts +8 -0
  31. package/dist/types/components/z-combobox/index.d.ts +1 -8
  32. package/dist/types/components.d.ts +16 -0
  33. package/dist/web-components-library/p-1a7b07eb.entry.js +2 -0
  34. package/dist/web-components-library/p-1a7b07eb.entry.js.map +1 -0
  35. package/dist/web-components-library/{p-17203c80.entry.js → p-57314d68.entry.js} +2 -2
  36. package/dist/web-components-library/p-57314d68.entry.js.map +1 -0
  37. package/dist/web-components-library/{p-c6995296.entry.js → p-ee223a82.entry.js} +2 -2
  38. package/dist/web-components-library/p-ee223a82.entry.js.map +1 -0
  39. package/dist/web-components-library/web-components-library.esm.js +1 -1
  40. package/dist/web-components-library/web-components-library.esm.js.map +1 -1
  41. package/package.json +3 -2
  42. package/www/build/p-0f06ceb2.js +2 -0
  43. package/www/build/p-1a7b07eb.entry.js +2 -0
  44. package/www/build/p-1a7b07eb.entry.js.map +1 -0
  45. package/www/build/{p-17203c80.entry.js → p-57314d68.entry.js} +2 -2
  46. package/www/build/p-57314d68.entry.js.map +1 -0
  47. package/www/build/{p-c6995296.entry.js → p-ee223a82.entry.js} +2 -2
  48. package/www/build/p-ee223a82.entry.js.map +1 -0
  49. package/www/build/web-components-library.esm.js +1 -1
  50. package/www/build/web-components-library.esm.js.map +1 -1
  51. package/www/index.html +1 -1
  52. package/dist/web-components-library/p-17203c80.entry.js.map +0 -1
  53. package/dist/web-components-library/p-ada7890f.entry.js +0 -2
  54. package/dist/web-components-library/p-ada7890f.entry.js.map +0 -1
  55. package/dist/web-components-library/p-c6995296.entry.js.map +0 -1
  56. package/www/build/p-17203c80.entry.js.map +0 -1
  57. package/www/build/p-7cf811c7.js +0 -2
  58. package/www/build/p-ada7890f.entry.js +0 -2
  59. package/www/build/p-ada7890f.entry.js.map +0 -1
  60. package/www/build/p-c6995296.entry.js.map +0 -1
package/dist/components/z-combobox.js CHANGED
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './index13.js';
8
8
  import { d as defineCustomElement$3 } from './index15.js';
9
9
  import { d as defineCustomElement$2 } from './index16.js';
10
10
 
11
- const stylesCss = ".z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
11
+ const stylesCss = ".z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}[role=\"option\"]:focus,[role=\"option\"]:focus-visible{background:lime}";
12
12
  const ZComboboxStyle0 = stylesCss;
13
13
 
14
14
  const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTMLElement {
@@ -20,9 +20,6 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
20
20
  watchSearchValue() {
21
21
  this.filterItems(this.searchValue);
22
22
  }
23
- watchCheckboxes() {
24
- this.checkboxes.forEach((item, index) => item.setAttribute("tabindex", index === 0 ? "0" : "-1"));
25
- }
26
23
  emitComboboxChange() {
27
24
  this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
28
25
  }
@@ -54,7 +51,6 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
54
51
  this.selectedCounter = undefined;
55
52
  this.renderItemsList = [];
56
53
  this.focusedItemId = undefined;
57
- this.checkboxes = [];
58
54
  this.toggleComboBox = this.toggleComboBox.bind(this);
59
55
  this.closeFilterItems = this.closeFilterItems.bind(this);
60
56
  }
@@ -64,21 +60,6 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
64
60
  componentWillRender() {
65
61
  this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
66
62
  }
67
- componentDidRender() {
68
- const checkboxes = this.getAllCheckboxes();
69
- if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {
70
- this.checkboxes = checkboxes;
71
- }
72
- }
73
- getItemId(item) {
74
- return `combo-checkbox-${this.inputid}-${item.id}`;
75
- }
76
- getCheckboxClass() {
77
- return `combo-item-checkbox-input-${this.inputid}`;
78
- }
79
- getAllCheckboxes() {
80
- return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`));
81
- }
82
63
  getControlToListSize() {
83
64
  switch (this.size) {
84
65
  case ControlSize.X_SMALL:
@@ -89,6 +70,13 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
89
70
  return ListSize.LARGE;
90
71
  }
91
72
  }
73
+ handleOptionKeyDown(e, onOptionClickCallback, currId) {
74
+ if (e.code === KeyboardCode.SPACE) {
75
+ e.preventDefault();
76
+ return onOptionClickCallback();
77
+ }
78
+ this.handleSelectArrowsNavigation(e, currId);
79
+ }
92
80
  handleSelectArrowsNavigation(e, currId) {
93
81
  if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key) || !this.isopen) {
94
82
  return;
@@ -96,27 +84,28 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
96
84
  e.preventDefault();
97
85
  e.stopPropagation();
98
86
  const currElem = this.element.shadowRoot.querySelector(`#${currId}`);
99
- const checkboxes = this.checkboxes;
100
- if (!checkboxes.length) {
87
+ const options = Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));
88
+ if (!options.length) {
101
89
  return;
102
90
  }
103
- const currElemIndex = currElem ? checkboxes.indexOf(currElem) : null;
91
+ const currElemIndex = currElem ? options.indexOf(currElem) : null;
104
92
  const firstElemIndex = 0;
105
- const lastElemIndex = checkboxes.length - 1;
93
+ const lastElemIndex = options.length - 1;
106
94
  let nextElem = null;
107
95
  if (e.key === KeyboardCode.ARROW_DOWN) {
108
96
  nextElem =
109
97
  currElemIndex === null || currElemIndex === lastElemIndex
110
- ? checkboxes[firstElemIndex]
111
- : checkboxes[currElemIndex + 1];
98
+ ? options[firstElemIndex]
99
+ : options[currElemIndex + 1];
112
100
  }
113
101
  else if (e.key === KeyboardCode.ARROW_UP) {
114
102
  nextElem =
115
103
  currElemIndex === null || currElemIndex === firstElemIndex
116
- ? checkboxes[lastElemIndex]
117
- : checkboxes[currElemIndex - 1];
104
+ ? options[lastElemIndex]
105
+ : options[currElemIndex - 1];
118
106
  }
119
- this.focusComboboxItem(nextElem);
107
+ this.focusedItemId = nextElem.id;
108
+ nextElem.focus();
120
109
  }
121
110
  handleHeaderKeyboardEvent(ev) {
122
111
  if (ev.key === KeyboardCode.SPACE) {
@@ -125,16 +114,9 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
125
114
  if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {
126
115
  this.toggleComboBox();
127
116
  }
128
- }
129
- handleCheckboxFocus(id) {
130
- this.focusedItemId = id;
131
- }
132
- focusComboboxItem(elem) {
133
- this.checkboxes.forEach(function (item) {
134
- item.setAttribute("tabindex", "-1");
135
- });
136
- elem.setAttribute("tabindex", "0");
137
- elem.focus();
117
+ if (this.isopen && !this.hassearch) {
118
+ this.handleSelectArrowsNavigation(ev);
119
+ }
138
120
  }
139
121
  updateRenderItemsList() {
140
122
  if (this.searchValue) {
@@ -172,6 +154,10 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
172
154
  this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
173
155
  this.resetRenderItemsList();
174
156
  this.emitComboboxChange();
157
+ this.focusedItemId = null;
158
+ const elem = this.element.shadowRoot.querySelector("#option-check-all");
159
+ this.focusedItemId = elem.id;
160
+ elem.focus();
175
161
  }
176
162
  closeFilterItems() {
177
163
  this.searchValue = "";
@@ -208,23 +194,25 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
208
194
  renderContent() {
209
195
  return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? h("span", Object.assign({}, this.getComboboxA11yAttributes(false))) : null, h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
210
196
  .map((item) => item.id)
211
- .join(" ") }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
197
+ .join(" ") }, this.renderItems())));
212
198
  }
213
199
  renderItems() {
214
200
  return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
215
201
  }
216
202
  renderItem(item, index, length) {
203
+ const optionId = `option-${item.id}`;
217
204
  const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;
218
- return (h("z-list-element", { id: `option-${item.id}`, htmlTabindex: null, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false" }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: isDisabled, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, this.getItemId(item)), onInputCheck: (e) => {
219
- this.itemsList = this.itemsList.map((i) => {
220
- if (item.id === i.id) {
221
- i.checked = e.detail.checked;
222
- }
223
- return i;
224
- });
225
- this.updateRenderItemsList();
226
- this.emitComboboxChange();
227
- }, onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
205
+ const onOptionClick = () => {
206
+ this.itemsList = this.itemsList.map((i) => {
207
+ if (item.id === i.id) {
208
+ i.checked = !i.checked;
209
+ }
210
+ return i;
211
+ });
212
+ this.updateRenderItemsList();
213
+ this.emitComboboxChange();
214
+ };
215
+ return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: isDisabled }, h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox" }), h("span", { id: optionId, role: "option", "aria-selected": item.checked ? "true" : "false", tabindex: this.focusedItemId === optionId ? 0 : -1, "aria-label": item.name, innerHTML: item.name, onKeyDown: (e) => this.handleOptionKeyDown(e, onOptionClick, optionId), onClick: onOptionClick })));
228
216
  }
229
217
  renderList(items) {
230
218
  if (!items) {
@@ -236,23 +224,23 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
236
224
  if (this.hasgroupitems) {
237
225
  return this.renderGroups(items);
238
226
  }
239
- return (h("ul", { role: "presentation" }, items.map((item, i) => {
227
+ return (h("ul", { role: "presentation" }, this.renderCheckAll(), items.map((item, i) => {
240
228
  return this.renderItem(item, i, items.length);
241
229
  })));
242
230
  }
243
231
  renderGroups(items) {
244
232
  const newData = items.reduce((group, item, index) => {
245
233
  var _a;
246
- const { category } = item;
234
+ const category = item.category || "Altra categoria";
247
235
  const zListItem = this.renderItem(item, index, items.length);
248
236
  group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
249
237
  group[category].push(zListItem);
250
238
  return group;
251
239
  }, {});
252
- const listGroups = Object.entries(newData).map(([key, value]) => {
253
- return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
240
+ const listGroups = Object.entries(newData).map(([key, value], index) => {
241
+ return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT, ariaLabelledby: `${this.inputid}_list_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index}`, "aria-hidden": "true" }, key), value.map((item) => item)));
254
242
  });
255
- return h("ul", { role: "presentation" }, listGroups);
243
+ return (h("ul", { role: "presentation" }, this.renderCheckAll(), listGroups));
256
244
  }
257
245
  renderNoSearchResults() {
258
246
  return (h("div", { class: "no-results" }, h("span", null, this.noresultslabel)));
@@ -268,21 +256,21 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
268
256
  } })));
269
257
  }
270
258
  renderCheckAll() {
271
- if (this.searchValue) {
259
+ if (!this.hascheckall || this.searchValue) {
272
260
  return;
273
261
  }
274
- const checkAllId = `combo-checkbox-${this.inputid}-check-all`;
262
+ const optionId = "option-check-all";
275
263
  const allChecked = this.selectedCounter === this.itemsList.length;
276
- return (h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
264
+ const onOptionClick = () => this.checkAll(!allChecked);
265
+ return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, size: this.getControlToListSize() }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox" }), h("span", { id: optionId, role: "option", "aria-selected": allChecked ? "true" : "false", tabindex: this.focusedItemId === optionId ? 0 : -1, onKeyDown: (e) => this.handleOptionKeyDown(e, onOptionClick, optionId), onClick: onOptionClick }, allChecked ? this.uncheckalltext : this.checkalltext)));
277
266
  }
278
267
  render() {
279
- return (h("div", { key: '6cb14e4919c53bae374f2c9441b0524a06a4233d', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
268
+ return (h("div", { key: '3a5978360ecb451a7af6c11cb30b87a332fb12a4', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
280
269
  }
281
270
  get element() { return this; }
282
271
  static get watchers() { return {
283
272
  "items": ["watchItems"],
284
- "searchValue": ["watchSearchValue"],
285
- "checkboxes": ["watchCheckboxes"]
273
+ "searchValue": ["watchSearchValue"]
286
274
  }; }
287
275
  static get style() { return ZComboboxStyle0; }
288
276
  }, [1, "z-combobox", {
@@ -306,12 +294,10 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
306
294
  "searchValue": [32],
307
295
  "selectedCounter": [32],
308
296
  "renderItemsList": [32],
309
- "focusedItemId": [32],
310
- "checkboxes": [32]
297
+ "focusedItemId": [32]
311
298
  }, undefined, {
312
299
  "items": ["watchItems"],
313
- "searchValue": ["watchSearchValue"],
314
- "checkboxes": ["watchCheckboxes"]
300
+ "searchValue": ["watchSearchValue"]
315
301
  }]);
316
302
  function defineCustomElement$1() {
317
303
  if (typeof customElements === "undefined") {
package/dist/components/z-combobox.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"z-combobox.js","mappings":"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","names":["ZCombobox"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":["@import \"../css-components/z-label/styles.css\";\n\n:host {\n display: block;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-form-surface04);\n margin: 0;\n background-color: var(--color-form-background);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-form-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-form-active-primary);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-form-disabled03);\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n display: none;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n display: block;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: 0;\n background-color: var(--color-form-background);\n border-radius: 0;\n box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus */\n margin-left: calc(var(--space-unit) * -1); /* padding left and negative margin in order to enable focus */\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow */\n margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(::-webkit-scrollbar-track) {\n :host {\n scrollbar-color: var(--color-primary01) transparent;\n }\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) * 2);\n color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: none;\n margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n display: inline-block;\n height: 44px;\n color: var(--color-form-active-primary);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n /* padding left and negative margin in order to enable focus */\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n margin-left: calc(var(--space-unit) * -1);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId?: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = currElem ? checkboxes.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null || currElemIndex === lastElemIndex\n ? checkboxes[firstElemIndex]\n : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null || currElemIndex === firstElemIndex\n ? checkboxes[lastElemIndex]\n : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <span class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes(false)} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={Array.from(this.element.shadowRoot.querySelectorAll(\"[role='option']\"))\n .map((item) => item.id)\n .join(\" \")}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;\n\n return (\n <z-list-element\n id={`option-${item.id}`}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={isDisabled}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"presentation\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n this.handleSelectArrowsNavigation(e);\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div\n class=\"check-all-wrapper\"\n id=\"option-check-all\"\n role=\"option\"\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"z-combobox.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,g7JAAg7J,CAAC;AACn8J,wBAAe,SAAS;;MCSXA,WAAS;IAwFpB,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAC5E,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAGD,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACpC;IAMO,kBAAkB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC;KACrE;IAED;;;;;QAxBQ,cAAS,GAAgB,EAAE,CAAC;QAE5B,cAAS,GAAc,SAAS,CAAC,IAAI,CAAC;uBAhFpC,SAAS,QAAQ,EAAE,EAAE;;;wBAYV,KAAK;yBAIJ,KAAK;;;;8BAgBD,kBAAkB;sBAInC,KAAK;uBAIJ,KAAK;2BAIS,KAAK;4BAIL,iBAAiB;8BAIf,mBAAmB;iCAIzB,CAAC;;oBAQA,WAAW,CAAC,GAAG;;;+BASL,EAAE;;QA8B/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;KAC7E;IAEO,oBAAoB;QAC1B,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,WAAW,CAAC,OAAO;gBACtB,OAAO,QAAQ,CAAC,KAAK,CAAC;YACxB,KAAK,WAAW,CAAC,KAAK;gBACpB,OAAO,QAAQ,CAAC,MAAM,CAAC;YACzB;gBACE,OAAO,QAAQ,CAAC,KAAK,CAAC;SACzB;KACF;IAEO,mBAAmB,CAAC,CAAgB,EAAE,qBAAiC,EAAE,MAAe;QAC9F,IAAK,CAAC,CAAC,IAAqB,KAAK,YAAY,CAAC,KAAK,EAAE;YACnD,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,OAAO,qBAAqB,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;KAC9C;IAEO,4BAA4B,CAAC,CAAgB,EAAE,MAAe;QACpE,IAAI,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACrG,OAAO;SACR;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAExF,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;YACnB,OAAO;SACR;QAED,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;QAClE,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAEzC,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,EAAE;YACrC,QAAQ;gBACN,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,aAAa;sBACrD,OAAO,CAAC,cAAc,CAAC;sBACvB,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;SAClC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,EAAE;YAC1C,QAAQ;gBACN,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,cAAc;sBACtD,OAAO,CAAC,aAAa,CAAC;sBACtB,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;SAClC;QAED,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,EAAE,CAAC;QACjC,QAAQ,CAAC,KAAK,EAAE,CAAC;KAClB;IAEO,yBAAyB,CAAC,EAAiB;QACjD,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,KAAK,EAAE;YACjC,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QAED,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE;YAC7G,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;QAED,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;SACvC;KACF;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAEO,oBAAoB;QAC1B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAe;YACrC,eAAe,CAAC,IAAI,mBAAK,IAAI,EAAE,CAAC;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;KACxC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI;YACtD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnE,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC7B,UAAU;gBACV,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC/B,WAAW;gBACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE7C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,OAAO,KAAK,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;KACJ;IAEO,QAAQ,CAAC,OAAO,GAAG,IAAI;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAe,sCAC/C,IAAI,KACP,OAAO,EAAE,OAAO,IAChB,CAAC,CAAC;QACJ,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QACvF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;IAEO,gBAAgB;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEO,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAEO,yBAAyB,CAAC,QAAiB;QACjD,MAAM,IAAI,GAAG,UAAU,CAAC;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;QACpD,MAAM,oBAAoB,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACnE,MAAM,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,CAAC;QAE5C,IAAI,QAAQ,EAAE;YACZ,OAAO;gBACL,MAAM,EAAE,IAAI;gBACZ,oBAAoB,EAAE,YAAY;gBAClC,4BAA4B,EAAE,oBAAoB;gBAClD,oBAAoB,EAAE,YAAY;aACnC,CAAC;SACH;QAED,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,eAAe,EAAE,YAAY;YAC7B,uBAAuB,EAAE,oBAAoB;YAC7C,eAAe,EAAE,YAAY;SAC9B,CAAC;KACH;IAEO,YAAY;QAClB,QACE,WACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,CAAC,EAAiB;gBAC3B,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC;aACpC,EACD,OAAO,EAAE,CAAC,EAAiB,KAAK,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACG,iBAAiB,mBAChB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE7C,YAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,KAAK,EACX,gBAAO,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,CAAQ,CAClE,EACP,cACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACE,EACN;KACH;IAEO,aAAa;QACnB,QACE,WACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAC1C,CAAC,IAAI,CAAC,SAAS,GAAG,4BAAU,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAI,GAAG,IAAI,EAC7E,WACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,0BACD,MAAM,EAC3B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO,eACf,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;iBAC/E,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;iBACtB,IAAI,CAAC,GAAG,CAAC,IAEX,IAAI,CAAC,WAAW,EAAE,CACf,CACF,EACN;KACH;IAEO,WAAW;QACjB,QACE,WACE,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,cAAc,IAElB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAClC,EACN;KACH;IAEO,UAAU,CAAC,IAAe,EAAE,KAAa,EAAE,MAAc;QAC/D,MAAM,QAAQ,GAAG,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC;QACrC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,CAAC;QAE7G,MAAM,aAAa,GAAG;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAY;gBAC/C,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE;oBACpB,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;iBACxB;gBAED,OAAO,CAAC,CAAC;aACV,CAAC,CAAC;YACH,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,CAAC;QAEF,QACE,sBACE,YAAY,EAAE,CAAC,CAAC,EAChB,WAAW,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,GAAG,eAAe,CAAC,IAAI,EAClF,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACjC,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,UAAU,IAEpB,cAAQ,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,UAAU,GAAI,EAChE,YACE,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC9C,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,gBACtC,IAAI,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrF,OAAO,EAAE,aAAa,GACtB,CACa,EACjB;KACH;IAEO,UAAU,CAAC,KAAkB;QACnC,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACrC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;SACrC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SACjC;QAED,QACE,UAAI,IAAI,EAAC,cAAc,IACpB,IAAI,CAAC,cAAc,EAAE,EACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SAC/C,CAAC,CACC,EACL;KACH;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK;;YAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CAAC;YACpD,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE7D,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAC;YACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAEhC,OAAO,KAAK,CAAC;SACd,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAqD,CAAC,CAAC,GAAG,CAC1F,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK;YAClB,QACE,oCACgB,eAAe,CAAC,OAAO,EACrC,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,eAAe,KAAK,EAAE,IAErD,YACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,EACnB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,eAAe,KAAK,EAAE,iBAC7B,MAAM,IAEjB,GAAG,CACC,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CACb,EACf;SACH,CACF,CAAC;QAEF,QACE,UAAI,IAAI,EAAC,cAAc,IACpB,IAAI,CAAC,cAAc,EAAE,EACrB,UAAU,CACR,EACL;KACH;IAEO,qBAAqB;QAC3B,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,gBAAO,IAAI,CAAC,cAAc,CAAQ,CAC9B,EACN;KACH;IAEO,iBAAiB;QACvB,QACE,6BACE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,4BACQ,MAAM,IACzB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IACxC,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,EAAE;oBAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBACzB;gBACD,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;aACtC,EACD,aAAa,EAAE,CAAC,CAAc;gBAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;aACnC,IACD,EACF;KACH;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;YACzC,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,kBAAkB,CAAC;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QAElE,MAAM,aAAa,GAAG,MAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;QAE7D,QACE,sBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,cAAc,EACnB,YAAY,EAAE,CAAC,CAAC,EAChB,WAAW,EAAE,eAAe,CAAC,OAAO,EACpC,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAEjC,cAAQ,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,UAAU,GAAI,EAC9D,YACE,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAC,QAAQ,mBACE,UAAU,GAAG,MAAM,GAAG,OAAO,EAC5C,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAClD,SAAS,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrF,OAAO,EAAE,aAAa,IAErB,UAAU,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAChD,CACQ,EACjB;KACH;IAED,MAAM;QACJ,QACE,2EACe,SAAS,IAAI,CAAC,OAAO,EAAE,EACpC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO,IAEf,IAAI,CAAC,YAAY,EAAE,EACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CACnC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZCombobox"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":["@import \"../css-components/z-label/styles.css\";\n\n:host {\n display: block;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-form-surface04);\n margin: 0;\n background-color: var(--color-form-background);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-form-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-form-active-primary);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-form-disabled03);\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n display: none;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n display: block;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: 0;\n background-color: var(--color-form-background);\n border-radius: 0;\n box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus */\n margin-left: calc(var(--space-unit) * -1); /* padding left and negative margin in order to enable focus */\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow */\n margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(::-webkit-scrollbar-track) {\n :host {\n scrollbar-color: var(--color-primary01) transparent;\n }\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) * 2);\n color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: none;\n margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n display: inline-block;\n height: 44px;\n color: var(--color-form-active-primary);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n /* padding left and negative margin in order to enable focus */\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n margin-left: calc(var(--space-unit) * -1);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n\n/* TODO: remove */\n[role=\"option\"]:focus,\n[role=\"option\"]:focus-visible {\n background: lime;\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleOptionKeyDown(e: KeyboardEvent, onOptionClickCallback: () => void, currId?: string): void {\n if ((e.code as KeyboardCode) === KeyboardCode.SPACE) {\n e.preventDefault();\n\n return onOptionClickCallback();\n }\n\n this.handleSelectArrowsNavigation(e, currId);\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId?: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`);\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null || currElemIndex === lastElemIndex\n ? options[firstElemIndex]\n : options[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null || currElemIndex === firstElemIndex\n ? options[lastElemIndex]\n : options[currElemIndex - 1];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.focus();\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n\n if (this.isopen && !this.hassearch) {\n this.handleSelectArrowsNavigation(ev);\n }\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n\n this.focusedItemId = null;\n const elem = this.element.shadowRoot.querySelector(\"#option-check-all\") as HTMLElement;\n this.focusedItemId = elem.id;\n elem.focus();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <span class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes(false)} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={Array.from(this.element.shadowRoot.querySelectorAll(\"[role='option']\"))\n .map((item) => item.id)\n .join(\" \")}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = `option-${item.id}`;\n const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;\n\n const onOptionClick = (): void => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n };\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={isDisabled}\n >\n <z-icon name={item.checked ? \"checkbox-checked\" : \"checkbox\"} />\n <span\n id={optionId}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n tabindex={this.focusedItemId === optionId ? 0 : -1}\n aria-label={item.name}\n innerHTML={item.name}\n onKeyDown={(e: KeyboardEvent) => this.handleOptionKeyDown(e, onOptionClick, optionId)}\n onClick={onOptionClick}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category || \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n divider-type={ListDividerType.ELEMENT}\n ariaLabelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n this.handleSelectArrowsNavigation(e);\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall || this.searchValue) {\n return;\n }\n\n const optionId = \"option-check-all\";\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n const onOptionClick = (): void => this.checkAll(!allChecked);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n size={this.getControlToListSize()}\n >\n <z-icon name={allChecked ? \"checkbox-checked\" : \"checkbox\"} />\n <span\n id={optionId}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n tabindex={this.focusedItemId === optionId ? 0 : -1}\n onKeyDown={(e: KeyboardEvent) => this.handleOptionKeyDown(e, onOptionClick, optionId)}\n onClick={onOptionClick}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}
package/dist/components/z-select.js CHANGED
@@ -293,6 +293,9 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
293
293
  return;
294
294
  }
295
295
  }
296
+ if (currentIndex > -1 && !this.focusedItemId) {
297
+ this.focusSelectItem(flatItems[currentIndex].key);
298
+ }
296
299
  const lastIndex = flatItems.length - 1;
297
300
  let newIndex = currentIndex;
298
301
  if (e.key === KeyboardCode.ARROW_DOWN) {
@@ -381,26 +384,59 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
381
384
  }
382
385
  }
383
386
  renderInput() {
384
- return (h("z-input", { class: {
385
- "active-select": this.isOpen,
386
- "cursor-select": !this.autocomplete,
387
- }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
388
- this.handleInputClick(e);
389
- }, onKeyDown: (e) => {
390
- const current = this.selectedItem
391
- ? this.itemIdKeyMap[this.selectedItem.id]
392
- : this.resetItem
393
- ? this.resetKey
394
- : "";
395
- return this.arrowsSelectNav(e, current);
396
- }, onInputChange: (e) => {
397
- this.handleInputChange(e);
398
- }, onKeyPress: (e) => {
399
- if (!this.hasAutocomplete()) {
400
- e.preventDefault();
401
- this.scrollToLetter(e.key);
402
- }
403
- } }));
387
+ const ariaExpanded = this.isOpen ? "true" : "false";
388
+ const ariaControls = `${this.htmlid}_list`;
389
+ const ariaActivedescendant = this.isOpen ? this.focusedItemId : "";
390
+ let wrapperAriaComboboxAttributes, inputAriaComboboxAttributes;
391
+ if (this.hasAutocomplete()) {
392
+ wrapperAriaComboboxAttributes = {};
393
+ inputAriaComboboxAttributes = {
394
+ "role": "combobox",
395
+ "html-aria-expanded": ariaExpanded,
396
+ "html-aria-controls": ariaControls,
397
+ "html-aria-activedescendant": ariaActivedescendant,
398
+ "html-aria-autocomplete": "list",
399
+ };
400
+ }
401
+ else {
402
+ wrapperAriaComboboxAttributes = {
403
+ "role": "combobox",
404
+ "aria-expanded": ariaExpanded,
405
+ "aria-controls": ariaControls,
406
+ "aria-activedescendant": ariaActivedescendant,
407
+ };
408
+ inputAriaComboboxAttributes = { role: "presentation" };
409
+ }
410
+ let value = null;
411
+ if (!this.isOpen && this.selectedItem) {
412
+ value = this.selectedItem.name.replace(/<[^>]+>/g, "");
413
+ }
414
+ if (this.isOpen && this.searchString) {
415
+ value = this.searchString;
416
+ }
417
+ return [
418
+ h("z-input", Object.assign({ class: {
419
+ "active-select": this.isOpen,
420
+ "cursor-select": !this.autocomplete,
421
+ }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, size: this.size }, inputAriaComboboxAttributes, { onClick: (e) => {
422
+ this.handleInputClick(e);
423
+ }, onKeyDown: (e) => {
424
+ const current = this.selectedItem
425
+ ? this.itemIdKeyMap[this.selectedItem.id]
426
+ : this.resetItem
427
+ ? this.resetKey
428
+ : "";
429
+ return this.arrowsSelectNav(e, current);
430
+ }, onInputChange: (e) => {
431
+ this.handleInputChange(e);
432
+ }, onKeyPress: (e) => {
433
+ if (!this.hasAutocomplete()) {
434
+ e.preventDefault();
435
+ this.scrollToLetter(e.key);
436
+ }
437
+ } })),
438
+ h("div", Object.assign({}, wrapperAriaComboboxAttributes)),
439
+ ];
404
440
  }
405
441
  renderSelectUl() {
406
442
  return (h("div", { class: this.isOpen ? "open" : "closed" }, h("div", { class: {
@@ -478,7 +514,7 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
478
514
  return (h("z-list-element", { clickable: !item.disabled, disabled: isDisabled, class: {
479
515
  "grouped-tree-parent-node": this.hasGroupItems && !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length),
480
516
  "tree-search-item": this.hasGroupItems && isTopLevel && !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && !!this.searchString,
481
- }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems, "html-tabindex": null }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: !this.isOpen || isDisabled || this.focusedItemId !== `${this.htmlid}_key_${thisItemKey}` ? -1 : 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
517
+ }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems, "html-tabindex": null, role: "presentation" }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: !this.isOpen || isDisabled || this.focusedItemId !== `${this.htmlid}_key_${thisItemKey}` ? -1 : 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
482
518
  this.arrowsSelectNav(e, thisItemKey);
483
519
  if (e.key === KeyboardCode.ENTER) {
484
520
  this.selectItem(item);
@@ -486,15 +522,14 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
486
522
  } }, h("span", { class: "item ellipsis" }, h("span", { class: {
487
523
  "item-label": true,
488
524
  "selected": !!item.selected,
489
- }, title: item.name, innerHTML: item.name })), item.icon && h("z-tag", { icon: item.icon })), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index, arr) => this.renderTreeItems(child, index === arr.length - 1, arr.length > 1, false, // isTopLevel = false for children
525
+ }, title: item.name, innerHTML: item.name })), item.icon && h("z-tag", { icon: item.icon })), item.children && item.children.length > 0 ? (h("z-list", { role: "presentation" }, h("div", { class: "children-node" }, item.children.map((child, index, arr) => this.renderTreeItems(child, index === arr.length - 1, arr.length > 1, false, // isTopLevel = false for children
490
526
  isDisabled))))) : null));
491
527
  }
492
528
  renderGroupedTree() {
493
529
  const groupedItems = this.getGroupedItems();
494
530
  return groupedItems.map(([category, items], index, entries) => {
495
531
  const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);
496
- // const parentHasSiblings = items.length > 1;
497
- return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, category), h("z-list", null, items.map((item, i, arr) => [
532
+ return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true, ariaLabelledby: `${this.htmlid}_tree_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_tree_${index}`, "aria-hidden": "true" }, category), h("z-list", { role: "presentation" }, items.map((item, i, arr) => [
498
533
  this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true, item.disabled),
499
534
  i < arr.length - 1 ? (h("z-divider", { key: `divider-${i}`, style: { zIndex: "100", height: "var(--border-size-small)" } })) : null,
500
535
  ])), index !== entries.length - 1 && h("z-divider", { style: { zIndex: "100", height: "var(--border-size-small)" } })));
@@ -504,14 +539,14 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
504
539
  const groupedItems = this.getGroupedItems();
505
540
  return groupedItems.map(([key, items], index) => {
506
541
  const isLastGroup = groupedItems.length === index + 1;
507
- return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), items.map((item, subindex) => {
542
+ return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT, ariaLabelledby: `${this.htmlid}_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_group_${index}`, "aria-hidden": "true" }, key), items.map((item, subindex) => {
508
543
  const isLastItem = items.length === subindex + 1;
509
544
  return this.renderItem(item, isLastGroup && isLastItem);
510
545
  })));
511
546
  });
512
547
  }
513
548
  renderNoSearchResults() {
514
- return (h("z-list-element", { class: "no-results", size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), "html-tabindex": null }, this.noresultslabel));
549
+ return (h("z-list-element", { class: "no-results", size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), "html-tabindex": null, role: "presentation" }, this.noresultslabel));
515
550
  }
516
551
  renderMessage() {
517
552
  if (boolean(this.message) === false) {
@@ -520,7 +555,7 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
520
555
  return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
521
556
  }
522
557
  render() {
523
- return (h("div", { key: '7a00d71c47441c98748ff45d90705c0450e668af', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
558
+ return (h("div", { key: 'd8e91b45f3b328c5df4f834572e00b1a493ecddf', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
524
559
  }
525
560
  get host() { return this; }
526
561
  static get watchers() { return {