carbon-components-angular 5.31.0 → 5.33.0

package/docs/documentation.json

@@ -1077,12 +1077,12 @@
         },
         {
             "name": "Node",
-            "id": "interface-Node-78259c0e9f760c4cce6d6d6b9d2cde135ceab12d1e9a5b1c130e767e6b1f5825cd5120ead0dbab39f9b51e62da033138c25b5c01bf462b066e84782c22def396",
+            "id": "interface-Node-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
             "file": "src/treeview/tree-node.types.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n",
+            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n",
             "properties": [
                 {
                     "name": "active",
@@ -1100,7 +1100,7 @@
                     "type": "Node[]",
                     "optional": true,
                     "description": "",
-                    "line": 14
+                    "line": 15
                 },
                 {
                     "name": "disabled",
@@ -1120,6 +1120,15 @@
                     "description": "",
                     "line": 10
                 },
+                {
+                    "name": "gap",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "optional": true,
+                    "description": "",
+                    "line": 14
+                },
                 {
                     "name": "icon",
                     "deprecated": false,
@@ -1186,7 +1195,7 @@
             ],
             "indexSignatures": [
                 {
-                    "id": "index-declaration-78259c0e9f760c4cce6d6d6b9d2cde135ceab12d1e9a5b1c130e767e6b1f5825cd5120ead0dbab39f9b51e62da033138c25b5c01bf462b066e84782c22def396",
+                    "id": "index-declaration-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
                     "args": [
                         {
                             "name": "key",
@@ -1196,7 +1205,7 @@
                         }
                     ],
                     "returnType": "any",
-                    "line": 14,
+                    "line": 15,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -22671,7 +22680,7 @@
         },
         {
             "name": "ComboBox",
-            "id": "component-ComboBox-ea87abde056d48acdd4defa7cadba6b200f40fb98c6840f796f15e02b907c03703086503bb2e4166713af9e5162fa943d501d56ed916e0ea112967e6bb5c7d20",
+            "id": "component-ComboBox-0faba74069aaef129ce53ea4dad541eeeae0d52927675d873ecb68bfccd0f50cfc39d5a06d82fda3b8643ba05a45c74feeb026abebd60e96b527bc858eb2b4a5",
             "file": "src/combobox/combobox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -22685,7 +22694,7 @@
             "selector": "cds-combo-box, ibm-combo-box",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\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]=\"labelId\"\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=\"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=\"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",
+            "template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\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--readonly': readonly,\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 || readonly}\">\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 || readonly\"\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[readOnly]=\"readonly\"\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]=\"labelId\"\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=\"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=\"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",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -22697,7 +22706,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n",
                     "description": "<p>set to <code>true</code> to place the dropdown view inline with the component</p>\n",
-                    "line": 320,
+                    "line": 322,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22708,7 +22717,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify aria-autocomplete attribute of text input.\n\"list\", is the expected value for a combobox that invokes a drop-down list\n",
                     "description": "<p>Specify aria-autocomplete attribute of text input.\n&quot;list&quot;, is the expected value for a combobox that invokes a drop-down list</p>\n",
-                    "line": 356,
+                    "line": 358,
                     "type": "string",
                     "decorators": []
                 },
@@ -22718,7 +22727,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
                     "description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
-                    "line": 256,
+                    "line": 258,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22728,7 +22737,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
                     "description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
-                    "line": 236,
+                    "line": 238,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22738,7 +22747,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
                     "description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
-                    "line": 226,
+                    "line": 228,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22748,7 +22757,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
                     "description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
-                    "line": 246,
+                    "line": 248,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22758,7 +22767,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
                     "description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
-                    "line": 216,
+                    "line": 218,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22769,7 +22778,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable combobox.\n",
                     "description": "<p>Set to <code>true</code> to disable combobox.</p>\n",
-                    "line": 364,
+                    "line": 366,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22779,7 +22788,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOverrides the automatic dropUp.\n",
                     "description": "<p>Overrides the automatic dropUp.</p>\n",
-                    "line": 360,
+                    "line": 362,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22789,7 +22798,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional helper text.\n",
                     "description": "<p>Sets the optional helper text.</p>\n",
-                    "line": 316,
+                    "line": 318,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -22800,7 +22809,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHide label while keeping it accessible for screen readers\n",
                     "description": "<p>Hide label while keeping it accessible for screen readers</p>\n",
-                    "line": 312,
+                    "line": 314,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22809,7 +22818,7 @@
                     "defaultValue": "`dropdown-${ComboBox.comboBoxCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 264,
+                    "line": 266,
                     "type": "string",
                     "decorators": []
                 },
@@ -22820,7 +22829,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show the invalid state.\n",
                     "description": "<p>Set to <code>true</code> to show the invalid state.</p>\n",
-                    "line": 324,
+                    "line": 326,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22830,7 +22839,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n",
                     "description": "<p>Value displayed if combobox is in an invalid state.</p>\n",
-                    "line": 328,
+                    "line": 330,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -22841,7 +22850,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nList of items to fill the content with.\n\n**Example:**\n```javascript\nitems = [\n\t\t{\n\t\t\tcontent: \"Abacus\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Byte\",\n\t\t\tselected: false,\n\t\t},\n\t\t{\n\t\t\tcontent: \"Computer\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Digital\",\n\t\t\tselected: false\n\t\t}\n];\n```\n\n",
                     "description": "<p>List of items to fill the content with.</p>\n<p><strong>Example:</strong></p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">items = [\n        {\n            content: &quot;Abacus&quot;,\n            selected: false\n        },\n        {\n            content: &quot;Byte&quot;,\n            selected: false,\n        },\n        {\n            content: &quot;Computer&quot;,\n            selected: false\n        },\n        {\n            content: &quot;Digital&quot;,\n            selected: false\n        }\n];</code></pre></div>",
-                    "line": 292,
+                    "line": 294,
                     "type": "Array<ListItem>",
                     "decorators": []
                 },
@@ -22851,7 +22860,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n",
                     "description": "<p>Specifies the property to be used as the return value to <code>ngModel</code></p>\n",
-                    "line": 304,
+                    "line": 306,
                     "type": "string",
                     "decorators": []
                 },
@@ -22861,7 +22870,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the combobox.\n",
                     "description": "<p>Label for the combobox.</p>\n",
-                    "line": 308,
+                    "line": 310,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -22870,7 +22879,7 @@
                     "defaultValue": "`dropdown-label-${ComboBox.comboBoxCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 265,
+                    "line": 267,
                     "type": "string",
                     "decorators": []
                 },
@@ -22881,7 +22890,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nMax length value to limit input characters\n",
                     "description": "<p>Max length value to limit input characters</p>\n",
-                    "line": 340,
+                    "line": 342,
                     "type": "number",
                     "decorators": []
                 },
@@ -22891,7 +22900,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
                     "description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
-                    "line": 206,
+                    "line": 208,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -22901,10 +22910,21 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText to show when nothing is selected.\n",
                     "description": "<p>Text to show when nothing is selected.</p>\n",
-                    "line": 196,
+                    "line": 198,
                     "type": "string | Observable",
                     "decorators": []
                 },
+                {
+                    "name": "readonly",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` for readonly state.\n",
+                    "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
+                    "line": 370,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "selectionFeedback",
                     "defaultValue": "\"top-after-reopen\"",
@@ -22912,7 +22932,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at its position\n`top-after-reopen`: selected item jump to top after reopen dropdown\n",
                     "description": "<p>Specify feedback (mode) of the selection.\n<code>top</code>: selected item jumps to top\n<code>fixed</code>: selected item stays at its position\n<code>top-after-reopen</code>: selected item jump to top after reopen dropdown</p>\n",
-                    "line": 351,
+                    "line": 353,
                     "type": "\"top\" | \"fixed\" | \"top-after-reopen\"",
                     "decorators": []
                 },
@@ -22923,7 +22943,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCombo box render size.\n",
                     "description": "<p>Combo box render size.</p>\n",
-                    "line": 300,
+                    "line": 302,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -22934,15 +22954,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead",
                     "jsdoctags": [
                         {
-                            "pos": 9773,
-                            "end": 9831,
+                            "pos": 9868,
+                            "end": 9926,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 9774,
-                                "end": 9784,
+                                "pos": 9869,
+                                "end": 9879,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -22952,7 +22972,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead</p>\n"
                         }
                     ],
-                    "line": 344,
+                    "line": 346,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -22963,7 +22983,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCombo box type (supporting single or multi selection of items).\n",
                     "description": "<p>Combo box type (supporting single or multi selection of items).</p>\n",
-                    "line": 296,
+                    "line": 298,
                     "type": "\"single\" | \"multi\"",
                     "decorators": []
                 },
@@ -22974,7 +22994,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
-                    "line": 332,
+                    "line": 334,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22984,7 +23004,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 336,
+                    "line": 338,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -22997,7 +23017,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nEmits an event when the clear button is clicked.",
                     "description": "<p>Emits an event when the clear button is clicked.</p>\n",
-                    "line": 416,
+                    "line": 422,
                     "type": "EventEmitter"
                 },
                 {
@@ -23007,7 +23027,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nEmits an empty event when the menu is closed",
                     "description": "<p>Emits an empty event when the menu is closed</p>\n",
-                    "line": 412,
+                    "line": 418,
                     "type": "EventEmitter"
                 },
                 {
@@ -23017,7 +23037,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nEmits the search string from the input",
                     "description": "<p>Emits the search string from the input</p>\n",
-                    "line": 414,
+                    "line": 420,
                     "type": "EventEmitter"
                 },
                 {
@@ -23027,7 +23047,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits a ListItem\n\nExample:\n```javascript\n{\n\t\tcontent: \"one\",\n\t\tselected: true\n}\n```\n",
                     "description": "<p>Emits a ListItem</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">{\n        content: &quot;one&quot;,\n        selected: true\n}</code></pre></div>",
-                    "line": 376,
+                    "line": 382,
                     "type": "EventEmitter"
                 },
                 {
@@ -23037,7 +23057,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIntended to be used to add items to the list.\n\nEmits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\nExample:\n```javascript\n\t{\n\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t\tindex: 1,\n\t\tvalue: {\n\t\t\tcontent: \"some user string\",\n\t\t\tselected: false\n\t\t}\n\t}\n```\n\n\nExample:\n```javascript\n{\n\tafter: 1,\n\tvalue: \"some user string\"\n}\n```\n",
                     "description": "<p>Intended to be used to add items to the list.</p>\n<p>Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">    {\n        items: [{content: &quot;one&quot;, selected: true}, {content: &quot;two&quot;, selected: true}],\n        index: 1,\n        value: {\n            content: &quot;some user string&quot;,\n            selected: false\n        }\n    }</code></pre></div><p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">{\n    after: 1,\n    value: &quot;some user string&quot;\n}</code></pre></div>",
-                    "line": 403,
+                    "line": 409,
                     "type": "EventEmitter"
                 }
             ],
@@ -23050,7 +23070,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>controls whether the <code>drop-up</code> class is applied</p>\n",
-                    "line": 439,
+                    "line": 445,
                     "rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n"
                 },
                 {
@@ -23061,7 +23081,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 263,
+                    "line": 265,
                     "modifierKind": [
                         126
                     ]
@@ -23074,7 +23094,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 423,
+                    "line": 429,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -23092,7 +23112,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 419,
+                    "line": 425,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -23111,7 +23131,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 422,
+                    "line": 428,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -23129,7 +23149,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 420,
+                    "line": 426,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -23148,7 +23168,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 435
+                    "line": 441
                 },
                 {
                     "name": "listbox",
@@ -23157,7 +23177,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 421,
+                    "line": 427,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -23176,7 +23196,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 425,
+                    "line": 431,
                     "modifierKind": [
                         125
                     ]
@@ -23189,7 +23209,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 434
+                    "line": 440
                 },
                 {
                     "name": "pills",
@@ -23199,7 +23219,7 @@
                     "type": "[]",
                     "optional": false,
                     "description": "<p>Selected items for multi-select combo-boxes.</p>\n",
-                    "line": 430,
+                    "line": 436,
                     "rawdescription": "\nSelected items for multi-select combo-boxes.",
                     "modifierKind": [
                         125
@@ -23213,7 +23233,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>used to update the displayValue</p>\n",
-                    "line": 432,
+                    "line": 438,
                     "rawdescription": "\nused to update the displayValue",
                     "modifierKind": [
                         125
@@ -23227,7 +23247,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 427,
+                    "line": 433,
                     "modifierKind": [
                         125
                     ]
@@ -23239,7 +23259,7 @@
                     "type": "AbstractDropdownView",
                     "optional": false,
                     "description": "<p>ContentChild reference to the instantiated dropdown list</p>\n",
-                    "line": 418,
+                    "line": 424,
                     "rawdescription": "\nContentChild reference to the instantiated dropdown list",
                     "decorators": [
                         {
@@ -23259,7 +23279,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 825,
+                    "line": 831,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
@@ -23271,7 +23291,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 836,
+                    "line": 842,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
@@ -23290,7 +23310,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 805,
+                    "line": 811,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
@@ -23313,7 +23333,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 599,
+                    "line": 605,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -23330,7 +23350,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 865,
+                    "line": 871,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles clicks outside of the `Dropdown` list.\n",
@@ -23353,7 +23373,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 845,
+                    "line": 851,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetects whether or not the `Dropdown` list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the `dropUp` input.\n",
@@ -23372,7 +23392,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 777,
+                    "line": 783,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -23400,7 +23420,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 665,
+                    "line": 671,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -23424,7 +23444,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 685,
+                    "line": 691,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCloses the dropdown and emits the close event.\n",
@@ -23446,7 +23466,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 574,
+                    "line": 580,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
@@ -23485,7 +23505,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 798,
+                    "line": 804,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -23509,7 +23529,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 636,
+                    "line": 642,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -23533,7 +23553,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 733,
+                    "line": 739,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the list group filter, and manages single select item selection.\n",
@@ -23576,7 +23596,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 766,
+                    "line": 772,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIntended to be used to add items to the list.\n",
@@ -23602,7 +23622,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 699,
+                    "line": 705,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOpens the dropdown.\n",
@@ -23624,7 +23644,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 640,
+                    "line": 646,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -23652,7 +23672,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 644,
+                    "line": 650,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -23680,7 +23700,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 653,
+                    "line": 659,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the combobox.\n\nex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n",
@@ -23703,7 +23723,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 722,
+                    "line": 728,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the dropdown.\n",
@@ -23718,7 +23738,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 660,
+                    "line": 666,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled by `n-pill-input` when the selected pills have changed.\n",
@@ -23740,7 +23760,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 604,
+                    "line": 610,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -23764,7 +23784,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 422,
+                    "line": 428,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -23773,7 +23793,7 @@
                     "defaultValue": "\"block\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 423,
+                    "line": 429,
                     "type": "string",
                     "decorators": []
                 }
@@ -23796,7 +23816,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
                     "description": "<p>Handles <code>Escape/Tab</code> key closing the dropdown, and arrow up/down focus to/from the dropdown list.</p>\n",
-                    "line": 574
+                    "line": 580
                 }
             ],
             "standalone": false,
@@ -23804,7 +23824,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from &#39;carbon-components-angular&#39;;</code></pre></div><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 &quot;pills&quot; of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\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",
             "type": "component",
-            "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\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\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\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\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]=\"labelId\"\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=\"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=\"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@Input() labelId = `dropdown-label-${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 * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\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\toutsideClick = this._outsideClick.bind(this);\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 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\tthis.selected.emit(event);\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\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\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\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.preventDefault();\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\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\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\tdocument.addEventListener(\"click\", this.outsideClick, true);\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.disabled) {\n\t\t\treturn;\n\t\t}\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\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\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",
+            "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\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\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\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\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--readonly': readonly,\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 || readonly}\">\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 || readonly\"\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[readOnly]=\"readonly\"\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]=\"labelId\"\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=\"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=\"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@Input() labelId = `dropdown-label-${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 * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\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 * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = 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\toutsideClick = this._outsideClick.bind(this);\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 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\tthis.selected.emit(event);\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\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\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\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.preventDefault();\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\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { 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\tdocument.addEventListener(\"click\", this.outsideClick, true);\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.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\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\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -23833,7 +23853,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 451,
+                "line": 457,
                 "rawdescription": "\n\nCreates an instance of ComboBox.\n",
                 "jsdoctags": [
                     {
@@ -23889,7 +23909,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 196,
+                        "line": 198,
                         "rawdescription": "\n\nText to show when nothing is selected.\n",
                         "description": "<p>Text to show when nothing is selected.</p>\n",
                         "jsdoctags": [
@@ -23908,7 +23928,7 @@
                         "name": "placeholder",
                         "type": "",
                         "returnType": "",
-                        "line": 200
+                        "line": 202
                     }
                 },
                 "openMenuAria": {
@@ -23927,7 +23947,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 206,
+                        "line": 208,
                         "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
                         "description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
                         "jsdoctags": [
@@ -23946,7 +23966,7 @@
                         "name": "openMenuAria",
                         "type": "",
                         "returnType": "",
-                        "line": 210
+                        "line": 212
                     }
                 },
                 "closeMenuAria": {
@@ -23965,7 +23985,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 216,
+                        "line": 218,
                         "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
                         "description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
                         "jsdoctags": [
@@ -23984,7 +24004,7 @@
                         "name": "closeMenuAria",
                         "type": "",
                         "returnType": "",
-                        "line": 220
+                        "line": 222
                     }
                 },
                 "clearSelectionsTitle": {
@@ -24003,7 +24023,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 226,
+                        "line": 228,
                         "rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
                         "description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
                         "jsdoctags": [
@@ -24022,7 +24042,7 @@
                         "name": "clearSelectionsTitle",
                         "type": "",
                         "returnType": "",
-                        "line": 230
+                        "line": 232
                     }
                 },
                 "clearSelectionsAria": {
@@ -24041,7 +24061,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 236,
+                        "line": 238,
                         "rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
                         "description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
                         "jsdoctags": [
@@ -24060,7 +24080,7 @@
                         "name": "clearSelectionsAria",
                         "type": "",
                         "returnType": "",
-                        "line": 240
+                        "line": 242
                     }
                 },
                 "clearSelectionTitle": {
@@ -24079,7 +24099,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 246,
+                        "line": 248,
                         "rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
                         "description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
                         "jsdoctags": [
@@ -24098,7 +24118,7 @@
                         "name": "clearSelectionTitle",
                         "type": "",
                         "returnType": "",
-                        "line": 250
+                        "line": 252
                     }
                 },
                 "clearSelectionAria": {
@@ -24117,7 +24137,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 256,
+                        "line": 258,
                         "rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
                         "description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
                         "jsdoctags": [
@@ -24136,7 +24156,7 @@
                         "name": "clearSelectionAria",
                         "type": "",
                         "returnType": "",
-                        "line": 260
+                        "line": 262
                     }
                 }
             }
@@ -37094,7 +37114,7 @@
         },
         {
             "name": "MultiStepFormStory",
-            "id": "component-MultiStepFormStory-604f4406a1eee940f67f20646d5a12bf8f741d63653052f145f157105672812c0faf6d640088ba476c50b2740b4ae650b9049da8d706cc1dd1f5f897594238a1",
+            "id": "component-MultiStepFormStory-75613380ff6f52c2bf18317bb358bd1627e8ba0d6f5db0d88ba531b40b6fbc0226990a8b0bc632bc7ffd29d4b77fea4ff22ca72558cd8d871837ebcd6139af68",
             "file": "src/patterns/forms/multi-step-form.stories.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -37121,7 +37141,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 177
+                    "line": 179
                 },
                 {
                     "name": "resourceGroups",
@@ -37131,7 +37151,7 @@
                     "type": "[]",
                     "optional": false,
                     "description": "",
-                    "line": 171
+                    "line": 173
                 },
                 {
                     "name": "step2FormGroup",
@@ -37147,7 +37167,7 @@
                 },
                 {
                     "name": "steps",
-                    "defaultValue": "[\n\t\t{\n\t\t\ttext: \"Step 1\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 2\",\n\t\t\tstate: [\"current\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 3\",\n\t\t\tstate: [\"incomplete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 4\",\n\t\t\tstate: [\"incomplete\"],\n\t\t\toptionalText: \"Optional\"\n\t\t}\n\t]",
+                    "defaultValue": "[\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t]",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "[]",
@@ -37170,7 +37190,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 197,
+                    "line": 199,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -37195,7 +37215,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { ButtonModule } from \"../../button\";\nimport { InputModule } from \"../../input\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { BreadcrumbModule } from \"../../breadcrumb\";\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-multi-step-form\",\n\ttemplate: `\n\t\t<div cdsGrid>\n\t\t\t<div cdsRow class=\"header\">\n\t\t\t\t<cds-header name=\"Patterns\">\n\t\t\t\t\t<cds-hamburger></cds-hamburger>\n\t\t\t\t</cds-header>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\t\t\t\tDashboard\n\t\t\t\t\t\t</cds-breadcrumb-item>\n\t\t\t\t\t</cds-breadcrumb>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow class=\"sub-heading\">\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<h4>Vertical multi-step form</h4>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div\n\t\t\t\t\tcdsCol\n\t\t\t\t\t[columnNumbers]=\"{'lg': 2, 'md': 2, 'sm': 2}\"\n\t\t\t\t\tclass=\"indicator-wrapper\">\n\t\t\t\t\t<div class=\"indicator\">\n\t\t\t\t\t\t<cds-progress-indicator\n\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t[steps]=\"steps\"\n\t\t\t\t\t\t\t[current]=\"currentStep\">\n\t\t\t\t\t\t</cds-progress-indicator>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 6, 'md': 6, 'sm': 6}\" [ngSwitch]=\"currentStep\">\n\t\t\t\t\t<ng-container *ngSwitchCase=\"1\">\n\t\t\t\t\t\t<form [formGroup]=\"step2FormGroup\">\n\t\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\t\t<h4>Create a new workspace</h4>\n\t\t\t\t\t\t\t\t\t<label class=\"form-label\">\n\t\t\t\t\t\t\t\t\t\tWhen you create a workspace, you connect IBM Cloud\n\t\t\t\t\t\t\t\t\t\tSchematics to existing Github / Gitlab repos that host\n\t\t\t\t\t\t\t\t\t\tyour Terraform templates.\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t\t\t\t\t\t[autocomplete]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"workspaceName\">\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-dropdown\n\t\t\t\t\t\t\t\t\t\tclass=\"dropdown\"\n\t\t\t\t\t\t\t\t\t\tlabel=\"Resource group\"\n\t\t\t\t\t\t\t\t\t\tvalue=\"content\"\n\t\t\t\t\t\t\t\t\t\tformControlName=\"resourceGroup\"\n\t\t\t\t\t\t\t\t\t\t[dropUp]=\"false\">\n\t\t\t\t\t\t\t\t\t\t<cds-dropdown-list [items]=\"resourceGroups\"></cds-dropdown-list>\n\t\t\t\t\t\t\t\t\t</cds-dropdown>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\t\t\tcdsTextArea\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"What is the purpose of this workspace?\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"purpose\"\n\t\t\t\t\t\t\t\t\t\t\t[rows]=\"3\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"textarea\"></textarea>\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(2)\">Step 3</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngSwitchCase=\"2\">\n\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(1)\">Step 2</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t`]\n})\nclass MultiStepFormStory implements OnInit, OnDestroy {\n\tpublic step2FormGroup: FormGroup;\n\n\tsteps = [\n\t\t{\n\t\t\ttext: \"Step 1\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 2\",\n\t\t\tstate: [\"current\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 3\",\n\t\t\tstate: [\"incomplete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Step 4\",\n\t\t\tstate: [\"incomplete\"],\n\t\t\toptionalText: \"Optional\"\n\t\t}\n\t];\n\n\tresourceGroups = [\n\t\t{ content: \"None\" },\n\t\t{ content: \"Resource group 1\" },\n\t\t{ content: \"Resource group 2\" }\n\t];\n\n\tcurrentStep = 1;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.step2FormGroup = this.formBuilder.group({\n\t\t\tworkspaceName: new FormControl(),\n\t\t\tresourceGroup: new FormControl(),\n\t\t\tpurpose: new FormControl()\n\t\t});\n\n\t\tthis.step2FormGroup.get(\"resourceGroup\")?.setValue(\"None\");\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n\n\tchangeStep(step: number) {\n\t\tthis.currentStep = step;\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Forms\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [ MultiStepFormStory ],\n\t\t\timports: [\n\t\t\t\tButtonModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tBreadcrumbModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tInputModule,\n\t\t\t\tDropdownModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source as an example.\n\t\t-->\n\t\t<app-multi-step-form></app-multi-step-form>\n\t`\n});\nexport const MultiStep = Template.bind({});\n",
+            "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { ButtonModule } from \"../../button\";\nimport { InputModule } from \"../../input\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { BreadcrumbModule } from \"../../breadcrumb\";\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-multi-step-form\",\n\ttemplate: `\n\t\t<div cdsGrid>\n\t\t\t<div cdsRow class=\"header\">\n\t\t\t\t<cds-header name=\"Patterns\">\n\t\t\t\t\t<cds-hamburger></cds-hamburger>\n\t\t\t\t</cds-header>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\t\t\t\tDashboard\n\t\t\t\t\t\t</cds-breadcrumb-item>\n\t\t\t\t\t</cds-breadcrumb>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow class=\"sub-heading\">\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<h4>Vertical multi-step form</h4>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div\n\t\t\t\t\tcdsCol\n\t\t\t\t\t[columnNumbers]=\"{'lg': 2, 'md': 2, 'sm': 2}\"\n\t\t\t\t\tclass=\"indicator-wrapper\">\n\t\t\t\t\t<div class=\"indicator\">\n\t\t\t\t\t\t<cds-progress-indicator\n\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t[steps]=\"steps\"\n\t\t\t\t\t\t\t[current]=\"currentStep\">\n\t\t\t\t\t\t</cds-progress-indicator>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 6, 'md': 6, 'sm': 6}\" [ngSwitch]=\"currentStep\">\n\t\t\t\t\t<ng-container *ngSwitchCase=\"1\">\n\t\t\t\t\t\t<form [formGroup]=\"step2FormGroup\">\n\t\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\t\t<h4>Create a new workspace</h4>\n\t\t\t\t\t\t\t\t\t<label class=\"form-label\">\n\t\t\t\t\t\t\t\t\t\tWhen you create a workspace, you connect IBM Cloud\n\t\t\t\t\t\t\t\t\t\tSchematics to existing Github / Gitlab repos that host\n\t\t\t\t\t\t\t\t\t\tyour Terraform templates.\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t\t\t\t\t\t[autocomplete]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"workspaceName\">\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-dropdown\n\t\t\t\t\t\t\t\t\t\tclass=\"dropdown\"\n\t\t\t\t\t\t\t\t\t\tlabel=\"Resource group\"\n\t\t\t\t\t\t\t\t\t\tvalue=\"content\"\n\t\t\t\t\t\t\t\t\t\tformControlName=\"resourceGroup\"\n\t\t\t\t\t\t\t\t\t\t[dropUp]=\"false\">\n\t\t\t\t\t\t\t\t\t\t<cds-dropdown-list [items]=\"resourceGroups\"></cds-dropdown-list>\n\t\t\t\t\t\t\t\t\t</cds-dropdown>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\t\t\tcdsTextArea\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"What is the purpose of this workspace?\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"purpose\"\n\t\t\t\t\t\t\t\t\t\t\t[rows]=\"3\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"textarea\"></textarea>\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(2)\">Step 3</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngSwitchCase=\"2\">\n\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(1)\">Step 2</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t`]\n})\nclass MultiStepFormStory implements OnInit, OnDestroy {\n\tpublic step2FormGroup: FormGroup;\n\n\tsteps = [\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t];\n\n\tresourceGroups = [\n\t\t{ content: \"None\" },\n\t\t{ content: \"Resource group 1\" },\n\t\t{ content: \"Resource group 2\" }\n\t];\n\n\tcurrentStep = 1;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.step2FormGroup = this.formBuilder.group({\n\t\t\tworkspaceName: new FormControl(),\n\t\t\tresourceGroup: new FormControl(),\n\t\t\tpurpose: new FormControl()\n\t\t});\n\n\t\tthis.step2FormGroup.get(\"resourceGroup\")?.setValue(\"None\");\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n\n\tchangeStep(step: number) {\n\t\tthis.currentStep = step;\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Forms\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [ MultiStepFormStory ],\n\t\t\timports: [\n\t\t\t\tButtonModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tBreadcrumbModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tInputModule,\n\t\t\t\tDropdownModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source as an example.\n\t\t-->\n\t\t<app-multi-step-form></app-multi-step-form>\n\t`\n});\nexport const MultiStep = Template.bind({});\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t\n",
@@ -37212,7 +37232,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 177,
+                "line": 179,
                 "jsdoctags": [
                     {
                         "name": "formBuilder",
@@ -66470,7 +66490,7 @@
         },
         {
             "name": "TreeNodeComponent",
-            "id": "component-TreeNodeComponent-eddc5fc3f82ec19d5a178152a585b2a3f1cb3ffe9e0a03e18f299967763f18fe5abd5f8c6f46b230cce7d7121f3a61ae0dd2c868466a2f60e0fa57c6852180d1",
+            "id": "component-TreeNodeComponent-c92ddc59f0218683e4fcc77e08c4981a5bc88974f90c94b24cb01d09b757cd6c980a04425f538445af59ba71061124b7ae89a54f150ba0dc68e78310c61879ce",
             "file": "src/treeview/tree-node.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66499,7 +66519,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 132,
+                    "line": 133,
                     "type": "Node[]",
                     "decorators": []
                 },
@@ -66510,7 +66530,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetermines the depth of the node\nCalculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n",
                     "description": "<p>Determines the depth of the node\nCalculated by default when passing <code>Node</code> array to <code>TreeViewComponent</code>, manual entry required otherwise</p>\n",
-                    "line": 138,
+                    "line": 139,
                     "type": "number",
                     "decorators": []
                 },
@@ -66532,6 +66552,15 @@
                     "type": "boolean",
                     "decorators": []
                 },
+                {
+                    "name": "gap",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 132,
+                    "type": "number",
+                    "decorators": []
+                },
                 {
                     "name": "icon",
                     "deprecated": false,
@@ -66579,7 +66608,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                     "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
-                    "line": 144,
+                    "line": 145,
                     "type": "Node",
                     "decorators": []
                 },
@@ -66607,7 +66636,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 166,
+                    "line": 168,
                     "type": "EventEmitter"
                 },
                 {
@@ -66615,7 +66644,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 165,
+                    "line": 167,
                     "type": "EventEmitter"
                 },
                 {
@@ -66623,7 +66652,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 167,
+                    "line": 169,
                     "type": "EventEmitter"
                 },
                 {
@@ -66631,7 +66660,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 168,
+                    "line": 170,
                     "type": "EventEmitter"
                 }
             ],
@@ -66643,7 +66672,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 170
+                    "line": 172
                 },
                 {
                     "name": "treeNodeCount",
@@ -66666,7 +66695,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 219,
+                    "line": 221,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculate the node offset\n",
@@ -66674,8 +66703,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 6060,
-                                "end": 6067,
+                                "pos": 6114,
+                                "end": 6121,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66699,7 +66728,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 242,
+                    "line": 244,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66727,7 +66756,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 238,
+                    "line": 240,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66748,7 +66777,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 289,
+                    "line": 291,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -66768,7 +66797,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 287,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -66799,7 +66828,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 262,
+                    "line": 264,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
@@ -66829,7 +66858,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 205,
+                    "line": 207,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
@@ -66837,8 +66866,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5707,
-                                "end": 5712,
+                                "pos": 5761,
+                                "end": 5766,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66849,8 +66878,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5701,
-                                "end": 5706,
+                                "pos": 5755,
+                                "end": 5760,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66874,7 +66903,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 250,
+                    "line": 252,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpand children if not disabled\n",
@@ -66882,8 +66911,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6735,
-                                "end": 6740,
+                                "pos": 6800,
+                                "end": 6805,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66894,8 +66923,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6729,
-                                "end": 6734,
+                                "pos": 6794,
+                                "end": 6799,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66916,7 +66945,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = value.has(this.id);\n\t\t\tthis.active = this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.selected = true;\n\t\t\tthis.active = true;\n\t\t\tevent.target.parentElement.focus();\n\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tthis.nodeFocus.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = value.has(this.id);\n\t\t\tthis.active = this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.selected = true;\n\t\t\tthis.active = true;\n\t\t\tevent.target.parentElement.focus();\n\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tthis.nodeFocus.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -66933,7 +66962,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 172,
+                "line": 174,
                 "jsdoctags": [
                     {
                         "name": "treeViewService",
@@ -66969,7 +66998,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 144,
+                        "line": 145,
                         "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                         "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
                         "jsdoctags": [
@@ -66988,14 +67017,14 @@
                         "name": "node",
                         "type": "",
                         "returnType": "",
-                        "line": 161
+                        "line": 163
                     }
                 }
             }
         },
         {
             "name": "TreeViewComponent",
-            "id": "component-TreeViewComponent-c36edfebaacd08a2107dc22ca0c7f54204e0e81e27fe7e985c166a45483afe63fb276a0a9707e5d0cfb221cbb69ea433fe389cfce1468ea41673e55df783aef2",
+            "id": "component-TreeViewComponent-9b6130f78321359e71f56d2044bb1ed7d588faff0561c87756d1f591288e94fb45666b6e97d4edf883c7f4984fba82bcb92d55a211c507f20e64b097f855b0cb",
             "file": "src/treeview/treeview.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -67197,8 +67226,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3990,
-                                "end": 3995,
+                                "pos": 3986,
+                                "end": 3991,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67209,8 +67238,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3984,
-                                "end": 3989,
+                                "pos": 3980,
+                                "end": 3985,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67231,7 +67260,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TreeviewModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tree-view--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TreeviewModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tree-view--basic)\n",
             "type": "component",
-            "sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) => Object.assign({}, node));\n\t\tthis.treeViewService.contentProjected = false;\n\t}\n\n\tget tree() {\n\t\treturn this._tree;\n\t}\n\n\tstatic treeViewCount = 0;\n\n\t@Input() id = `tree-view-${TreeViewComponent.treeViewCount++}`;\n\t/**\n\t * Tree view label\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional context for label if it's a template\n\t */\n\t@Input() labelContext: any;\n\t/**\n\t * Specify the size of the list items in the tree\n\t */\n\t@Input() size: \"xs\" | \"sm\" = \"sm\";\n\t/**\n\t * **Experimental** - Enable to select multiple nodes\n\t */\n\t@Input() set isMultiSelect(isMulti: boolean) {\n\t\tthis.treeViewService.isMultiSelect = isMulti;\n\t}\n\n\t@Output() select = new EventEmitter<Node | Node[]>();\n\t@ViewChild(\"treeWrapper\") root: ElementRef;\n\n\tprivate treeWalker: TreeWalker;\n\tprivate _tree: Node[] = [];\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tpublic treeViewService: TreeViewService,\n\t\tprivate elementRef: ElementRef\n\t) {}\n\n\t/**\n\t * Subscribe for node selection\n\t */\n\tngOnInit(): void {\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((nodesMap: Map<string, Node>) => {\n\t\t\t// Get all values from the map to emit\n\t\t\tconst nodes = [...nodesMap.values()];\n\n\t\t\t// Update focus to reset arrow key traversal\n\t\t\t// Select the current highlight node as the last node, since we preserve order in map\n\t\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(nodes[nodes.length - 1].id)}`);\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\t/**\n\t * Initialize tree walker to support keyboard navigation\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.treeWalker = this.document.createTreeWalker(this.root.nativeElement, NodeFilter.SHOW_ELEMENT, {\n\t\t\tacceptNode: function (node: HTMLElement) {\n\t\t\t\tif (node.classList.contains(`cds--tree-node--disabled`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t\t}\n\t\t\t\tif (node.matches(`div.cds--tree-node`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_SKIP;\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Navigate tree using tree walker\n\t * @param event - KeyboardEvent\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowUp\") {\n\t\t\t(this.treeWalker.previousNode() as HTMLElement)?.focus();\n\t\t}\n\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\t(this.treeWalker.nextNode() as HTMLElement)?.focus();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
+            "sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) => this.copyNode(node));\n\t\tthis.treeViewService.contentProjected = false;\n\t}\n\n\tget tree() {\n\t\treturn this._tree;\n\t}\n\n\tstatic treeViewCount = 0;\n\n\t@Input() id = `tree-view-${TreeViewComponent.treeViewCount++}`;\n\t/**\n\t * Tree view label\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional context for label if it's a template\n\t */\n\t@Input() labelContext: any;\n\t/**\n\t * Specify the size of the list items in the tree\n\t */\n\t@Input() size: \"xs\" | \"sm\" = \"sm\";\n\t/**\n\t * **Experimental** - Enable to select multiple nodes\n\t */\n\t@Input() set isMultiSelect(isMulti: boolean) {\n\t\tthis.treeViewService.isMultiSelect = isMulti;\n\t}\n\n\t@Output() select = new EventEmitter<Node | Node[]>();\n\t@ViewChild(\"treeWrapper\") root: ElementRef;\n\n\tprivate treeWalker: TreeWalker;\n\tprivate _tree: Node[] = [];\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tpublic treeViewService: TreeViewService,\n\t\tprivate elementRef: ElementRef\n\t) {}\n\n\t/**\n\t * Subscribe for node selection\n\t */\n\tngOnInit(): void {\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((nodesMap: Map<string, Node>) => {\n\t\t\t// Get all values from the map to emit\n\t\t\tconst nodes = [...nodesMap.values()];\n\n\t\t\t// Update focus to reset arrow key traversal\n\t\t\t// Select the current highlight node as the last node, since we preserve order in map\n\t\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(nodes[nodes.length - 1].id)}`);\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\t/**\n\t * Initialize tree walker to support keyboard navigation\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.treeWalker = this.document.createTreeWalker(this.root.nativeElement, NodeFilter.SHOW_ELEMENT, {\n\t\t\tacceptNode: function (node: HTMLElement) {\n\t\t\t\tif (node.classList.contains(`cds--tree-node--disabled`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t\t}\n\t\t\t\tif (node.matches(`div.cds--tree-node`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_SKIP;\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Navigate tree using tree walker\n\t * @param event - KeyboardEvent\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowUp\") {\n\t\t\t(this.treeWalker.previousNode() as HTMLElement)?.focus();\n\t\t}\n\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\t(this.treeWalker.nextNode() as HTMLElement)?.focus();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n\n\tprivate copyNode(node: Node): Node {\n\t\t// making a recursive shallow copy to avoid performance issues when deeply cloning templateRefs if defined in the node\n\t\tconst copiedNode = Object.assign({}, node);\n\t\tif (node.children) {\n\t\t  copiedNode.children = node.children.map(child => this.copyNode(child));\n\t\t}\n\t\treturn copiedNode;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -72791,7 +72820,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "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[hideLabel]=\"hideLabel\"\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})"
+                "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[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\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})"
             },
             {
                 "name": "MultiTemplate",
@@ -73916,7 +73945,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "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[hideLabel]=\"hideLabel\"\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})"
+                "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[readonly]=\"readonly\"\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[hideLabel]=\"hideLabel\"\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})"
             },
             {
                 "name": "Template",
@@ -78080,7 +78109,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "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[hideLabel]=\"hideLabel\"\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})"
+                    "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[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\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})"
                 },
                 {
                     "name": "ReactiveForms",
@@ -78110,7 +78139,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "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[hideLabel]=\"hideLabel\"\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})"
+                    "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[readonly]=\"readonly\"\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[hideLabel]=\"hideLabel\"\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})"
                 }
             ],
             "src/content-switcher/content-switcher.stories.ts": [
@@ -83208,7 +83237,7 @@
                 "linktype": "component",
                 "name": "ComboBox",
                 "coveragePercent": 68,
-                "coverageCount": "49/72",
+                "coverageCount": "50/73",
                 "status": "good"
             },
             {
@@ -88692,7 +88721,7 @@
                 "linktype": "component",
                 "name": "TreeNodeComponent",
                 "coveragePercent": 20,
-                "coverageCount": "6/29",
+                "coverageCount": "6/30",
                 "status": "low"
             },
             {
@@ -88701,7 +88730,7 @@
                 "linktype": "interface",
                 "name": "Node",
                 "coveragePercent": 0,
-                "coverageCount": "0/12",
+                "coverageCount": "0/13",
                 "status": "low"
             },
             {