@watermarkinsights/ripple 5.6.0-7 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/dist/cjs/{chartFunctions-995023b1.js → chartFunctions-6fd43417.js} +1 -1
  2. package/dist/cjs/{functions-e24249e6.js → functions-04149f6d.js} +0 -6
  3. package/dist/cjs/{global-8b5f83e4.js → global-4a315ae6.js} +1 -1
  4. package/dist/cjs/index-e86c28b6.js +0 -12
  5. package/dist/cjs/{intl-5aeba788.js → intl-b1e99809.js} +1 -1
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/priv-calendar.cjs.entry.js +1 -1
  8. package/dist/cjs/priv-chart-popover.cjs.entry.js +1 -1
  9. package/dist/cjs/ripple.cjs.js +2 -2
  10. package/dist/cjs/wm-action-menu_2.cjs.entry.js +1 -1
  11. package/dist/cjs/wm-button.cjs.entry.js +1 -1
  12. package/dist/cjs/wm-chart.cjs.entry.js +3 -3
  13. package/dist/cjs/wm-date-range.cjs.entry.js +1 -1
  14. package/dist/cjs/wm-datepicker.cjs.entry.js +1 -1
  15. package/dist/cjs/wm-file.cjs.entry.js +1 -1
  16. package/dist/cjs/wm-input.cjs.entry.js +2 -2
  17. package/dist/cjs/wm-line-chart.cjs.entry.js +3 -3
  18. package/dist/cjs/wm-modal-header.cjs.entry.js +2 -2
  19. package/dist/cjs/wm-modal.cjs.entry.js +1 -1
  20. package/dist/cjs/wm-navigation_3.cjs.entry.js +2 -2
  21. package/dist/cjs/wm-navigator.cjs.entry.js +1 -1
  22. package/dist/cjs/wm-option_2.cjs.entry.js +338 -33
  23. package/dist/cjs/wm-pagination.cjs.entry.js +1 -1
  24. package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +2 -2
  25. package/dist/cjs/wm-search.cjs.entry.js +2 -2
  26. package/dist/cjs/wm-snackbar.cjs.entry.js +2 -2
  27. package/dist/cjs/wm-tab-item_3.cjs.entry.js +1 -1
  28. package/dist/cjs/wm-tag-input.cjs.entry.js +2 -2
  29. package/dist/cjs/wm-tag-option.cjs.entry.js +1 -1
  30. package/dist/cjs/wm-textarea.cjs.entry.js +2 -2
  31. package/dist/cjs/wm-timepicker.cjs.entry.js +1 -1
  32. package/dist/cjs/wm-toggletip.cjs.entry.js +1 -1
  33. package/dist/cjs/wm-uploader.cjs.entry.js +2 -2
  34. package/dist/collection/collection-manifest.json +2 -5
  35. package/dist/collection/components/wm-option/wm-option.js +9 -35
  36. package/dist/collection/components/wm-option/wm-option.spec.js +1 -1
  37. package/dist/collection/components/{selects/wm-select → wm-select}/wm-select.css +74 -0
  38. package/dist/collection/components/{selects/wm-select → wm-select}/wm-select.js +383 -16
  39. package/dist/collection/components/{selects/wm-select → wm-select}/wm-select.spec.js +62 -62
  40. package/dist/collection/global/functions.js +0 -5
  41. package/dist/esm/{chartFunctions-dfcb1edf.js → chartFunctions-f5eb7f59.js} +1 -1
  42. package/dist/esm/{functions-b791a892.js → functions-cf37f81f.js} +1 -6
  43. package/dist/esm/{global-5c6da026.js → global-016b76a8.js} +1 -1
  44. package/dist/esm/index-558b5a82.js +0 -12
  45. package/dist/esm/{intl-f2f7ce8b.js → intl-c72b75dc.js} +1 -1
  46. package/dist/esm/loader.js +2 -2
  47. package/dist/esm/priv-calendar.entry.js +1 -1
  48. package/dist/esm/priv-chart-popover.entry.js +1 -1
  49. package/dist/esm/ripple.js +2 -2
  50. package/dist/esm/wm-action-menu_2.entry.js +1 -1
  51. package/dist/esm/wm-button.entry.js +1 -1
  52. package/dist/esm/wm-chart.entry.js +3 -3
  53. package/dist/esm/wm-date-range.entry.js +1 -1
  54. package/dist/esm/wm-datepicker.entry.js +1 -1
  55. package/dist/esm/wm-file.entry.js +1 -1
  56. package/dist/esm/wm-input.entry.js +2 -2
  57. package/dist/esm/wm-line-chart.entry.js +3 -3
  58. package/dist/esm/wm-modal-header.entry.js +2 -2
  59. package/dist/esm/wm-modal.entry.js +1 -1
  60. package/dist/esm/wm-navigation_3.entry.js +2 -2
  61. package/dist/esm/wm-navigator.entry.js +1 -1
  62. package/dist/esm/wm-option_2.entry.js +338 -33
  63. package/dist/esm/wm-pagination.entry.js +1 -1
  64. package/dist/esm/wm-progress-indicator_3.entry.js +2 -2
  65. package/dist/esm/wm-search.entry.js +2 -2
  66. package/dist/esm/wm-snackbar.entry.js +2 -2
  67. package/dist/esm/wm-tab-item_3.entry.js +1 -1
  68. package/dist/esm/wm-tag-input.entry.js +2 -2
  69. package/dist/esm/wm-tag-option.entry.js +1 -1
  70. package/dist/esm/wm-textarea.entry.js +2 -2
  71. package/dist/esm/wm-timepicker.entry.js +1 -1
  72. package/dist/esm/wm-toggletip.entry.js +1 -1
  73. package/dist/esm/wm-uploader.entry.js +2 -2
  74. package/dist/esm-es5/{chartFunctions-dfcb1edf.js → chartFunctions-f5eb7f59.js} +1 -1
  75. package/dist/esm-es5/{functions-b791a892.js → functions-cf37f81f.js} +1 -1
  76. package/dist/esm-es5/global-016b76a8.js +1 -0
  77. package/dist/esm-es5/index-558b5a82.js +1 -1
  78. package/dist/esm-es5/{intl-f2f7ce8b.js → intl-c72b75dc.js} +1 -1
  79. package/dist/esm-es5/loader.js +1 -1
  80. package/dist/esm-es5/priv-calendar.entry.js +1 -1
  81. package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
  82. package/dist/esm-es5/ripple.js +1 -1
  83. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
  84. package/dist/esm-es5/wm-button.entry.js +1 -1
  85. package/dist/esm-es5/wm-chart.entry.js +1 -1
  86. package/dist/esm-es5/wm-date-range.entry.js +1 -1
  87. package/dist/esm-es5/wm-datepicker.entry.js +1 -1
  88. package/dist/esm-es5/wm-file.entry.js +1 -1
  89. package/dist/esm-es5/wm-input.entry.js +1 -1
  90. package/dist/esm-es5/wm-line-chart.entry.js +1 -1
  91. package/dist/esm-es5/wm-modal-header.entry.js +1 -1
  92. package/dist/esm-es5/wm-modal.entry.js +1 -1
  93. package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
  94. package/dist/esm-es5/wm-navigator.entry.js +1 -1
  95. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  96. package/dist/esm-es5/wm-pagination.entry.js +1 -1
  97. package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
  98. package/dist/esm-es5/wm-search.entry.js +1 -1
  99. package/dist/esm-es5/wm-snackbar.entry.js +1 -1
  100. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
  101. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  102. package/dist/esm-es5/wm-tag-option.entry.js +1 -1
  103. package/dist/esm-es5/wm-textarea.entry.js +1 -1
  104. package/dist/esm-es5/wm-timepicker.entry.js +1 -1
  105. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  106. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  107. package/dist/ripple/{p-c1e3c2fb.entry.js → p-04f9a60a.entry.js} +1 -1
  108. package/dist/ripple/{p-41550baa.entry.js → p-0b570b66.entry.js} +1 -1
  109. package/dist/ripple/{p-5300b15d.entry.js → p-0d05b4a9.entry.js} +1 -1
  110. package/dist/ripple/p-11aaef56.system.entry.js +1 -0
  111. package/dist/ripple/{p-b01f9998.system.entry.js → p-120dbdc8.system.entry.js} +1 -1
  112. package/dist/ripple/{p-f24572f5.entry.js → p-1aef4b40.entry.js} +1 -1
  113. package/dist/ripple/{p-13f51c06.entry.js → p-20a800a7.entry.js} +1 -1
  114. package/dist/ripple/{p-236af552.entry.js → p-24103be5.entry.js} +1 -1
  115. package/dist/ripple/{p-1389302e.system.entry.js → p-2ccf8450.system.entry.js} +1 -1
  116. package/dist/ripple/{p-6cc07645.system.entry.js → p-2d0bcc88.system.entry.js} +1 -1
  117. package/dist/ripple/{p-0b1c6965.system.entry.js → p-2d0e4020.system.entry.js} +1 -1
  118. package/dist/ripple/{p-215793a4.entry.js → p-31094930.entry.js} +1 -1
  119. package/dist/ripple/{p-1e625a5e.entry.js → p-3ea0e27c.entry.js} +1 -1
  120. package/dist/ripple/{p-db9657eb.system.entry.js → p-446e0b2c.system.entry.js} +1 -1
  121. package/dist/ripple/{p-72165bd2.entry.js → p-451433a6.entry.js} +1 -1
  122. package/dist/ripple/p-481a9e2f.system.js +1 -0
  123. package/dist/ripple/{p-45f9ad09.entry.js → p-508362c5.entry.js} +1 -1
  124. package/dist/ripple/{p-3deaf4d9.system.entry.js → p-53519eed.system.entry.js} +1 -1
  125. package/dist/ripple/p-55668879.system.js +1 -0
  126. package/dist/ripple/{p-725230dd.system.entry.js → p-5967bd2a.system.entry.js} +1 -1
  127. package/dist/ripple/{p-5a9e3108.system.entry.js → p-5db92638.system.entry.js} +1 -1
  128. package/dist/ripple/{p-3e415c49.system.entry.js → p-5f793375.system.entry.js} +1 -1
  129. package/dist/ripple/p-6636a40b.system.entry.js +1 -0
  130. package/dist/ripple/{p-f90e4094.entry.js → p-6f4c4231.entry.js} +1 -1
  131. package/dist/ripple/{p-828adbf1.system.js → p-74032162.system.js} +1 -1
  132. package/dist/ripple/{p-5284791c.entry.js → p-762429a8.entry.js} +1 -1
  133. package/dist/ripple/{p-16f65bf4.js → p-76825602.js} +1 -1
  134. package/dist/ripple/{p-c47fab48.entry.js → p-76d53189.entry.js} +1 -1
  135. package/dist/ripple/{p-fa4f1030.system.entry.js → p-7f483c55.system.entry.js} +1 -1
  136. package/dist/ripple/{p-a3c01e10.system.entry.js → p-7fdcce90.system.entry.js} +1 -1
  137. package/dist/ripple/{p-cad0c5f9.system.entry.js → p-8008f0f2.system.entry.js} +1 -1
  138. package/dist/ripple/{p-3d50db36.entry.js → p-86d81e42.entry.js} +1 -1
  139. package/dist/ripple/{p-f2101a0d.entry.js → p-8a11ee6f.entry.js} +1 -1
  140. package/dist/ripple/{p-c2e00d4a.system.entry.js → p-8b272d80.system.entry.js} +1 -1
  141. package/dist/ripple/{p-885c3527.entry.js → p-9603168d.entry.js} +1 -1
  142. package/dist/ripple/{p-f40e1468.system.entry.js → p-97f276aa.system.entry.js} +1 -1
  143. package/dist/ripple/{p-749597da.system.entry.js → p-984287f7.system.entry.js} +1 -1
  144. package/dist/ripple/{p-ff1ed90f.entry.js → p-9b75d56c.entry.js} +1 -1
  145. package/dist/ripple/{p-a0ecb6d7.system.entry.js → p-9df3574d.system.entry.js} +1 -1
  146. package/dist/ripple/p-a40b0af9.system.js +1 -0
  147. package/dist/ripple/p-a895f1ef.entry.js +1 -0
  148. package/dist/ripple/{p-e081fdc2.system.entry.js → p-ae4460f2.system.entry.js} +1 -1
  149. package/dist/ripple/{p-b9dbf1f4.entry.js → p-bd142645.entry.js} +1 -1
  150. package/dist/ripple/{p-aea13873.entry.js → p-c61366fd.entry.js} +1 -1
  151. package/dist/ripple/{p-ca971eac.system.entry.js → p-c9200deb.system.entry.js} +1 -1
  152. package/dist/ripple/{p-6d129ef8.system.entry.js → p-cd51ee87.system.entry.js} +1 -1
  153. package/dist/ripple/{p-465d44f0.system.entry.js → p-ce8c6180.system.entry.js} +1 -1
  154. package/dist/ripple/{p-84ba5b74.entry.js → p-d0387d35.entry.js} +1 -1
  155. package/dist/ripple/{p-ed1f6b8d.system.entry.js → p-d8994408.system.entry.js} +1 -1
  156. package/dist/ripple/{p-eddbcb21.js → p-db190563.js} +1 -1
  157. package/dist/ripple/{p-83be63f6.entry.js → p-db8917e4.entry.js} +1 -1
  158. package/dist/ripple/{p-505eca1c.system.entry.js → p-dc7a6037.system.entry.js} +1 -1
  159. package/dist/ripple/{p-e687176d.entry.js → p-dfd1b720.entry.js} +1 -1
  160. package/dist/ripple/{p-df157138.entry.js → p-e3899e1f.entry.js} +1 -1
  161. package/dist/ripple/{p-30b905eb.system.entry.js → p-ed1971ff.system.entry.js} +1 -1
  162. package/dist/ripple/{p-2e79fa49.entry.js → p-f177d841.entry.js} +1 -1
  163. package/dist/ripple/{p-149a22bf.entry.js → p-f4b64ded.entry.js} +1 -1
  164. package/dist/ripple/p-f9494a9d.js +1 -0
  165. package/dist/ripple/{p-21d372ed.js → p-fb229776.js} +1 -1
  166. package/dist/ripple/{p-81c2df85.system.js → p-fb751343.system.js} +1 -1
  167. package/dist/ripple/{p-c853e185.system.entry.js → p-ffa15c47.system.entry.js} +1 -1
  168. package/dist/ripple/ripple.esm.js +1 -1
  169. package/dist/ripple/ripple.js +1 -1
  170. package/dist/types/components/wm-option/wm-option.d.ts +1 -2
  171. package/dist/types/components/{selects/priv-option-list/priv-option-list.d.ts → wm-select/wm-select.d.ts} +65 -37
  172. package/dist/types/components.d.ts +2 -148
  173. package/dist/types/global/functions.d.ts +0 -1
  174. package/package.json +2 -2
  175. package/dist/cjs/priv-option-list.cjs.entry.js +0 -384
  176. package/dist/cjs/wm-nested-select.cjs.entry.js +0 -295
  177. package/dist/cjs/wm-optgroup.cjs.entry.js +0 -56
  178. package/dist/collection/components/selects/priv-option-list/priv-option-list.css +0 -104
  179. package/dist/collection/components/selects/priv-option-list/priv-option-list.js +0 -714
  180. package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css +0 -378
  181. package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js +0 -581
  182. package/dist/collection/components/selects/wm-optgroup/wm-optgroup.css +0 -77
  183. package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js +0 -197
  184. package/dist/collection/dev/nested-select.js +0 -62
  185. package/dist/esm/priv-option-list.entry.js +0 -380
  186. package/dist/esm/wm-nested-select.entry.js +0 -291
  187. package/dist/esm/wm-optgroup.entry.js +0 -52
  188. package/dist/esm-es5/global-5c6da026.js +0 -1
  189. package/dist/esm-es5/priv-option-list.entry.js +0 -1
  190. package/dist/esm-es5/wm-nested-select.entry.js +0 -1
  191. package/dist/esm-es5/wm-optgroup.entry.js +0 -1
  192. package/dist/ripple/p-104c0e9b.system.entry.js +0 -1
  193. package/dist/ripple/p-17c8aac1.system.entry.js +0 -1
  194. package/dist/ripple/p-24ba754f.entry.js +0 -1
  195. package/dist/ripple/p-2fb58947.entry.js +0 -1
  196. package/dist/ripple/p-4564a101.system.entry.js +0 -1
  197. package/dist/ripple/p-4ca5ed96.entry.js +0 -1
  198. package/dist/ripple/p-50388b6f.system.entry.js +0 -1
  199. package/dist/ripple/p-5a8e86e9.system.js +0 -1
  200. package/dist/ripple/p-5b9babd9.system.entry.js +0 -1
  201. package/dist/ripple/p-61262e66.js +0 -1
  202. package/dist/ripple/p-8835adfb.entry.js +0 -1
  203. package/dist/ripple/p-aa4a7527.system.js +0 -1
  204. package/dist/ripple/p-ae82b3d2.system.js +0 -1
  205. package/dist/types/components/selects/wm-nested-select/wm-nested-select.d.ts +0 -55
  206. package/dist/types/components/selects/wm-optgroup/wm-optgroup.d.ts +0 -16
  207. package/dist/types/components/selects/wm-select/wm-select.d.ts +0 -53
  208. /package/dist/collection/components/{selects/wm-select → wm-select}/wm-select.e2e.js +0 -0
@@ -1,197 +0,0 @@
1
- import { h, Host } from "@stencil/core";
2
- export class Optgroup {
3
- constructor() {
4
- this.label = undefined;
5
- this.isExpanded = false;
6
- this.multiple = false;
7
- }
8
- get parentNestedSelect() {
9
- return this.el.parentElement;
10
- }
11
- isExpandedChanged() {
12
- if (this.isExpanded) {
13
- this.optgroupExpanded.emit();
14
- window.setTimeout(() => {
15
- // wait for slide in animation to complete before assigning focus
16
- this.optionListEl.handleInitialFocus();
17
- }, 250);
18
- }
19
- else {
20
- this.optgroupHidden.emit();
21
- }
22
- }
23
- async emitDeselection() {
24
- this.wmOptgroupAllDeselected.emit();
25
- }
26
- /*
27
- componentWillLoad() {
28
- this.multiple = this.parentNestedSelect.multiple;
29
- }
30
- */
31
- render() {
32
- return (h(Host, { class: `${this.isExpanded ? "visible" : ""}` }, h("div", { class: "return-btn", onClick: () => {
33
- this.isExpanded = false;
34
- } }, this.label), h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
35
- }
36
- static get is() { return "wm-optgroup"; }
37
- static get encapsulation() { return "shadow"; }
38
- static get delegatesFocus() { return true; }
39
- static get originalStyleUrls() {
40
- return {
41
- "$": ["wm-optgroup.scss"]
42
- };
43
- }
44
- static get styleUrls() {
45
- return {
46
- "$": ["wm-optgroup.css"]
47
- };
48
- }
49
- static get properties() {
50
- return {
51
- "label": {
52
- "type": "string",
53
- "mutable": false,
54
- "complexType": {
55
- "original": "string",
56
- "resolved": "string",
57
- "references": {}
58
- },
59
- "required": true,
60
- "optional": false,
61
- "docs": {
62
- "tags": [],
63
- "text": ""
64
- },
65
- "attribute": "label",
66
- "reflect": false
67
- },
68
- "isExpanded": {
69
- "type": "boolean",
70
- "mutable": true,
71
- "complexType": {
72
- "original": "boolean",
73
- "resolved": "boolean",
74
- "references": {}
75
- },
76
- "required": false,
77
- "optional": false,
78
- "docs": {
79
- "tags": [],
80
- "text": ""
81
- },
82
- "attribute": "is-expanded",
83
- "reflect": false,
84
- "defaultValue": "false"
85
- },
86
- "multiple": {
87
- "type": "boolean",
88
- "mutable": true,
89
- "complexType": {
90
- "original": "boolean",
91
- "resolved": "boolean",
92
- "references": {}
93
- },
94
- "required": false,
95
- "optional": false,
96
- "docs": {
97
- "tags": [],
98
- "text": ""
99
- },
100
- "attribute": "multiple",
101
- "reflect": false,
102
- "defaultValue": "false"
103
- }
104
- };
105
- }
106
- static get events() {
107
- return [{
108
- "method": "wmOptgroupAllSelected",
109
- "name": "wmOptgroupAllSelected",
110
- "bubbles": true,
111
- "cancelable": true,
112
- "composed": true,
113
- "docs": {
114
- "tags": [],
115
- "text": ""
116
- },
117
- "complexType": {
118
- "original": "any",
119
- "resolved": "any",
120
- "references": {}
121
- }
122
- }, {
123
- "method": "wmOptgroupAllDeselected",
124
- "name": "wmOptgroupAllDeselected",
125
- "bubbles": true,
126
- "cancelable": true,
127
- "composed": true,
128
- "docs": {
129
- "tags": [],
130
- "text": ""
131
- },
132
- "complexType": {
133
- "original": "any",
134
- "resolved": "any",
135
- "references": {}
136
- }
137
- }, {
138
- "method": "optgroupExpanded",
139
- "name": "optgroupExpanded",
140
- "bubbles": true,
141
- "cancelable": true,
142
- "composed": true,
143
- "docs": {
144
- "tags": [],
145
- "text": ""
146
- },
147
- "complexType": {
148
- "original": "any",
149
- "resolved": "any",
150
- "references": {}
151
- }
152
- }, {
153
- "method": "optgroupHidden",
154
- "name": "optgroupHidden",
155
- "bubbles": true,
156
- "cancelable": true,
157
- "composed": true,
158
- "docs": {
159
- "tags": [],
160
- "text": ""
161
- },
162
- "complexType": {
163
- "original": "any",
164
- "resolved": "any",
165
- "references": {}
166
- }
167
- }];
168
- }
169
- static get methods() {
170
- return {
171
- "emitDeselection": {
172
- "complexType": {
173
- "signature": "() => Promise<void>",
174
- "parameters": [],
175
- "references": {
176
- "Promise": {
177
- "location": "global",
178
- "id": "global::Promise"
179
- }
180
- },
181
- "return": "Promise<void>"
182
- },
183
- "docs": {
184
- "text": "",
185
- "tags": []
186
- }
187
- }
188
- };
189
- }
190
- static get elementRef() { return "el"; }
191
- static get watchers() {
192
- return [{
193
- "propName": "isExpanded",
194
- "methodName": "isExpandedChanged"
195
- }];
196
- }
197
- }
@@ -1,62 +0,0 @@
1
- document.addEventListener("wmSelectBlurred", renderErrors);
2
-
3
- function renderErrors() {
4
- const errorDiv = document.getElementById("errors");
5
- const select = document.getElementById("select1");
6
- const selectedOption = Array.from(select.querySelectorAll("wm-option")).filter((o) => o.selected)[0];
7
-
8
- if (selectedOption.value === "C") {
9
- select.invalid = true;
10
- select.errorMessage = "C is my least favorite letter.";
11
- } else {
12
- select.invalid = false;
13
- select.errorMessage = null;
14
- }
15
- }
16
-
17
- function testSelectedOption(selectComp) {
18
- setTimeout(() => {
19
- // making sure the selected and aria-selected attributes are always in sync
20
- const options = selectComp.querySelectorAll("wm-option");
21
- let selectedOption = Array.from(options).filter((option) => !!option.selected)[0];
22
- const ariaSelectedOption = Array.from(options).filter((option) => !!option.getAttribute("aria-selected"))[0];
23
- if (selectedOption != ariaSelectedOption) {
24
- console.log(selectComp.id, selectedOption, ariaSelectedOption);
25
- }
26
- }, 150);
27
- }
28
-
29
- const nestedSelects = document.querySelectorAll("wm-nested-select");
30
- nestedSelects.forEach((nestedSelect) => {
31
- nestedSelect.addEventListener("wmOptionSelected", (ev) => handleOptionSelected(ev));
32
- nestedSelect.addEventListener("wmOptionDeselected", (ev) => handleOptionDeselected(ev));
33
- });
34
-
35
- const optgroups = document.querySelectorAll("wm-optgroup");
36
- optgroups.forEach((optgroup) => {
37
- optgroup.addEventListener("wmOptgroupAllSelected", (ev) => handleAllSelected(ev));
38
- optgroup.addEventListener("wmOptgroupAllDeselected", (ev) => handleAllDeselected(ev));
39
- });
40
-
41
- function handleOptionSelected(ev) {
42
- const parentOptgroup = ev.target.parentElement;
43
- const parentNestedSelect = parentOptgroup.parentElement;
44
-
45
- if (!parentNestedSelect.multiple) {
46
- // in single select, deselect all other options
47
- parentNestedSelect.querySelectorAll("wm-option").forEach((option) => (option.selected = false));
48
- }
49
- ev.target.selected = true;
50
- }
51
-
52
- function handleOptionDeselected(ev) {
53
- ev.target.selected = false;
54
- }
55
-
56
- function handleAllSelected(ev) {
57
- ev.target.querySelectorAll("wm-option").forEach((option) => (option.selected = true));
58
- }
59
-
60
- function handleAllDeselected(ev) {
61
- ev.target.querySelectorAll("wm-option").forEach((option) => (option.selected = false));
62
- }
@@ -1,380 +0,0 @@
1
- import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-558b5a82.js';
2
- import { i as intl, d as debounce, z as isElOrChild } from './functions-b791a892.js';
3
-
4
- const privOptionListCss = ".search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid;border-color:var(--wmcolor-select-option-border);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid;border-color:var(--wmcolor-select-search-border)}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f349\";color:var(--wmcolor-select-search-icon);font-size:1.12rem}.search-results-message{padding:1.25rem;color:var(--wmcolor-select-searchresults-text);font-size:0.875rem;font-style:italic}.select-all{width:100%;cursor:pointer;padding:1.25rem;border:none;margin:0;border-bottom:2px solid;border-color:var(--wmcolor-select-selectall-border);background:var(--wmcolor-select-selectall-background);font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:var(--wmcolor-select-selectall-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-all:hover,.select-all:focus{outline:none;background:#f4f4f4}";
5
-
6
- const PrivOptionList = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.optionListSearchChanged = createEvent(this, "optionListSearchChanged", 7);
10
- this.optionListCloseRequested = createEvent(this, "optionListCloseRequested", 7);
11
- this.optionListAllSelected = createEvent(this, "optionListAllSelected", 7);
12
- this.optionListAllDeselected = createEvent(this, "optionListAllDeselected", 7);
13
- this.searchIndex = 0;
14
- this.keysSoFar = "";
15
- this.selectAllMessage = intl.formatMessage({
16
- id: "select.selectAll",
17
- defaultMessage: "Select All",
18
- });
19
- this.deselectAllMessage = intl.formatMessage({
20
- id: "select.deselectAll",
21
- defaultMessage: "Deselect All",
22
- });
23
- this.allOptionsSelectedMessage = intl.formatMessage({
24
- id: "select.allOptionsSelected",
25
- defaultMessage: "All options selected",
26
- });
27
- this.allOptionsDeselectedMessage = intl.formatMessage({
28
- id: "select.allOptionsDeselected",
29
- defaultMessage: "All options deselected",
30
- });
31
- this.debouncedSearch = debounce(() => {
32
- this.searchTerm = this.searchFieldEl.value;
33
- this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
34
- if (this.filteredOptions.length) {
35
- this.announce(this.resultsFoundMessage);
36
- }
37
- else {
38
- this.announce(this.noResultsFoundMessage);
39
- }
40
- }, 150);
41
- this.debouncedClearKeysSoFar = debounce(() => {
42
- this.keysSoFar = "";
43
- }, 500);
44
- this.multiple = false;
45
- this.search = false;
46
- this.selectAll = false;
47
- this.searchPlaceholder = undefined;
48
- this.maxHeight = undefined;
49
- this.announcement = "";
50
- this.searchTerm = "";
51
- }
52
- get childOptions() {
53
- return Array.from(this.el.getRootNode().host.querySelectorAll("wm-option"));
54
- }
55
- get cloneOptions() {
56
- return Array.from(this.el.querySelectorAll("wm-option"));
57
- }
58
- get allOptionEls() {
59
- // this includes both slotted wm-options and internally created wm-options
60
- return this.cloneOptions.concat(this.childOptions);
61
- }
62
- get visibleOptionEls() {
63
- return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
64
- }
65
- //////////////////////////////////////
66
- // for search variants
67
- get filteredOptions() {
68
- return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
69
- }
70
- //////////////////////////////////////
71
- //////////////////////////////////////
72
- // for multiselect button text
73
- get selectedOptions() {
74
- return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
75
- }
76
- get visibleSelectAllButton() {
77
- return this.selectAll && this.multiple && this.searchTerm === "";
78
- }
79
- get allSelected() {
80
- return this.childOptions.every((option) => option.selected);
81
- }
82
- //////////////////////////////////////
83
- get resultsFoundMessage() {
84
- return intl.formatMessage({
85
- id: "select.searchResultsFound",
86
- defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
87
- description: "The message read by the screen reader, indicating how many results a search returned",
88
- }, { numResults: this.filteredOptions.length });
89
- }
90
- get noResultsFoundMessage() {
91
- return intl.formatMessage({
92
- id: "select.noSearchResults",
93
- defaultMessage: "No results found. Please try your search again.",
94
- description: "The message displayed when no options pass the search filter",
95
- });
96
- }
97
- findAndFocusOption(ev) {
98
- const letterPressed = ev.detail.letter.toLowerCase();
99
- const optionPressed = ev.detail.optionEl;
100
- if (!this.keysSoFar && letterPressed == " ") {
101
- // if the first key entered is space, treat as a click. Otherwise include in
102
- optionPressed.click();
103
- }
104
- else {
105
- if (!this.keysSoFar) {
106
- // if first character entered, set currently focused option as the starting index for the search
107
- this.visibleOptionEls.forEach((option, idx) => {
108
- if (option.focused) {
109
- this.searchIndex = idx;
110
- }
111
- });
112
- }
113
- this.keysSoFar += letterPressed;
114
- let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);
115
- if (!nextMatch) {
116
- // if match can't be found from starting option downwards, search from top
117
- nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);
118
- }
119
- if (nextMatch) {
120
- // findMatchInRange still might have returned null, only focus if match found
121
- this.focusOption(nextMatch);
122
- }
123
- this.debouncedClearKeysSoFar();
124
- }
125
- }
126
- handleOptionSelection(ev) {
127
- this.focusOption(ev.detail);
128
- }
129
- handleChildUp(ev) {
130
- this.moveUp(ev.detail);
131
- }
132
- handleChildDown(ev) {
133
- this.moveDown(ev.detail);
134
- }
135
- moveToFirstOption() {
136
- this.focusOption(this.visibleOptionEls[0]);
137
- }
138
- moveToLastOption() {
139
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
140
- }
141
- handleOptionCloneSelection(ev) {
142
- const correspondingOption = this.findCorrespondingOption(ev.detail);
143
- correspondingOption.click();
144
- }
145
- componentDidLoad() {
146
- if (this.multiple) {
147
- this.updateOptionVisibility();
148
- }
149
- // Dev can overwrite the max-height rule set in the Sass file
150
- if (this.maxHeight) {
151
- // this.listboxEl.style.maxHeight = this.maxHeight;
152
- this.listboxEl.style.maxHeight = this.maxHeight;
153
- }
154
- }
155
- async handleChildChange(_) {
156
- if (this.multiple) {
157
- // on update of wm-options selected state, rerender to update clones state
158
- forceUpdate(this.el);
159
- }
160
- }
161
- async clearSearch() {
162
- this.searchFieldEl.value = "";
163
- this.searchTerm = "";
164
- this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
165
- }
166
- async focusOption(option) {
167
- this.allOptionEls.forEach((i) => (i.focused = i === option));
168
- // option must be scrolledIntoView before focused
169
- // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView didload do nothing as the option will already be in view
170
- option.scrollIntoView({ block: "nearest" });
171
- // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
172
- // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
173
- // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
174
- window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
175
- option.focus();
176
- }
177
- async handleInitialFocus(optionToSelect) {
178
- switch (optionToSelect) {
179
- case "next":
180
- // search variant focuses search field
181
- // all others focus option "after" last selected option (this can be the first option)
182
- if (this.search) {
183
- this.searchFieldEl.focus();
184
- this.listboxEl.scrollTop = 0;
185
- }
186
- else {
187
- this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
188
- }
189
- break;
190
- case "previous":
191
- // search variant focuses last option
192
- // all others focus option "above" first selected option (this can be the last option)
193
- if (this.search) {
194
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
195
- }
196
- else {
197
- this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
198
- }
199
- break;
200
- default:
201
- // search variant focuses search field
202
- // all others focus the selected option
203
- // if no option is selected (empty multiselect), focuses first option
204
- if (this.search) {
205
- this.searchFieldEl.focus();
206
- this.listboxEl.scrollTop = 0;
207
- }
208
- else if (this.selectedOptions.length > 0) {
209
- this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
210
- }
211
- else {
212
- this.focusOption(this.visibleOptionEls[0]);
213
- }
214
- break;
215
- }
216
- }
217
- async unfocusAll() {
218
- this.allOptionEls.map((i) => (i.focused = false));
219
- }
220
- findMatchInRange(list, startIndex, endIndex) {
221
- let match = null;
222
- let optionsInRange = list.slice(startIndex, endIndex);
223
- // Find the first option starting with the keysSoFar substring, searching in
224
- // the specified range of options
225
- optionsInRange.forEach((option) => {
226
- const label = option.textContent;
227
- if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {
228
- match = option;
229
- }
230
- });
231
- return match;
232
- }
233
- findCorrespondingOption(el) {
234
- // if clone, returns the child wm-option
235
- // if child wm-option, returns clone
236
- const isClone = el.classList.contains("clone");
237
- return isClone
238
- ? this.childOptions[this.cloneOptions.indexOf(el)]
239
- : this.cloneOptions[this.childOptions.indexOf(el)];
240
- }
241
- handleSearchFieldBlur(ev) {
242
- this.searchFieldWrapperEl.classList.remove("focus");
243
- if (isElOrChild(this.el, ev.relatedTarget)) {
244
- // do not emit a blur event when moving from searchfield to options
245
- ev.stopPropagation();
246
- }
247
- }
248
- // on search field or select all. keydown on options is handled via events.
249
- handleKeyDown(ev) {
250
- const el = ev.target;
251
- switch (ev.key) {
252
- case "ArrowDown":
253
- ev.preventDefault();
254
- this.moveDown(ev.target);
255
- break;
256
- case "ArrowUp":
257
- ev.preventDefault();
258
- this.moveUp(ev.target);
259
- break;
260
- case "Escape":
261
- ev.preventDefault();
262
- this.close();
263
- break;
264
- case "Enter":
265
- if (el === this.selectAllEl) {
266
- ev.preventDefault();
267
- this.handleSelectAllClick();
268
- this.close();
269
- }
270
- break;
271
- case " ":
272
- if (el === this.selectAllEl) {
273
- ev.preventDefault();
274
- this.handleSelectAllClick();
275
- }
276
- break;
277
- }
278
- }
279
- close() {
280
- if (this.multiple) {
281
- this.updateOptionVisibility();
282
- }
283
- this.optionListCloseRequested.emit(); // what actually happens when a close is requested is determined by the parent
284
- }
285
- handleSelectAllClick() {
286
- this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
287
- }
288
- selectAllOptions() {
289
- this.announce(this.allOptionsSelectedMessage);
290
- this.optionListAllSelected.emit();
291
- }
292
- deselectAllOptions() {
293
- this.announce(this.allOptionsDeselectedMessage);
294
- this.optionListAllDeselected.emit();
295
- }
296
- moveUp(el) {
297
- const focusableEls = this.visibleOptionEls;
298
- if (this.selectAllEl) {
299
- focusableEls.unshift(this.selectAllEl);
300
- }
301
- if (this.searchFieldEl) {
302
- focusableEls.unshift(this.searchFieldEl);
303
- }
304
- const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
305
- if (prevEl) {
306
- this.focusOption(prevEl);
307
- }
308
- }
309
- moveDown(el) {
310
- const focusableEls = this.visibleOptionEls;
311
- if (this.selectAllEl) {
312
- focusableEls.unshift(this.selectAllEl);
313
- }
314
- if (this.searchFieldEl) {
315
- focusableEls.unshift(this.searchFieldEl);
316
- }
317
- const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
318
- if (nextEl) {
319
- this.focusOption(nextEl);
320
- }
321
- }
322
- async updateOptionVisibility() {
323
- // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
324
- // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
325
- this.childOptions.forEach((option, idx) => {
326
- const cloneOption = this.cloneOptions[idx];
327
- if (option.selected) {
328
- option.classList.add("hidden");
329
- cloneOption.classList.remove("hidden");
330
- }
331
- else {
332
- option.classList.remove("hidden");
333
- cloneOption.classList.add("hidden");
334
- }
335
- });
336
- // find last visible clone option and apply .last class
337
- const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
338
- // if all options are clones, nothing to separate from
339
- const allClones = visibleCloneOptions.length === this.visibleOptionEls.length;
340
- visibleCloneOptions.forEach((option, idx) => {
341
- if (!allClones && idx === visibleCloneOptions.length - 1) {
342
- option.classList.add("last");
343
- }
344
- else {
345
- option.classList.remove("last");
346
- }
347
- });
348
- }
349
- announce(message) {
350
- // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
351
- if (this.liveRegionEl.textContent === message) {
352
- message += "\u00A0";
353
- }
354
- this.announcement = message;
355
- }
356
- renderSearchField() {
357
- return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
358
- // aria-expanded={this.isExpanded ? "true" : "false"}
359
- onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
360
- }
361
- renderSearchFailedMessage() {
362
- return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
363
- }
364
- renderSelectAllButton() {
365
- return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
366
- }
367
- renderCloneOptions() {
368
- return Array.from(this.childOptions).map((o) => {
369
- const option = o;
370
- return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
371
- });
372
- }
373
- render() {
374
- return (h("div", { class: "list-wrapper" }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
375
- }
376
- get el() { return getElement(this); }
377
- };
378
- PrivOptionList.style = privOptionListCss;
379
-
380
- export { PrivOptionList as priv_option_list };