carbon-components-angular 5.16.4 → 5.17.0

package/docs/documentation.json

@@ -6649,12 +6649,12 @@
         },
         {
             "name": "NumberChange",
-            "id": "class-NumberChange-cb9802b0f138e4b960ff53dea075a99a094431efbb693a8c5cae0755dfe0157c6f47f22b00e4ddd14f96279aeb18e9059a04cdfad945da0f949c4d177ade2cd0",
+            "id": "class-NumberChange-95a29b5669e66c33aeba2b026e7b049fb464aa723c195e8eef2d83fc39f46b9102e34f0884f8176e6512cd1844651c0d26ffd61a427d685065e5f0114b7cf0e0",
             "file": "src/number-input/number.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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 * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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 * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
             "properties": [
                 {
                     "name": "source",
@@ -21739,7 +21739,7 @@
         },
         {
             "name": "ComboBox",
-            "id": "component-ComboBox-fac69dc5921d719be4d68bb6d92f20ea8a1d5862f7aca32e66db87d22c33e6308440fe241fadf987819709e8926871fcbea5aedf0c7cf5a7686778a8d46bcc03",
+            "id": "component-ComboBox-9a1884f58e5d2a6179296b59778a00ad16213e38f4bc502e734b7e792e3f7ca5a21f1862825a3c483982cdb5e33d0866ed289cc69367d68ab25776a60f347086",
             "file": "src/combobox/combobox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -21753,7 +21753,7 @@
             "selector": "cds-combo-box, ibm-combo-box",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -21982,15 +21982,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead",
                     "jsdoctags": [
                         {
-                            "pos": 9549,
-                            "end": 9607,
+                            "pos": 9531,
+                            "end": 9589,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 9550,
-                                "end": 9560,
+                                "pos": 9532,
+                                "end": 9542,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -22852,7 +22852,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide &quot;pills&quot; of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"id\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -25855,7 +25855,7 @@
         },
         {
             "name": "DatePickerInput",
-            "id": "component-DatePickerInput-c03777bb1eb1b6f572e4c84fe7d0c07fa1d862ec2751eaace7c1960ccdb65a4b5ae32236a0f2d9edbeb3c6dedfbd377a1ed7efb8839ee904350dd6e0b3e2d633",
+            "id": "component-DatePickerInput-b4c5b96a9c09c64b48780b1752e5eb483d50e6dfe6914094a64f3ff54ff9cc337ab494aad41c1016d2b1a838cade2e753d880bab9de6fe9b9ddfc9ae732f1baf",
             "file": "src/datepicker-input/datepicker-input.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -25869,7 +25869,7 @@
             "selector": "cds-date-picker-input, ibm-date-picker-input",
             "styleUrls": [],
             "styles": [],
-            "template": "\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t",
+            "template": "\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -25983,15 +25983,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 3702,
-                            "end": 3806,
+                            "pos": 3684,
+                            "end": 3788,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 3703,
-                                "end": 3713,
+                                "pos": 3685,
+                                "end": 3695,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26260,7 +26260,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = 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 warnText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = 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 warnText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -27051,7 +27051,7 @@
         },
         {
             "name": "Dropdown",
-            "id": "component-Dropdown-cb96c72d9aa4a10ade6a969377e66588f6145f51dc6ce22b230e055dedca417b0b6b6ab97a1ee2ed469518eb9009f707afe028a2caaafc2bf3a1917613b5867b",
+            "id": "component-Dropdown-b72d02ffcaf40ce99cd9f80faa92fa79bc57bf414ec9904b4be4ee8e7b8d41e79d0a42f66085c2b69dd338a4cfb01a50ca4a60b9f67eedfe03bca3ed36849cd8",
             "file": "src/dropdown/dropdown.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -27065,7 +27065,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]=\"{'cds--label--disabled': disabled}\">\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',\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--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}\">\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 ? $event.stopPropagation() : toggleMenu()\"\n\t\t(blur)=\"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<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tclass=\"cds--dropdown__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<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<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<div\n\t*ngIf=\"helperText && !invalid && !warn && !skeleton\"\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=\"!warn && 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]=\"{'cds--label--disabled': disabled}\">\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',\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--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}\">\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 ? $event.stopPropagation() : toggleMenu()\"\n\t\t(blur)=\"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<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tclass=\"cds--dropdown__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<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<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<div\n\t*ngIf=\"helperText && !invalid && !warn && !skeleton\"\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": [],
@@ -27289,15 +27289,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` dropdown theme",
                     "jsdoctags": [
                         {
-                            "pos": 6776,
-                            "end": 6871,
+                            "pos": 6758,
+                            "end": 6853,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 6777,
-                                "end": 6787,
+                                "pos": 6759,
+                                "end": 6769,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -27938,8 +27938,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 15281,
-                                "end": 15291,
+                                "pos": 15263,
+                                "end": 15273,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -27950,8 +27950,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 15275,
-                                "end": 15280,
+                                "pos": 15257,
+                                "end": 15262,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -28056,7 +28056,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<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]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--dropdown': type !== 'multi',\n\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed\n\t\t}\">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\t(click)=\"disabled ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tclass=\"cds--dropdown__invalid-icon\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n\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@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 * 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 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\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\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\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/**\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 ((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\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]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--dropdown': type !== 'multi',\n\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed\n\t\t}\">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\t(click)=\"disabled ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tclass=\"cds--dropdown__invalid-icon\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n\t`,\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@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 * 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 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\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\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\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/**\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 ((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\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": "",
@@ -33990,7 +33990,7 @@
         },
         {
             "name": "Label",
-            "id": "component-Label-e9ce8b032c2e77d0a38afbf685cd9415d3f8c6b176b9861a9ddd4127c90f0c18ab0322d01749080fbdbc893ad568352b63e5fbc94742427d27a5cd3f9bfa37c5",
+            "id": "component-Label-c372182ca09956d9e30d0861dcf59aeffb60acf0b60437ed6a7eaff0b61016bd53d34d3154d5aa1c1d954f16880d3b89c35f1653a4f0f6ccece196c0538c6ad8",
             "file": "src/input/label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -34000,7 +34000,7 @@
             "selector": "cds-label, ibm-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-template #inputContentTemplate>\n\t<ng-content select=\"input,textarea,div\"></ng-content>\n</ng-template>\n\n<ng-template #labelContentTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"type\">\n\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t<cds-textarea-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t</cds-textarea-label>\n\t</ng-container>\n\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t<cds-text-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t</cds-text-label>\n\t</ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t</ng-container>\n</ng-container>\n\n<ng-template #default>\n\t<label\n\t\t[for]=\"labelInputID\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t}\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</ng-template>\n\t",
+            "template": "<ng-template #inputContentTemplate>\n\t<ng-content select=\"input,textarea,div\"></ng-content>\n</ng-template>\n\n<ng-template #labelContentTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"type\">\n\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t<cds-textarea-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t</cds-textarea-label>\n\t</ng-container>\n\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t<cds-text-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t</cds-text-label>\n\t</ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t</ng-container>\n</ng-container>\n\n<ng-template #default>\n\t<label\n\t\t[for]=\"labelInputID\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t}\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -34232,7 +34232,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>To prevent attribute drilling, use <code>ibm-text-label</code> or <code>ibm-textarea-label</code> components</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\nTo prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n\n```html\n<cds-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * <cds-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t<ng-template #inputContentTemplate>\n\t\t\t<ng-content select=\"input,textarea,div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-template #labelContentTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container [ngSwitch]=\"type\">\n\t\t\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t\t\t<cds-textarea-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-textarea-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t\t\t<cds-text-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-text-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchDefault>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\n\t\t<ng-template #default>\n\t\t\t<label\n\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--skeleton': skeleton\n\t\t\t\t}\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef<HTMLDivElement>;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.textArea) {\n\t\t\tthis.type = \"TextArea\";\n\t\t} else if (this.textInput) {\n\t\t\tthis.type = \"TextInput\";\n\t\t}\n\t}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\t// Will only be called when `default` template is being used\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` & `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input,textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * <cds-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t<ng-template #inputContentTemplate>\n\t\t\t<ng-content select=\"input,textarea,div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-template #labelContentTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container [ngSwitch]=\"type\">\n\t\t\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t\t\t<cds-textarea-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-textarea-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t\t\t<cds-text-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-text-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchDefault>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\n\t\t<ng-template #default>\n\t\t\t<label\n\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--skeleton': skeleton\n\t\t\t\t}\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef<HTMLDivElement>;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.textArea) {\n\t\t\tthis.type = \"TextArea\";\n\t\t} else if (this.textInput) {\n\t\t\tthis.type = \"TextInput\";\n\t\t}\n\t}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\t// Will only be called when `default` template is being used\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` & `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input,textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36727,7 +36727,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-cb9802b0f138e4b960ff53dea075a99a094431efbb693a8c5cae0755dfe0157c6f47f22b00e4ddd14f96279aeb18e9059a04cdfad945da0f949c4d177ade2cd0",
+            "id": "component-NumberComponent-95a29b5669e66c33aeba2b026e7b049fb464aa723c195e8eef2d83fc39f46b9102e34f0884f8176e6512cd1844651c0d26ffd61a427d685065e5f0114b7cf0e0",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36742,7 +36742,7 @@
             "selector": "cds-number, ibm-number",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\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=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\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</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -36929,15 +36929,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.",
                     "jsdoctags": [
                         {
-                            "pos": 4443,
-                            "end": 4543,
+                            "pos": 4425,
+                            "end": 4525,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 4444,
-                                "end": 4454,
+                                "pos": 4426,
+                                "end": 4436,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -37244,8 +37244,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7629,
-                                "end": 7631,
+                                "pos": 7611,
+                                "end": 7613,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -37256,8 +37256,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7623,
-                                "end": 7628,
+                                "pos": 7605,
+                                "end": 7610,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -37322,8 +37322,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7305,
-                                "end": 7310,
+                                "pos": 7287,
+                                "end": 7292,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -37334,8 +37334,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7299,
-                                "end": 7304,
+                                "pos": 7281,
+                                "end": 7286,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -37375,7 +37375,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { NumberModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-number--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { NumberModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-number--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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 * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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 * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -42425,7 +42425,7 @@
         },
         {
             "name": "RadioGroup",
-            "id": "component-RadioGroup-4f2cbee34a3876dda79c25f05f74c1b3adc86a6c24fd0f3900330a05f4bd58ae97bab736315f981235ff0c02c35a9da7ca8302e26bd79bdb32a305418f5aba66",
+            "id": "component-RadioGroup-23efdc2256357de88642f292dd081037c795e874f8f446aeb72f3c76b8bbddb99718f51093d2b32f0efedee43c8801428d11c2b283f2d7fe2b1537ab5aeb4e26",
             "file": "src/radio/radio-group.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -42439,7 +42439,7 @@
             "selector": "cds-radio-group, ibm-radio-group",
             "styleUrls": [],
             "styles": [],
-            "template": "<fieldset\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t'cds--radio-button-group--warning': !invalid && warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t</legend>\n\t<ng-content></ng-content>\n</fieldset>\n<div class=\"cds--radio-button__validation-msg\">\n\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n<div\n\t*ngIf=\"helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n\t",
+            "template": "<fieldset\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t'cds--radio-button-group--invalid': invalid,\n\t\t'cds--radio-button-group--warning': !invalid && warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t</legend>\n\t<ng-content></ng-content>\n</fieldset>\n<div class=\"cds--radio-button__validation-msg\">\n\t<ng-container *ngIf=\"invalid\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n<div\n\t*ngIf=\"helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -42832,8 +42832,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 9423,
-                                "end": 9425,
+                                "pos": 9404,
+                                "end": 9406,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42844,8 +42844,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 9417,
-                                "end": 9422,
+                                "pos": 9398,
+                                "end": 9403,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42877,8 +42877,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 8054,
-                                "end": 8064,
+                                "pos": 8035,
+                                "end": 8045,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42889,8 +42889,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 8048,
-                                "end": 8053,
+                                "pos": 8029,
+                                "end": 8034,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42986,7 +42986,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { RadioModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>Ex:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-radio-group [(ngModel)]=&quot;radio&quot;&gt;\n    &lt;cds-radio *ngFor=&quot;let one of manyRadios&quot; [value]=&quot;one&quot;&gt;\n        Radio {{one}}\n    &lt;/cds-radio&gt;\n&lt;/cds-radio-group&gt;\n\nRadio selected: {{radio}}</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-ts\">    const manyRadios = [&quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;];</code></pre></div><p><a href=\"../../?path=/story/components-radio--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { RadioModule } from 'carbon-components-angular';\n```\n\nEx:\n\n```html\n<cds-radio-group [(ngModel)]=\"radio\">\n\t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n\t\tRadio {{one}}\n\t</cds-radio>\n</cds-radio-group>\n\nRadio selected: {{radio}}\n```\n\n```ts\n\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n```\n\n[See demo](../../?path=/story/components-radio--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { RadioModule } from 'carbon-components-angular';\n * ```\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * [See demo](../../?path=/story/components-radio--basic)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<fieldset\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t\t\t'cds--radio-button-group--warning': !invalid && warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class=\"cds--radio-button__validation-msg\">\n\t\t\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() legend: string | TemplateRef<any>;\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { RadioModule } from 'carbon-components-angular';\n * ```\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * [See demo](../../?path=/story/components-radio--basic)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<fieldset\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t\t\t'cds--radio-button-group--invalid': invalid,\n\t\t\t\t'cds--radio-button-group--warning': !invalid && warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class=\"cds--radio-button__validation-msg\">\n\t\t\t<ng-container *ngIf=\"invalid\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() legend: string | TemplateRef<any>;\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -45998,7 +45998,7 @@
         },
         {
             "name": "Select",
-            "id": "component-Select-3bbdbb144930d524bdd575185b6cd83f21c1396b5b39d7ebe2794e4db28b65c3d8126c9b3ece9efc78c7a323aa6b014a6d9f74eb64a6e61c7d7bf112e1f99c00",
+            "id": "component-Select-5ce22ff106ac9f2ba97ac82db89ec5f397cb10bf418702f0a99ea1b997b23f65d57425c1e2e45de26ddefec08a8696dfe98f153311d94cc1fd03f159d9234153",
             "file": "src/select/select.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -46012,7 +46012,7 @@
             "selector": "cds-select, ibm-select",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--form-item\">\n\t<ng-template [ngIf]=\"skeleton\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-template>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\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--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t</div>\n\t<div\n\t\t*ngIf=\"invalid && invalidText && !warn\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\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</ng-template>\n\t",
+            "template": "<div class=\"cds--form-item\">\n\t<ng-template [ngIf]=\"skeleton\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-template>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\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--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t</div>\n\t<div\n\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\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</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -46128,15 +46128,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` select theme",
                     "jsdoctags": [
                         {
-                            "pos": 5339,
-                            "end": 5432,
+                            "pos": 5321,
+                            "end": 5414,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 5340,
-                                "end": 5350,
+                                "pos": 5322,
+                                "end": 5332,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -46448,7 +46448,7 @@
             "description": "<p><code>cds-select</code> provides a styled <code>select</code> component. Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SelectModule } from &#39;carbon-components-angular&#39;;</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-select [(ngModel)]=&quot;model&quot;&gt;\n    &lt;option value=&quot;default&quot; disabled selected hidden&gt;Choose an option&lt;/option&gt;\n    &lt;option value=&quot;option1&quot;&gt;Option 1&lt;/option&gt;\n    &lt;option value=&quot;option2&quot;&gt;Option 2&lt;/option&gt;\n    &lt;option value=&quot;option3&quot;&gt;Option 3&lt;/option&gt;\n&lt;/cds-select&gt;\n    ```\n\n[See demo](../../?path=/story/components-select--basic)</code></pre></div>",
             "rawdescription": "\n\n`cds-select` provides a styled `select` component. Get started with importing the module:\n\n```typescript\nimport { SelectModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-select [(ngModel)]=\"model\">\n\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t<option value=\"option1\">Option 1</option>\n\t<option value=\"option2\">Option 2</option>\n\t<option value=\"option3\">Option 3</option>\n</cds-select>\n\t```\n\n[See demo](../../?path=/story/components-select--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\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\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\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=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText && !warn\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\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 * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\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\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\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=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\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 * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -58457,7 +58457,7 @@
         },
         {
             "name": "TextareaLabelComponent",
-            "id": "component-TextareaLabelComponent-802c08f2ab70c0b91ef9e266faccef8973639b72cb7271268ea3cca9ea79e874f22e57e2a9abb9e0c8bb63f06fd8dc6175fa977915bbd2a0c748946cd4d9b124",
+            "id": "component-TextareaLabelComponent-6a8135bd9830b5713906212dd6f7f0476ce7154d8f3dca437e8855afdc6aca7ebb16a98721cfbabf36201b5090f894a9c50f65bcba6f201d8b1abb441b0e8273",
             "file": "src/input/textarea-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -58467,7 +58467,7 @@
             "selector": "cds-textarea-label, ibm-textarea-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-area__wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"!warn && invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-area__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t<ng-template #textAreaContent>\n\t\t<ng-content select=\"textarea\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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\t",
+            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-area__wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-area__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t<ng-template #textAreaContent>\n\t\t<ng-content select=\"[cdsTextArea],[ibmTextArea],textarea\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -58710,7 +58710,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-textarea-label&gt;\n    Label\n    &lt;textarea cdsTextArea class=&quot;textarea-field&quot;&gt;\n&lt;/cds-textarea-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input-text-area--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-textarea-label>\n\tLabel\n\t<textarea cdsTextArea class=\"textarea-field\">\n</cds-textarea-label>\n```\n\n[See demo](../../?path=/story/components-input-text-area--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-textarea-label>\n * \tLabel\n * \t<textarea cdsTextArea class=\"textarea-field\">\n * </cds-textarea-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input-text-area--basic)\n */\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-area__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"textarea\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextareaLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-textarea-\" + TextareaLabelComponent.labelCounter;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textAreaTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-textarea-label>\n * \tLabel\n * \t<textarea cdsTextArea class=\"textarea-field\">\n * </cds-textarea-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input-text-area--basic)\n */\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-area__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"[cdsTextArea],[ibmTextArea],textarea\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextareaLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-textarea-\" + TextareaLabelComponent.labelCounter;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textAreaTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -58747,7 +58747,7 @@
         },
         {
             "name": "TextInputLabelComponent",
-            "id": "component-TextInputLabelComponent-d5a466a5aca9eaad95c0b94fccc111e787eeb5e3a6928c6702e9bd44ffb9408a84ab45f434079d2e64e5b81746a810a3c1db22673f48a59891c870a38d078b5e",
+            "id": "component-TextInputLabelComponent-314f147699e5e106a4f33d3ec296ea3a6459dbe1695ac3e793390206a88d549d382d99840b10c1d1e23719f9bab3b67cc82fe27c6d9c69591da94d2051236c10",
             "file": "src/input/text-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -58757,7 +58757,7 @@
             "selector": "cds-text-label, ibm-text-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"!warn && invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t<ng-template #textInputContent>\n\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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\t",
+            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon\">\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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t<ng-template #textInputContent>\n\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -58982,7 +58982,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-text-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-text-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-text-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-text-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -70321,7 +70321,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -74666,7 +74666,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
                 }
             ],
             "src/layer/layer.stories.ts": [