@zanichelli/albe-web-components 13.3.0 → 13.4.0-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 (53) 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 +20 -5
  4. package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
  5. package/dist/cjs/z-combobox.cjs.entry.js +125 -40
  6. package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
  7. package/dist/collection/components/inputs/z-combobox/index.js +132 -51
  8. package/dist/collection/components/inputs/z-combobox/index.js.map +1 -1
  9. package/dist/collection/components/inputs/z-combobox/index.spec.js +191 -161
  10. package/dist/collection/components/inputs/z-combobox/index.spec.js.map +1 -1
  11. package/dist/collection/components/inputs/z-combobox/styles.css +10 -10
  12. package/dist/collection/components/inputs/z-input/index.js +46 -4
  13. package/dist/collection/components/inputs/z-input/index.js.map +1 -1
  14. package/dist/collection/components/list/z-list-element/index.js +20 -1
  15. package/dist/collection/components/list/z-list-element/index.js.map +1 -1
  16. package/dist/components/index10.js +18 -4
  17. package/dist/components/index10.js.map +1 -1
  18. package/dist/components/index13.js +3 -1
  19. package/dist/components/index13.js.map +1 -1
  20. package/dist/components/z-combobox.js +147 -53
  21. package/dist/components/z-combobox.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 +20 -5
  25. package/dist/esm/z-app-header_12.entry.js.map +1 -1
  26. package/dist/esm/z-combobox.entry.js +128 -43
  27. package/dist/esm/z-combobox.entry.js.map +1 -1
  28. package/dist/types/components/inputs/z-combobox/index.d.ts +14 -1
  29. package/dist/types/components/inputs/z-input/index.d.ts +7 -0
  30. package/dist/types/components/list/z-list-element/index.d.ts +2 -0
  31. package/dist/types/components.d.ts +18 -0
  32. package/dist/web-components-library/p-0f8cc377.entry.js +2 -0
  33. package/dist/web-components-library/p-0f8cc377.entry.js.map +1 -0
  34. package/{www/build/p-aa0f32d7.entry.js → dist/web-components-library/p-f3c3448f.entry.js} +2 -2
  35. package/dist/web-components-library/p-f3c3448f.entry.js.map +1 -0
  36. package/dist/web-components-library/web-components-library.esm.js +1 -1
  37. package/dist/web-components-library/web-components-library.esm.js.map +1 -1
  38. package/package.json +1 -1
  39. package/www/build/p-0f8cc377.entry.js +2 -0
  40. package/www/build/p-0f8cc377.entry.js.map +1 -0
  41. package/www/build/p-583ea45f.js +2 -0
  42. package/{dist/web-components-library/p-aa0f32d7.entry.js → www/build/p-f3c3448f.entry.js} +2 -2
  43. package/www/build/p-f3c3448f.entry.js.map +1 -0
  44. package/www/build/web-components-library.esm.js +1 -1
  45. package/www/build/web-components-library.esm.js.map +1 -1
  46. package/www/index.html +1 -1
  47. package/dist/web-components-library/p-9b52dea5.entry.js +0 -2
  48. package/dist/web-components-library/p-9b52dea5.entry.js.map +0 -1
  49. package/dist/web-components-library/p-aa0f32d7.entry.js.map +0 -1
  50. package/www/build/p-9b52dea5.entry.js +0 -2
  51. package/www/build/p-9b52dea5.entry.js.map +0 -1
  52. package/www/build/p-aa0f32d7.entry.js.map +0 -1
  53. package/www/build/p-ddd9a0ea.js +0 -2
package/dist/collection/components/inputs/z-combobox/index.spec.js CHANGED
@@ -4,13 +4,13 @@ describe("Suite test ZCombobox", () => {
4
4
  it("Test render ZCombobox chiusa", async () => {
5
5
  const page = await newSpecPage({
6
6
  components: [ZCombobox],
7
- html: `<z-combobox items='[]'></z-combobox>`,
7
+ html: `<z-combobox items='[]' inputid="combobox"></z-combobox>`,
8
8
  });
9
9
  expect(page.root).toEqualHtml(`
10
- <z-combobox items='[]'>
10
+ <z-combobox items='[]' inputid="combobox">
11
11
  <mock:shadow-root>
12
- <div data-action="combo-undefined">
13
- <div class="header" role="button" tabindex="0">
12
+ <div data-action="combo-combobox" id="combobox">
13
+ <div aria-expanded="false" class="header" role="button" tabindex="0">
14
14
  <p class="body-3"><span></span></p>
15
15
  <z-icon class="big" name="caret-down" />
16
16
  </div>
@@ -22,13 +22,13 @@ describe("Suite test ZCombobox", () => {
22
22
  it("Test render ZCombobox disabilitata", async () => {
23
23
  const page = await newSpecPage({
24
24
  components: [ZCombobox],
25
- html: `<z-combobox items='[]' disabled='true'></z-combobox>`,
25
+ html: `<z-combobox items='[]' inputid="combobox" disabled='true'></z-combobox>`,
26
26
  });
27
27
  expect(page.root).toEqualHtml(`
28
- <z-combobox disabled='' items='[]'>
28
+ <z-combobox disabled='' items='[]' inputid="combobox">
29
29
  <mock:shadow-root>
30
- <div class="disabled" data-action="combo-undefined">
31
- <div class="header" role="button" tabindex="0">
30
+ <div class="disabled" data-action="combo-combobox" id="combobox">
31
+ <div aria-expanded="false" class="header" role="button" tabindex="0">
32
32
  <p class="body-3"><span></span></p>
33
33
  <z-icon class="big" name="caret-down" />
34
34
  </div>
@@ -46,7 +46,7 @@ describe("Suite test ZCombobox", () => {
46
46
  <z-combobox items='[]' inputid="combobox" label="label" isfixed>
47
47
  <mock:shadow-root>
48
48
  <div class="fixed" id="combobox" data-action="combo-combobox">
49
- <div class="header" role="button" tabindex="0">
49
+ <div aria-expanded="false" class="header" role="button" tabindex="0">
50
50
  <p class="body-3">
51
51
  label
52
52
  <span></span>
@@ -67,7 +67,7 @@ describe("Suite test ZCombobox", () => {
67
67
  <z-combobox items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' inputid="combobox" label="label">
68
68
  <mock:shadow-root>
69
69
  <div data-action="combo-combobox" id="combobox">
70
- <div class="header" role="button" tabindex="0">
70
+ <div aria-expanded="false" class="header" role="button" tabindex="0">
71
71
  <p class="body-3">
72
72
  label
73
73
  <span>(1)</span>
@@ -82,21 +82,24 @@ describe("Suite test ZCombobox", () => {
82
82
  it("Test render ZCombobox aperta vuota", async () => {
83
83
  const page = await newSpecPage({
84
84
  components: [ZCombobox],
85
- html: `<z-combobox items='[]' noresultslabel='non ci sono risultati'></z-combobox>`,
85
+ html: `<z-combobox items='[]' inputid="combobox" noresultslabel='non ci sono risultati'></z-combobox>`,
86
86
  });
87
87
  page.rootInstance.isopen = true;
88
88
  await page.waitForChanges();
89
89
  expect(page.root).toEqualHtml(`
90
- <z-combobox items='[]' noresultslabel='non ci sono risultati'>
90
+ <z-combobox items='[]' inputid="combobox" noresultslabel='non ci sono risultati'>
91
91
  <mock:shadow-root>
92
- <div class="open" data-action="combo-undefined">
93
- <div class="header" role="button" tabindex="0">
92
+ <div class="open" data-action="combo-combobox" id="combobox">
93
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
94
94
  <p class="body-3"><span></span></p>
95
95
  <z-icon class="big" name="caret-down" ></z-icon>
96
96
  </div>
97
97
  <div class="open-combo-data">
98
- <div tabindex="-1">
99
- <ul></ul>
98
+ <span role="combobox" aria-controls="combobox_list" aria-expanded="true"></span>
99
+ <div aria-multiselectable="" role="listbox" id="combobox_list" aria-owns="">
100
+ <div>
101
+ <ul role="none"></ul>
102
+ </div>
100
103
  </div>
101
104
  </div>
102
105
  </div>
@@ -107,29 +110,32 @@ describe("Suite test ZCombobox", () => {
107
110
  it("Test render ZCombobox aperta con elementi", async () => {
108
111
  const page = await newSpecPage({
109
112
  components: [ZCombobox],
110
- html: `<z-combobox inputid="combo" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
113
+ html: `<z-combobox inputid="combobox" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
111
114
  });
112
115
  page.rootInstance.isopen = true;
113
116
  await page.waitForChanges();
114
117
  expect(page.root).toEqualHtml(`
115
- <z-combobox inputid="combo" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
118
+ <z-combobox inputid="combobox" label="combo" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
116
119
  <mock:shadow-root>
117
- <div class="open" data-action="combo-combo" id="combo">
118
- <div class="header" role="button" tabindex="0">
120
+ <div class="open" data-action="combo-combobox" id="combobox">
121
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
119
122
  <p class="body-3">combo<span>(1)</span></p>
120
123
  <z-icon class="big" name="caret-down" />
121
124
  </div>
122
- <div class="open-combo-data">
123
- <div tabindex="-1">
124
- <ul>
125
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
126
- <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
127
- </z-myz-list-item>
128
- <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
129
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
130
- </z-myz-list-item>
131
- </ul>
132
- </div
125
+ <div class="open-combo-data">
126
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
127
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
128
+ <div>
129
+ <ul role="none">
130
+ <z-list-element dividertype="element" id="item_1" size="large">
131
+ <z-input role="option" aria-selected="false" disabled="0" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento"></z-input>
132
+ </z-list-element>
133
+ <z-list-element dividertype="none" id="item_2" size="large">
134
+ <z-input role="option" aria-selected="true" type="checkbox" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" checked></z-input>
135
+ </z-list-element>
136
+ </ul>
137
+ </div>
138
+ </div>
133
139
  </div>
134
140
  </div>
135
141
  </mock:shadow-root>
@@ -139,29 +145,31 @@ describe("Suite test ZCombobox", () => {
139
145
  it("Test render ZCombobox aperta con ricerca", async () => {
140
146
  const page = await newSpecPage({
141
147
  components: [ZCombobox],
142
- html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
148
+ html: `<z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
143
149
  });
144
150
  page.rootInstance.isopen = true;
145
151
  await page.waitForChanges();
146
152
  expect(page.root).toEqualHtml(`
147
- <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
153
+ <z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
148
154
  <mock:shadow-root>
149
- <div class="open" data-action="combo-combo" id="combo">
150
- <div class="header" role="button" tabindex="0">
155
+ <div class="open" data-action="combo-combobox" id="combobox">
156
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
151
157
  <p class="body-3">combo<span>(1)</span></p>
152
158
  <z-icon class="big" name="caret-down" />
153
159
  </div>
154
160
  <div class="open-combo-data">
155
- <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text"></z-input>
156
- <div tabindex="-1">
157
- <ul>
158
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
159
- <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
160
- </z-myz-list-item>
161
- <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
162
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
163
- </z-myz-list-item>
164
- </ul>
161
+ <z-input aria-autocomplete="list" aria-controls="combobox_list" aria-expanded="true" htmlid="combobox_search" label="cerca" placeholder="placeholder" role="combobox" aria-label="combo" size="big" type="text"></z-input>
162
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
163
+ <div>
164
+ <ul role="none">
165
+ <z-list-element dividertype="element" id="item_1" size="large">
166
+ <z-input role="option" aria-selected="false" disabled="0" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento"></z-input>
167
+ </z-list-element>
168
+ <z-list-element dividertype="none" id="item_2" size="large">
169
+ <z-input type="checkbox" role="option" aria-selected="true" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" checked></z-input>
170
+ </z-list-element>
171
+ </ul>
172
+ </div>
165
173
  </div>
166
174
  </div>
167
175
  </div>
@@ -172,29 +180,31 @@ describe("Suite test ZCombobox", () => {
172
180
  it("Test render ZCombobox aperta con ricerca attiva e risultati", async () => {
173
181
  const page = await newSpecPage({
174
182
  components: [ZCombobox],
175
- html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
183
+ html: `<z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
176
184
  });
177
185
  page.rootInstance.isopen = true;
178
186
  page.rootInstance.searchValue = "primo";
179
187
  await page.waitForChanges();
180
188
  expect(page.root).toEqualHtml(`
181
- <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
189
+ <z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
182
190
  <mock:shadow-root>
183
- <div class="open" data-action="combo-combo" id="combo">
184
- <div class="header" role="button" tabindex="0">
191
+ <div class="open" data-action="combo-combobox" id="combobox">
192
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
185
193
  <p class="body-3">combo<span>(1)</span></p>
186
194
  <z-icon class="big" name="caret-down" />
187
195
  </div>
188
196
  <div class="open-combo-data">
189
- <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="primo"></z-input>
190
- <div class="search" tabindex="-1">
191
- <ul>
192
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo">
193
- <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="<b>primo</b> elemento"></z-input>
194
- </z-myz-list-item>
195
- </ul>
196
- <div>
197
- <a role="button" tabindex="0">CHIUDI</a>
197
+ <z-input aria-autocomplete="list" aria-controls="combobox_list" aria-expanded="true" htmlid="combobox_search" label="cerca" placeholder="placeholder" role="combobox" aria-label="combo" size="big" type="text" value="primo"></z-input>
198
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
199
+ <div class="search">
200
+ <ul role="none">
201
+ <z-list-element dividertype="none" id="item_1" size="large">
202
+ <z-input role="option" aria-selected="false" disabled="0" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="<strong>primo</strong> elemento"></z-input>
203
+ </z-list-element>
204
+ </ul>
205
+ <div>
206
+ <a role="button" tabindex="0">CHIUDI</a>
207
+ </div>
198
208
  </div>
199
209
  </div>
200
210
  </div>
@@ -206,29 +216,31 @@ describe("Suite test ZCombobox", () => {
206
216
  it("Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale", async () => {
207
217
  const page = await newSpecPage({
208
218
  components: [ZCombobox],
209
- html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
219
+ html: `<z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
210
220
  });
211
221
  page.rootInstance.isopen = true;
212
222
  page.rootInstance.searchValue = "primo";
213
223
  await page.waitForChanges();
214
224
  expect(page.root).toEqualHtml(`
215
- <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
225
+ <z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
216
226
  <mock:shadow-root>
217
- <div class="open" data-action="combo-combo" id="combo">
218
- <div class="header" role="button" tabindex="0">
227
+ <div class="open" data-action="combo-combobox" id="combobox">
228
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
219
229
  <p class="body-3">combo<span>(1)</span></p>
220
230
  <z-icon class="big" name="caret-down" />
221
231
  </div>
222
232
  <div class="open-combo-data">
223
- <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="primo"></z-input>
224
- <div class="search" tabindex="-1">
225
- <ul>
226
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo">
227
- <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="<b>primo</b> elemento"></z-input>
228
- </z-myz-list-item>
229
- </ul>
230
- <div>
231
- <a role="button" tabindex="0">Chiudi</a>
233
+ <z-input aria-autocomplete="list" aria-controls="combobox_list" aria-expanded="true" htmlid="combobox_search" label="cerca" placeholder="placeholder" role="combobox" aria-label="combo" size="big" type="text" value="primo"></z-input>
234
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
235
+ <div class="search">
236
+ <ul role="none">
237
+ <z-list-element dividertype="none" id="item_1" size="large">
238
+ <z-input role="option" aria-selected="false" disabled="0" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="<strong>primo</strong> elemento"></z-input>
239
+ </z-list-element>
240
+ </ul>
241
+ <div>
242
+ <a role="button" tabindex="0">Chiudi</a>
243
+ </div>
232
244
  </div>
233
245
  </div>
234
246
  </div>
@@ -240,27 +252,29 @@ describe("Suite test ZCombobox", () => {
240
252
  it("Test render ZCombobox aperta con ricerca attiva senza risultati", async () => {
241
253
  const page = await newSpecPage({
242
254
  components: [ZCombobox],
243
- html: `<z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,
255
+ html: `<z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,
244
256
  });
245
257
  page.rootInstance.isopen = true;
246
258
  page.rootInstance.searchValue = "prova";
247
259
  await page.waitForChanges();
248
260
  expect(page.root).toEqualHtml(`
249
- <z-combobox inputid="combo" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'>
261
+ <z-combobox inputid="combobox" label="combo" hassearch=true searchlabel="cerca" searchplaceholder="placeholder" closesearchtext="CHIUDI" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]' noresultslabel='non ci sono risultati'>
250
262
  <mock:shadow-root>
251
- <div class="open" data-action="combo-combo" id="combo">
252
- <div class="header" role="button" tabindex="0">
263
+ <div class="open" data-action="combo-combobox" id="combobox">
264
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
253
265
  <p class="body-3">combo<span>(1)</span></p>
254
266
  <z-icon class="big" name="caret-down" />
255
267
  </div>
256
268
  <div class="open-combo-data">
257
- <z-input size="big" htmlid="combo_search" label="cerca" placeholder="placeholder" type="text" value="prova"></z-input>
258
- <div class="search" tabindex="-1">
259
- <ul>
260
- <z-myz-list-item class="big" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>
261
- </ul>
262
- <div>
263
- <a role="button" tabindex="0">CHIUDI</a>
269
+ <z-input aria-autocomplete="list" aria-controls="combobox_list" aria-expanded="true" htmlid="combobox_search" label="cerca" placeholder="placeholder" role="combobox" aria-label="combo" size="big" type="text" value="prova"></z-input>
270
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
271
+ <div class="search">
272
+ <ul role="none">
273
+ <z-myz-list-item class="big" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>
274
+ </ul>
275
+ <div>
276
+ <a role="button" tabindex="0">CHIUDI</a>
277
+ </div>
264
278
  </div>
265
279
  </div>
266
280
  </div>
@@ -272,32 +286,35 @@ describe("Suite test ZCombobox", () => {
272
286
  it("Test render ZCombobox aperta con check all", async () => {
273
287
  const page = await newSpecPage({
274
288
  components: [ZCombobox],
275
- html: `<z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
289
+ html: `<z-combobox inputid="combobox" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
276
290
  });
277
291
  page.rootInstance.isopen = true;
278
292
  await page.waitForChanges();
279
293
  expect(page.root).toEqualHtml(`
280
- <z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
294
+ <z-combobox inputid="combobox" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
281
295
  <mock:shadow-root>
282
- <div class="open" data-action="combo-combo" id="combo">
283
- <div class="header" role="button" tabindex="0">
296
+ <div class="open" data-action="combo-combobox" id="combobox">
297
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
284
298
  <p class="body-3">combo<span>(1)</span></p>
285
299
  <z-icon class="big" name="caret-down" />
286
300
  </div>
287
301
  <div class="open-combo-data">
288
- <div class="check-all-wrapper">
289
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="CHECK" disabled="0" />
302
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
303
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
304
+ <div class="check-all-wrapper">
305
+ <z-input type="checkbox" aria-selected="false" role="option" size="big" htmlid="combo-checkbox-combobox-check-all" class="combo-item-checkbox-input-combobox" label="CHECK" disabled="0" />
306
+ </div>
307
+ <div>
308
+ <ul role="none">
309
+ <z-list-element dividertype="element" id="item_1" size="large">
310
+ <z-input role="option" aria-selected="false" disabled="0" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento"></z-input>
311
+ </z-list-element>
312
+ <z-list-element dividertype="none" id="item_2" size="large">
313
+ <z-input role="option" aria-selected="true" type="checkbox" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" checked></z-input>
314
+ </z-list-element>
315
+ </ul>
316
+ </div>
290
317
  </div>
291
- <div tabindex="-1">
292
- <ul>
293
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
294
- <z-input disabled="0" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
295
- </z-myz-list-item>
296
- <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
297
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
298
- </z-myz-list-item>
299
- </ul>
300
- </div
301
318
  </div>
302
319
  </div>
303
320
  </mock:shadow-root>
@@ -307,32 +324,35 @@ describe("Suite test ZCombobox", () => {
307
324
  it("Test render ZCombobox aperta con uncheck all", async () => {
308
325
  const page = await newSpecPage({
309
326
  components: [ZCombobox],
310
- html: `<z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
327
+ html: `<z-combobox inputid="combobox" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
311
328
  });
312
329
  page.rootInstance.isopen = true;
313
330
  await page.waitForChanges();
314
331
  expect(page.root).toEqualHtml(`
315
- <z-combobox inputid="combo" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'>
332
+ <z-combobox inputid="combobox" label="combo" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":true}]'>
316
333
  <mock:shadow-root>
317
- <div class="open" data-action="combo-combo" id="combo">
318
- <div class="header" role="button" tabindex="0">
334
+ <div class="open" data-action="combo-combobox" id="combobox">
335
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
319
336
  <p class="body-3">combo<span>(2)</span></p>
320
337
  <z-icon class="big" name="caret-down" />
321
338
  </div>
322
339
  <div class="open-combo-data">
323
- <div class="check-all-wrapper">
324
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="UNCHECK" checked disabled="0" />
340
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
341
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
342
+ <div class="check-all-wrapper">
343
+ <z-input type="checkbox" aria-selected="true" role="option" size="big" htmlid="combo-checkbox-combobox-check-all" class="combo-item-checkbox-input-combobox" label="UNCHECK" checked disabled="0" />
344
+ </div>
345
+ <div>
346
+ <ul role="none">
347
+ <z-list-element dividertype="element" id="item_1" size="large">
348
+ <z-input type="checkbox" role="option" aria-selected="true" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento" checked></z-input>
349
+ </z-list-element>
350
+ <z-list-element dividertype="none" id="item_2" size="large">
351
+ <z-input type="checkbox" role="option" aria-selected="true" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" checked></z-input>
352
+ </z-list-element>
353
+ </ul>
354
+ </div>
325
355
  </div>
326
- <div tabindex="-1">
327
- <ul>
328
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
329
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
330
- </z-myz-list-item>
331
- <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
332
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
333
- </z-myz-list-item>
334
- </ul>
335
- </div
336
356
  </div>
337
357
  </div>
338
358
  </mock:shadow-root>
@@ -342,29 +362,32 @@ describe("Suite test ZCombobox", () => {
342
362
  it("Test render ZCombobox aperta con max checkable items", async () => {
343
363
  const page = await newSpecPage({
344
364
  components: [ZCombobox],
345
- html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
365
+ html: `<z-combobox inputid="combobox" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'></z-combobox>`,
346
366
  });
347
367
  page.rootInstance.isopen = true;
348
368
  await page.waitForChanges();
349
369
  expect(page.root).toEqualHtml(`
350
- <z-combobox inputid="combo" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
370
+ <z-combobox inputid="combobox" label="combo" maxcheckableitems="1" items='[{"id":"item_1","name":"primo elemento","checked":false},{"id":"item_2","name":"secondo elemento","checked":true}]'>
351
371
  <mock:shadow-root>
352
- <div class="open" data-action="combo-combo" id="combo">
353
- <div class="header" role="button" tabindex="0">
372
+ <div class="open" data-action="combo-combobox" id="combobox">
373
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
354
374
  <p class="body-3">combo<span>(1)</span></p>
355
375
  <z-icon class="big" name="caret-down" />
356
376
  </div>
357
377
  <div class="open-combo-data">
358
- <div tabindex="-1">
359
- <ul>
360
- <z-myz-list-item class="big" id="item_1" listitemid="item_1" action="combo-li-combo" underlined="">
361
- <z-input disabled="" type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento"></z-input>
362
- </z-myz-list-item>
363
- <z-myz-list-item class="big" id="item_2" listitemid="item_2" action="combo-li-combo">
364
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" checked></z-input>
365
- </z-myz-list-item>
366
- </ul>
367
- </div
378
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
379
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
380
+ <div>
381
+ <ul role="none">
382
+ <z-list-element dividertype="element" id="item_1" size="large">
383
+ <z-input role="option" aria-selected="false" disabled="" class="combo-item-checkbox-input-combobox" type="checkbox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento"></z-input>
384
+ </z-list-element>
385
+ <z-list-element dividertype="none" id="item_2" size="large">
386
+ <z-input type="checkbox" role="option" aria-selected="true" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" checked></z-input>
387
+ </z-list-element>
388
+ </ul>
389
+ </div>
390
+ </div>
368
391
  </div>
369
392
  </div>
370
393
  </mock:shadow-root>
@@ -374,32 +397,35 @@ describe("Suite test ZCombobox", () => {
374
397
  it("Test render ZCombobox aperta con maxcheckableitems + check all", async () => {
375
398
  const page = await newSpecPage({
376
399
  components: [ZCombobox],
377
- html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
400
+ html: `<z-combobox inputid="combobox" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
378
401
  });
379
402
  page.rootInstance.isopen = true;
380
403
  await page.waitForChanges();
381
404
  expect(page.root).toEqualHtml(`
382
- <z-combobox inputid="combo" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
405
+ <z-combobox inputid="combobox" label="combo" maxcheckableitems="3" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
383
406
  <mock:shadow-root>
384
- <div class="open" data-action="combo-combo" id="combo">
385
- <div class="header" role="button" tabindex="0">
407
+ <div class="open" data-action="combo-combobox" id="combobox">
408
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
386
409
  <p class="body-3">combo<span>(1)</span></p>
387
410
  <z-icon class="big" name="caret-down" />
388
411
  </div>
389
412
  <div class="open-combo-data">
390
- <div class="check-all-wrapper">
391
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-check-all" label="CHECK" />
413
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
414
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
415
+ <div class="check-all-wrapper">
416
+ <z-input aria-selected="false" type="checkbox" role="option" size="big" htmlid="combo-checkbox-combobox-check-all" class="combo-item-checkbox-input-combobox" label="CHECK" />
417
+ </div>
418
+ <div>
419
+ <ul role="none">
420
+ <z-list-element dividertype="element" id="item_1" size="large">
421
+ <z-input type="checkbox" role="option" aria-selected="true" size="big" class="combo-item-checkbox-input-combobox" htmlid="combo-checkbox-combobox-item_1" label="primo elemento" checked></z-input>
422
+ </z-list-element>
423
+ <z-list-element dividertype="none" id="item_2" size="large">
424
+ <z-input type="checkbox" role="option" aria-selected="false" size="big" class="combo-item-checkbox-input-combobox" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento"></z-input>
425
+ </z-list-element>
426
+ </ul>
427
+ </div>
392
428
  </div>
393
- <div tabindex="-1">
394
- <ul>
395
- <z-myz-list-item id="item_1" class="big" listitemid="item_1" action="combo-li-combo" underlined="">
396
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
397
- </z-myz-list-item>
398
- <z-myz-list-item id="item_2" class="big" listitemid="item_2" action="combo-li-combo">
399
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento"></z-input>
400
- </z-myz-list-item>
401
- </ul>
402
- </div
403
429
  </div>
404
430
  </div>
405
431
  </mock:shadow-root>
@@ -409,32 +435,36 @@ describe("Suite test ZCombobox", () => {
409
435
  it("Test render ZCombobox aperta con maxcheckableitems + check all (disabled)", async () => {
410
436
  const page = await newSpecPage({
411
437
  components: [ZCombobox],
412
- html: `<z-combobox inputid="combo" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
438
+ html: `<z-combobox inputid="combobox" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'></z-combobox>`,
413
439
  });
414
440
  page.rootInstance.isopen = true;
415
441
  await page.waitForChanges();
416
442
  expect(page.root).toEqualHtml(`
417
- <z-combobox inputid="combo" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
443
+ <z-combobox inputid="combobox" label="combo" maxcheckableitems="1" hascheckall="true" checkalltext="CHECK" uncheckalltext="UNCHECK" items='[{"id":"item_1","name":"primo elemento","checked":true},{"id":"item_2","name":"secondo elemento","checked":false}]'>
418
444
  <mock:shadow-root>
419
- <div class="open" data-action="combo-combo" id="combo">
420
- <div class="header" role="button" tabindex="0">
445
+ <div class="open" data-action="combo-combobox" id="combobox">
446
+ <div aria-expanded="true" class="header" role="button" tabindex="0">
421
447
  <p class="body-3">combo<span>(1)</span></p>
422
448
  <z-icon class="big" name="caret-down" />
423
449
  </div>
424
- <div class="open-combo-data">
425
- <div class="check-all-wrapper">
426
- <z-input type="checkbox" size="big" disabled htmlid="combo-checkbox-combo-check-all" label="CHECK" />
450
+
451
+ <div class="open-combo-data">
452
+ <span role="combobox" aria-label="combo" aria-controls="combobox_list" aria-expanded="true"></span>
453
+ <div aria-multiselectable="" role="listbox" aria-label="combo" id="combobox_list" aria-owns="">
454
+ <div class="check-all-wrapper">
455
+ <z-input type="checkbox" aria-selected="false" role="option" size="big" disabled htmlid="combo-checkbox-combobox-check-all" class="combo-item-checkbox-input-combobox" label="CHECK" />
456
+ </div>
457
+ <div>
458
+ <ul role="none">
459
+ <z-list-element dividertype="element" id="item_1" size="large">
460
+ <z-input type="checkbox" role="option" aria-selected="true" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_1" label="primo elemento" checked></z-input>
461
+ </z-list-element>
462
+ <z-list-element dividertype="none" id="item_2" size="large">
463
+ <z-input type="checkbox" role="option" aria-selected="false" class="combo-item-checkbox-input-combobox" size="big" htmlid="combo-checkbox-combobox-item_2" label="secondo elemento" disabled></z-input>
464
+ </z-list-element>
465
+ </ul>
466
+ </div
427
467
  </div>
428
- <div tabindex="-1">
429
- <ul>
430
- <z-myz-list-item id="item_1" class="big" listitemid="item_1" action="combo-li-combo" underlined="">
431
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_1" label="primo elemento" checked></z-input>
432
- </z-myz-list-item>
433
- <z-myz-list-item id="item_2" class="big" listitemid="item_2" action="combo-li-combo">
434
- <z-input type="checkbox" size="big" htmlid="combo-checkbox-combo-item_2" label="secondo elemento" disabled></z-input>
435
- </z-myz-list-item>
436
- </ul>
437
- </div
438
468
  </div>
439
469
  </div>
440
470
  </mock:shadow-root>