carbon-components-angular 5.57.4 → 5.57.5

package/docs/documentation.json

@@ -29235,7 +29235,7 @@
         },
         {
             "name": "Dropdown",
-            "id": "component-Dropdown-be1a94d9a158990086693e978c1d4dfe355b056237ee57e0c730b3918066a689043bcc15576d135beacb8e26a037a7f78399005aa79b4b60f73aa668a3b36865",
+            "id": "component-Dropdown-63f44af5e6ad9ac5122d6ecf45223ecf29c119482e7fd0214a9b525564e1992686ae651041d0e8bb0a86c4689c871b701568da96c7264a7d951123b2733e1635",
             "file": "src/dropdown/dropdown.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -29249,7 +29249,7 @@
             "selector": "cds-dropdown, ibm-dropdown",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t*ngIf=\"label && !skeleton\"\n\t[for]=\"id\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--visually-hidden': hideLabel\n\t}\">\n\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n</label>\n<div\n\tclass=\"cds--list-box\"\n\t[ngClass]=\"{\n\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t'cds--multiselect': type === 'multi',\n\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t'cds--dropdown--light': theme === 'light',\n\t\t'cds--list-box--light': theme === 'light',\n\t\t'cds--list-box--inline': inline,\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t'cds--dropdown--readonly': readonly,\n\t\t'cds--dropdown--invalid': invalid,\n\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t'cds--list-box--invalid': invalid\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<div *ngIf=\"skeleton && fluid\" class=\"cds--list-box__label\"></div>\n\t<button\n\t\t#dropdownButton\n\t\t[id]=\"id\"\n\t\ttype=\"button\"\n\t\tclass=\"cds--list-box__field\"\n\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t[attr.aria-disabled]=\"disabled\"\n\t\t[attr.aria-readonly]=\"readonly\"\n\t\taria-haspopup=\"listbox\"\n\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t<div\n\t\t\t(click)=\"clearSelected()\"\n\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\ttabindex=\"0\"\n\t\t\t[title]=\"clearText\">\n\t\t\t{{getSelectedCount()}}\n\t\t\t<svg\n\t\t\t\tfocusable=\"false\"\n\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\trole=\"img\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"16\"\n\t\t\t\theight=\"16\"\n\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t</div>\n\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t<ng-template\n\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t</ng-template>\n\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\tsize=\"16\"\n\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t</svg>\n\t\t</span>\n\t</button>\n\t<svg\n\t\t*ngIf=\"invalid\"\n\t\tclass=\"cds--list-box__invalid-icon\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\">\n\t</svg>\n\t<svg\n\t\t*ngIf=\"!invalid && warn\"\n\t\tcdsIcon=\"warning--alt--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t</svg>\n\t<div\n\t\t#dropdownMenu\n\t\t[ngClass]=\"{\n\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t}\">\n\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t</div>\n</div>\n<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n<div\n\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{\n\t\t'cds--form__helper-text--disabled': disabled\n\t}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n</div>\n<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n</div>\n",
+            "template": "<label\n\t*ngIf=\"label && !skeleton\"\n\t[for]=\"id\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--visually-hidden': hideLabel\n\t}\">\n\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n</label>\n<div\n\tclass=\"cds--list-box\"\n\t[ngClass]=\"{\n\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t'cds--multiselect': type === 'multi',\n\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t'cds--dropdown--light': theme === 'light',\n\t\t'cds--list-box--light': theme === 'light',\n\t\t'cds--list-box--inline': inline,\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t'cds--dropdown--readonly': readonly,\n\t\t'cds--dropdown--invalid': invalid,\n\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t'cds--list-box--invalid': invalid\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<div *ngIf=\"skeleton && fluid\" class=\"cds--list-box__label\"></div>\n\t<button\n\t\t#dropdownButton\n\t\t[id]=\"id\"\n\t\ttype=\"button\"\n\t\tclass=\"cds--list-box__field\"\n\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t[attr.aria-disabled]=\"disabled\"\n\t\taria-haspopup=\"listbox\"\n\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t<div\n\t\t\t(click)=\"clearSelected()\"\n\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\ttabindex=\"0\"\n\t\t\t[title]=\"clearText\">\n\t\t\t{{getSelectedCount()}}\n\t\t\t<svg\n\t\t\t\tfocusable=\"false\"\n\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\trole=\"img\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"16\"\n\t\t\t\theight=\"16\"\n\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t</div>\n\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t<ng-template\n\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t</ng-template>\n\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\tsize=\"16\"\n\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t</svg>\n\t\t</span>\n\t</button>\n\t<svg\n\t\t*ngIf=\"invalid\"\n\t\tclass=\"cds--list-box__invalid-icon\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\">\n\t</svg>\n\t<svg\n\t\t*ngIf=\"!invalid && warn\"\n\t\tcdsIcon=\"warning--alt--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t</svg>\n\t<div\n\t\t#dropdownMenu\n\t\t[ngClass]=\"{\n\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t}\">\n\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t</div>\n</div>\n<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n<div\n\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{\n\t\t'cds--form__helper-text--disabled': disabled\n\t}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n</div>\n<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -29261,7 +29261,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": 288,
+                    "line": 287,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29272,7 +29272,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional clear button tooltip text.\n",
                     "description": "<p>Sets the optional clear button tooltip text.</p>\n",
-                    "line": 234,
+                    "line": 233,
                     "type": "string",
                     "decorators": []
                 },
@@ -29283,7 +29283,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a dropdown without arrow key activation.\n",
                     "description": "<p>Set to <code>true</code> for a dropdown without arrow key activation.</p>\n",
-                    "line": 268,
+                    "line": 267,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29294,7 +29294,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable the dropdown.\n",
                     "description": "<p>Set to <code>true</code> to disable the dropdown.</p>\n",
-                    "line": 252,
+                    "line": 251,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29305,7 +29305,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe selected value from the `Dropdown`. Can be a string or template.\n",
                     "description": "<p>The selected value from the <code>Dropdown</code>. Can be a string or template.</p>\n",
-                    "line": 230,
+                    "line": 229,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -29315,7 +29315,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOverrides the automatic dropUp.\n",
                     "description": "<p>Overrides the automatic dropUp.</p>\n",
-                    "line": 318,
+                    "line": 317,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29326,7 +29326,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExperimental: enable fluid state\n",
                     "description": "<p>Experimental: enable fluid state</p>\n",
-                    "line": 351,
+                    "line": 350,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29336,7 +29336,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional helper text.\n",
                     "description": "<p>Sets the optional helper text.</p>\n",
-                    "line": 222,
+                    "line": 221,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -29347,7 +29347,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": 218,
+                    "line": 217,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29356,7 +29356,7 @@
                     "defaultValue": "`dropdown-${Dropdown.dropdownCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 210,
+                    "line": 209,
                     "type": "string",
                     "decorators": []
                 },
@@ -29367,7 +29367,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an inline dropdown.\n",
                     "description": "<p>Set to <code>true</code> for an inline dropdown.</p>\n",
-                    "line": 264,
+                    "line": 263,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29378,7 +29378,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for invalid state.\n",
                     "description": "<p>Set to <code>true</code> for invalid state.</p>\n",
-                    "line": 272,
+                    "line": 271,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29388,7 +29388,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n",
                     "description": "<p>Value displayed if dropdown is in invalid state.</p>\n",
-                    "line": 276,
+                    "line": 275,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -29398,7 +29398,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": 297,
+                    "line": 296,
                     "type": "string",
                     "decorators": []
                 },
@@ -29408,7 +29408,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the dropdown.\n",
                     "description": "<p>Label for the dropdown.</p>\n",
-                    "line": 214,
+                    "line": 213,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -29419,7 +29419,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAccessible label for the button that opens the dropdown list.\nDefaults to the `DROPDOWN.OPEN` value from the i18n service.\n",
                     "description": "<p>Accessible label for the button that opens the dropdown list.\nDefaults to the <code>DROPDOWN.OPEN</code> value from the i18n service.</p>\n",
-                    "line": 309,
+                    "line": 308,
                     "type": "any",
                     "decorators": []
                 },
@@ -29430,7 +29430,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if no item is selected.\n",
                     "description": "<p>Value displayed if no item is selected.</p>\n",
-                    "line": 226,
+                    "line": 225,
                     "type": "string",
                     "decorators": []
                 },
@@ -29441,7 +29441,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a readonly state.\n",
                     "description": "<p>Set to <code>true</code> for a readonly state.</p>\n",
-                    "line": 256,
+                    "line": 255,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29451,7 +29451,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nQuery string for the element that contains the `Dropdown`.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n",
                     "description": "<p>Query string for the element that contains the <code>Dropdown</code>.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the <code>scrollableContainer</code>.</p>\n",
-                    "line": 293,
+                    "line": 292,
                     "type": "string",
                     "decorators": []
                 },
@@ -29462,7 +29462,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nProvides the label for the \"# selected\" text.\nDefaults to the `DROPDOWN.SELECTED` value from the i18n service.\n",
                     "description": "<p>Provides the label for the &quot;# selected&quot; text.\nDefaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>\n",
-                    "line": 314,
+                    "line": 313,
                     "type": "any",
                     "decorators": []
                 },
@@ -29473,7 +29473,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at it's 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 it&#39;s position\n<code>top-after-reopen</code>: selected item jump to top after reopen dropdown</p>\n",
-                    "line": 304,
+                    "line": 303,
                     "type": "\"top\" | \"fixed\" | \"top-after-reopen\"",
                     "decorators": []
                 },
@@ -29484,7 +29484,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize to render the dropdown field.\n",
                     "description": "<p>Size to render the dropdown field.</p>\n",
-                    "line": 238,
+                    "line": 237,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -29495,7 +29495,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading dropdown.\n",
                     "description": "<p>Set to <code>true</code> for a loading dropdown.</p>\n",
-                    "line": 260,
+                    "line": 259,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29506,15 +29506,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` dropdown theme",
                     "jsdoctags": [
                         {
-                            "pos": 7776,
-                            "end": 7871,
+                            "pos": 7741,
+                            "end": 7836,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 7777,
-                                "end": 7787,
+                                "pos": 7742,
+                                "end": 7752,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -29524,7 +29524,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> dropdown theme</p>\n"
                         }
                     ],
-                    "line": 248,
+                    "line": 247,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -29535,7 +29535,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDefines whether or not the `Dropdown` supports selecting multiple items as opposed to single\nitem selection.\n",
                     "description": "<p>Defines whether or not the <code>Dropdown</code> supports selecting multiple items as opposed to single\nitem selection.</p>\n",
-                    "line": 243,
+                    "line": 242,
                     "type": "\"single\" | \"multi\"",
                     "decorators": []
                 },
@@ -29546,7 +29546,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 280,
+                    "line": 279,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -29556,7 +29556,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 284,
+                    "line": 283,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -29569,7 +29569,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n",
                     "description": "<p>Emits event notifying to other classes that the <code>Dropdown</code> has been closed (collapsed).</p>\n",
-                    "line": 330,
+                    "line": 329,
                     "type": "EventEmitter<any>"
                 },
                 {
@@ -29579,7 +29579,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n",
                     "description": "<p>Emits event notifying to other classes that the <code>Dropdown</code> has been closed (collapsed).</p>\n",
-                    "line": 326,
+                    "line": 325,
                     "type": "EventEmitter<any>"
                 },
                 {
@@ -29589,7 +29589,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits selection events.\n",
                     "description": "<p>Emits selection events.</p>\n",
-                    "line": 322,
+                    "line": 321,
                     "type": "EventEmitter<Object>"
                 }
             ],
@@ -29602,7 +29602,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>controls whether the <code>drop-up</code> class is applied</p>\n",
-                    "line": 361,
+                    "line": 360,
                     "rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n"
                 },
                 {
@@ -29612,7 +29612,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Maintains a reference to the view DOM element of the <code>Dropdown</code> button.</p>\n",
-                    "line": 339,
+                    "line": 338,
                     "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dropdown` button.\n",
                     "decorators": [
                         {
@@ -29632,7 +29632,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 190,
+                    "line": 189,
                     "modifierKind": [
                         126
                     ]
@@ -29644,7 +29644,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>ViewChid of the dropdown view.</p>\n",
-                    "line": 343,
+                    "line": 342,
                     "rawdescription": "\n\nViewChid of the dropdown view.\n",
                     "decorators": [
                         {
@@ -29664,7 +29664,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 345,
+                    "line": 344,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -29683,7 +29683,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 347,
+                    "line": 346,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -29702,7 +29702,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 368
+                    "line": 367
                 },
                 {
                     "name": "menuIsClosed",
@@ -29712,7 +29712,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to <code>true</code> if the dropdown is closed (not expanded).</p>\n",
-                    "line": 356,
+                    "line": 355,
                     "rawdescription": "\n\nSet to `true` if the dropdown is closed (not expanded).\n"
                 },
                 {
@@ -29723,7 +29723,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 365
+                    "line": 364
                 },
                 {
                     "name": "outsideClick",
@@ -29733,7 +29733,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 366
+                    "line": 365
                 },
                 {
                     "name": "outsideKey",
@@ -29743,7 +29743,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 367
+                    "line": 366
                 },
                 {
                     "name": "propagateChange",
@@ -29753,7 +29753,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>function passed in by <code>registerOnChange</code></p>\n",
-                    "line": 529,
+                    "line": 528,
                     "rawdescription": "\n\nfunction passed in by `registerOnChange`\n"
                 },
                 {
@@ -29763,7 +29763,7 @@
                     "type": "AbstractDropdownView",
                     "optional": false,
                     "description": "<p>Maintains a reference to the <code>AbstractDropdownView</code> object within the content DOM.</p>\n",
-                    "line": 335,
+                    "line": 334,
                     "rawdescription": "\n\nMaintains a reference to the `AbstractDropdownView` object within the content DOM.\n",
                     "decorators": [
                         {
@@ -29783,7 +29783,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 708,
+                    "line": 707,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
@@ -29795,7 +29795,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 700,
+                    "line": 699,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
@@ -29814,7 +29814,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 680,
+                    "line": 679,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
@@ -29837,7 +29837,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 660,
+                    "line": 659,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -29854,7 +29854,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 664,
+                    "line": 663,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles clicks outside of the `Dropdown`.\n",
@@ -29884,7 +29884,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 672,
+                    "line": 671,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -29905,7 +29905,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 722,
+                    "line": 721,
                     "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",
@@ -29917,7 +29917,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 641,
+                    "line": 640,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -29934,7 +29934,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 581,
+                    "line": 580,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -29955,7 +29955,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 786,
+                    "line": 785,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCollapsing the dropdown menu and removing unnecessary `EventListeners`.\n",
@@ -29967,7 +29967,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 600,
+                    "line": 599,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the display value if there is a selection and displayValue is set,\nif there is just a selection the ListItem content property will be returned,\notherwise the placeholder will be returned.\n",
@@ -29979,7 +29979,7 @@
                     "optional": false,
                     "returnType": "{ items: any; item?: undefined; } | { item: any; items?: undefined; } | { items?: undefined; item?: undefined; }",
                     "typeParameters": [],
-                    "line": 621,
+                    "line": 620,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -29989,7 +29989,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 635,
+                    "line": 634,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -30006,7 +30006,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 828,
+                    "line": 827,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30027,7 +30027,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 617,
+                    "line": 616,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -30044,7 +30044,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 824,
+                    "line": 823,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -30068,7 +30068,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 511,
+                    "line": 510,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -30085,7 +30085,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 546,
+                    "line": 545,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n",
@@ -30117,7 +30117,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 742,
+                    "line": 741,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpands the dropdown menu in the view.\n",
@@ -30136,7 +30136,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 515,
+                    "line": 514,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30164,7 +30164,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 522,
+                    "line": 521,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegistering the function injected to control the touch use of the `Dropdown`.\n",
@@ -30194,7 +30194,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 538,
+                    "line": 537,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the dropdown.\n\nex: `this.formGroup.get(\"myDropdown\").disable();`\n\n",
@@ -30202,8 +30202,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 16389,
-                                "end": 16399,
+                                "pos": 16354,
+                                "end": 16364,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30214,8 +30214,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 16383,
-                                "end": 16388,
+                                "pos": 16348,
+                                "end": 16353,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30232,7 +30232,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 816,
+                    "line": 815,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls toggling menu states between open/expanded and closed/collapsed.\n",
@@ -30244,7 +30244,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 655,
+                    "line": 654,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns `true` if there is a value selected.\n",
@@ -30263,7 +30263,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 472,
+                    "line": 471,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPropagates the injected `value`.\n",
@@ -30289,7 +30289,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 345,
+                    "line": 344,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30298,7 +30298,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 347,
+                    "line": 346,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30306,7 +30306,7 @@
                     "name": "class.cds--list-box__wrapper--fluid--focus",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 195,
+                    "line": 194,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30314,7 +30314,7 @@
                     "name": "class.cds--list-box__wrapper--fluid--invalid",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 191,
+                    "line": 190,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -30337,7 +30337,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n",
                     "description": "<p>Adds keyboard functionality for navigation, selection and closing of the <code>Dropdown</code>.</p>\n",
-                    "line": 546
+                    "line": 545
                 }
             ],
             "standalone": false,
@@ -30345,7 +30345,7 @@
             "description": "<p>Drop-down lists enable users to select one or more items from a list.</p>\n<h4>Opening behavior/List DOM placement</h4>\n<p>By default the dropdown will try to figure out the best placement for the dropdown list.</p>\n<p>If it&#39;s not contained within any scrolling elements, it will open inline, if it <em>is</em>\ncontained within a scrolling container it will try to open in the body, or an <code>cds-placeholder</code>.</p>\n<p>To control this behavior you can use the <code>appendInline</code> input:</p>\n<ul>\n<li><code>[appendInline]=&quot;null&quot;</code> is the default (auto detection)</li>\n<li><code>[appendInline]=&quot;false&quot;</code> will always append to the body/<code>cds-placeholder</code></li>\n<li><code>[appendInline]=&quot;true&quot;</code> will always append inline (next to the dropdown button)</li>\n</ul>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DropdownModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-dropdown--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nDrop-down lists enable users to select one or more items from a list.\n\n#### Opening behavior/List DOM placement\nBy default the dropdown will try to figure out the best placement for the dropdown list.\n\nIf it's not contained within any scrolling elements, it will open inline, if it _is_\ncontained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n\nTo control this behavior you can use the `appendInline` input:\n- `[appendInline]=\"null\"` is the default (auto detection)\n- `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n- `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n\nGet started with importing the module:\n\n```typescript\nimport { DropdownModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-dropdown--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ListItem } from \"./list-item.interface\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t<label\n\t\t*ngIf=\"label && !skeleton\"\n\t\t[for]=\"id\"\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\tclass=\"cds--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t'cds--list-box--invalid': invalid\n\t\t}\"\n\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t<div *ngIf=\"skeleton && fluid\" class=\"cds--list-box__label\"></div>\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\t[attr.aria-readonly]=\"readonly\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tclass=\"cds--list-box__invalid-icon\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t</svg>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\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 * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef<any> = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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 warningText)\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 * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\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 * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's 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 * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter<any>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\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\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\tthis.checkForReorder();\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 * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\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\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable<string> {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\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.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\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.menuIsClosed) {\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.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && 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.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\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 * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"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 * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's 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\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ListItem } from \"./list-item.interface\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t<label\n\t\t*ngIf=\"label && !skeleton\"\n\t\t[for]=\"id\"\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\tclass=\"cds--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t'cds--list-box--invalid': invalid\n\t\t}\"\n\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t<div *ngIf=\"skeleton && fluid\" class=\"cds--list-box__label\"></div>\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tclass=\"cds--list-box__invalid-icon\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t</svg>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\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 * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef<any> = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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 warningText)\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 * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\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 * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's 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 * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter<any>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\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\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\tthis.checkForReorder();\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 * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\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\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable<string> {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\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.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\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.menuIsClosed) {\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.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && 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.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\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 * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"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 * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's 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\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -30380,7 +30380,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 377,
+                "line": 376,
                 "rawdescription": "\n\nCreates an instance of Dropdown.\n",
                 "jsdoctags": [
                     {
@@ -30436,7 +30436,7 @@
                         "name": "fluidInvalidClass",
                         "type": "",
                         "returnType": "",
-                        "line": 191
+                        "line": 190
                     }
                 },
                 "fluidFocusClass": {
@@ -30445,7 +30445,7 @@
                         "name": "fluidFocusClass",
                         "type": "",
                         "returnType": "",
-                        "line": 195
+                        "line": 194
                     }
                 }
             }
@@ -75266,7 +75266,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/theme/theme.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75276,7 +75276,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/theme/theme.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78128,21 +78128,21 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/theme/theme.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/theme/theme.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
             },
             {
                 "name": "Template",
@@ -83965,128 +83965,128 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
                 }
             ],
-            "src/theme/theme.stories.ts": [
+            "src/tag/tag.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/theme/theme.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "LayeredTemplate",
+                    "name": "Filter",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/theme/theme.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">White theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G10 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G90 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G100 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-layer-example {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t\t.theme-layer-header {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t\t.theme-with-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
+                    "defaultValue": "FilteredTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "FilteredTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/theme/theme.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
                 },
                 {
-                    "name": "WithLayer",
+                    "name": "OperationalTag",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/theme/theme.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "LayeredTemplate.bind({})"
-                }
-            ],
-            "src/tag/tag.stories.ts": [
+                    "defaultValue": "OperationalTagTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "OperationalTagTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
                 },
                 {
-                    "name": "Filter",
+                    "name": "SelectedTag",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteredTemplate.bind({})"
+                    "defaultValue": "SelectedTagTemplate.bind({})"
                 },
                 {
-                    "name": "FilteredTemplate",
+                    "name": "SelectedTagTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
                 },
                 {
-                    "name": "OperationalTag",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "OperationalTagTemplate.bind({})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                }
+            ],
+            "src/theme/theme.stories.ts": [
                 {
-                    "name": "OperationalTagTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/theme/theme.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "SelectedTag",
+                    "name": "LayeredTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/theme/theme.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SelectedTagTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">White theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G10 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G90 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G100 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-layer-example {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t\t.theme-layer-header {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t\t.theme-with-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
                 },
                 {
-                    "name": "SelectedTagTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/theme/theme.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
                 },
                 {
-                    "name": "Template",
+                    "name": "WithLayer",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/theme/theme.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                    "defaultValue": "LayeredTemplate.bind({})"
                 }
             ],
             "src/tiles/clickable-tile.stories.ts": [