carbon-components-angular 5.24.1 → 5.24.2

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 (64) hide show
  1. package/docs/documentation/components/DropdownList.html +17 -16
  2. package/docs/documentation/js/search/search_index.js +2 -2
  3. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  4. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  5. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  6. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  7. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
  8. package/docs/documentation/modules/DatePickerInputModule.html +7 -7
  9. package/docs/documentation/modules/DatePickerModule/dependencies.svg +57 -53
  10. package/docs/documentation/modules/DatePickerModule.html +57 -53
  11. package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
  12. package/docs/documentation/modules/DialogModule.html +34 -34
  13. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  14. package/docs/documentation/modules/GridModule.html +60 -60
  15. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  16. package/docs/documentation/modules/LoadingModule.html +4 -4
  17. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  18. package/docs/documentation/modules/NFormsModule.html +4 -4
  19. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  20. package/docs/documentation/modules/NumberModule.html +4 -4
  21. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  22. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  23. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  24. package/docs/documentation/modules/RadioModule.html +4 -4
  25. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  26. package/docs/documentation/modules/SearchModule.html +4 -4
  27. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  28. package/docs/documentation/modules/SelectModule.html +58 -58
  29. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  30. package/docs/documentation/modules/SliderModule.html +4 -4
  31. package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
  32. package/docs/documentation/modules/StructuredListModule.html +66 -66
  33. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  34. package/docs/documentation/modules/TabsModule.html +69 -69
  35. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  36. package/docs/documentation/modules/TagModule.html +4 -4
  37. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  38. package/docs/documentation/modules/ThemeModule.html +13 -13
  39. package/docs/documentation/modules/TilesModule/dependencies.svg +100 -100
  40. package/docs/documentation/modules/TilesModule.html +100 -100
  41. package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
  42. package/docs/documentation/modules/TimePickerModule.html +4 -4
  43. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +7 -7
  44. package/docs/documentation/modules/TimePickerSelectModule.html +7 -7
  45. package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
  46. package/docs/documentation/modules/ToggleModule.html +4 -4
  47. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  48. package/docs/documentation/modules/ToggletipModule.html +37 -37
  49. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  50. package/docs/documentation/modules/TooltipModule.html +4 -4
  51. package/docs/documentation/modules/TreeviewModule/dependencies.svg +37 -37
  52. package/docs/documentation/modules/TreeviewModule.html +37 -37
  53. package/docs/documentation.json +9 -9
  54. package/docs/storybook/{3224.92030851.iframe.bundle.js → 3224.aa2b4664.iframe.bundle.js} +1 -1
  55. package/docs/storybook/iframe.html +2 -2
  56. package/docs/storybook/{main.9d694b47.iframe.bundle.js → main.882077ad.iframe.bundle.js} +1 -1
  57. package/docs/storybook/project.json +1 -1
  58. package/docs/storybook/{runtime~main.1f3e45b2.iframe.bundle.js → runtime~main.57b056bd.iframe.bundle.js} +1 -1
  59. package/esm2020/dropdown/list/dropdown-list.component.mjs +4 -3
  60. package/fesm2015/carbon-components-angular-dropdown.mjs +5 -2
  61. package/fesm2015/carbon-components-angular-dropdown.mjs.map +1 -1
  62. package/fesm2020/carbon-components-angular-dropdown.mjs +3 -2
  63. package/fesm2020/carbon-components-angular-dropdown.mjs.map +1 -1
  64. package/package.json +1 -1
package/docs/documentation/modules/TreeviewModule.html CHANGED
@@ -64,101 +64,101 @@
64
64
  <text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
65
65
  <g id="clust1" class="cluster">
66
66
  <title>cluster_TreeviewModule</title>
67
- <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
68
- </g>
69
- <g id="clust4" class="cluster">
70
- <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
71
- <polygon fill="none" stroke="black" points="296,-78 296,-195 470,-195 470,-78 296,-78"/>
72
- </g>
73
- <g id="clust6" class="cluster">
74
- <title>cluster_TreeviewModule_exports</title>
75
- <polygon fill="none" stroke="black" points="91,-273 91,-325 406,-325 406,-273 91,-273"/>
67
+ <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="31.5,-70 31.5,-333 464.5,-333 464.5,-70 31.5,-70"/>
76
68
  </g>
77
69
  <g id="clust5" class="cluster">
78
70
  <title>cluster_TreeviewModule_imports</title>
79
- <polygon fill="none" stroke="black" points="188,-143 188,-195 288,-195 288,-143 188,-143"/>
71
+ <polygon fill="none" stroke="black" points="356.5,-143 356.5,-195 456.5,-195 456.5,-143 356.5,-143"/>
80
72
  </g>
81
73
  <g id="clust2" class="cluster">
82
74
  <title>cluster_TreeviewModule_declarations</title>
83
- <polygon fill="none" stroke="black" points="26,-143 26,-195 180,-195 180,-143 26,-143"/>
75
+ <polygon fill="none" stroke="black" points="39.5,-143 39.5,-195 348.5,-195 348.5,-143 39.5,-143"/>
76
+ </g>
77
+ <g id="clust6" class="cluster">
78
+ <title>cluster_TreeviewModule_exports</title>
79
+ <polygon fill="none" stroke="black" points="90.5,-273 90.5,-325 405.5,-325 405.5,-273 90.5,-273"/>
80
+ </g>
81
+ <g id="clust4" class="cluster">
82
+ <title>cluster_TreeviewModule_TreeViewComponent_providers</title>
83
+ <polygon fill="none" stroke="black" points="39.5,-78 39.5,-130 213.5,-130 213.5,-78 39.5,-78"/>
84
84
  </g>
85
85
  <!-- TreeNodeComponent -->
86
86
  <g id="node1" class="node">
87
87
  <title>TreeNodeComponent</title>
88
- <polygon fill="#ffffb3" stroke="black" points="171.8,-187 34.2,-187 34.2,-151 171.8,-151 171.8,-187"/>
89
- <text text-anchor="middle" x="103" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
88
+ <polygon fill="#ffffb3" stroke="black" points="340.3,-187 202.7,-187 202.7,-151 340.3,-151 340.3,-187"/>
89
+ <text text-anchor="middle" x="271.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
90
90
  </g>
91
91
  <!-- TreeviewModule -->
92
92
  <g id="node3" class="node">
93
93
  <title>TreeviewModule</title>
94
- <polygon fill="#8dd3c7" stroke="black" points="294.4,-252 291.4,-256 270.4,-256 267.4,-252 181.6,-252 181.6,-216 294.4,-216 294.4,-252"/>
95
- <text text-anchor="middle" x="238" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
94
+ <polygon fill="#8dd3c7" stroke="black" points="327.9,-252 324.9,-256 303.9,-256 300.9,-252 215.1,-252 215.1,-216 327.9,-216 327.9,-252"/>
95
+ <text text-anchor="middle" x="271.5" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
96
96
  </g>
97
97
  <!-- TreeNodeComponent&#45;&gt;TreeviewModule -->
98
98
  <g id="edge1" class="edge">
99
99
  <title>TreeNodeComponent&#45;&gt;TreeviewModule</title>
100
- <path fill="none" stroke="black" d="M171.84,-169C181.82,-169 188.79,-169 188.79,-169 188.79,-169 188.79,-205.89 188.79,-205.89"/>
101
- <polygon fill="black" stroke="black" points="185.29,-205.89 188.79,-215.89 192.29,-205.89 185.29,-205.89"/>
100
+ <path fill="none" stroke="black" d="M271.5,-187.11C271.5,-187.11 271.5,-205.99 271.5,-205.99"/>
101
+ <polygon fill="black" stroke="black" points="268,-205.99 271.5,-215.99 275,-205.99 268,-205.99"/>
102
102
  </g>
103
103
  <!-- TreeViewComponent -->
104
104
  <g id="node2" class="node">
105
105
  <title>TreeViewComponent</title>
106
- <polygon fill="#ffffb3" stroke="black" points="446.79,-187 309.21,-187 309.21,-151 446.79,-151 446.79,-187"/>
107
- <text text-anchor="middle" x="378" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
106
+ <polygon fill="#ffffb3" stroke="black" points="185.29,-187 47.71,-187 47.71,-151 185.29,-151 185.29,-187"/>
107
+ <text text-anchor="middle" x="116.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
108
108
  </g>
109
109
  <!-- TreeViewComponent&#45;&gt;TreeviewModule -->
110
110
  <g id="edge2" class="edge">
111
111
  <title>TreeViewComponent&#45;&gt;TreeviewModule</title>
112
- <path fill="none" stroke="black" d="M309.19,-169C296.52,-169 287.21,-169 287.21,-169 287.21,-169 287.21,-205.89 287.21,-205.89"/>
113
- <polygon fill="black" stroke="black" points="283.71,-205.89 287.21,-215.89 290.71,-205.89 283.71,-205.89"/>
112
+ <path fill="none" stroke="black" d="M141.62,-187.11C141.62,-206.34 141.62,-234 141.62,-234 141.62,-234 205.29,-234 205.29,-234"/>
113
+ <polygon fill="black" stroke="black" points="205.29,-237.5 215.29,-234 205.29,-230.5 205.29,-237.5"/>
114
114
  </g>
115
115
  <!-- TreeNodeComponent -->
116
116
  <g id="node6" class="node">
117
117
  <title>TreeNodeComponent </title>
118
- <polygon fill="#fb8072" stroke="black" points="398.3,-317 257.7,-317 257.7,-281 398.3,-281 398.3,-317"/>
119
- <text text-anchor="middle" x="328" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
118
+ <polygon fill="#fb8072" stroke="black" points="397.8,-317 257.2,-317 257.2,-281 397.8,-281 397.8,-317"/>
119
+ <text text-anchor="middle" x="327.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
120
120
  </g>
121
121
  <!-- TreeviewModule&#45;&gt;TreeNodeComponent -->
122
122
  <g id="edge5" class="edge">
123
123
  <title>TreeviewModule&#45;&gt;TreeNodeComponent </title>
124
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M275.9,-252.11C275.9,-252.11 275.9,-270.99 275.9,-270.99"/>
125
- <polygon fill="black" stroke="black" points="272.4,-270.99 275.9,-280.99 279.4,-270.99 272.4,-270.99"/>
124
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M292.4,-252.11C292.4,-252.11 292.4,-270.99 292.4,-270.99"/>
125
+ <polygon fill="black" stroke="black" points="288.9,-270.99 292.4,-280.99 295.9,-270.99 288.9,-270.99"/>
126
126
  </g>
127
127
  <!-- TreeViewComponent -->
128
128
  <g id="node7" class="node">
129
129
  <title>TreeViewComponent </title>
130
- <polygon fill="#fb8072" stroke="black" points="239.29,-317 98.71,-317 98.71,-281 239.29,-281 239.29,-317"/>
131
- <text text-anchor="middle" x="169" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
130
+ <polygon fill="#fb8072" stroke="black" points="238.79,-317 98.21,-317 98.21,-281 238.79,-281 238.79,-317"/>
131
+ <text text-anchor="middle" x="168.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
132
132
  </g>
133
133
  <!-- TreeviewModule&#45;&gt;TreeViewComponent -->
134
134
  <g id="edge6" class="edge">
135
135
  <title>TreeviewModule&#45;&gt;TreeViewComponent </title>
136
- <path fill="none" stroke="black" stroke-dasharray="5,2" d="M210.6,-252.11C210.6,-252.11 210.6,-270.99 210.6,-270.99"/>
137
- <polygon fill="black" stroke="black" points="207.1,-270.99 210.6,-280.99 214.1,-270.99 207.1,-270.99"/>
136
+ <path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.1,-252.11C227.1,-252.11 227.1,-270.99 227.1,-270.99"/>
137
+ <polygon fill="black" stroke="black" points="223.6,-270.99 227.1,-280.99 230.6,-270.99 223.6,-270.99"/>
138
138
  </g>
139
139
  <!-- TreeViewService -->
140
140
  <g id="node4" class="node">
141
141
  <title>TreeViewService</title>
142
- <ellipse fill="#fdb462" stroke="black" cx="383" cy="-104" rx="78.69" ry="18"/>
143
- <text text-anchor="middle" x="383" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
142
+ <ellipse fill="#fdb462" stroke="black" cx="126.5" cy="-104" rx="78.69" ry="18"/>
143
+ <text text-anchor="middle" x="126.5" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
144
144
  </g>
145
145
  <!-- TreeViewService&#45;&gt;TreeViewComponent -->
146
146
  <g id="edge3" class="edge">
147
147
  <title>TreeViewService&#45;&gt;TreeViewComponent</title>
148
- <path fill="none" stroke="black" d="M378,-122.11C378,-122.11 378,-140.99 378,-140.99"/>
149
- <polygon fill="black" stroke="black" points="374.5,-140.99 378,-150.99 381.5,-140.99 374.5,-140.99"/>
148
+ <path fill="none" stroke="black" d="M116.53,-122.11C116.53,-122.11 116.53,-140.99 116.53,-140.99"/>
149
+ <polygon fill="black" stroke="black" points="113.03,-140.99 116.53,-150.99 120.03,-140.99 113.03,-140.99"/>
150
150
  </g>
151
151
  <!-- IconModule -->
152
152
  <g id="node5" class="node">
153
153
  <title>IconModule</title>
154
- <polygon fill="#8dd3c7" stroke="black" points="280.43,-187 277.43,-191 256.43,-191 253.43,-187 195.57,-187 195.57,-151 280.43,-151 280.43,-187"/>
155
- <text text-anchor="middle" x="238" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
154
+ <polygon fill="#8dd3c7" stroke="black" points="448.93,-187 445.93,-191 424.93,-191 421.93,-187 364.07,-187 364.07,-151 448.93,-151 448.93,-187"/>
155
+ <text text-anchor="middle" x="406.5" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
156
156
  </g>
157
157
  <!-- IconModule&#45;&gt;TreeviewModule -->
158
158
  <g id="edge4" class="edge">
159
159
  <title>IconModule&#45;&gt;TreeviewModule</title>
160
- <path fill="none" stroke="black" d="M238,-187.11C238,-187.11 238,-205.99 238,-205.99"/>
161
- <polygon fill="black" stroke="black" points="234.5,-205.99 238,-215.99 241.5,-205.99 234.5,-205.99"/>
160
+ <path fill="none" stroke="black" d="M381.09,-187.11C381.09,-206.34 381.09,-234 381.09,-234 381.09,-234 337.9,-234 337.9,-234"/>
161
+ <polygon fill="black" stroke="black" points="337.9,-230.5 327.9,-234 337.9,-237.5 337.9,-230.5"/>
162
162
  </g>
163
163
  </g>
164
164
  </svg>
package/docs/documentation.json CHANGED
@@ -28490,7 +28490,7 @@
28490
28490
  },
28491
28491
  {
28492
28492
  "name": "DropdownList",
28493
- "id": "component-DropdownList-0f164525caf64f7305895fa3d369a0eab3a70cd8121f0987627cfd33800fad092c61e2152cfd108a52d113144c06989557d921d360f6936daa740fa8cd56e4de",
28493
+ "id": "component-DropdownList-a70d3c726310e15a4f64b8b989ea3e57b50a31c2daa7c0da0ebe51ef83e23fd0dde38f3c6d92209dd2f0b5550d5fb1a98f31029a2d146ab59ba7160be685d257",
28494
28494
  "file": "src/dropdown/list/dropdown-list.component.ts",
28495
28495
  "encapsulation": [],
28496
28496
  "entryComponents": [],
@@ -28714,7 +28714,7 @@
28714
28714
  "optional": false,
28715
28715
  "returnType": "void",
28716
28716
  "typeParameters": [],
28717
- "line": 536,
28717
+ "line": 537,
28718
28718
  "deprecated": false,
28719
28719
  "deprecationMessage": "",
28720
28720
  "rawdescription": "\n\nEmits the selected item or items after a mouse click event has occurred.\n",
@@ -28783,7 +28783,7 @@
28783
28783
  "optional": false,
28784
28784
  "returnType": "void",
28785
28785
  "typeParameters": [],
28786
- "line": 571,
28786
+ "line": 572,
28787
28787
  "deprecated": false,
28788
28788
  "deprecationMessage": "",
28789
28789
  "rawdescription": "\n\nEmits the scroll event of the options list\n",
@@ -29005,7 +29005,7 @@
29005
29005
  "optional": false,
29006
29006
  "returnType": "void",
29007
29007
  "typeParameters": [],
29008
- "line": 504,
29008
+ "line": 505,
29009
29009
  "deprecated": false,
29010
29010
  "deprecationMessage": "",
29011
29011
  "rawdescription": "\n\nManages the keyboard accessibility for navigation and selection within a `DropdownList`.\n",
@@ -29035,7 +29035,7 @@
29035
29035
  "optional": false,
29036
29036
  "returnType": "void",
29037
29037
  "typeParameters": [],
29038
- "line": 562,
29038
+ "line": 563,
29039
29039
  "deprecated": false,
29040
29040
  "deprecationMessage": "",
29041
29041
  "jsdoctags": [
@@ -29063,7 +29063,7 @@
29063
29063
  "optional": false,
29064
29064
  "returnType": "void",
29065
29065
  "typeParameters": [],
29066
- "line": 556,
29066
+ "line": 557,
29067
29067
  "deprecated": false,
29068
29068
  "deprecationMessage": "",
29069
29069
  "jsdoctags": [
@@ -29092,7 +29092,7 @@
29092
29092
  "optional": false,
29093
29093
  "returnType": "void",
29094
29094
  "typeParameters": [],
29095
- "line": 581,
29095
+ "line": 582,
29096
29096
  "deprecated": false,
29097
29097
  "deprecationMessage": "",
29098
29098
  "rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n",
@@ -29154,7 +29154,7 @@
29154
29154
  "optional": false,
29155
29155
  "returnType": "void",
29156
29156
  "typeParameters": [],
29157
- "line": 586,
29157
+ "line": 587,
29158
29158
  "deprecated": false,
29159
29159
  "deprecationMessage": "",
29160
29160
  "jsdoctags": [
@@ -29232,7 +29232,7 @@
29232
29232
  "description": "<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-dropdown-list [items]=&quot;listItems&quot;&gt;&lt;/cds-dropdown-list&gt;</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-typescript\">listItems = [\n {\n content: &quot;item one&quot;,\n selected: false\n },\n {\n content: &quot;item two&quot;,\n selected: false,\n },\n {\n content: &quot;item three&quot;,\n selected: false\n },\n {\n content: &quot;item four&quot;,\n selected: false\n }\n];</code></pre></div>",
29233
29233
  "rawdescription": "\n\n```html\n<cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n```\n```typescript\nlistItems = [\n\t{\n\t\tcontent: \"item one\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item two\",\n\t\tselected: false,\n\t},\n\t{\n\t\tcontent: \"item three\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item four\",\n\t\tselected: false\n\t}\n];\n```\n",
29234
29234
  "type": "component",
29235
- "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let newItem of value) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(tempNewItem)) {\n\t\t\t\t\t\toldItem.selected = newItem.selected;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement().scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
29235
+ "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let newItem of value) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(tempNewItem)) {\n\t\t\t\t\t\toldItem.selected = newItem.selected;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
29236
29236
  "assetsDirs": [],
29237
29237
  "styleUrlsData": "",
29238
29238
  "stylesData": "",
package/docs/storybook/{3224.92030851.iframe.bundle.js → 3224.aa2b4664.iframe.bundle.js} RENAMED
@@ -1 +1 @@
1
- "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3224],{"./src/dropdown/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{jq:()=>AbstractDropdownView,Lt:()=>Dropdown,kW:()=>DropdownModule,Vn:()=>DropdownService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),of=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/of.js");let AbstractDropdownView=class AbstractDropdownView{constructor(){this.type="single",this.size="md"}set items(value){}get items(){}getNextItem(){}hasNextElement(){}getNextElement(){}getPrevItem(){}hasPrevElement(){}getPrevElement(){}getSelected(){}getCurrentItem(){}getCurrentElement(){}getListItems(){}propagateSelected(value){}filterBy(value){}initFocus(){}onItemsReady(subcription){}reorderSelected(moveFocus){}};AbstractDropdownView.propDecorators={items:[{type:core.Input}],select:[{type:core.Output}],blurIntent:[{type:core.Output}]},AbstractDropdownView=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAbstractDropdownView], [ibmAbstractDropdownView]"})],AbstractDropdownView);var i18n=__webpack_require__("./src/i18n/index.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");const defaultOffset={top:0,left:0};let DropdownService=class DropdownService{constructor(placeholderService,animationFrameService){this.placeholderService=placeholderService,this.animationFrameService=animationFrameService,this.animationFrameSubscription=new Subscription.w0,this._offset=defaultOffset}set offset(value){this._offset=Object.assign({},defaultOffset,value)}get offset(){return this._offset}appendToBody(parentRef,menuRef,classList){menuRef.style.display="block";const dropdownWrapper=document.createElement("div");return dropdownWrapper.className=`dropdown ${classList}`,dropdownWrapper.style.width=parentRef.offsetWidth+"px",dropdownWrapper.style.position="absolute",dropdownWrapper.appendChild(menuRef),this.placeholderService.hasPlaceholderRef()?this.placeholderService.appendElement(dropdownWrapper):document.body.appendChild(dropdownWrapper),this.menuInstance=dropdownWrapper,this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.positionDropdown(parentRef,dropdownWrapper)})),this.positionDropdown(parentRef,dropdownWrapper),dropdownWrapper}appendToDropdown(hostRef){if(!this.menuInstance)return;const instance=this.menuInstance,menu=instance.firstElementChild;return this.menuInstance=null,menu.style.display="none",hostRef.appendChild(menu),this.animationFrameSubscription.unsubscribe(),this.placeholderService.hasPlaceholderRef()&&this.placeholderService.hasElement(instance)?this.placeholderService.removeElement(instance):document.body.contains(instance)&&document.body.removeChild(instance),instance}updatePosition(parentRef){this.positionDropdown(parentRef,this.menuInstance)}ngOnDestroy(){this.animationFrameSubscription.unsubscribe()}positionDropdown(parentRef,menuRef){if(!menuRef)return;let leftOffset=0;const boxMenu=menuRef.querySelector(".cds--list-box__menu");if(boxMenu)if(parentRef.getBoundingClientRect().left!==boxMenu.getBoundingClientRect().left){parentRef.getBoundingClientRect().left-boxMenu.getBoundingClientRect().left+boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth)}else boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth);const closestMenuWithPos=(0,utils._K)("position",["relative","fixed","absolute"],menuRef.parentElement),topPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().top:this.offset.top,leftPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().left:this.offset.left+leftOffset;let pos=utils_position.FK.findAbsolute(parentRef,menuRef,"bottom");pos=utils_position.FK.addOffset(pos,topPos,leftPos),utils_position.FK.setElement(menuRef,pos)}};DropdownService.ctorParameters=()=>[{type:placeholder.Q_},{type:utils.NV}],DropdownService=(0,tslib_es6.gn)([(0,core.Injectable)()],DropdownService);let Dropdown=class Dropdown{constructor(elementRef,i18n,dropdownService,elementService){this.elementRef=elementRef,this.i18n=i18n,this.dropdownService=dropdownService,this.elementService=elementService,this.id="dropdown-"+Dropdown.dropdownCount++,this.placeholder="",this.displayValue="",this.clearText=this.i18n.get().DROPDOWN.CLEAR,this.size="md",this.type="single",this.theme="dark",this.disabled=!1,this.skeleton=!1,this.inline=!1,this.disableArrowKeys=!1,this.invalid=!1,this.warn=!1,this.appendInline=null,this.selectionFeedback="top-after-reopen",this.menuButtonLabel=this.i18n.get().DROPDOWN.OPEN,this.selectedLabel=this.i18n.get().DROPDOWN.SELECTED,this.selected=new core.EventEmitter,this.onClose=new core.EventEmitter,this.close=new core.EventEmitter,this.hostClass=!0,this.menuIsClosed=!0,this._dropUp=!1,this.noop=this._noop.bind(this),this.outsideClick=this._outsideClick.bind(this),this.outsideKey=this._outsideKey.bind(this),this.keyboardNav=this._keyboardNav.bind(this),this.visibilitySubscription=new Subscription.w0,this.onTouchedCallback=this._noop,this._writtenValue=[],this.propagateChange=_=>{}}get writtenValue(){return this._writtenValue}set writtenValue(val){val&&0===val.length&&this.clearSelected(),this._writtenValue=val}ngOnInit(){this.view&&(this.view.type=this.type)}ngAfterContentInit(){if(!this.view)return;(this.writtenValue&&this.writtenValue.length||"number"==typeof this.writtenValue)&&this.writeValue(this.writtenValue),this.view.type=this.type,this.view.size=this.size;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if("single"!==this.type||isUpdate(event)||Array.isArray(event)||(this.closeMenu(),event.item&&event.item.selected?this.itemValueKey?this.propagateChange(event.item[this.itemValueKey]):this.propagateChange(event.item):this.propagateChange(null)),"multi"===this.type&&!isUpdate(event))if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChange(values)}else this.propagateChange(this.view.getSelected());isUpdate(event)||(this.checkForReorder(),this.selected.emit(event))}))}ngAfterViewInit(){null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0),this.checkForReorder()}ngOnDestroy(){this.appendInline||this._appendToDropdown()}writeValue(value){this.writtenValue=value,this.view.onItemsReady((()=>{if(value)if("single"===this.type)if(this.itemValueKey){const newValue=Object.assign({},this.view.getListItems().find((item=>item[this.itemValueKey]===value)));newValue.selected=!0,this.view.propagateSelected([newValue])}else this.view.propagateSelected([value]);else if(this.itemValueKey){let newValues=[];for(const v of value)for(const item of this.view.getListItems())item[this.itemValueKey]===v&&newValues.push(Object.assign({},item,{selected:!0}));this.view.propagateSelected(newValues)}else this.view.propagateSelected(value);else this.view.propagateSelected([value]);this.checkForReorder()}))}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}onKeyDown(event){if("Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key)event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus();else if(this.menuIsClosed&&(" "===event.key||"ArrowDown"===event.key||"ArrowUp"===event.key)){if(this.disableArrowKeys&&("ArrowDown"===event.key||"ArrowUp"===event.key))return;event.preventDefault(),this.openMenu()}!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu(),!this.menuIsClosed&&"Tab"===event.key&&event.shiftKey&&this.closeMenu(),"multi"!==this.type&&this.menuIsClosed&&this.closedDropdownNavigation(event)}closedDropdownNavigation(event){if("ArrowDown"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getNextItem();item&&(item.selected=!0)}else if("ArrowUp"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getPrevItem();item&&(item.selected=!0)}}getDisplayStringValue(){if(!this.view||this.skeleton)return;let selected=this.view.getSelected();return!selected.length||this.displayValue&&this.isRenderString()?selected.length&&this.isRenderString()?(0,of.of)(this.displayValue):(0,of.of)(this.placeholder):"multi"===this.type?(0,of.of)(this.placeholder):(0,of.of)(selected[0].content)}isRenderString(){return"string"==typeof this.displayValue}getRenderTemplateContext(){if(!this.view)return;let selected=this.view.getSelected();return"multi"===this.type?{items:selected}:selected&&selected.length>0?{item:selected[0]}:{}}getSelectedCount(){if(this.view.getSelected())return this.view.getSelected().length}clearSelected(){if(!this.disabled&&0!==this.getSelectedCount()){for(const item of this.view.getListItems())item.selected=!1;this.selected.emit([]),this.propagateChange([])}}valueSelected(){return!!this.view.getSelected()}_noop(){}_outsideClick(event){this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.closeMenu()}_outsideKey(event){!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu()}_keyboardNav(event){"Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus()):this.menuIsClosed||"Tab"!==event.key||(this.dropdownButton.nativeElement.focus(),this.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeMenu())}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("keydown",this.keyboardNav,!0)}_appendToBody(){const lightClass="light"===this.theme?" cds--list-box--light":"",expandedClass=this.menuIsClosed?"":" cds--list-box--expanded";this.dropdownService.appendToBody(this.dropdownButton.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_shouldDropUp(){const menu=this.dropdownMenu&&this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu"),menuRect=menu&&menu.getBoundingClientRect();if(menu&&menuRect){return(0,utils.O3)(menu).reduce(((shouldDropUp,parent)=>{const parentRect=parent.getBoundingClientRect(),isBelowParent=!(menuRect.bottom<=parentRect.bottom);return shouldDropUp||isBelowParent}),!1)}return!1}openMenu(){if(0!==this.view.getListItems().length){if(this._dropUp=!1,this.menuIsClosed=!1,!this.appendInline){const target=this.dropdownButton.nativeElement,parent=this.elementRef.nativeElement;this.visibilitySubscription=this.elementService.visibility(target,parent).subscribe((value=>{value.visible||this.closeMenu()})),this._appendToBody()}setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0),document.body.firstElementChild.addEventListener("click",this.noop,!0),document.body.firstElementChild.addEventListener("keydown",this.noop,!0),document.addEventListener("click",this.outsideClick,!0),document.addEventListener("keydown",this.outsideKey,!0),setTimeout((()=>this.view.initFocus()),0)}}closeMenu(){this.menuIsClosed||(this.menuIsClosed=!0,this.checkForReorder(),this.onClose.emit(),this.close.emit(),this.dropdownButton.nativeElement.focus(),this.view.disableScroll&&this.view.disableScroll(),this.appendInline||(this.visibilitySubscription.unsubscribe(),this._appendToDropdown()),document.body.firstElementChild.removeEventListener("click",this.noop,!0),document.body.firstElementChild.removeEventListener("keydown",this.noop,!0),document.removeEventListener("click",this.outsideClick,!0),document.removeEventListener("keydown",this.outsideKey,!0))}toggleMenu(){this.menuIsClosed?this.openMenu():this.closeMenu()}isTemplate(value){return value instanceof core.TemplateRef}checkForReorder(){const topAfterReopen=this.menuIsClosed&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected()}};Dropdown.dropdownCount=0,Dropdown.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:DropdownService},{type:utils.d2}],Dropdown.propDecorators={id:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],placeholder:[{type:core.Input}],displayValue:[{type:core.Input}],clearText:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],inline:[{type:core.Input}],disableArrowKeys:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],appendInline:[{type:core.Input}],scrollableContainer:[{type:core.Input}],itemValueKey:[{type:core.Input}],selectionFeedback:[{type:core.Input}],menuButtonLabel:[{type:core.Input}],selectedLabel:[{type:core.Input}],dropUp:[{type:core.Input}],selected:[{type:core.Output}],onClose:[{type:core.Output}],close:[{type:core.Output}],view:[{type:core.ContentChild,args:[AbstractDropdownView,{static:!0}]}],dropdownButton:[{type:core.ViewChild,args:["dropdownButton",{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--dropdown__wrapper"]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},Dropdown=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown, ibm-dropdown",template:'\n\t<label\n\t\t*ngIf="label && !skeleton"\n\t\t[for]="id"\n\t\tclass="cds--label"\n\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t</label>\n\t<div\n\t\tclass="cds--list-box"\n\t\t[ngClass]="{\n\t\t\t\'cds--dropdown\': type !== \'multi\',\n\t\t\t\'cds--multiselect\': type === \'multi\',\n\t\t\t\'cds--multi-select--selected\': type === \'multi\' && getSelectedCount() > 0,\n\t\t\t\'cds--dropdown--light\': theme === \'light\',\n\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\'cds--list-box--inline\': inline,\n\t\t\t\'cds--skeleton\': skeleton,\n\t\t\t\'cds--dropdown--disabled cds--list-box--disabled\': disabled,\n\t\t\t\'cds--dropdown--invalid\': invalid,\n\t\t\t\'cds--dropdown--warning cds--list-box--warning\': warn,\n\t\t\t\'cds--dropdown--sm cds--list-box--sm\': size === \'sm\',\n\t\t\t\'cds--dropdown--md cds--list-box--md\': size === \'md\',\n\t\t\t\'cds--dropdown--lg cds--list-box--lg\': size === \'lg\',\n\t\t\t\'cds--list-box--expanded\': !menuIsClosed\n\t\t}">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]="id"\n\t\t\ttype="button"\n\t\t\tclass="cds--list-box__field"\n\t\t\t[ngClass]="{\'a\': !menuIsClosed}"\n\t\t\t[attr.aria-expanded]="!menuIsClosed"\n\t\t\t[attr.aria-disabled]="disabled"\n\t\t\taria-haspopup="listbox"\n\t\t\t(click)="disabled ? $event.stopPropagation() : toggleMenu()"\n\t\t\t(blur)="onBlur()"\n\t\t\t[attr.disabled]="disabled ? true : null">\n\t\t\t<div\n\t\t\t\t(click)="clearSelected()"\n\t\t\t\t(keydown.enter)="clearSelected()"\n\t\t\t\t*ngIf="type === \'multi\' && getSelectedCount() > 0"\n\t\t\t\tclass="cds--list-box__selection cds--tag--filter cds--list-box__selection--multi"\n\t\t\t\ttabindex="0"\n\t\t\t\t[title]="clearText">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\trole="img"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf="isRenderString()" class="cds--list-box__label">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="!isRenderString()"\n\t\t\t\t[ngTemplateOutletContext]="getRenderTemplateContext()"\n\t\t\t\t[ngTemplateOutlet]="displayValue">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf="invalid"\n\t\t\t\tclass="cds--dropdown__invalid-icon"\n\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\tsize="16"\n\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t</svg>\n\t\t\t<span class="cds--list-box__menu-icon">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\tsize="16"\n\t\t\t\t\t[attr.aria-label]="menuButtonLabel"\n\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': !menuIsClosed }">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}">\n\t\t\t<ng-content *ngIf="!menuIsClosed"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf="helperText && !invalid && !warn && !skeleton"\n\t\tclass="cds--form__helper-text"\n\t\t[ngClass]="{\n\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t}">\n\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t</div>\n\t<div *ngIf="invalid" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t</div>\n\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Dropdown,multi:!0}]})],Dropdown);var isObservable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/util/isObservable.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js"),first=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/first.js"),fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),debounceTime=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/debounceTime.js"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js");let DropdownList=class DropdownList{constructor(elementRef,i18n,appRef){this.elementRef=elementRef,this.i18n=i18n,this.appRef=appRef,this.ariaLabel=this.i18n.get().DROPDOWN_LIST.LABEL,this.listTpl=null,this.select=new core.EventEmitter,this.scroll=new core.EventEmitter,this.blurIntent=new core.EventEmitter,this.type="single",this.showTitles=!0,this.size="md",this.listId="listbox-"+DropdownList.listCount++,this.highlightedItem=null,this.displayItems=[],this.index=-1,this._items=[]}set items(value){(0,isObservable.b)(value)?(this._itemsSubscription&&this._itemsSubscription.unsubscribe(),this._itemsReady=new Observable.y((observer=>{this._itemsSubscription=value.subscribe((v=>{this.updateList(v),observer.next(!0),observer.complete()}))})),this.onItemsReady(null)):this.updateList(value),this._originalItems=value}get items(){return this._originalItems}ngAfterViewInit(){this.index=this.getListItems().findIndex((item=>item.selected)),this.setupFocusObservable(),setTimeout((()=>{this.doEmitSelect(!0)}))}ngOnDestroy(){this.focusJump&&this.focusJump.unsubscribe(),this._itemsSubscription&&this._itemsSubscription.unsubscribe()}doEmitSelect(isUpdate=!0){if("single"===this.type)this.select.emit({item:this._items.find((item=>item.selected)),isUpdate});else{const selected=this.getSelected()||[];selected.isUpdate=isUpdate,this.select.emit(selected)}}getItemId(index){return`${this.listId}-${index}`}updateList(items){this._items=items.map((item=>Object.assign({},item))),this.displayItems=this._items,this.updateIndex(),this.setupFocusObservable(),this.doEmitSelect()}filterBy(query=""){query?(this.displayItems=this.getListItems().filter((item=>item.content.toLowerCase().includes(query.toLowerCase()))),this.displayItems&&(this.index=0)):this.displayItems=this.getListItems(),this.updateIndex()}setupFocusObservable(){if(!this.list)return;this.focusJump&&this.focusJump.unsubscribe();let elList=Array.from(this.list.nativeElement.querySelectorAll("li"));this.focusJump=function watchFocusJump(target,elements){return(0,fromEvent.R)(target,"keydown").pipe((0,debounceTime.b)(150),(0,map.U)((ev=>{let el=elements.find((itemEl=>itemEl.textContent.trim().toLowerCase().startsWith(ev.key)));if(el)return el})),(0,filter.h)((el=>!!el)))}(this.list.nativeElement,elList).subscribe((el=>{el.focus()}))}getNextItem(){return this.index<this.displayItems.length-1&&this.index++,this.displayItems[this.index]}hasNextElement(){return this.index<this.displayItems.length-1&&(!(this.index===this.displayItems.length-2)||!this.displayItems[this.index+1].disabled)}getNextElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index+1;i<elemList.length;i++)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index].nativeElement}getPrevItem(){return this.index>0&&this.index--,this.displayItems[this.index]}hasPrevElement(){return this.index>0&&(!(1===this.index)||!this.displayItems[0].disabled)}getPrevElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index-1;i<this.index&&i>=0;i--)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index].nativeElement}getCurrentItem(){return this.index<0?this.displayItems[0]:this.displayItems[this.index]}getCurrentElement(){return this.index<0?this.listElementList.first.nativeElement:this.listElementList.toArray()[this.index].nativeElement}getListItems(){return this._items}getSelected(){let selected=this.getListItems().filter((item=>item.selected));return 0===selected.length?[]:selected}propagateSelected(value){Array.isArray(value)||console.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`),this.onItemsReady((()=>{for(let oldItem of this.getListItems()){let tempOldItem=Object.assign({},oldItem);delete tempOldItem.selected,tempOldItem=JSON.stringify(tempOldItem);for(let newItem of value){let tempNewItem=Object.assign({},newItem);if(delete tempNewItem.selected,tempNewItem=JSON.stringify(tempNewItem),tempOldItem.includes(tempNewItem)){oldItem.selected=newItem.selected;break}oldItem.selected=!1}}}))}initFocus(){this.index<0&&this.updateIndex(),this.list.nativeElement.focus(),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)}))}updateIndex(){const selected=this.getSelected();selected.length?this.index=this.displayItems.indexOf(selected[0]):this.hasNextElement()&&this.getNextElement()}navigateList(event){"Enter"===event.key||" "===event.key?(this.listElementList.some((option=>option.nativeElement===event.target))&&event.preventDefault(),"Enter"===event.key&&this.doClick(event,this.getCurrentItem())):"ArrowDown"!==event.key&&"ArrowUp"!==event.key||(event.preventDefault(),"ArrowDown"===event.key?this.hasNextElement()?this.getNextElement().scrollIntoView({block:"end"}):this.blurIntent.emit("bottom"):"ArrowUp"===event.key&&(this.hasPrevElement()?this.getPrevElement().scrollIntoView({block:"nearest"}):this.blurIntent.emit("top")),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)})))}doClick(event,item){if(event.preventDefault(),item&&!item.disabled){if(this.list.nativeElement.focus(),"single"===this.type){item.selected=!0;for(let otherItem of this.getListItems())item!==otherItem&&(otherItem.selected=!1)}else item.selected=!item.selected;this.index=this.displayItems.indexOf(item),this.highlightedItem=this.getItemId(this.index),this.doEmitSelect(!1),this.appRef.tick()}}onItemFocus(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.add("cds--list-box__menu-item--highlighted"),element.tabIndex=0}onItemBlur(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.remove("cds--list-box__menu-item--highlighted"),element.tabIndex=-1}emitScroll(event){const customScrollEvent={atTop:0===event.srcElement.scrollTop,atBottom:event.srcElement.scrollHeight-event.srcElement.scrollTop===event.srcElement.clientHeight,event};this.scroll.emit(customScrollEvent)}onItemsReady(subcription){(this._itemsReady||(0,of.of)(!0)).pipe((0,first.P)()).subscribe(subcription)}reorderSelected(moveFocus=!0){this.displayItems=[...this.getSelected(),...this.getListItems().filter((item=>!item.selected))],moveFocus&&setTimeout((()=>{this.updateIndex(),this.highlightedItem=this.getItemId(this.index)}))}};DropdownList.listCount=0,DropdownList.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:core.ApplicationRef}],DropdownList.propDecorators={ariaLabel:[{type:core.Input}],items:[{type:core.Input}],listTpl:[{type:core.Input}],select:[{type:core.Output}],scroll:[{type:core.Output}],blurIntent:[{type:core.Output}],list:[{type:core.ViewChild,args:["list",{static:!0}]}],type:[{type:core.Input}],showTitles:[{type:core.Input}],listElementList:[{type:core.ViewChildren,args:["listItem"]}]},DropdownList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown-list, ibm-dropdown-list",template:'\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]="listId"\n\t\t\trole="listbox"\n\t\t\tclass="cds--list-box__menu cds--multi-select"\n\t\t\t(scroll)="emitScroll($event)"\n\t\t\t(keydown)="navigateList($event)"\n\t\t\ttabindex="-1"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-activedescendant]="highlightedItem">\n\t\t\t<li\n\t\t\t\trole="option"\n\t\t\t\t*ngFor="let item of displayItems; let i = index"\n\t\t\t\t(click)="doClick($event, item)"\n\t\t\t\tclass="cds--list-box__menu-item"\n\t\t\t\t[attr.aria-selected]="item.selected"\n\t\t\t\t[id]="getItemId(i)"\n\t\t\t\t[attr.title]=" showTitles ? item.content : null"\n\t\t\t\t[attr.disabled]="item.disabled ? true : null"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--list-box__menu-item--active\': item.selected,\n\t\t\t\t\t\'cds--list-box__menu-item--highlighted\': highlightedItem === getItemId(i)\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tclass="cds--list-box__menu-item__option">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'multi\'"\n\t\t\t\t\t\tclass="cds--form-item cds--checkbox-wrapper">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]="item.selected"\n\t\t\t\t\t\t\tclass="cds--checkbox-label">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass="cds--checkbox"\n\t\t\t\t\t\t\t\ttype="checkbox"\n\t\t\t\t\t\t\t\t[checked]="item.selected"\n\t\t\t\t\t\t\t\t[disabled]="item.disabled"\n\t\t\t\t\t\t\t\ttabindex="-1">\n\t\t\t\t\t\t\t<span class="cds--checkbox-appearance"></span>\n\t\t\t\t\t\t\t<span class="cds--checkbox-label-text">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf="!listTpl && type === \'single\'">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'single\'"\n\t\t\t\t\t\tcdsIcon="checkmark"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__menu-item__selected-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf="listTpl"\n\t\t\t\t\t\t[ngTemplateOutletContext]="{item: item}"\n\t\t\t\t\t\t[ngTemplateOutlet]="listTpl">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>',providers:[{provide:AbstractDropdownView,useExisting:DropdownList}]})],DropdownList);let ScrollableList=class ScrollableList{constructor(elementRef){this.elementRef=elementRef,this.nScrollableList=null,this.scrollEnabled=!0,this.scrollBy=10,this.canScrollUp=!1,this.canScrollDown=!1,this.list=this.elementRef.nativeElement}ngOnChanges(changes){changes.scrollEnabled&&(changes.scrollEnabled.currentValue?(this.list.style.overflow="hidden",this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0,this.updateScrollHeight(),this.checkScrollArrows(),setTimeout((()=>{this.checkScrollArrows()}))):(this.scrollUpTarget.style.display="none",this.scrollDownTarget.style.display="none",this.canScrollUp=!1,this.canScrollDown=!1,this.list.style.height=null,this.list.style.overflow=null,clearInterval(this.hoverScrollInterval)))}ngAfterViewInit(){this.nScrollableList&&(this.list=this.elementRef.nativeElement.querySelector(this.nScrollableList)),this.scrollUpTarget.addEventListener("mouseover",(()=>this.onHoverUp(!0))),this.scrollUpTarget.addEventListener("mouseout",(()=>this.onHoverUp(!1))),this.scrollDownTarget.addEventListener("mouseover",(()=>this.onHoverDown(!0))),this.scrollDownTarget.addEventListener("mouseout",(()=>this.onHoverDown(!1)))}updateScrollHeight(){if(this.scrollEnabled){const containerRect=this.elementRef.nativeElement.parentElement.getBoundingClientRect(),innerHeightDiff=this.list.getBoundingClientRect().top-containerRect.top,height=containerRect.height-(containerRect.bottom-window.innerHeight)-innerHeightDiff-40;this.list.style.height=`${height}px`}}checkScrollArrows(){const scrollUpHeight=this.scrollUpTarget.offsetHeight,scrollDownHeight=this.scrollDownTarget.offsetHeight;0===this.list.scrollTop?(this.canScrollUp&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollUpHeight}px`),this.scrollUpTarget.style.display="none",this.canScrollUp=!1):this.list.scrollTop===this.list.scrollTopMax?(this.canScrollDown&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollDownHeight}px`),this.scrollDownTarget.style.display="none",this.canScrollDown=!1):(this.canScrollUp||(this.list.style.height=parseInt(this.list.style.height,10)-scrollUpHeight+"px"),this.canScrollDown||(this.list.style.height=parseInt(this.list.style.height,10)-scrollDownHeight+"px"),this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0)}onWheel(event){event.deltaY<0?this.list.scrollTop-=this.scrollBy:this.list.scrollTop+=this.scrollBy,this.list.scrollTop!==this.list.scrollTopMax&&0!==this.list.scrollTop&&(event.preventDefault(),event.stopPropagation()),this.checkScrollArrows()}onTouchStart(event){event.touches[0]&&(this.lastTouch=event.touches[0].clientY)}onTouchMove(event){if(event.preventDefault(),event.stopPropagation(),event.touches[0]){const touch=event.touches[0];this.list.scrollTop+=this.lastTouch-touch.clientY,this.lastTouch=touch.clientY,this.checkScrollArrows()}}hoverScrollBy(hovering,amount){hovering?this.hoverScrollInterval=setInterval((()=>{this.list.scrollTop+=amount,this.checkScrollArrows()}),1):clearInterval(this.hoverScrollInterval)}onHoverUp(hovering){this.hoverScrollBy(hovering,-3)}onHoverDown(hovering){this.hoverScrollBy(hovering,3)}onKeyDown(event){"ArrowDown"!==event.key&&"ArrowUp"!==event.key||this.checkScrollArrows()}};ScrollableList.ctorParameters=()=>[{type:core.ElementRef}],ScrollableList.propDecorators={nScrollableList:[{type:core.Input}],scrollEnabled:[{type:core.Input}],scrollUpTarget:[{type:core.Input}],scrollDownTarget:[{type:core.Input}],scrollBy:[{type:core.Input}],onWheel:[{type:core.HostListener,args:["wheel",["$event"]]}],onTouchStart:[{type:core.HostListener,args:["touchstart",["$event"]]}],onTouchMove:[{type:core.HostListener,args:["touchmove",["$event"]]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},ScrollableList=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsScrollableList], [ibmScrollableList]",exportAs:"scrollable-list"})],ScrollableList);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let DropdownModule=class DropdownModule{};DropdownModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],exports:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,placeholder.Qq,utils.As,icon.QX],providers:[DropdownService]})],DropdownModule)}}]);
1
+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3224],{"./src/dropdown/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{jq:()=>AbstractDropdownView,Lt:()=>Dropdown,kW:()=>DropdownModule,Vn:()=>DropdownService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),of=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/of.js");let AbstractDropdownView=class AbstractDropdownView{constructor(){this.type="single",this.size="md"}set items(value){}get items(){}getNextItem(){}hasNextElement(){}getNextElement(){}getPrevItem(){}hasPrevElement(){}getPrevElement(){}getSelected(){}getCurrentItem(){}getCurrentElement(){}getListItems(){}propagateSelected(value){}filterBy(value){}initFocus(){}onItemsReady(subcription){}reorderSelected(moveFocus){}};AbstractDropdownView.propDecorators={items:[{type:core.Input}],select:[{type:core.Output}],blurIntent:[{type:core.Output}]},AbstractDropdownView=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAbstractDropdownView], [ibmAbstractDropdownView]"})],AbstractDropdownView);var i18n=__webpack_require__("./src/i18n/index.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");const defaultOffset={top:0,left:0};let DropdownService=class DropdownService{constructor(placeholderService,animationFrameService){this.placeholderService=placeholderService,this.animationFrameService=animationFrameService,this.animationFrameSubscription=new Subscription.w0,this._offset=defaultOffset}set offset(value){this._offset=Object.assign({},defaultOffset,value)}get offset(){return this._offset}appendToBody(parentRef,menuRef,classList){menuRef.style.display="block";const dropdownWrapper=document.createElement("div");return dropdownWrapper.className=`dropdown ${classList}`,dropdownWrapper.style.width=parentRef.offsetWidth+"px",dropdownWrapper.style.position="absolute",dropdownWrapper.appendChild(menuRef),this.placeholderService.hasPlaceholderRef()?this.placeholderService.appendElement(dropdownWrapper):document.body.appendChild(dropdownWrapper),this.menuInstance=dropdownWrapper,this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.positionDropdown(parentRef,dropdownWrapper)})),this.positionDropdown(parentRef,dropdownWrapper),dropdownWrapper}appendToDropdown(hostRef){if(!this.menuInstance)return;const instance=this.menuInstance,menu=instance.firstElementChild;return this.menuInstance=null,menu.style.display="none",hostRef.appendChild(menu),this.animationFrameSubscription.unsubscribe(),this.placeholderService.hasPlaceholderRef()&&this.placeholderService.hasElement(instance)?this.placeholderService.removeElement(instance):document.body.contains(instance)&&document.body.removeChild(instance),instance}updatePosition(parentRef){this.positionDropdown(parentRef,this.menuInstance)}ngOnDestroy(){this.animationFrameSubscription.unsubscribe()}positionDropdown(parentRef,menuRef){if(!menuRef)return;let leftOffset=0;const boxMenu=menuRef.querySelector(".cds--list-box__menu");if(boxMenu)if(parentRef.getBoundingClientRect().left!==boxMenu.getBoundingClientRect().left){parentRef.getBoundingClientRect().left-boxMenu.getBoundingClientRect().left+boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth)}else boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth);const closestMenuWithPos=(0,utils._K)("position",["relative","fixed","absolute"],menuRef.parentElement),topPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().top:this.offset.top,leftPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().left:this.offset.left+leftOffset;let pos=utils_position.FK.findAbsolute(parentRef,menuRef,"bottom");pos=utils_position.FK.addOffset(pos,topPos,leftPos),utils_position.FK.setElement(menuRef,pos)}};DropdownService.ctorParameters=()=>[{type:placeholder.Q_},{type:utils.NV}],DropdownService=(0,tslib_es6.gn)([(0,core.Injectable)()],DropdownService);let Dropdown=class Dropdown{constructor(elementRef,i18n,dropdownService,elementService){this.elementRef=elementRef,this.i18n=i18n,this.dropdownService=dropdownService,this.elementService=elementService,this.id="dropdown-"+Dropdown.dropdownCount++,this.placeholder="",this.displayValue="",this.clearText=this.i18n.get().DROPDOWN.CLEAR,this.size="md",this.type="single",this.theme="dark",this.disabled=!1,this.skeleton=!1,this.inline=!1,this.disableArrowKeys=!1,this.invalid=!1,this.warn=!1,this.appendInline=null,this.selectionFeedback="top-after-reopen",this.menuButtonLabel=this.i18n.get().DROPDOWN.OPEN,this.selectedLabel=this.i18n.get().DROPDOWN.SELECTED,this.selected=new core.EventEmitter,this.onClose=new core.EventEmitter,this.close=new core.EventEmitter,this.hostClass=!0,this.menuIsClosed=!0,this._dropUp=!1,this.noop=this._noop.bind(this),this.outsideClick=this._outsideClick.bind(this),this.outsideKey=this._outsideKey.bind(this),this.keyboardNav=this._keyboardNav.bind(this),this.visibilitySubscription=new Subscription.w0,this.onTouchedCallback=this._noop,this._writtenValue=[],this.propagateChange=_=>{}}get writtenValue(){return this._writtenValue}set writtenValue(val){val&&0===val.length&&this.clearSelected(),this._writtenValue=val}ngOnInit(){this.view&&(this.view.type=this.type)}ngAfterContentInit(){if(!this.view)return;(this.writtenValue&&this.writtenValue.length||"number"==typeof this.writtenValue)&&this.writeValue(this.writtenValue),this.view.type=this.type,this.view.size=this.size;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if("single"!==this.type||isUpdate(event)||Array.isArray(event)||(this.closeMenu(),event.item&&event.item.selected?this.itemValueKey?this.propagateChange(event.item[this.itemValueKey]):this.propagateChange(event.item):this.propagateChange(null)),"multi"===this.type&&!isUpdate(event))if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChange(values)}else this.propagateChange(this.view.getSelected());isUpdate(event)||(this.checkForReorder(),this.selected.emit(event))}))}ngAfterViewInit(){null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0),this.checkForReorder()}ngOnDestroy(){this.appendInline||this._appendToDropdown()}writeValue(value){this.writtenValue=value,this.view.onItemsReady((()=>{if(value)if("single"===this.type)if(this.itemValueKey){const newValue=Object.assign({},this.view.getListItems().find((item=>item[this.itemValueKey]===value)));newValue.selected=!0,this.view.propagateSelected([newValue])}else this.view.propagateSelected([value]);else if(this.itemValueKey){let newValues=[];for(const v of value)for(const item of this.view.getListItems())item[this.itemValueKey]===v&&newValues.push(Object.assign({},item,{selected:!0}));this.view.propagateSelected(newValues)}else this.view.propagateSelected(value);else this.view.propagateSelected([value]);this.checkForReorder()}))}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}onKeyDown(event){if("Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key)event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus();else if(this.menuIsClosed&&(" "===event.key||"ArrowDown"===event.key||"ArrowUp"===event.key)){if(this.disableArrowKeys&&("ArrowDown"===event.key||"ArrowUp"===event.key))return;event.preventDefault(),this.openMenu()}!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu(),!this.menuIsClosed&&"Tab"===event.key&&event.shiftKey&&this.closeMenu(),"multi"!==this.type&&this.menuIsClosed&&this.closedDropdownNavigation(event)}closedDropdownNavigation(event){if("ArrowDown"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getNextItem();item&&(item.selected=!0)}else if("ArrowUp"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getPrevItem();item&&(item.selected=!0)}}getDisplayStringValue(){if(!this.view||this.skeleton)return;let selected=this.view.getSelected();return!selected.length||this.displayValue&&this.isRenderString()?selected.length&&this.isRenderString()?(0,of.of)(this.displayValue):(0,of.of)(this.placeholder):"multi"===this.type?(0,of.of)(this.placeholder):(0,of.of)(selected[0].content)}isRenderString(){return"string"==typeof this.displayValue}getRenderTemplateContext(){if(!this.view)return;let selected=this.view.getSelected();return"multi"===this.type?{items:selected}:selected&&selected.length>0?{item:selected[0]}:{}}getSelectedCount(){if(this.view.getSelected())return this.view.getSelected().length}clearSelected(){if(!this.disabled&&0!==this.getSelectedCount()){for(const item of this.view.getListItems())item.selected=!1;this.selected.emit([]),this.propagateChange([])}}valueSelected(){return!!this.view.getSelected()}_noop(){}_outsideClick(event){this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.closeMenu()}_outsideKey(event){!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu()}_keyboardNav(event){"Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus()):this.menuIsClosed||"Tab"!==event.key||(this.dropdownButton.nativeElement.focus(),this.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeMenu())}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("keydown",this.keyboardNav,!0)}_appendToBody(){const lightClass="light"===this.theme?" cds--list-box--light":"",expandedClass=this.menuIsClosed?"":" cds--list-box--expanded";this.dropdownService.appendToBody(this.dropdownButton.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_shouldDropUp(){const menu=this.dropdownMenu&&this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu"),menuRect=menu&&menu.getBoundingClientRect();if(menu&&menuRect){return(0,utils.O3)(menu).reduce(((shouldDropUp,parent)=>{const parentRect=parent.getBoundingClientRect(),isBelowParent=!(menuRect.bottom<=parentRect.bottom);return shouldDropUp||isBelowParent}),!1)}return!1}openMenu(){if(0!==this.view.getListItems().length){if(this._dropUp=!1,this.menuIsClosed=!1,!this.appendInline){const target=this.dropdownButton.nativeElement,parent=this.elementRef.nativeElement;this.visibilitySubscription=this.elementService.visibility(target,parent).subscribe((value=>{value.visible||this.closeMenu()})),this._appendToBody()}setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0),document.body.firstElementChild.addEventListener("click",this.noop,!0),document.body.firstElementChild.addEventListener("keydown",this.noop,!0),document.addEventListener("click",this.outsideClick,!0),document.addEventListener("keydown",this.outsideKey,!0),setTimeout((()=>this.view.initFocus()),0)}}closeMenu(){this.menuIsClosed||(this.menuIsClosed=!0,this.checkForReorder(),this.onClose.emit(),this.close.emit(),this.dropdownButton.nativeElement.focus(),this.view.disableScroll&&this.view.disableScroll(),this.appendInline||(this.visibilitySubscription.unsubscribe(),this._appendToDropdown()),document.body.firstElementChild.removeEventListener("click",this.noop,!0),document.body.firstElementChild.removeEventListener("keydown",this.noop,!0),document.removeEventListener("click",this.outsideClick,!0),document.removeEventListener("keydown",this.outsideKey,!0))}toggleMenu(){this.menuIsClosed?this.openMenu():this.closeMenu()}isTemplate(value){return value instanceof core.TemplateRef}checkForReorder(){const topAfterReopen=this.menuIsClosed&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected()}};Dropdown.dropdownCount=0,Dropdown.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:DropdownService},{type:utils.d2}],Dropdown.propDecorators={id:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],placeholder:[{type:core.Input}],displayValue:[{type:core.Input}],clearText:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],inline:[{type:core.Input}],disableArrowKeys:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],appendInline:[{type:core.Input}],scrollableContainer:[{type:core.Input}],itemValueKey:[{type:core.Input}],selectionFeedback:[{type:core.Input}],menuButtonLabel:[{type:core.Input}],selectedLabel:[{type:core.Input}],dropUp:[{type:core.Input}],selected:[{type:core.Output}],onClose:[{type:core.Output}],close:[{type:core.Output}],view:[{type:core.ContentChild,args:[AbstractDropdownView,{static:!0}]}],dropdownButton:[{type:core.ViewChild,args:["dropdownButton",{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--dropdown__wrapper"]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},Dropdown=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown, ibm-dropdown",template:'\n\t<label\n\t\t*ngIf="label && !skeleton"\n\t\t[for]="id"\n\t\tclass="cds--label"\n\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t</label>\n\t<div\n\t\tclass="cds--list-box"\n\t\t[ngClass]="{\n\t\t\t\'cds--dropdown\': type !== \'multi\',\n\t\t\t\'cds--multiselect\': type === \'multi\',\n\t\t\t\'cds--multi-select--selected\': type === \'multi\' && getSelectedCount() > 0,\n\t\t\t\'cds--dropdown--light\': theme === \'light\',\n\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\'cds--list-box--inline\': inline,\n\t\t\t\'cds--skeleton\': skeleton,\n\t\t\t\'cds--dropdown--disabled cds--list-box--disabled\': disabled,\n\t\t\t\'cds--dropdown--invalid\': invalid,\n\t\t\t\'cds--dropdown--warning cds--list-box--warning\': warn,\n\t\t\t\'cds--dropdown--sm cds--list-box--sm\': size === \'sm\',\n\t\t\t\'cds--dropdown--md cds--list-box--md\': size === \'md\',\n\t\t\t\'cds--dropdown--lg cds--list-box--lg\': size === \'lg\',\n\t\t\t\'cds--list-box--expanded\': !menuIsClosed\n\t\t}">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]="id"\n\t\t\ttype="button"\n\t\t\tclass="cds--list-box__field"\n\t\t\t[ngClass]="{\'a\': !menuIsClosed}"\n\t\t\t[attr.aria-expanded]="!menuIsClosed"\n\t\t\t[attr.aria-disabled]="disabled"\n\t\t\taria-haspopup="listbox"\n\t\t\t(click)="disabled ? $event.stopPropagation() : toggleMenu()"\n\t\t\t(blur)="onBlur()"\n\t\t\t[attr.disabled]="disabled ? true : null">\n\t\t\t<div\n\t\t\t\t(click)="clearSelected()"\n\t\t\t\t(keydown.enter)="clearSelected()"\n\t\t\t\t*ngIf="type === \'multi\' && getSelectedCount() > 0"\n\t\t\t\tclass="cds--list-box__selection cds--tag--filter cds--list-box__selection--multi"\n\t\t\t\ttabindex="0"\n\t\t\t\t[title]="clearText">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\trole="img"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf="isRenderString()" class="cds--list-box__label">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="!isRenderString()"\n\t\t\t\t[ngTemplateOutletContext]="getRenderTemplateContext()"\n\t\t\t\t[ngTemplateOutlet]="displayValue">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf="invalid"\n\t\t\t\tclass="cds--dropdown__invalid-icon"\n\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\tsize="16"\n\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t</svg>\n\t\t\t<span class="cds--list-box__menu-icon">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\tsize="16"\n\t\t\t\t\t[attr.aria-label]="menuButtonLabel"\n\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': !menuIsClosed }">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}">\n\t\t\t<ng-content *ngIf="!menuIsClosed"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf="helperText && !invalid && !warn && !skeleton"\n\t\tclass="cds--form__helper-text"\n\t\t[ngClass]="{\n\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t}">\n\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t</div>\n\t<div *ngIf="invalid" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t</div>\n\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Dropdown,multi:!0}]})],Dropdown);var isObservable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/util/isObservable.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js"),first=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/first.js"),fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),debounceTime=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/debounceTime.js"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js");let DropdownList=class DropdownList{constructor(elementRef,i18n,appRef){this.elementRef=elementRef,this.i18n=i18n,this.appRef=appRef,this.ariaLabel=this.i18n.get().DROPDOWN_LIST.LABEL,this.listTpl=null,this.select=new core.EventEmitter,this.scroll=new core.EventEmitter,this.blurIntent=new core.EventEmitter,this.type="single",this.showTitles=!0,this.size="md",this.listId="listbox-"+DropdownList.listCount++,this.highlightedItem=null,this.displayItems=[],this.index=-1,this._items=[]}set items(value){(0,isObservable.b)(value)?(this._itemsSubscription&&this._itemsSubscription.unsubscribe(),this._itemsReady=new Observable.y((observer=>{this._itemsSubscription=value.subscribe((v=>{this.updateList(v),observer.next(!0),observer.complete()}))})),this.onItemsReady(null)):this.updateList(value),this._originalItems=value}get items(){return this._originalItems}ngAfterViewInit(){this.index=this.getListItems().findIndex((item=>item.selected)),this.setupFocusObservable(),setTimeout((()=>{this.doEmitSelect(!0)}))}ngOnDestroy(){this.focusJump&&this.focusJump.unsubscribe(),this._itemsSubscription&&this._itemsSubscription.unsubscribe()}doEmitSelect(isUpdate=!0){if("single"===this.type)this.select.emit({item:this._items.find((item=>item.selected)),isUpdate});else{const selected=this.getSelected()||[];selected.isUpdate=isUpdate,this.select.emit(selected)}}getItemId(index){return`${this.listId}-${index}`}updateList(items){this._items=items.map((item=>Object.assign({},item))),this.displayItems=this._items,this.updateIndex(),this.setupFocusObservable(),this.doEmitSelect()}filterBy(query=""){query?(this.displayItems=this.getListItems().filter((item=>item.content.toLowerCase().includes(query.toLowerCase()))),this.displayItems&&(this.index=0)):this.displayItems=this.getListItems(),this.updateIndex()}setupFocusObservable(){if(!this.list)return;this.focusJump&&this.focusJump.unsubscribe();let elList=Array.from(this.list.nativeElement.querySelectorAll("li"));this.focusJump=function watchFocusJump(target,elements){return(0,fromEvent.R)(target,"keydown").pipe((0,debounceTime.b)(150),(0,map.U)((ev=>{let el=elements.find((itemEl=>itemEl.textContent.trim().toLowerCase().startsWith(ev.key)));if(el)return el})),(0,filter.h)((el=>!!el)))}(this.list.nativeElement,elList).subscribe((el=>{el.focus()}))}getNextItem(){return this.index<this.displayItems.length-1&&this.index++,this.displayItems[this.index]}hasNextElement(){return this.index<this.displayItems.length-1&&(!(this.index===this.displayItems.length-2)||!this.displayItems[this.index+1].disabled)}getNextElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index+1;i<elemList.length;i++)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index]?.nativeElement}getPrevItem(){return this.index>0&&this.index--,this.displayItems[this.index]}hasPrevElement(){return this.index>0&&(!(1===this.index)||!this.displayItems[0].disabled)}getPrevElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index-1;i<this.index&&i>=0;i--)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index].nativeElement}getCurrentItem(){return this.index<0?this.displayItems[0]:this.displayItems[this.index]}getCurrentElement(){return this.index<0?this.listElementList.first.nativeElement:this.listElementList.toArray()[this.index].nativeElement}getListItems(){return this._items}getSelected(){let selected=this.getListItems().filter((item=>item.selected));return 0===selected.length?[]:selected}propagateSelected(value){Array.isArray(value)||console.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`),this.onItemsReady((()=>{for(let oldItem of this.getListItems()){let tempOldItem=Object.assign({},oldItem);delete tempOldItem.selected,tempOldItem=JSON.stringify(tempOldItem);for(let newItem of value){let tempNewItem=Object.assign({},newItem);if(delete tempNewItem.selected,tempNewItem=JSON.stringify(tempNewItem),tempOldItem.includes(tempNewItem)){oldItem.selected=newItem.selected;break}oldItem.selected=!1}}}))}initFocus(){this.index<0&&this.updateIndex(),this.list.nativeElement.focus(),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)}))}updateIndex(){const selected=this.getSelected();selected.length?this.index=this.displayItems.indexOf(selected[0]):this.hasNextElement()&&this.getNextElement()}navigateList(event){"Enter"===event.key||" "===event.key?(this.listElementList.some((option=>option.nativeElement===event.target))&&event.preventDefault(),"Enter"===event.key&&this.doClick(event,this.getCurrentItem())):"ArrowDown"!==event.key&&"ArrowUp"!==event.key||(event.preventDefault(),"ArrowDown"===event.key?this.hasNextElement()?this.getNextElement()?.scrollIntoView({block:"end"}):this.blurIntent.emit("bottom"):"ArrowUp"===event.key&&(this.hasPrevElement()?this.getPrevElement().scrollIntoView({block:"nearest"}):this.blurIntent.emit("top")),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)})))}doClick(event,item){if(event.preventDefault(),item&&!item.disabled){if(this.list.nativeElement.focus(),"single"===this.type){item.selected=!0;for(let otherItem of this.getListItems())item!==otherItem&&(otherItem.selected=!1)}else item.selected=!item.selected;this.index=this.displayItems.indexOf(item),this.highlightedItem=this.getItemId(this.index),this.doEmitSelect(!1),this.appRef.tick()}}onItemFocus(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.add("cds--list-box__menu-item--highlighted"),element.tabIndex=0}onItemBlur(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.remove("cds--list-box__menu-item--highlighted"),element.tabIndex=-1}emitScroll(event){const customScrollEvent={atTop:0===event.srcElement.scrollTop,atBottom:event.srcElement.scrollHeight-event.srcElement.scrollTop===event.srcElement.clientHeight,event};this.scroll.emit(customScrollEvent)}onItemsReady(subcription){(this._itemsReady||(0,of.of)(!0)).pipe((0,first.P)()).subscribe(subcription)}reorderSelected(moveFocus=!0){this.displayItems=[...this.getSelected(),...this.getListItems().filter((item=>!item.selected))],moveFocus&&setTimeout((()=>{this.updateIndex(),this.highlightedItem=this.getItemId(this.index)}))}};DropdownList.listCount=0,DropdownList.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:core.ApplicationRef}],DropdownList.propDecorators={ariaLabel:[{type:core.Input}],items:[{type:core.Input}],listTpl:[{type:core.Input}],select:[{type:core.Output}],scroll:[{type:core.Output}],blurIntent:[{type:core.Output}],list:[{type:core.ViewChild,args:["list",{static:!0}]}],type:[{type:core.Input}],showTitles:[{type:core.Input}],listElementList:[{type:core.ViewChildren,args:["listItem"]}]},DropdownList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown-list, ibm-dropdown-list",template:'\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]="listId"\n\t\t\trole="listbox"\n\t\t\tclass="cds--list-box__menu cds--multi-select"\n\t\t\t(scroll)="emitScroll($event)"\n\t\t\t(keydown)="navigateList($event)"\n\t\t\ttabindex="-1"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-activedescendant]="highlightedItem">\n\t\t\t<li\n\t\t\t\trole="option"\n\t\t\t\t*ngFor="let item of displayItems; let i = index"\n\t\t\t\t(click)="doClick($event, item)"\n\t\t\t\tclass="cds--list-box__menu-item"\n\t\t\t\t[attr.aria-selected]="item.selected"\n\t\t\t\t[id]="getItemId(i)"\n\t\t\t\t[attr.title]=" showTitles ? item.content : null"\n\t\t\t\t[attr.disabled]="item.disabled ? true : null"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--list-box__menu-item--active\': item.selected,\n\t\t\t\t\t\'cds--list-box__menu-item--highlighted\': highlightedItem === getItemId(i)\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tclass="cds--list-box__menu-item__option">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'multi\'"\n\t\t\t\t\t\tclass="cds--form-item cds--checkbox-wrapper">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]="item.selected"\n\t\t\t\t\t\t\tclass="cds--checkbox-label">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass="cds--checkbox"\n\t\t\t\t\t\t\t\ttype="checkbox"\n\t\t\t\t\t\t\t\t[checked]="item.selected"\n\t\t\t\t\t\t\t\t[disabled]="item.disabled"\n\t\t\t\t\t\t\t\ttabindex="-1">\n\t\t\t\t\t\t\t<span class="cds--checkbox-appearance"></span>\n\t\t\t\t\t\t\t<span class="cds--checkbox-label-text">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf="!listTpl && type === \'single\'">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'single\'"\n\t\t\t\t\t\tcdsIcon="checkmark"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__menu-item__selected-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf="listTpl"\n\t\t\t\t\t\t[ngTemplateOutletContext]="{item: item}"\n\t\t\t\t\t\t[ngTemplateOutlet]="listTpl">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>',providers:[{provide:AbstractDropdownView,useExisting:DropdownList}]})],DropdownList);let ScrollableList=class ScrollableList{constructor(elementRef){this.elementRef=elementRef,this.nScrollableList=null,this.scrollEnabled=!0,this.scrollBy=10,this.canScrollUp=!1,this.canScrollDown=!1,this.list=this.elementRef.nativeElement}ngOnChanges(changes){changes.scrollEnabled&&(changes.scrollEnabled.currentValue?(this.list.style.overflow="hidden",this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0,this.updateScrollHeight(),this.checkScrollArrows(),setTimeout((()=>{this.checkScrollArrows()}))):(this.scrollUpTarget.style.display="none",this.scrollDownTarget.style.display="none",this.canScrollUp=!1,this.canScrollDown=!1,this.list.style.height=null,this.list.style.overflow=null,clearInterval(this.hoverScrollInterval)))}ngAfterViewInit(){this.nScrollableList&&(this.list=this.elementRef.nativeElement.querySelector(this.nScrollableList)),this.scrollUpTarget.addEventListener("mouseover",(()=>this.onHoverUp(!0))),this.scrollUpTarget.addEventListener("mouseout",(()=>this.onHoverUp(!1))),this.scrollDownTarget.addEventListener("mouseover",(()=>this.onHoverDown(!0))),this.scrollDownTarget.addEventListener("mouseout",(()=>this.onHoverDown(!1)))}updateScrollHeight(){if(this.scrollEnabled){const containerRect=this.elementRef.nativeElement.parentElement.getBoundingClientRect(),innerHeightDiff=this.list.getBoundingClientRect().top-containerRect.top,height=containerRect.height-(containerRect.bottom-window.innerHeight)-innerHeightDiff-40;this.list.style.height=`${height}px`}}checkScrollArrows(){const scrollUpHeight=this.scrollUpTarget.offsetHeight,scrollDownHeight=this.scrollDownTarget.offsetHeight;0===this.list.scrollTop?(this.canScrollUp&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollUpHeight}px`),this.scrollUpTarget.style.display="none",this.canScrollUp=!1):this.list.scrollTop===this.list.scrollTopMax?(this.canScrollDown&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollDownHeight}px`),this.scrollDownTarget.style.display="none",this.canScrollDown=!1):(this.canScrollUp||(this.list.style.height=parseInt(this.list.style.height,10)-scrollUpHeight+"px"),this.canScrollDown||(this.list.style.height=parseInt(this.list.style.height,10)-scrollDownHeight+"px"),this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0)}onWheel(event){event.deltaY<0?this.list.scrollTop-=this.scrollBy:this.list.scrollTop+=this.scrollBy,this.list.scrollTop!==this.list.scrollTopMax&&0!==this.list.scrollTop&&(event.preventDefault(),event.stopPropagation()),this.checkScrollArrows()}onTouchStart(event){event.touches[0]&&(this.lastTouch=event.touches[0].clientY)}onTouchMove(event){if(event.preventDefault(),event.stopPropagation(),event.touches[0]){const touch=event.touches[0];this.list.scrollTop+=this.lastTouch-touch.clientY,this.lastTouch=touch.clientY,this.checkScrollArrows()}}hoverScrollBy(hovering,amount){hovering?this.hoverScrollInterval=setInterval((()=>{this.list.scrollTop+=amount,this.checkScrollArrows()}),1):clearInterval(this.hoverScrollInterval)}onHoverUp(hovering){this.hoverScrollBy(hovering,-3)}onHoverDown(hovering){this.hoverScrollBy(hovering,3)}onKeyDown(event){"ArrowDown"!==event.key&&"ArrowUp"!==event.key||this.checkScrollArrows()}};ScrollableList.ctorParameters=()=>[{type:core.ElementRef}],ScrollableList.propDecorators={nScrollableList:[{type:core.Input}],scrollEnabled:[{type:core.Input}],scrollUpTarget:[{type:core.Input}],scrollDownTarget:[{type:core.Input}],scrollBy:[{type:core.Input}],onWheel:[{type:core.HostListener,args:["wheel",["$event"]]}],onTouchStart:[{type:core.HostListener,args:["touchstart",["$event"]]}],onTouchMove:[{type:core.HostListener,args:["touchmove",["$event"]]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},ScrollableList=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsScrollableList], [ibmScrollableList]",exportAs:"scrollable-list"})],ScrollableList);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let DropdownModule=class DropdownModule{};DropdownModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],exports:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,placeholder.Qq,utils.As,icon.QX],providers:[DropdownService]})],DropdownModule)}}]);
package/docs/storybook/iframe.html CHANGED
@@ -348,8 +348,8 @@
348
348
  window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
349
349
 
350
350
 
351
- import './runtime~main.1f3e45b2.iframe.bundle.js';
351
+ import './runtime~main.57b056bd.iframe.bundle.js';
352
352
 
353
353
  import './959.4248791c.iframe.bundle.js';
354
354
 
355
- import './main.9d694b47.iframe.bundle.js';</script></body></html>
355
+ import './main.882077ad.iframe.bundle.js';</script></body></html>