carbon-components-angular 5.10.3 → 5.10.4
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.
- package/combobox/combobox.component.d.ts +2 -2
- package/docs/documentation/components/ComboBox.html +38 -10
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
- package/docs/documentation/modules/TilesModule.html +98 -98
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +42 -38
- package/docs/documentation/modules/TimePickerSelectModule.html +42 -38
- package/docs/documentation/modules/ToggleModule/dependencies.svg +46 -42
- package/docs/documentation/modules/ToggleModule.html +46 -42
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +38 -38
- package/docs/documentation/modules/ToggletipModule.html +38 -38
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +31 -13
- package/docs/storybook/combobox-combobox-stories.955bdf76.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.5b6e5e09.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.fc6e3901.iframe.bundle.js → runtime~main.3e61b46f.iframe.bundle.js} +1 -1
- package/esm2020/combobox/combobox.component.mjs +8 -8
- package/fesm2015/carbon-components-angular-combobox.mjs +7 -7
- package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-combobox.mjs +7 -7
- package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
- package/package.json +1 -1
- package/docs/storybook/combobox-combobox-stories.fdeea2f7.iframe.bundle.js +0 -1
- package/docs/storybook/main.fef29d4d.iframe.bundle.js +0 -1
|
@@ -66,83 +66,83 @@
|
|
|
66
66
|
<title>cluster_TooltipModule</title>
|
|
67
67
|
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="72,-70 72,-268 424,-268 424,-70 72,-70"/>
|
|
68
68
|
</g>
|
|
69
|
-
<g id="clust2" class="cluster">
|
|
70
|
-
<title>cluster_TooltipModule_declarations</title>
|
|
71
|
-
<polygon fill="none" stroke="black" points="210,-78 210,-130 416,-130 416,-78 210,-78"/>
|
|
72
|
-
</g>
|
|
73
69
|
<g id="clust5" class="cluster">
|
|
74
70
|
<title>cluster_TooltipModule_imports</title>
|
|
75
|
-
<polygon fill="none" stroke="black" points="
|
|
71
|
+
<polygon fill="none" stroke="black" points="294,-78 294,-130 416,-130 416,-78 294,-78"/>
|
|
72
|
+
</g>
|
|
73
|
+
<g id="clust2" class="cluster">
|
|
74
|
+
<title>cluster_TooltipModule_declarations</title>
|
|
75
|
+
<polygon fill="none" stroke="black" points="80,-78 80,-130 286,-130 286,-78 80,-78"/>
|
|
76
76
|
</g>
|
|
77
77
|
<g id="clust6" class="cluster">
|
|
78
78
|
<title>cluster_TooltipModule_exports</title>
|
|
79
|
-
<polygon fill="none" stroke="black" points="
|
|
79
|
+
<polygon fill="none" stroke="black" points="131,-208 131,-260 343,-260 343,-208 131,-208"/>
|
|
80
80
|
</g>
|
|
81
81
|
<!-- Tooltip -->
|
|
82
82
|
<g id="node1" class="node">
|
|
83
83
|
<title>Tooltip</title>
|
|
84
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
85
|
-
<text text-anchor="middle" x="
|
|
84
|
+
<polygon fill="#ffffb3" stroke="black" points="277.72,-122 220.28,-122 220.28,-86 277.72,-86 277.72,-122"/>
|
|
85
|
+
<text text-anchor="middle" x="249" y="-99.8" font-family="Times,serif" font-size="14.00">Tooltip</text>
|
|
86
86
|
</g>
|
|
87
87
|
<!-- TooltipModule -->
|
|
88
88
|
<g id="node3" class="node">
|
|
89
89
|
<title>TooltipModule</title>
|
|
90
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
91
|
-
<text text-anchor="middle" x="
|
|
90
|
+
<polygon fill="#8dd3c7" stroke="black" points="299.27,-187 296.27,-191 275.27,-191 272.27,-187 198.73,-187 198.73,-151 299.27,-151 299.27,-187"/>
|
|
91
|
+
<text text-anchor="middle" x="249" y="-164.8" font-family="Times,serif" font-size="14.00">TooltipModule</text>
|
|
92
92
|
</g>
|
|
93
93
|
<!-- Tooltip->TooltipModule -->
|
|
94
94
|
<g id="edge1" class="edge">
|
|
95
95
|
<title>Tooltip->TooltipModule</title>
|
|
96
|
-
<path fill="none" stroke="black" d="
|
|
97
|
-
<polygon fill="black" stroke="black" points="
|
|
96
|
+
<path fill="none" stroke="black" d="M249,-122.11C249,-122.11 249,-140.99 249,-140.99"/>
|
|
97
|
+
<polygon fill="black" stroke="black" points="245.5,-140.99 249,-150.99 252.5,-140.99 245.5,-140.99"/>
|
|
98
98
|
</g>
|
|
99
99
|
<!-- TooltipDefinition -->
|
|
100
100
|
<g id="node2" class="node">
|
|
101
101
|
<title>TooltipDefinition</title>
|
|
102
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
103
|
-
<text text-anchor="middle" x="
|
|
102
|
+
<polygon fill="#ffffb3" stroke="black" points="202.27,-122 87.73,-122 87.73,-86 202.27,-86 202.27,-122"/>
|
|
103
|
+
<text text-anchor="middle" x="145" y="-99.8" font-family="Times,serif" font-size="14.00">TooltipDefinition</text>
|
|
104
104
|
</g>
|
|
105
105
|
<!-- TooltipDefinition->TooltipModule -->
|
|
106
106
|
<g id="edge2" class="edge">
|
|
107
107
|
<title>TooltipDefinition->TooltipModule</title>
|
|
108
|
-
<path fill="none" stroke="black" d="
|
|
109
|
-
<polygon fill="black" stroke="black" points="
|
|
108
|
+
<path fill="none" stroke="black" d="M202.43,-104C207.86,-104 211.39,-104 211.39,-104 211.39,-104 211.39,-140.89 211.39,-140.89"/>
|
|
109
|
+
<polygon fill="black" stroke="black" points="207.89,-140.89 211.39,-150.89 214.89,-140.89 207.89,-140.89"/>
|
|
110
110
|
</g>
|
|
111
111
|
<!-- Tooltip -->
|
|
112
112
|
<g id="node5" class="node">
|
|
113
113
|
<title>Tooltip </title>
|
|
114
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
115
|
-
<text text-anchor="middle" x="
|
|
114
|
+
<polygon fill="#fb8072" stroke="black" points="335.23,-252 274.77,-252 274.77,-216 335.23,-216 335.23,-252"/>
|
|
115
|
+
<text text-anchor="middle" x="305" y="-229.8" font-family="Times,serif" font-size="14.00">Tooltip </text>
|
|
116
116
|
</g>
|
|
117
117
|
<!-- TooltipModule->Tooltip -->
|
|
118
118
|
<g id="edge4" class="edge">
|
|
119
119
|
<title>TooltipModule->Tooltip </title>
|
|
120
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
121
|
-
<polygon fill="black" stroke="black" points="
|
|
120
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M287.01,-187.11C287.01,-187.11 287.01,-205.99 287.01,-205.99"/>
|
|
121
|
+
<polygon fill="black" stroke="black" points="283.51,-205.99 287.01,-215.99 290.51,-205.99 283.51,-205.99"/>
|
|
122
122
|
</g>
|
|
123
123
|
<!-- TooltipDefinition -->
|
|
124
124
|
<g id="node6" class="node">
|
|
125
125
|
<title>TooltipDefinition </title>
|
|
126
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
127
|
-
<text text-anchor="middle" x="
|
|
126
|
+
<polygon fill="#fb8072" stroke="black" points="257.27,-252 138.73,-252 138.73,-216 257.27,-216 257.27,-252"/>
|
|
127
|
+
<text text-anchor="middle" x="198" y="-229.8" font-family="Times,serif" font-size="14.00">TooltipDefinition </text>
|
|
128
128
|
</g>
|
|
129
129
|
<!-- TooltipModule->TooltipDefinition -->
|
|
130
130
|
<g id="edge5" class="edge">
|
|
131
131
|
<title>TooltipModule->TooltipDefinition </title>
|
|
132
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
133
|
-
<polygon fill="black" stroke="black" points="
|
|
132
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.87,-187.11C227.87,-187.11 227.87,-205.99 227.87,-205.99"/>
|
|
133
|
+
<polygon fill="black" stroke="black" points="224.37,-205.99 227.87,-215.99 231.37,-205.99 224.37,-205.99"/>
|
|
134
134
|
</g>
|
|
135
135
|
<!-- PopoverModule -->
|
|
136
136
|
<g id="node4" class="node">
|
|
137
137
|
<title>PopoverModule</title>
|
|
138
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
139
|
-
<text text-anchor="middle" x="
|
|
138
|
+
<polygon fill="#8dd3c7" stroke="black" points="408.21,-122 405.21,-126 384.21,-126 381.21,-122 301.79,-122 301.79,-86 408.21,-86 408.21,-122"/>
|
|
139
|
+
<text text-anchor="middle" x="355" y="-99.8" font-family="Times,serif" font-size="14.00">PopoverModule</text>
|
|
140
140
|
</g>
|
|
141
141
|
<!-- PopoverModule->TooltipModule -->
|
|
142
142
|
<g id="edge3" class="edge">
|
|
143
143
|
<title>PopoverModule->TooltipModule</title>
|
|
144
|
-
<path fill="none" stroke="black" d="
|
|
145
|
-
<polygon fill="black" stroke="black" points="
|
|
144
|
+
<path fill="none" stroke="black" d="M301.64,-104C293.91,-104 288.5,-104 288.5,-104 288.5,-104 288.5,-140.89 288.5,-140.89"/>
|
|
145
|
+
<polygon fill="black" stroke="black" points="285,-140.89 288.5,-150.89 292,-140.89 285,-140.89"/>
|
|
146
146
|
</g>
|
|
147
147
|
</g>
|
|
148
148
|
</svg>
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
<title>cluster_UIShellModule</title>
|
|
25
25
|
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
|
|
26
26
|
</g>
|
|
27
|
-
<g id="clust4" class="cluster">
|
|
28
|
-
<title>cluster_UIShellModule_exports</title>
|
|
29
|
-
<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
|
|
30
|
-
</g>
|
|
31
27
|
<g id="clust3" class="cluster">
|
|
32
28
|
<title>cluster_UIShellModule_imports</title>
|
|
33
29
|
<polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
|
|
34
30
|
</g>
|
|
31
|
+
<g id="clust4" class="cluster">
|
|
32
|
+
<title>cluster_UIShellModule_exports</title>
|
|
33
|
+
<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
|
|
34
|
+
</g>
|
|
35
35
|
<!-- HeaderModule -->
|
|
36
36
|
<g id="node1" class="node">
|
|
37
37
|
<title>HeaderModule</title>
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
<title>cluster_UIShellModule</title>
|
|
67
67
|
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
|
|
68
68
|
</g>
|
|
69
|
-
<g id="clust4" class="cluster">
|
|
70
|
-
<title>cluster_UIShellModule_exports</title>
|
|
71
|
-
<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
|
|
72
|
-
</g>
|
|
73
69
|
<g id="clust3" class="cluster">
|
|
74
70
|
<title>cluster_UIShellModule_imports</title>
|
|
75
71
|
<polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
|
|
76
72
|
</g>
|
|
73
|
+
<g id="clust4" class="cluster">
|
|
74
|
+
<title>cluster_UIShellModule_exports</title>
|
|
75
|
+
<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
|
|
76
|
+
</g>
|
|
77
77
|
<!-- HeaderModule -->
|
|
78
78
|
<g id="node1" class="node">
|
|
79
79
|
<title>HeaderModule</title>
|
package/docs/documentation.json
CHANGED
|
@@ -21445,7 +21445,7 @@
|
|
|
21445
21445
|
},
|
|
21446
21446
|
{
|
|
21447
21447
|
"name": "ComboBox",
|
|
21448
|
-
"id": "component-ComboBox-
|
|
21448
|
+
"id": "component-ComboBox-c507b69ada729c040d6555d7153a4a56deec52c4c3d740d5de060621e7b7b3088a7bcd6dde802ff447192542b21230e82565c95a236de61c013d1567be6f6d67",
|
|
21449
21449
|
"file": "src/combobox/combobox.component.ts",
|
|
21450
21450
|
"encapsulation": [],
|
|
21451
21451
|
"entryComponents": [],
|
|
@@ -21459,7 +21459,7 @@
|
|
|
21459
21459
|
"selector": "cds-combo-box, ibm-combo-box",
|
|
21460
21460
|
"styleUrls": [],
|
|
21461
21461
|
"styles": [],
|
|
21462
|
-
"template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\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\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\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<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\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=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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</div>\n\t",
|
|
21462
|
+
"template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\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\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\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<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\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=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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</div>\n\t",
|
|
21463
21463
|
"templateUrl": [],
|
|
21464
21464
|
"viewProviders": [],
|
|
21465
21465
|
"hostDirectives": [],
|
|
@@ -21688,15 +21688,15 @@
|
|
|
21688
21688
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead",
|
|
21689
21689
|
"jsdoctags": [
|
|
21690
21690
|
{
|
|
21691
|
-
"pos":
|
|
21692
|
-
"end":
|
|
21691
|
+
"pos": 9432,
|
|
21692
|
+
"end": 9490,
|
|
21693
21693
|
"flags": 8421376,
|
|
21694
21694
|
"modifierFlagsCache": 0,
|
|
21695
21695
|
"transformFlags": 0,
|
|
21696
21696
|
"kind": 334,
|
|
21697
21697
|
"tagName": {
|
|
21698
|
-
"pos":
|
|
21699
|
-
"end":
|
|
21698
|
+
"pos": 9433,
|
|
21699
|
+
"end": 9443,
|
|
21700
21700
|
"flags": 8421376,
|
|
21701
21701
|
"modifierFlagsCache": 0,
|
|
21702
21702
|
"transformFlags": 0,
|
|
@@ -21746,7 +21746,7 @@
|
|
|
21746
21746
|
"outputsClass": [
|
|
21747
21747
|
{
|
|
21748
21748
|
"name": "clear",
|
|
21749
|
-
"defaultValue": "new EventEmitter()",
|
|
21749
|
+
"defaultValue": "new EventEmitter<Event>()",
|
|
21750
21750
|
"deprecated": false,
|
|
21751
21751
|
"deprecationMessage": "",
|
|
21752
21752
|
"rawdescription": "\nEmits an event when the clear button is clicked.",
|
|
@@ -22103,7 +22103,14 @@
|
|
|
22103
22103
|
},
|
|
22104
22104
|
{
|
|
22105
22105
|
"name": "clearSelected",
|
|
22106
|
-
"args": [
|
|
22106
|
+
"args": [
|
|
22107
|
+
{
|
|
22108
|
+
"name": "event",
|
|
22109
|
+
"type": "",
|
|
22110
|
+
"deprecated": false,
|
|
22111
|
+
"deprecationMessage": ""
|
|
22112
|
+
}
|
|
22113
|
+
],
|
|
22107
22114
|
"optional": false,
|
|
22108
22115
|
"returnType": "void",
|
|
22109
22116
|
"typeParameters": [],
|
|
@@ -22112,6 +22119,17 @@
|
|
|
22112
22119
|
"deprecationMessage": "",
|
|
22113
22120
|
"modifierKind": [
|
|
22114
22121
|
123
|
|
22122
|
+
],
|
|
22123
|
+
"jsdoctags": [
|
|
22124
|
+
{
|
|
22125
|
+
"name": "event",
|
|
22126
|
+
"type": "",
|
|
22127
|
+
"deprecated": false,
|
|
22128
|
+
"deprecationMessage": "",
|
|
22129
|
+
"tagName": {
|
|
22130
|
+
"text": "param"
|
|
22131
|
+
}
|
|
22132
|
+
}
|
|
22115
22133
|
]
|
|
22116
22134
|
},
|
|
22117
22135
|
{
|
|
@@ -22500,7 +22518,7 @@
|
|
|
22500
22518
|
"description": "<p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide "pills" of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
|
|
22501
22519
|
"rawdescription": "\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
|
|
22502
22520
|
"type": "component",
|
|
22503
|
-
"sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tDocumentService,\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\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\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter <{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected documentService: DocumentService,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif ( this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t\tif (!isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\tthis.documentService.handleClick(event => {\n\t\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected() {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit();\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected();\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", {bubbles: true, cancelable: true, key: \"Tab\"}));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\" ) {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
|
|
22521
|
+
"sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tDocumentService,\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\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\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter <{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected documentService: DocumentService,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif ( this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t\tif (!isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\tthis.documentService.handleClick(event => {\n\t\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", {bubbles: true, cancelable: true, key: \"Tab\"}));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\" ) {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
|
|
22504
22522
|
"assetsDirs": [],
|
|
22505
22523
|
"styleUrlsData": "",
|
|
22506
22524
|
"stylesData": "",
|
|
@@ -68304,7 +68322,7 @@
|
|
|
68304
68322
|
"deprecated": false,
|
|
68305
68323
|
"deprecationMessage": "",
|
|
68306
68324
|
"type": "Story<ComboBox>",
|
|
68307
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
68325
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
68308
68326
|
},
|
|
68309
68327
|
{
|
|
68310
68328
|
"name": "MultiTemplate",
|
|
@@ -69339,7 +69357,7 @@
|
|
|
69339
69357
|
"deprecated": false,
|
|
69340
69358
|
"deprecationMessage": "",
|
|
69341
69359
|
"type": "Story<ComboBox>",
|
|
69342
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
69360
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
69343
69361
|
},
|
|
69344
69362
|
{
|
|
69345
69363
|
"name": "Template",
|
|
@@ -72772,7 +72790,7 @@
|
|
|
72772
72790
|
"deprecated": false,
|
|
72773
72791
|
"deprecationMessage": "",
|
|
72774
72792
|
"type": "Story<ComboBox>",
|
|
72775
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
72793
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
72776
72794
|
},
|
|
72777
72795
|
{
|
|
72778
72796
|
"name": "ReactiveForms",
|
|
@@ -72802,7 +72820,7 @@
|
|
|
72802
72820
|
"deprecated": false,
|
|
72803
72821
|
"deprecationMessage": "",
|
|
72804
72822
|
"type": "Story<ComboBox>",
|
|
72805
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
72823
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
72806
72824
|
}
|
|
72807
72825
|
],
|
|
72808
72826
|
"src/content-switcher/content-switcher.stories.ts": [
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9736],{"./src/combobox/combobox.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,BasicMax:()=>BasicMax,Dynamic:()=>Dynamic,MockQuerySearch:()=>MockQuerySearch,Multiselect:()=>Multiselect,ReactiveForms:()=>ReactiveForms,default:()=>combobox_stories});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),dropdown=__webpack_require__("./src/dropdown/index.ts"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js"),utils=__webpack_require__("./src/utils/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts");let ComboBox=class ComboBox{constructor(elementRef,documentService,dropdownService,i18n){this.elementRef=elementRef,this.documentService=documentService,this.dropdownService=dropdownService,this.i18n=i18n,this.id="dropdown-"+ComboBox.comboBoxCount++,this.items=[],this.type="single",this.size="md",this.appendInline=null,this.invalid=!1,this.warn=!1,this.maxLength=null,this.theme="dark",this.selectionFeedback="top-after-reopen",this.autocomplete="list",this.disabled=!1,this.selected=new core.EventEmitter,this.submit=new core.EventEmitter,this.close=new core.EventEmitter,this.search=new core.EventEmitter,this.clear=new core.EventEmitter,this.hostClass=!0,this.display="block",this.open=!1,this.showClearButton=!1,this.pills=[],this.selectedValue="",this.keyboardNav=this._keyboardNav.bind(this),this._dropUp=!1,this.noop=this._noop.bind(this),this.onTouchedCallback=this._noop,this.propagateChangeCallback=this._noop,this._placeholder=this.i18n.getOverridable("COMBOBOX.PLACEHOLDER"),this._closeMenuAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLOSE_MENU"),this._openMenuAria=this.i18n.getOverridable("COMBOBOX.A11Y.OPEN_MENU"),this._clearSelectionsTitle=this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTIONS"),this._clearSelectionsAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTIONS"),this._clearSelectionTitle=this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED"),this._clearSelectionAria=this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED")}set placeholder(value){this._placeholder.override(value)}get placeholder(){return this._placeholder.value}set openMenuAria(value){this._openMenuAria.override(value)}get openMenuAria(){return this._openMenuAria.value}set closeMenuAria(value){this._closeMenuAria.override(value)}get closeMenuAria(){return this._closeMenuAria.value}set clearSelectionsTitle(value){this._clearSelectionsTitle.override(value)}get clearSelectionsTitle(){return this._clearSelectionsTitle.value}set clearSelectionsAria(value){this._clearSelectionsAria.override(value)}get clearSelectionsAria(){return this._clearSelectionsAria.value}set clearSelectionTitle(value){this._clearSelectionTitle.override(value)}get clearSelectionTitle(){return this._clearSelectionTitle.value}set clearSelectionAria(value){this._clearSelectionAria.override(value)}get clearSelectionAria(){return this._clearSelectionAria.value}ngOnChanges(changes){changes.items&&(this.view.items=changes.items.currentValue,this.updateSelected(),("multi"===this.type||"single"===this.type&&!this.selectedValue)&&this.onSearch(this.input.nativeElement.value,!1))}ngAfterContentInit(){if(this.view){this.view.type=this.type;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if(Array.isArray(event)){if(this.updatePills(),!isUpdate(event))if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChangeCallback(values)}else this.propagateChangeCallback(this.view.getSelected())}else event.item&&event.item.selected?(this.showClearButton=!0,this.selectedValue=event.item.content,isUpdate(event)||(this.itemValueKey?this.propagateChangeCallback(event.item[this.itemValueKey]):this.propagateChangeCallback(event.item))):(this.selectedValue="",isUpdate(event)||this.propagateChangeCallback(null)),isUpdate(event)||(this.elementRef.nativeElement.querySelector("input").focus(),this.view.filterBy("")),this.closeDropdown();isUpdate(event)||Array.isArray(event)||this.selected.emit(event.item)})),setTimeout((()=>{this.updateSelected()})),this.view.blurIntent.pipe((0,filter.h)((v=>"top"===v))).subscribe((()=>{this.elementRef.nativeElement.querySelector(".cds--text-input").focus()}))}}ngAfterViewInit(){this.documentService.handleClick((event=>{this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.open&&this.closeDropdown()})),null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0)}ngOnDestroy(){this.appendInline||this._appendToDropdown()}hostkeys(ev){"Escape"===ev.key?this.closeDropdown():"ArrowDown"!==ev.key||this.dropdownMenu&&this.dropdownMenu.nativeElement.contains(ev.target)||(ev.stopPropagation(),this.openDropdown(),setTimeout((()=>{this.view.initFocus()}),0)),this.open&&"Tab"===ev.key&&(this.dropdownMenu.nativeElement.contains(ev.target)||ev.target===this.input.nativeElement)&&this.closeDropdown(),this.open&&"Tab"===ev.key&&ev.shiftKey&&this.closeDropdown()}_noop(){}writeValue(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||""]);this.showClearButton=!(!value||!this.view.getSelected().length)}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||[""]);this.updateSelected()}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChangeCallback=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}updatePills(){this.pills=this.view.getSelected()||[],this.checkForReorder()}clearSelected(event){this.items=this.items.map((item=>(item.disabled||(item.selected=!1),item))),this.view.items=this.items,this.updatePills();const selected=this.view.getSelected();this.propagateChangeCallback(selected),this.selected.emit(selected),this.clear.emit(event)}closeDropdown(){this.open=!1,this.checkForReorder(),this.close.emit(),this.appendInline||this._appendToDropdown()}openDropdown(){this.disabled||(this.open=!0,this._dropUp=!1,this.appendInline||this._appendToBody(),setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0))}toggleDropdown(){this.open?this.closeDropdown():this.openDropdown()}onSearch(searchString,shouldEmitSearch=!0){if(shouldEmitSearch&&this.search.emit(searchString),this.showClearButton=!!searchString,this.view.filterBy(searchString),""!==searchString?this.open||this.openDropdown():(this.selectedValue="","multi"!==this.type||"top"!==this.selectionFeedback&&"top-after-reopen"!==this.selectionFeedback||this.view.reorderSelected()),"single"===this.type){if(!this.view.getListItems().some((item=>item.content.toLowerCase().includes(searchString.toLowerCase())))){const selected=this.view.getSelected();selected&&selected[0]||this.view.filterBy(searchString)}}}onSubmit(event){this.submit.emit({items:this.view.getListItems(),index:0,value:{content:event.target.value,selected:!1}})}clearInput(event){event.stopPropagation(),event.preventDefault(),"single"===this.type&&(this.clearSelected(event),this.closeDropdown()),this.selectedValue="",this.input.nativeElement.value="",this.showClearButton=!1,this.input.nativeElement.focus(),this.onSearch(this.input.nativeElement.value)}isTemplate(value){return value instanceof core.TemplateRef}_keyboardNav(event){"Escape"===event.key&&this.open&&event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeDropdown(),this.input.nativeElement.focus()):this.open&&"Tab"===event.key&&(this.input.nativeElement.focus(),this.input.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeDropdown())}_appendToBody(){this.dropdownService.appendToBody(this.listbox.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${this.open?" cds--list-box--expanded":""}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("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}updateSelected(){const selected=this.view.getSelected();if("multi"===this.type)this.updatePills();else if(selected){const value=selected[0]?selected[0].content:"";selected[0]&&selected[0];this.selectedValue=value,this.showClearButton=!!value}}checkForReorder(){const topAfterReopen=!this.open&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected(!0)}};ComboBox.comboBoxCount=0,ComboBox.ctorParameters=()=>[{type:core.ElementRef},{type:utils.Zg},{type:dropdown.Vn},{type:i18n.oc}],ComboBox.propDecorators={placeholder:[{type:core.Input}],openMenuAria:[{type:core.Input}],closeMenuAria:[{type:core.Input}],clearSelectionsTitle:[{type:core.Input}],clearSelectionsAria:[{type:core.Input}],clearSelectionTitle:[{type:core.Input}],clearSelectionAria:[{type:core.Input}],id:[{type:core.Input}],items:[{type:core.Input}],type:[{type:core.Input}],size:[{type:core.Input}],itemValueKey:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],appendInline:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],maxLength:[{type:core.Input}],theme:[{type:core.Input}],selectionFeedback:[{type:core.Input}],autocomplete:[{type:core.Input}],dropUp:[{type:core.Input}],disabled:[{type:core.Input}],selected:[{type:core.Output}],submit:[{type:core.Output}],close:[{type:core.Output}],search:[{type:core.Output}],clear:[{type:core.Output}],view:[{type:core.ContentChild,args:[dropdown.jq,{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu"]}],input:[{type:core.ViewChild,args:["input",{static:!0}]}],listbox:[{type:core.ViewChild,args:["listbox",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--list-box__wrapper"]}],display:[{type:core.HostBinding,args:["style.display"]}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},ComboBox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-combo-box, ibm-combo-box",template:'\n\t\t<div class="cds--list-box__wrapper">\n\t\t\t<label\n\t\t\t\t*ngIf="label"\n\t\t\t\t[for]="id"\n\t\t\t\tclass="cds--label"\n\t\t\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--multi-select cds--multi-select--filterable\': type === \'multi\',\n\t\t\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\t\t\'cds--list-box--expanded\': open,\n\t\t\t\t\t\'cds--list-box--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--list-box--md\': size === \'md\',\n\t\t\t\t\t\'cds--list-box--lg\': size === \'lg\',\n\t\t\t\t\t\'cds--list-box--disabled\': disabled,\n\t\t\t\t\t\'cds--combo-box--warning cds--list-box--warning\': warn\n\t\t\t\t}"\n\t\t\t\tclass="cds--list-box cds--combo-box"\n\t\t\t\t[attr.data-invalid]="(invalid ? true : null)">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--list-box__field"\n\t\t\t\t\t(click)="toggleDropdown()"\n\t\t\t\t\t(blur)="onBlur()">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="type === \'multi\' && pills.length > 0"\n\t\t\t\t\t\tclass="cds--tag cds--tag--filter cds--tag--high-contrast"\n\t\t\t\t\t\t[ngClass]="{\'cds--tag--disabled\': disabled}">\n\t\t\t\t\t\t<span class="cds--tag__label">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\t\t(click)="clearSelected($event)"\n\t\t\t\t\t\t\t(blur)="onBlur()"\n\t\t\t\t\t\t\t(keydown.enter)="clearSelected($event)"\n\t\t\t\t\t\t\tclass="cds--tag__close-icon"\n\t\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t\t[title]="clearSelectionsTitle"\n\t\t\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t\t\t[attr.aria-label]="clearSelectionAria">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\t\trole="img"\n\t\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\t\twidth="16"\n\t\t\t\t\t\t\t\theight="16"\n\t\t\t\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\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\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype="text"\n\t\t\t\t\t\tautocomplete="off"\n\t\t\t\t\t\trole="combobox"\n\t\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t\t\t\t(blur)="onBlur()"\n\t\t\t\t\t\t(keydown.enter)="onSubmit($event)"\n\t\t\t\t\t\t[value]="selectedValue"\n\t\t\t\t\t\tclass="cds--text-input"\n\t\t\t\t\t\t[ngClass]="{\'cds--text-input--empty\': !showClearButton}"\n\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t[id]="id"\n\t\t\t\t\t\t[attr.aria-labelledby]="id"\n\t\t\t\t\t\t[attr.aria-expanded]="open"\n\t\t\t\t\t\taria-haspopup="listbox"\n\t\t\t\t\t\t[attr.maxlength]="maxLength"\n\t\t\t\t\t\t[attr.aria-controls]="open ? view?.listId : null"\n\t\t\t\t\t\t[attr.aria-autocomplete]="autocomplete"\n\t\t\t\t\t\t[placeholder]="placeholder"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!warn && invalid"\n\t\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__invalid-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="showClearButton"\n\t\t\t\t\t\trole="button"\n\t\t\t\t\t\tclass="cds--list-box__selection"\n\t\t\t\t\t\ttabindex="0"\n\t\t\t\t\t\t[attr.aria-label]="clearSelectionAria"\n\t\t\t\t\t\t[title]="clearSelectionTitle"\n\t\t\t\t\t\t(keyup.enter)="clearInput($event)"\n\t\t\t\t\t\t(click)="clearInput($event)"\n\t\t\t\t\t\t(blur)="onBlur()">\n\t\t\t\t\t\t<svg cdsIcon="close" size="16"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\trole="button"\n\t\t\t\t\t\tclass="cds--list-box__menu-icon"\n\t\t\t\t\t\ttabindex="-1"\n\t\t\t\t\t\t[title]="open ? closeMenuAria : openMenuAria"\n\t\t\t\t\t\t[attr.aria-label]="open ? closeMenuAria : openMenuAria"\n\t\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': open}">\n\t\t\t\t\t\t<svg cdsIcon="chevron--down" size="16"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}">\n\t\t\t\t\t<ng-content *ngIf="open"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf="helperText && !invalid && !warn"\n\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t[ngClass]="{\'cds--form__helper-text--disabled\': disabled}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf="!warn && invalid" class="cds--form-requirement">\n\t\t\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:ComboBox,multi:!0}]})],ComboBox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ComboBoxModule=class ComboBoxModule{};ComboBoxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ComboBox],exports:[ComboBox,dropdown.kW],imports:[common.CommonModule,dropdown.kW,i18n.LU,utils.As,icon.QX],providers:[dropdown.Vn]})],ComboBoxModule);let DynamicListComboBox=class DynamicListComboBox{constructor(){this.items=[{content:"one"},{content:"two"},{content:"three"},{content:"four"}]}updateSelected(event){this.items.forEach((item=>{event.some((selectedItem=>selectedItem.content===item.content))?item.selected=!0:item.selected=!1}))}ngAfterViewInit(){setTimeout((()=>{const newItems=JSON.parse(JSON.stringify(this.items));newItems.push({content:`New ${newItems.length}`}),this.items=newItems}),4e3)}};DynamicListComboBox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-dynamic-list-combobox",template:'\n\t\t<cds-combo-box\n\t\t\t[(items)]="items"\n\t\t\ttype="multi"\n\t\t\t(selected)="updateSelected($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t'})],DynamicListComboBox);let MockQueryCombobox=class MockQueryCombobox{constructor(){this.filterItems=[]}onSearch(){setTimeout((()=>{this.filterItems=[{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`},{content:`Random ${Math.random()}`}]}),1e3)}};MockQueryCombobox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-mock-query-search",template:'\n\t\t<cds-combo-box\n\t\t\tappendInline="true"\n\t\t\t[items]="filterItems"\n\t\t\t(search)="onSearch($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t'})],MockQueryCombobox);var isEqual=__webpack_require__("./node_modules/lodash-es/isEqual.js");let ReactiveFormsCombobox=class ReactiveFormsCombobox{constructor(fb){this.fb=fb,this.invalid=!1,this.invalidText="",this.warn=!1,this.warnText="",this.label="",this.helperText="",this.size="md",this.theme="dark",this._items=[]}set items(newItems){newItems.length||(newItems=[]),(0,isEqual.Z)(this._items,newItems)||(this._items=newItems)}set disabled(isDisabled){this.sampleForm&&(isDisabled?this.sampleForm.disable():this.sampleForm.enable())}ngOnInit(){this.sampleForm=this.fb.group({combobox:new fesm2020_forms.NI,multibox:new fesm2020_forms.NI}),this.sampleForm.get("combobox")?.setValue("four"),this.sampleForm.get("multibox")?.setValue(["four","two"])}};ReactiveFormsCombobox.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsCombobox.propDecorators={invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],size:[{type:core.Input}],theme:[{type:core.Input}],items:[{type:core.Input}],disabled:[{type:core.Input}]},ReactiveFormsCombobox=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-combobox",template:'\n\t\t<form [formGroup]="sampleForm" (ngSubmit)="onSubmit(sampleForm)">\n\t\t\t<cds-combo-box\n\t\t\t\tformControlName="combobox"\n\t\t\t\t[size]="size"\n\t\t\t\t[label]="label"\n\t\t\t\t[helperText]="helperText"\n\t\t\t\titemValueKey="content"\n\t\t\t\t[theme]="theme"\n\t\t\t\t[invalid]="invalid"\n\t\t\t\t[invalidText]="invalidText"\n\t\t\t\t[warn]="warn"\n\t\t\t\t[warnText]="warnText"\n\t\t\t\t[items]="_items">\n\t\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t\t</cds-combo-box>\n\t\t\tselected: {{ sampleForm.get("combobox").value | json }}\n\t\t\t<cds-combo-box\n\t\t\t\tstyle="margin-top: 40px"\n\t\t\t\tformControlName="multibox"\n\t\t\t\t[label]="label"\n\t\t\t\t[size]="size"\n\t\t\t\titemValueKey="content"\n\t\t\t\t[helperText]="helperText"\n\t\t\t\ttype="multi"\n\t\t\t\t[invalid]="invalid"\n\t\t\t\t[invalidText]="invalidText"\n\t\t\t\t[warn]="warn"\n\t\t\t\t[warnText]="warnText"\n\t\t\t\t[items]="_items">\n\t\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t\t</cds-combo-box>\n\t\t\tselected: {{ sampleForm.get("multibox").value | json }}\n\t\t</form>\n\t'})],ReactiveFormsCombobox);const combobox_stories={title:"Components/Combobox",decorators:[(0,dist.moduleMetadata)({declarations:[DynamicListComboBox,ReactiveFormsCombobox,MockQueryCombobox],imports:[fesm2020_forms.u5,fesm2020_forms.UX,ComboBoxModule]})],args:{label:"Label",helperText:"Optional helper text",disabled:!1,invalid:!1,invalidText:"A valid value is required",warn:!1,warnText:"This is a warning",items:[{content:"one"},{content:"two"},{content:"three"},{content:"four"},{content:"five"},{content:"six"},{content:"seven"},{content:"eight"},{content:"nine"},{content:"ten"}],appendInline:!1,dropUp:!1,selectionFeedback:"top-after-reopen"},argTypes:{size:{options:["sm","md","lg"],defaultValue:"md",control:"radio"},theme:{options:["light","dark"],defaultValue:"dark",control:"radio"},maxLength:{control:!1},type:{control:!1},selected:{action:"Selection changed!"},submit:{action:"Submit"},search:{action:"Search"},clear:{action:"Clear!"}},parameters:{layout:"centered"},component:ComboBox},Basic=(args=>({props:args,template:'\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]="model"\n\t\t\t[disabled]="disabled"\n\t\t\t[invalid]="invalid"\n\t\t\t[size]="size"\n\t\t\t[appendInline]="appendInline"\n\t\t\t[invalidText]="invalidText"\n\t\t\t[warn]="warn"\n\t\t\t[warnText]="warnText"\n\t\t\t[label]="label"\n\t\t\t[helperText]="helperText"\n\t\t\t[items]="items"\n\t\t\t[theme]="theme"\n\t\t\t[dropUp]="dropUp"\n\t\t\t(selected)="selected($event)"\n\t\t\t(submit)="submit($event)"\n\t\t\t(search)="search($event)"\n\t\t\t(clear)="clear($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t'})).bind({});Basic.argTypes={items:{controls:!1}};const BasicMax=(args=>({props:args,template:"\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/combobox/stories/app-dynamic-list-combobox.component.ts\n\t\t--\x3e\n\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t"})).bind({});BasicMax.storyName="Basic with max length",BasicMax.args={maxLength:4},BasicMax.argTypes={maxLength:{control:"number"}};const Dynamic=(args=>({props:args,template:"\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/combobox/stories/app-dynamic-list-combobox.component.ts\n\t\t--\x3e\n\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t"})).bind({});Dynamic.storyName="Dynamically added list items",Dynamic.parameters={controls:{disable:!0}};const Multiselect=(args=>({props:args,template:'\n\t\t<cds-combo-box\n\t\t\t[invalid]="invalid"\n\t\t\t[invalidText]="invalidText"\n\t\t\t[label]="label"\n\t\t\t[warn]="warn"\n\t\t\t[disabled]="disabled"\n\t\t\t[size]="size"\n\t\t\t[helperText]="helperText"\n\t\t\t[appendInline]="false"\n\t\t\t[items]="items"\n\t\t\t[theme]="theme"\n\t\t\t[selectionFeedback]="selectionFeedback"\n\t\t\t[dropUp]="dropUp"\n\t\t\t[appendInline]="appendInline"\n\t\t\ttype="multi"\n\t\t\t(selected)="selected($event)"\n\t\t\t(submit)="submit($event)"\n\t\t\t(clear)="clear($event)">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t'})).bind({});Multiselect.argTypes={selectionFeedback:"top-after-reopen"};const ReactiveForms=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/combobox/stories/app-reactive-combobox.component.ts\n\t\t--\x3e\n\t\t<app-reactive-combobox\n\t\t\t[disabled]="disabled"\n\t\t\t[invalid]="invalid"\n\t\t\t[size]="size"\n\t\t\t[invalidText]="invalidText"\n\t\t\t[warn]="warn"\n\t\t\t[warnText]="warnText"\n\t\t\t[label]="label"\n\t\t\t[helperText]="helperText"\n\t\t\t[items]="items"\n\t\t\t[theme]="theme">\n\t\t</app-reactive-combobox>\n\t'})).bind({}),MockQuerySearch=(args=>({props:args,template:"\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/combobox/stories/app-mock-query-search.component.ts\n\t\t--\x3e\n\t\t<app-mock-query-search></app-mock-query-search>\n\t"})).bind({});MockQuerySearch.parameters={controls:{disable:!0}}},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}set cdsIcon(iconName){this.iconName=iconName,this.renderIcon(iconName)}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root;svg.setAttribute("xmlns","http://www.w3.org/2000/svg");const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString()}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElement("title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.iconName)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_52__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_52__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_51__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_53__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_52__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_54__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/placeholder/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Qq:()=>PlaceholderModule,Q_:()=>PlaceholderService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let PlaceholderService=class PlaceholderService{constructor(){this.viewContainerRef=null,this.viewContainerMap=new Map}registerViewContainerRef(vcRef,id){id?this.viewContainerMap.set(id,vcRef):this.viewContainerRef=vcRef}createComponent(component,injector,id){return id?this.viewContainerMap.has(id)?this.viewContainerMap.get(id).createComponent(component,{index:this.viewContainerMap.size,injector}):void console.error(`No view container with id ${id} found`):this.viewContainerRef?this.viewContainerRef.createComponent(component,{index:this.viewContainerRef.length,injector}):void console.error("No view container defined! Likely due to a missing `cds-placeholder`")}destroyComponent(component){component.destroy()}hasComponentRef(component,id){return id?!(this.viewContainerMap.get(id).indexOf(component.hostView)<0):!(this.viewContainerRef.indexOf(component.hostView)<0)}hasPlaceholderRef(id){return id?this.viewContainerMap.has(id):!!this.viewContainerRef}appendElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.appendChild(element):this.viewContainerRef.element.nativeElement.appendChild(element)}removeElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.removeChild(element):this.viewContainerRef.element.nativeElement.removeChild(element)}hasElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.contains(element):this.viewContainerRef.element.nativeElement.contains(element)}};PlaceholderService=(0,tslib_es6.gn)([(0,core.Injectable)()],PlaceholderService);let Placeholder=class Placeholder{constructor(placeholderService){this.placeholderService=placeholderService}ngOnInit(){this.placeholderService.registerViewContainerRef(this.viewContainerRef)}};Placeholder.ctorParameters=()=>[{type:PlaceholderService}],Placeholder.propDecorators={id:[{type:core.Input}],viewContainerRef:[{type:core.ViewChild,args:["placeholder",{read:core.ViewContainerRef,static:!0}]}]},Placeholder=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-placeholder, ibm-placeholder",template:"<div #placeholder></div>"})],Placeholder);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");const PLACEHOLDER_SERVICE_PROVIDER={provide:PlaceholderService,deps:[[new core.Optional,new core.SkipSelf,PlaceholderService]],useFactory:function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new PlaceholderService}};let PlaceholderModule=class PlaceholderModule{};PlaceholderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Placeholder],exports:[Placeholder],providers:[PLACEHOLDER_SERVICE_PROVIDER],imports:[common.CommonModule]})],PlaceholderModule)}}]);
|