carbon-components-angular 5.28.5 → 5.29.0

package/docs/documentation.json

@@ -6889,12 +6889,12 @@
         },
         {
             "name": "NumberChange",
-            "id": "class-NumberChange-95a29b5669e66c33aeba2b026e7b049fb464aa723c195e8eef2d83fc39f46b9102e34f0884f8176e6512cd1844651c0d26ffd61a427d685065e5f0114b7cf0e0",
+            "id": "class-NumberChange-2f449d61d6c7a726610fa6f48642317885ec439e1e43c3e9d823cc6cf84fcb1fe78637ea04c8a663b32884c4cb5f96f153184844b5d4aa49daeaf562fc1c47fd",
             "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 && 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",
+            "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[readonly]=\"readonly\"\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 * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\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",
             "inputsClass": [],
             "outputsClass": [],
             "properties": [
@@ -22614,7 +22614,7 @@
         },
         {
             "name": "ComboBox",
-            "id": "component-ComboBox-c5137d28594c9c5d2a13353eccbb9586675bfef3d525f7e410a0a0c881751da9966dc44ed68e7f1ae08b1c70be98905ee1e70693d0ba3ee7a1f224a8d874cfa1",
+            "id": "component-ComboBox-ea87abde056d48acdd4defa7cadba6b200f40fb98c6840f796f15e02b907c03703086503bb2e4166713af9e5162fa943d501d56ed916e0ea112967e6bb5c7d20",
             "file": "src/combobox/combobox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -23747,7 +23747,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide &quot;pills&quot; of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\t\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36149,7 +36149,7 @@
         },
         {
             "name": "ManyIconDemo",
-            "id": "component-ManyIconDemo-eb959ac9d6d5864acd4b3aa547e893e09fde1c0aaf50801f84233073f6a13eef21081af891f68b1b690ac5f939da403196aa07d165643e31c66d7b88f56710b5",
+            "id": "component-ManyIconDemo-4dc8e54ce44830aee1cad09a9f037497b8b861fd6a6917d49f10cb673a952246016d4f9aa756b8df7073ec4aaacde3c7bb6715519b386351ec01a88ad4740482",
             "file": "src/icon/stories/many-icons-demo.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36189,7 +36189,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport * as Icons from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-many-icon\",\n\ttemplate: `\n\t\t<table>\n\t\t\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t\t\t<td *ngFor=\"let icon of group\">\n\t\t\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t`,\n\tstyles: [\n\t\t`\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class ManyIconDemo implements OnInit {\n\tgroupedIcons: any = [];\n\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tconst iconMap = new Map();\n\t\tfor (const descriptor of Object.values(Icons)) {\n\t\t\tthis.iconService.register(descriptor as any);\n\t\t\tif (typeof descriptor === \"object\" && descriptor) {\n\t\t\t\tif (!iconMap.has(descriptor[\"name\"])) {\n\t\t\t\t\ticonMap.set(descriptor[\"name\"], []);\n\t\t\t\t}\n\t\t\t\ticonMap.get(descriptor[\"name\"]).push(descriptor);\n\t\t\t}\n\t\t}\n\t\tthis.groupedIcons = Array.from(iconMap.values());\n\t}\n}\n",
+            "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport * as Icons from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-many-icon\",\n\ttemplate: `\n\t\t<table>\n\t\t\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t\t\t<td *ngFor=\"let icon of group\">\n\t\t\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t`,\n\tstyles: [\n\t\t`\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class ManyIconDemo implements OnInit {\n\tgroupedIcons: any = [];\n\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tconst iconMap = new Map();\n\t\tfor (const descriptor of Object.values(Icons)) {\n\t\t\tthis.iconService.register(descriptor as any);\n\t\t\tif (typeof descriptor === \"object\" && descriptor) {\n\t\t\t\tif (!iconMap.has(descriptor[\"name\"])) {\n\t\t\t\t\ticonMap.set(descriptor[\"name\"], []);\n\t\t\t\t}\n\t\t\t\ticonMap.get(descriptor[\"name\"]).push(descriptor);\n\t\t\t}\n\t\t}\n\t\t// Render after a delay to prevent page from freezing\n\t\tsetTimeout(() => {\n\t\t\tthis.groupedIcons = Array.from(iconMap.values());\n\t\t}, 1000);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t\n",
@@ -37839,7 +37839,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-95a29b5669e66c33aeba2b026e7b049fb464aa723c195e8eef2d83fc39f46b9102e34f0884f8176e6512cd1844651c0d26ffd61a427d685065e5f0114b7cf0e0",
+            "id": "component-NumberComponent-2f449d61d6c7a726610fa6f48642317885ec439e1e43c3e9d823cc6cf84fcb1fe78637ea04c8a663b32884c4cb5f96f153184844b5d4aa49daeaf562fc1c47fd",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -37854,7 +37854,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 && 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",
+            "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[readonly]=\"readonly\"\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": [],
@@ -37865,7 +37865,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the arialabel for input\n",
                     "description": "<p>Sets the arialabel for input</p>\n",
-                    "line": 239,
+                    "line": 244,
                     "type": "string",
                     "decorators": []
                 },
@@ -37873,7 +37873,7 @@
                     "name": "decrementLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 246,
+                    "line": 251,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -37884,7 +37884,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled number input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled number input.</p>\n",
-                    "line": 161,
+                    "line": 166,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -37894,7 +37894,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional helper text.\n",
                     "description": "<p>Sets the optional helper text.</p>\n",
-                    "line": 215,
+                    "line": 220,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -37905,7 +37905,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the number component.\n",
                     "description": "<p>The unique id for the number component.</p>\n",
-                    "line": 173,
+                    "line": 178,
                     "type": "string",
                     "decorators": []
                 },
@@ -37913,7 +37913,7 @@
                     "name": "incrementLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 255,
+                    "line": 260,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -37924,7 +37924,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid number component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid number component.</p>\n",
-                    "line": 169,
+                    "line": 174,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -37934,7 +37934,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 219,
+                    "line": 224,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -37944,7 +37944,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the text inside the `label` tag.\n",
                     "description": "<p>Sets the text inside the <code>label</code> tag.</p>\n",
-                    "line": 211,
+                    "line": 216,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -37955,7 +37955,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the max attribute on the `input` element.\n",
                     "description": "<p>Sets the max attribute on the <code>input</code> element.</p>\n",
-                    "line": 207,
+                    "line": 212,
                     "type": "any",
                     "decorators": []
                 },
@@ -37966,7 +37966,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the min attribute on the `input` element.\n",
                     "description": "<p>Sets the min attribute on the <code>input</code> element.</p>\n",
-                    "line": 203,
+                    "line": 208,
                     "type": "any",
                     "decorators": []
                 },
@@ -37977,7 +37977,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n",
                     "description": "<p>Sets the placeholder attribute on the <code>input</code> element.</p>\n",
-                    "line": 177,
+                    "line": 182,
                     "type": "string",
                     "decorators": []
                 },
@@ -37987,17 +37987,28 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIf `step` is a decimal, we may want precision to be set to go around floating point precision.\n",
                     "description": "<p>If <code>step</code> is a decimal, we may want precision to be set to go around floating point precision.</p>\n",
-                    "line": 227,
+                    "line": 232,
                     "type": "number",
                     "decorators": []
                 },
+                {
+                    "name": "readonly",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` for readonly state.\n",
+                    "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
+                    "line": 157,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "required",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReflects the required attribute of the `input` element.\n",
                     "description": "<p>Reflects the required attribute of the <code>input</code> element.</p>\n",
-                    "line": 185,
+                    "line": 190,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38008,7 +38019,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 181,
+                    "line": 186,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -38019,7 +38030,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading number component.\n",
                     "description": "<p>Set to <code>true</code> for a loading number component.</p>\n",
-                    "line": 165,
+                    "line": 170,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38030,7 +38041,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the amount the number controls increment and decrement by.\n",
                     "description": "<p>Sets the amount the number controls increment and decrement by.</p>\n",
-                    "line": 223,
+                    "line": 228,
                     "type": "number",
                     "decorators": []
                 },
@@ -38041,15 +38052,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.",
                     "jsdoctags": [
                         {
-                            "pos": 4425,
-                            "end": 4525,
+                            "pos": 4572,
+                            "end": 4672,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 4426,
-                                "end": 4436,
+                                "pos": 4573,
+                                "end": 4583,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38059,7 +38070,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> number input theme.</p>\n"
                         }
                     ],
-                    "line": 157,
+                    "line": 162,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -38069,7 +38080,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                     "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
-                    "line": 189,
+                    "line": 194,
                     "type": "any",
                     "decorators": []
                 },
@@ -38080,7 +38091,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 231,
+                    "line": 236,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38090,7 +38101,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 235,
+                    "line": 240,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -38103,7 +38114,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs in the input.\n",
                     "description": "<p>Emits event notifying other classes when a change in state occurs in the input.</p>\n",
-                    "line": 243,
+                    "line": 248,
                     "type": "EventEmitter"
                 }
             ],
@@ -38116,7 +38127,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 151,
+                    "line": 152,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -38135,7 +38146,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Variable used for creating unique ids for number input components.</p>\n",
-                    "line": 149,
+                    "line": 150,
                     "rawdescription": "\n\nVariable used for creating unique ids for number input components.\n",
                     "modifierKind": [
                         126
@@ -38149,7 +38160,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when number input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 313,
+                    "line": 318,
                     "rawdescription": "\n\nCalled when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n"
                 },
                 {
@@ -38160,7 +38171,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 318,
+                    "line": 323,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
                 }
             ],
@@ -38171,7 +38182,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 353,
+                    "line": 358,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a class of `NumberChange` to emit the change in the `Number`.\n",
@@ -38183,7 +38194,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 299,
+                    "line": 304,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -38202,7 +38213,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 342,
+                    "line": 347,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38212,7 +38223,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 346,
+                    "line": 351,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38229,7 +38240,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 366,
+                    "line": 371,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -38253,7 +38264,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 334,
+                    "line": 339,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSubtracts `step` to the current `value`.\n",
@@ -38265,7 +38276,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 323,
+                    "line": 328,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds `step` to the current `value`.\n",
@@ -38284,7 +38295,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 361,
+                    "line": 366,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38312,7 +38323,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 286,
+                    "line": 291,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -38345,7 +38356,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 294,
+                    "line": 299,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -38356,8 +38367,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7611,
-                                "end": 7613,
+                                "pos": 7758,
+                                "end": 7760,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38368,8 +38379,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7605,
-                                "end": 7610,
+                                "pos": 7752,
+                                "end": 7757,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38393,7 +38404,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 306,
+                    "line": 311,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the disabled state through the model\n",
@@ -38423,7 +38434,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 279,
+                    "line": 284,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -38434,8 +38445,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7287,
-                                "end": 7292,
+                                "pos": 7434,
+                                "end": 7439,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38446,8 +38457,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7281,
-                                "end": 7286,
+                                "pos": 7428,
+                                "end": 7433,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38467,7 +38478,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 151,
+                    "line": 152,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -38479,7 +38490,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 299
+                    "line": 304
                 }
             ],
             "standalone": false,
@@ -38487,7 +38498,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><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 && 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",
+            "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[readonly]=\"readonly\"\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 * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\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": "",
@@ -38504,7 +38515,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 266,
+                "line": 271,
                 "rawdescription": "\n\nCreates an instance of `Number`.\n",
                 "jsdoctags": [
                     {
@@ -38539,7 +38550,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 189,
+                        "line": 194,
                         "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                         "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
                         "jsdoctags": [
@@ -38558,7 +38569,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 197
+                        "line": 202
                     }
                 },
                 "decrementLabel": {
@@ -38577,7 +38588,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 246,
+                        "line": 251,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -38594,7 +38605,7 @@
                         "name": "decrementLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 250
+                        "line": 255
                     }
                 },
                 "incrementLabel": {
@@ -38613,7 +38624,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 255,
+                        "line": 260,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -38630,7 +38641,7 @@
                         "name": "incrementLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 259
+                        "line": 264
                     }
                 }
             }
@@ -55336,7 +55347,7 @@
         },
         {
             "name": "TableCheckbox",
-            "id": "component-TableCheckbox-adebacfa3e8f5196458b8996cdcfc958307d853b6c97adb1f27890a8bf560702e84f1d124611aaacc9d14421c96848fae282a247154d9c0a0ac216cc75dd7386",
+            "id": "component-TableCheckbox-72b2a2c440b7786653347d7ba6263c33234a7e9f8cacd65a41df61e63248a283460bfdb1c8b973498bd845b799f75296c0f8c3e674fefc9912b373dc8fd96906",
             "file": "src/table/cell/table-checkbox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -55346,7 +55357,7 @@
             "selector": "[cdsTableCheckbox], [ibmTableCheckbox]",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-checkbox\n\t*ngIf=\"!skeleton\"\n\tinline=\"true\"\n\t[name]=\"name\"\n\t[ariaLabel]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t[checked]=\"selected\"\n\t[disabled]=\"disabled\"\n\t(checkedChange)=\"selectedChange.emit()\">\n</cds-checkbox>\n\t",
+            "template": "<cds-checkbox\n\t*ngIf=\"!skeleton\"\n\tinline=\"true\"\n\t[name]=\"name\"\n\t[checked]=\"selected\"\n\t[disabled]=\"disabled\"\n\t(checkedChange)=\"selectedChange.emit()\"\n\t[hideLabel]=\"true\">\n\t\t{{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}}\n</cds-checkbox>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -55355,7 +55366,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 45,
+                    "line": 46,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -55364,7 +55375,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 33,
+                    "line": 34,
                     "type": "string",
                     "decorators": []
                 },
@@ -55372,7 +55383,7 @@
                     "name": "row",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 29,
+                    "line": 30,
                     "type": "TableItem[]",
                     "decorators": []
                 },
@@ -55381,7 +55392,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 31,
+                    "line": 32,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -55391,7 +55402,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n<cds-table [selectionLabelColumn]=\"0\"></cds-table>\n<!-- results in aria-label=\"Select first column value\"\n(where \"first column value\" is the value of the first column in the row -->\n```\n",
                     "description": "<p>Used to populate the row selection checkbox label with a useful value if set.</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-none\">&lt;cds-table [selectionLabelColumn]=&quot;0&quot;&gt;&lt;/cds-table&gt;\n&lt;!-- results in aria-label=&quot;Select first column value&quot;\n(where &quot;first column value&quot; is the value of the first column in the row --&gt;</code></pre></div>",
-                    "line": 63,
+                    "line": 64,
                     "type": "number",
                     "decorators": []
                 },
@@ -55402,7 +55413,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the table rows.\n",
                     "description": "<p>Size of the table rows.</p>\n",
-                    "line": 42,
+                    "line": 43,
                     "type": "TableRowSize",
                     "decorators": []
                 },
@@ -55411,7 +55422,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 65,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -55424,7 +55435,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits if a single row is selected.\n",
                     "description": "<p>Emits if a single row is selected.</p>\n",
-                    "line": 70,
+                    "line": 71,
                     "type": "EventEmitter"
                 }
             ],
@@ -55436,7 +55447,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 83,
+                    "line": 84,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -55453,7 +55464,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 76,
+                    "line": 77,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -55478,7 +55489,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableCheckbox], [ibmTableCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[ariaLabel]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t\t\t[checked]=\"selected\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(checkedChange)=\"selectedChange.emit()\">\n\t\t</cds-checkbox>\n\t`\n})\nexport class TableCheckbox {\n\t@Input() row: TableItem[];\n\n\t@Input() selected = false;\n\n\t@Input() name = \"\";\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@Input()\n\tset label(value: string | Observable<string>) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() selectedChange = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable<string> {\n\t\treturn this._label.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableCheckbox], [ibmTableCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[checked]=\"selected\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(checkedChange)=\"selectedChange.emit()\"\n\t\t\t[hideLabel]=\"true\">\n\t\t\t\t{{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}}\n\t\t</cds-checkbox>\n\t`\n})\nexport class TableCheckbox {\n\t@Input() row: TableItem[];\n\n\t@Input() selected = false;\n\n\t@Input() name = \"\";\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@Input()\n\tset label(value: string | Observable<string>) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() selectedChange = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable<string> {\n\t\treturn this._label.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -55495,7 +55506,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 72,
+                "line": 73,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -55516,7 +55527,7 @@
                         "name": "disabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 35
+                        "line": 36
                     }
                 },
                 "label": {
@@ -55535,7 +55546,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 45,
+                        "line": 46,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55552,7 +55563,7 @@
                         "name": "label",
                         "type": "",
                         "returnType": "",
-                        "line": 49
+                        "line": 50
                     }
                 }
             }
@@ -56911,7 +56922,7 @@
         },
         {
             "name": "TableHeadCheckbox",
-            "id": "component-TableHeadCheckbox-6a34df2c4c51b524b3cdaa4b3150f1056ed7cae9551830dd0f66ce1088b45d4ffc0b867bb3f72f254760bdcff46e60c169bf12dfd110a2d1f712b09fa9ffd79a",
+            "id": "component-TableHeadCheckbox-283d5bf93a45d210a9f83df8ec84f2897344be0a5d2e4800260b8a347666383465b10a63122be2a327a65dbce8dcb7b10ebce7aedcc93f12efe6d966d5d4ec5f",
             "file": "src/table/head/table-head-checkbox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -56923,7 +56934,7 @@
             "styles": [
                 "\n        :host { width: 10px; }\n    "
             ],
-            "template": "<cds-checkbox\n\t*ngIf=\"!skeleton\"\n\tinline=\"true\"\n\t[name]=\"name\"\n\t[checked]=\"checked\"\n\t[indeterminate]=\"indeterminate\"\n\t(checkedChange)=\"change.emit()\"\n\t[ariaLabel]=\"getAriaLabel() | async\">\n</cds-checkbox>\n\t",
+            "template": "<cds-checkbox\n\t*ngIf=\"!skeleton\"\n\tinline=\"true\"\n\t[name]=\"name\"\n\t[checked]=\"checked\"\n\t[indeterminate]=\"indeterminate\"\n\t(checkedChange)=\"change.emit()\"\n\t[hideLabel]=\"true\">\n\t\t{{getAriaLabel() | async}}\n</cds-checkbox>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -56932,7 +56943,7 @@
                     "name": "ariaLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 41,
+                    "line": 42,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56941,7 +56952,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 32,
+                    "line": 33,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56950,7 +56961,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 34,
+                    "line": 35,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56959,7 +56970,7 @@
                     "defaultValue": "`select-all-${TableHeadCheckbox.tableSelectAllCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 38,
+                    "line": 39,
                     "type": "string",
                     "decorators": []
                 },
@@ -56968,7 +56979,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 36,
+                    "line": 37,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -56979,7 +56990,7 @@
                     "defaultValue": "new EventEmitter<void>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 49,
+                    "line": 50,
                     "type": "EventEmitter"
                 }
             ],
@@ -56992,7 +57003,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 51,
+                    "line": 52,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -57011,7 +57022,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 57,
+                    "line": 58,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -57024,7 +57035,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 51,
+                    "line": 52,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -57035,7 +57046,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t(checkedChange)=\"change.emit()\"\n\t\t\t[ariaLabel]=\"getAriaLabel() | async\">\n\t\t</cds-checkbox>\n\t`,\n\tstyles: [`\n        :host { width: 10px; }\n    `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable<string>) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter<void>();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable<string> {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t(checkedChange)=\"change.emit()\"\n\t\t\t[hideLabel]=\"true\">\n\t\t\t\t{{getAriaLabel() | async}}\n\t\t</cds-checkbox>\n\t`,\n\tstyles: [`\n        :host { width: 10px; }\n    `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable<string>) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter<void>();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable<string> {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n        :host { width: 10px; }\n    \n",
@@ -57052,7 +57063,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 53,
+                "line": 54,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -57083,7 +57094,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 41,
+                        "line": 42,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -57100,7 +57111,7 @@
                         "name": "ariaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 45
+                        "line": 46
                     }
                 }
             }
@@ -63013,7 +63024,7 @@
         },
         {
             "name": "Toggle",
-            "id": "component-Toggle-285c272c5140cbed54a9cb12055bd61da9167c4e5c49ada5dade2552747f7c9c0a89d74b7552179f937ccef5ef96625baea6d3ff2bf122a1cded648e74c60ed6",
+            "id": "component-Toggle-630556cb1912c46e615e8220bc9e3bda9fe05619dd4477bf6b06fcba589ef78f8bf4ba33458b21bbaddff3ca38e60dab6272159be15b648e4cb45cbf7bc47686",
             "file": "src/toggle/toggle.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -63039,7 +63050,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to hide the toggle label & set toggle on/off text to label.\n",
                     "description": "<p>Set to <code>true</code> to hide the toggle label &amp; set toggle on/off text to label.</p>\n",
-                    "line": 138,
+                    "line": 144,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -63052,7 +63063,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set as the label of the toggle.\n",
                     "description": "<p>Text that is set as the label of the toggle.</p>\n",
-                    "line": 130,
+                    "line": 136,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -63062,7 +63073,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                     "description": "<p>Text that is set on the left side of the toggle.</p>\n",
-                    "line": 108,
+                    "line": 114,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -63072,7 +63083,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                     "description": "<p>Text that is set on the right side of the toggle.</p>\n",
-                    "line": 120,
+                    "line": 126,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -63083,7 +63094,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the toggle component.\n",
                     "description": "<p>Size of the toggle component.</p>\n",
-                    "line": 134,
+                    "line": 140,
                     "type": "\"sm\" | \"md\"",
                     "decorators": []
                 },
@@ -63092,7 +63103,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 140,
+                    "line": 146,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -63265,7 +63276,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>The unique id allocated to the <code>Toggle</code>.</p>\n",
-                    "line": 154,
+                    "line": 160,
                     "rawdescription": "\n\nThe unique id allocated to the `Toggle`.\n"
                 },
                 {
@@ -63276,7 +63287,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 142,
+                    "line": 148,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -63295,7 +63306,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Variable used for creating unique ids for toggle components.</p>\n",
-                    "line": 102,
+                    "line": 108,
                     "rawdescription": "\n\nVariable used for creating unique ids for toggle components.\n",
                     "modifierKind": [
                         126
@@ -63418,7 +63429,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 195,
+                    "line": 201,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates instance of `ToggleChange` used to propagate the change event.\n",
@@ -63433,7 +63444,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 185,
+                    "line": 191,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -63443,7 +63454,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 177,
+                    "line": 183,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -63453,7 +63464,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 181,
+                    "line": 187,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -63470,7 +63481,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 206,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -63501,7 +63512,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 173,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the toggle input.\n\nex: `this.formGroup.get(\"myToggle\").disable();`\n\n",
@@ -63509,8 +63520,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3980,
-                                "end": 3990,
+                                "pos": 4208,
+                                "end": 4218,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -63521,8 +63532,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3974,
-                                "end": 3979,
+                                "pos": 4202,
+                                "end": 4207,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -63821,7 +63832,7 @@
                     "name": "class.cds--form-item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 147,
+                    "line": 153,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -63830,7 +63841,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 142,
+                    "line": 148,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -63838,7 +63849,7 @@
                     "name": "class.cds--toggle--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 143,
+                    "line": 149,
                     "type": "any",
                     "decorators": []
                 }
@@ -63861,7 +63872,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ToggleModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-toggle [(ngModel)]=&quot;toggleState&quot;&gt;Toggle&lt;/cds-toggle&gt;</code></pre></div><p><a href=\"../../?path=/story/components-toggle--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ToggleModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n```\n\n[See demo](../../?path=/story/components-toggle--basic)\n",
             "type": "component",
-            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\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</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").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\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n */\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\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</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").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\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -63884,7 +63895,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 157,
+                "line": 163,
                 "rawdescription": "\n\nCreates an instance of Toggle.\n",
                 "jsdoctags": [
                     {
@@ -63927,7 +63938,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 108,
+                        "line": 114,
                         "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                         "description": "<p>Text that is set on the left side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -63946,7 +63957,7 @@
                         "name": "offText",
                         "type": "",
                         "returnType": "",
-                        "line": 112
+                        "line": 118
                     }
                 },
                 "onText": {
@@ -63965,7 +63976,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 120,
+                        "line": 126,
                         "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                         "description": "<p>Text that is set on the right side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -63984,7 +63995,7 @@
                         "name": "onText",
                         "type": "",
                         "returnType": "",
-                        "line": 124
+                        "line": 130
                     }
                 },
                 "disabledClass": {
@@ -63993,7 +64004,7 @@
                         "name": "disabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 143
+                        "line": 149
                     }
                 },
                 "formItem": {
@@ -64002,7 +64013,7 @@
                         "name": "formItem",
                         "type": "",
                         "returnType": "",
-                        "line": 147
+                        "line": 153
                     }
                 }
             }
@@ -74007,7 +74018,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\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[size]=\"size\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\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[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78987,7 +78998,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\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[size]=\"size\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\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[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
                 }
             ],
             "src/pagination/pagination-nav.stories.ts": [
@@ -85940,8 +85951,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "NumberComponent",
-                "coveragePercent": 73,
-                "coverageCount": "31/42",
+                "coveragePercent": 74,
+                "coverageCount": "32/43",
                 "status": "good"
             },
             {