npm - carbon-components-angular - Versions diffs - 5.20.1 → 5.20.3 - Mend

carbon-components-angular 5.20.1 → 5.20.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/docs/documentation.json CHANGED Viewed

@@ -45384,7 +45384,7 @@
         },
         {
             "name": "Search",
-            "id": "component-Search-6e0680312453431035b27e4e74dff58ddc43e0d0836caf1a81334e2a06b202e3600c87e34fc20ab6591316236b0f64c61850b1a1cc2894eb5e2661da979a417d",
+            "id": "component-Search-8499a76483757feb0524f273b8757af7429d3a794a471c9e4d7fea429ae77a3cc2d0f6d07535fa2fb4b43012df7906ee6d702f9b6b2b3d4131b3a184b66263fe",
             "file": "src/search/search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -45411,7 +45411,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> to expand the toolbar search component.</p>\n",
-                    "line": 73,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45421,7 +45421,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n",
                     "description": "<p>Sets the aria label on the <code>div</code> element with the <code>search</code> role.</p>\n",
-                    "line": 118,
+                    "line": 120,
                     "type": "string",
                     "decorators": []
                 },
@@ -45432,7 +45432,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n",
                     "description": "<p>Sets the autocomplete attribute on the <code>input</code> element.\nFor reference: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values</a></p>\n",
-                    "line": 98,
+                    "line": 100,
                     "type": "string",
                     "decorators": []
                 },
@@ -45443,7 +45443,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n",
                     "description": "<p>Used to set the <code>title</code> attribute of the clear button.</p>\n",
-                    "line": 110,
+                    "line": 112,
                     "type": "any",
                     "decorators": []
                 },
@@ -45454,7 +45454,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled search input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled search input.</p>\n",
-                    "line": 56,
+                    "line": 58,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45465,7 +45465,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n",
                     "description": "<p>Set to <code>true</code> to make the search component expandable.\n<code>expandable</code> would override <code>toolbar</code> property behaviours.</p>\n",
-                    "line": 65,
+                    "line": 67,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45476,7 +45476,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the search component.\n",
                     "description": "<p>The unique id for the search component.</p>\n",
-                    "line": 85,
+                    "line": 87,
                     "type": "string",
                     "decorators": []
                 },
@@ -45487,7 +45487,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": 102,
+                    "line": 104,
                     "type": "any",
                     "decorators": []
                 },
@@ -45497,7 +45497,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the name attribute on the `input` element.\n",
                     "description": "<p>Sets the name attribute on the <code>input</code> element.</p>\n",
-                    "line": 81,
+                    "line": 83,
                     "type": "string",
                     "decorators": []
                 },
@@ -45508,7 +45508,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": 106,
+                    "line": 108,
                     "type": "any",
                     "decorators": []
                 },
@@ -45518,7 +45518,7 @@
                     "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": 89,
+                    "line": 91,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45529,7 +45529,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle for the search trigger\n",
                     "description": "<p>Title for the search trigger</p>\n",
-                    "line": 114,
+                    "line": 116,
                     "type": "string",
                     "decorators": []
                 },
@@ -45540,7 +45540,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the search field.\n",
                     "description": "<p>Size of the search field.</p>\n",
-                    "line": 51,
+                    "line": 53,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -45551,7 +45551,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading search component.\n",
                     "description": "<p>Set to <code>true</code> for a loading search component.</p>\n",
-                    "line": 69,
+                    "line": 71,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45562,7 +45562,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n",
                     "description": "<p>Specifies whether the search component is used in the table toolbar.</p>\n",
-                    "line": 77,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45573,15 +45573,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.",
                     "jsdoctags": [
                         {
-                            "pos": 918,
-                            "end": 1012,
+                            "pos": 921,
+                            "end": 1015,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 919,
-                                "end": 929,
+                                "pos": 922,
+                                "end": 932,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -45591,7 +45591,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> search theme.</p>\n"
                         }
                     ],
-                    "line": 46,
+                    "line": 48,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -45602,7 +45602,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> for a toolbar search component.</p>\n",
-                    "line": 60,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -45613,7 +45613,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": 93,
+                    "line": 95,
                     "type": "string",
                     "decorators": []
                 }
@@ -45626,7 +45626,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the clear button is clicked.\n",
                     "description": "<p>Emits an event when the clear button is clicked.</p>\n",
-                    "line": 127,
+                    "line": 129,
                     "type": "EventEmitter"
                 },
                 {
@@ -45634,7 +45634,7 @@
                     "defaultValue": "new EventEmitter<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 125,
                     "type": "EventEmitter"
                 },
                 {
@@ -45644,7 +45644,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event on enter.\n",
                     "description": "<p>Emits an event on enter.</p>\n",
-                    "line": 131,
+                    "line": 133,
                     "type": "EventEmitter"
                 },
                 {
@@ -45654,7 +45654,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when value is changed.\n",
                     "description": "<p>Emits an event when value is changed.</p>\n",
-                    "line": 122,
+                    "line": 124,
                     "type": "EventEmitter"
                 }
             ],
@@ -45666,7 +45666,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 133,
+                    "line": 135,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -45685,7 +45685,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when search input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 174,
+                    "line": 176,
                     "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n"
                 },
                 {
@@ -45696,7 +45696,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 179,
+                    "line": 181,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
                 },
                 {
@@ -45721,7 +45721,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 203,
+                    "line": 205,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when clear button is clicked.\n",
@@ -45740,7 +45740,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 266,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
@@ -45779,7 +45779,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
@@ -45811,7 +45811,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 209,
+                    "line": 211,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -45828,7 +45828,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 244,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -45865,7 +45865,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 243,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -45902,7 +45902,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 221,
+                    "line": 223,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -45932,7 +45932,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 198,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled on enter.\n",
@@ -45951,7 +45951,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 185,
+                    "line": 187,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when text is written in the input.\n",
@@ -45959,8 +45959,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4393,
-                                "end": 4399,
+                                "pos": 4396,
+                                "end": 4402,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -45971,8 +45971,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4387,
-                                "end": 4392,
+                                "pos": 4390,
+                                "end": 4395,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -45989,7 +45989,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 216,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46006,7 +46006,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 159,
+                    "line": 161,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -46039,7 +46039,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 167,
+                    "line": 169,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -46050,8 +46050,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3939,
-                                "end": 3941,
+                                "pos": 3942,
+                                "end": 3944,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -46062,8 +46062,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3933,
-                                "end": 3938,
+                                "pos": 3936,
+                                "end": 3941,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -46087,7 +46087,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -46098,8 +46098,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3615,
-                                "end": 3620,
+                                "pos": 3618,
+                                "end": 3623,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -46110,8 +46110,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3609,
-                                "end": 3614,
+                                "pos": 3612,
+                                "end": 3617,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -46153,7 +46153,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
                     "description": "<p>Called when IME composition finishes.</p>\n",
-                    "line": 266
+                    "line": 277
                 },
                 {
                     "name": "compositionstart",
@@ -46172,7 +46172,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
                     "description": "<p>Called when using IME composition.</p>\n",
-                    "line": 258
+                    "line": 269
                 },
                 {
                     "name": "focusin",
@@ -46189,7 +46189,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 244
+                    "line": 255
                 },
                 {
                     "name": "focusout",
@@ -46206,7 +46206,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 232
+                    "line": 243
                 },
                 {
                     "name": "keydown",
@@ -46223,7 +46223,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 221
+                    "line": 223
                 }
             ],
             "standalone": false,
@@ -46231,7 +46231,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SearchModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-search--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { SearchModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-search--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput,\n\tHostBinding,\n\tElementRef,\n\tHostListener,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SearchModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-search--basic)\n */\n@Component({\n\tselector: \"cds-search, ibm-search\",\n\ttemplateUrl: \"search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Search,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Search implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for search components.\n\t */\n\tstatic searchCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") get containerClass() { return !(this.toolbar || this.expandable); }\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` search theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Size of the search field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` for a disabled search input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a toolbar search component.\n\t */\n\t@Input() toolbar = false;\n\t/**\n\t * Set to `true` to make the search component expandable.\n\t * `expandable` would override `toolbar` property behaviours.\n\t */\n\t@Input() expandable = false;\n\t/**\n\t * Set to `true` for a loading search component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to expand the toolbar search component.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Specifies whether the search component is used in the table toolbar.\n\t */\n\t@Input() tableSearch = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the search component.\n\t */\n\t@Input() id = `search-${Search.searchCount}`;\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() value = \"\";\n\t/**\n\t * Sets the autocomplete attribute on the `input` element.\n\t * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n\t */\n\t@Input() autocomplete = \"on\";\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label = this.i18n.get().SEARCH.LABEL;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;\n\t/**\n\t * Used to set the `title` attribute of the clear button.\n\t */\n\t@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;\n\t/**\n\t * Title for the search trigger\n\t */\n\t@Input() searchTitle = \"\";\n\t/**\n\t * Sets the aria label on the `div` element with the `search` role.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits an event when value is changed.\n\t */\n\t@Output() valueChange = new EventEmitter<string>();\n\t@Output() open = new EventEmitter<boolean>();\n\t/**\n\t * Emits an event when the clear button is clicked.\n\t */\n\t@Output() clear = new EventEmitter();\n\t/**\n\t * Emits an event on enter.\n\t */\n\t@Output() search = new EventEmitter<string>();\n\n\t@ViewChild(\"input\") inputRef: ElementRef;\n\n\t/**\n\t * Sets `true` when composing text via IME.\n\t */\n\tprotected isComposing = false;\n\n\t/**\n\t * Creates an instance of `Search`.\n\t * @param i18n The i18n translations.\n\t */\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tSearch.searchCount++;\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 search input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when search 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 * Called when text is written in the input.\n\t * @param search The input text.\n\t */\n\tonSearch(search: string) {\n\t\tif (this.isComposing) { // check for IME use\n\t\t\treturn;\n\t\t}\n\t\tthis.value = search;\n\t\tthis.doValueChange();\n\t}\n\n\t/**\n\t * Called on enter.\n\t */\n\tonEnter() {\n\t\tthis.search.emit(this.value);\n\t}\n\n\t/**\n\t * Called when clear button is clicked.\n\t */\n\tclearSearch(): void {\n\t\tthis.value = \"\";\n\t\tthis.clear.emit();\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tdoValueChange() {\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\topenSearch() {\n\t\tthis.active = true;\n\t\tthis.open.emit(this.active);\n\t\tsetTimeout(() => this.inputRef.nativeElement.focus());\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyDown(event: KeyboardEvent) {\n\t\tif (this.toolbar || this.expandable) {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tthis.active = false;\n\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tthis.onTouched();\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef &&\n\t\t\tthis.inputRef.nativeElement.value === \"\" &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget)) {\n\t\t\tthis.active = false;\n\t\t\tthis.open.emit(this.active);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tfocusIn(event) {\n\t\tthis.onTouched();\n\t\t// set input focus if search icon get focus from tab key press event.\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef && !event.relatedTarget &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget) ) {\n\t\t\tthis.openSearch();\n\t\t}\n\t}\n\n\t/**\n\t * Called when using IME composition.\n\t */\n\t@HostListener(\"compositionstart\", [\"$event\"])\n\tcompositionStart(event) {\n\t\tthis.isComposing = true;\n\t}\n\n\t/**\n\t * Called when IME composition finishes.\n\t */\n\t@HostListener(\"compositionend\", [\"$event\"])\n\tcompositionEnd(event) {\n\t\tthis.isComposing = false;\n\t\tthis.onSearch(this.value + event.data);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput,\n\tHostBinding,\n\tElementRef,\n\tHostListener,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SearchModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-search--basic)\n */\n@Component({\n\tselector: \"cds-search, ibm-search\",\n\ttemplateUrl: \"search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Search,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Search implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for search components.\n\t */\n\tstatic searchCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") get containerClass() {\n\t\treturn !(this.toolbar || this.expandable);\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` search theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Size of the search field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` for a disabled search input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a toolbar search component.\n\t */\n\t@Input() toolbar = false;\n\t/**\n\t * Set to `true` to make the search component expandable.\n\t * `expandable` would override `toolbar` property behaviours.\n\t */\n\t@Input() expandable = false;\n\t/**\n\t * Set to `true` for a loading search component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to expand the toolbar search component.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Specifies whether the search component is used in the table toolbar.\n\t */\n\t@Input() tableSearch = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the search component.\n\t */\n\t@Input() id = `search-${Search.searchCount}`;\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() value = \"\";\n\t/**\n\t * Sets the autocomplete attribute on the `input` element.\n\t * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n\t */\n\t@Input() autocomplete = \"on\";\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label = this.i18n.get().SEARCH.LABEL;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;\n\t/**\n\t * Used to set the `title` attribute of the clear button.\n\t */\n\t@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;\n\t/**\n\t * Title for the search trigger\n\t */\n\t@Input() searchTitle = \"\";\n\t/**\n\t * Sets the aria label on the `div` element with the `search` role.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits an event when value is changed.\n\t */\n\t@Output() valueChange = new EventEmitter<string>();\n\t@Output() open = new EventEmitter<boolean>();\n\t/**\n\t * Emits an event when the clear button is clicked.\n\t */\n\t@Output() clear = new EventEmitter();\n\t/**\n\t * Emits an event on enter.\n\t */\n\t@Output() search = new EventEmitter<string>();\n\n\t@ViewChild(\"input\") inputRef: ElementRef;\n\n\t/**\n\t * Sets `true` when composing text via IME.\n\t */\n\tprotected isComposing = false;\n\n\t/**\n\t * Creates an instance of `Search`.\n\t * @param i18n The i18n translations.\n\t */\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tSearch.searchCount++;\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 search input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when search 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 * Called when text is written in the input.\n\t * @param search The input text.\n\t */\n\tonSearch(search: string) {\n\t\tif (this.isComposing) { // check for IME use\n\t\t\treturn;\n\t\t}\n\t\tthis.value = search;\n\t\tthis.doValueChange();\n\t}\n\n\t/**\n\t * Called on enter.\n\t */\n\tonEnter() {\n\t\tthis.search.emit(this.value);\n\t}\n\n\t/**\n\t * Called when clear button is clicked.\n\t */\n\tclearSearch(): void {\n\t\tthis.value = \"\";\n\t\tthis.clear.emit();\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tdoValueChange() {\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\topenSearch() {\n\t\tthis.active = true;\n\t\tthis.open.emit(this.active);\n\t\tsetTimeout(() => this.inputRef.nativeElement.focus());\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyDown(event: KeyboardEvent) {\n\t\tif (this.toolbar || this.expandable) {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (this.value === \"\") {\n\t\t\t\t\tthis.active = false;\n\t\t\t\t\tthis.open.emit(this.active);\n\t\t\t\t}\n\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Escape\") {\n\t\t\tif (this.value !== \"\") {\n\t\t\t\tthis.clearSearch();\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tthis.onTouched();\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef &&\n\t\t\tthis.inputRef.nativeElement.value === \"\" &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget)) {\n\t\t\tthis.active = false;\n\t\t\tthis.open.emit(this.active);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tfocusIn(event) {\n\t\tthis.onTouched();\n\t\t// set input focus if search icon get focus from tab key press event.\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef && !event.relatedTarget &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget) ) {\n\t\t\tthis.openSearch();\n\t\t}\n\t}\n\n\t/**\n\t * Called when using IME composition.\n\t */\n\t@HostListener(\"compositionstart\", [\"$event\"])\n\tcompositionStart(event) {\n\t\tthis.isComposing = true;\n\t}\n\n\t/**\n\t * Called when IME composition finishes.\n\t */\n\t@HostListener(\"compositionend\", [\"$event\"])\n\tcompositionEnd(event) {\n\t\tthis.isComposing = false;\n\t\tthis.onSearch(this.value + event.data);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -46254,7 +46254,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 138,
+                "line": 140,
                 "rawdescription": "\n\nCreates an instance of `Search`.\n",
                 "jsdoctags": [
                     {
@@ -46268,8 +46268,8 @@
                     },
                     {
                         "name": {
-                            "pos": 3416,
-                            "end": 3420,
+                            "pos": 3419,
+                            "end": 3423,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -46280,8 +46280,8 @@
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
-                            "pos": 3410,
-                            "end": 3415,
+                            "pos": 3413,
+                            "end": 3418,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -48085,7 +48085,7 @@
         },
         {
             "name": "Slider",
-            "id": "component-Slider-1b6ab75b21e4c0ff0088981090be0061d0fed27ceda0c8c99c1c2ec7bf496b9c45c6b9facb32e825b7d55c64d94dd441b171c4489a819b52947fb395d591627e",
+            "id": "component-Slider-dca469a8e54737811fa57b45f91389013897ba46fc691d12fe2a39b943d18681e35e894c948a39ab247a06ae54f3a37da00bb679681dea950c99cef2340686dc",
             "file": "src/slider/slider.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48099,7 +48099,7 @@
             "selector": "cds-slider, ibm-slider",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'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 class=\"cds--slider-container\">\n\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--slider\"\n\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t<div\n\t\t\t\t\t#thumbs\n\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(value) * 100 + '%'}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t<div\n\t\t\t\t\t#thumbs\n\t\t\t\t\t*ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\"\n\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<div\n\t\t\t\t#track\n\t\t\t\tclass=\"cds--slider__track\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t#filledTrack\n\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#range\n\t\t\t\taria-label=\"slider\"\n\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\ttype=\"range\"\n\t\t\t\t[step]=\"step\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[value]=\"value.toString()\">\n\t\t</div>\n\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t</label>\n\t\t<ng-content select=\"input\"></ng-content>\n\t</div>\n</ng-container>\n\n<ng-template #skeletonTemplate>\n\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t<div class=\"cds--slider\">\n\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t</div>\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t</div>\n</ng-template>\n\t",
+            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'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 class=\"cds--slider-container\">\n\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--slider\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t[ngStyle]=\"{insetInlineStart: getFractionComplete(value) * 100 + '%'}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\trole=\"slider\"\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\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t [ngStyle]=\"{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t *ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<div\n\t\t\t\t#track\n\t\t\t\tclass=\"cds--slider__track\">\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t#filledTrack\n\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#range\n\t\t\t\taria-label=\"slider\"\n\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\ttype=\"range\"\n\t\t\t\t[step]=\"step\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[value]=\"value.toString()\">\n\t\t</div>\n\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t</label>\n\t\t<ng-content select=\"input\"></ng-content>\n\t</div>\n</ng-container>\n\n<ng-template #skeletonTemplate>\n\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t<div class=\"cds--slider\">\n\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t</div>\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t</div>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -48111,7 +48111,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nSet to `true` for a slider without arrow key interactions.",
                     "description": "<p>Set to <code>true</code> for a slider without arrow key interactions.</p>\n",
-                    "line": 261,
+                    "line": 265,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48121,7 +48121,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nDisables the range visually and functionally",
                     "description": "<p>Disables the range visually and functionally</p>\n",
-                    "line": 263,
+                    "line": 267,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48132,7 +48132,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively",
                     "description": "<p>Base ID for the slider. The min and max labels get IDs <code>${this.id}-bottom-range</code> and <code>${this.id}-top-range</code> respectively</p>\n",
-                    "line": 253,
+                    "line": 257,
                     "type": "string",
                     "decorators": []
                 },
@@ -48142,7 +48142,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nSets the text inside the `label` tag",
                     "description": "<p>Sets the text inside the <code>label</code> tag</p>\n",
-                    "line": 259,
+                    "line": 263,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48152,7 +48152,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nThe upper bound of our range",
                     "description": "<p>The upper bound of our range</p>\n",
-                    "line": 171,
+                    "line": 175,
                     "type": "number",
                     "decorators": []
                 },
@@ -48162,7 +48162,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nThe lower bound of our range",
                     "description": "<p>The lower bound of our range</p>\n",
-                    "line": 161,
+                    "line": 165,
                     "type": "number",
                     "decorators": []
                 },
@@ -48173,7 +48173,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values",
                     "description": "<p>Value used to &quot;multiply&quot; the <code>step</code> when using arrow keys to select values</p>\n",
-                    "line": 255,
+                    "line": 259,
                     "type": "number",
                     "decorators": []
                 },
@@ -48184,7 +48184,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nSet to `true` for a loading slider",
                     "description": "<p>Set to <code>true</code> for a loading slider</p>\n",
-                    "line": 257,
+                    "line": 261,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48195,7 +48195,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nThe interval for our range",
                     "description": "<p>The interval for our range</p>\n",
-                    "line": 182,
+                    "line": 186,
                     "type": "number",
                     "decorators": []
                 },
@@ -48205,7 +48205,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nSet the initial value. Available for two way binding",
                     "description": "<p>Set the initial value. Available for two way binding</p>\n",
-                    "line": 184,
+                    "line": 188,
                     "type": "any",
                     "decorators": []
                 }
@@ -48218,7 +48218,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\nEmits every time a new value is selected",
                     "description": "<p>Emits every time a new value is selected</p>\n",
-                    "line": 276,
+                    "line": 280,
                     "type": "EventEmitter<number | []>"
                 }
             ],
@@ -48231,7 +48231,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 285,
+                    "line": 289,
                     "modifierKind": [
                         123
                     ]
@@ -48243,7 +48243,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 281,
+                    "line": 285,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -48262,7 +48262,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 287,
+                    "line": 291,
                     "modifierKind": [
                         123
                     ]
@@ -48275,7 +48275,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 277,
+                    "line": 281,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -48294,7 +48294,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 284,
+                    "line": 288,
                     "modifierKind": [
                         123
                     ]
@@ -48307,7 +48307,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Callback to notify the model when our input has been touched</p>\n",
-                    "line": 347,
+                    "line": 351,
                     "rawdescription": "\nCallback to notify the model when our input has been touched"
                 },
                 {
@@ -48318,7 +48318,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Send changes back to the model</p>\n",
-                    "line": 339,
+                    "line": 343,
                     "rawdescription": "\nSend changes back to the model"
                 },
                 {
@@ -48328,7 +48328,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 282,
+                    "line": 286,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -48346,7 +48346,7 @@
                     "type": "QueryList<ElementRef>",
                     "optional": false,
                     "description": "",
-                    "line": 278,
+                    "line": 282,
                     "decorators": [
                         {
                             "name": "ViewChildren",
@@ -48365,7 +48365,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 286,
+                    "line": 290,
                     "modifierKind": [
                         123
                     ]
@@ -48377,7 +48377,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 280,
+                    "line": 284,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -48403,7 +48403,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 388,
+                    "line": 392,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with",
@@ -48433,7 +48433,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 381,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nConverts a given px value to a \"real\" value in our range",
@@ -48471,7 +48471,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 421,
+                    "line": 425,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
@@ -48479,8 +48479,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 12008,
-                                "end": 12018,
+                                "pos": 12171,
+                                "end": 12181,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48492,8 +48492,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "1",
                             "tagName": {
-                                "pos": 11999,
-                                "end": 12007,
+                                "pos": 12162,
+                                "end": 12170,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48527,7 +48527,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 362,
+                    "line": 366,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n",
@@ -48565,7 +48565,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 411,
+                    "line": 415,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
@@ -48573,8 +48573,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11653,
-                                "end": 11663,
+                                "pos": 11816,
+                                "end": 11826,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48586,8 +48586,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "1",
                             "tagName": {
-                                "pos": 11644,
-                                "end": 11652,
+                                "pos": 11807,
+                                "end": 11815,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48614,7 +48614,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 429,
+                    "line": 433,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetermines if the slider is in range mode.\n",
@@ -48633,7 +48633,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 531,
+                    "line": 548,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -48670,7 +48670,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 444,
+                    "line": 448,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nChange handler for the optional input",
@@ -48709,11 +48709,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 450,
+                    "line": 457,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\nHandles clicks on the range track, and setting the value to it's \"real\" equivalent",
-                    "description": "<p>Handles clicks on the range track, and setting the value to it&#39;s &quot;real&quot; equivalent</p>\n",
+                    "rawdescription": "\n\nHandles clicks on the slider, and setting the value to it's \"real\" equivalent.\nWill assign the value to the closest thumb if in range mode.\n",
+                    "description": "<p>Handles clicks on the slider, and setting the value to it&#39;s &quot;real&quot; equivalent.\nWill assign the value to the closest thumb if in range mode.</p>\n",
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -48738,7 +48738,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 458,
+                    "line": 475,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nFocus handler for the optional input",
@@ -48774,7 +48774,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 515,
+                    "line": 532,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n",
@@ -48821,7 +48821,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 497,
+                    "line": 514,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEnables the `onMouseMove` handler\n\n",
@@ -48861,7 +48861,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 463,
+                    "line": 480,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement",
@@ -48884,7 +48884,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 506,
+                    "line": 523,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nDisables the `onMouseMove` handler",
@@ -48903,7 +48903,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 342,
+                    "line": 346,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`",
@@ -48933,7 +48933,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 350,
+                    "line": 354,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nRegister a callback to notify when our input has been touched",
@@ -48963,7 +48963,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 372,
+                    "line": 376,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nHelper function to return the CSS transform `scaleX` function",
@@ -48999,7 +48999,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 334,
+                    "line": 338,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -49029,7 +49029,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 437,
+                    "line": 441,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n",
@@ -49048,7 +49048,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 355,
+                    "line": 359,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nReceives a value from the model",
@@ -49074,7 +49074,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 277,
+                    "line": 281,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -49085,7 +49085,7 @@
             "description": "<p>Used to select from ranges of values. <a href=\"https://www.carbondesignsystem.com/components/slider/usage\">See here</a> for usage information.</p>\n<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SkeletonModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>The simplest possible slider usage looks something like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-slider&gt;&lt;/cds-slider&gt;</code></pre></div><p>That will render a slider without labels or alternative value input. Labels can be provided by\nelements with <code>[minLabel]</code> and <code>[maxLabel]</code> attributes, and an <code>input</code> (may use the <code>ibmInput</code> directive) can be supplied\nfor use as an alternative value field.</p>\n<p>ex:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;!-- Full example --&gt;\n&lt;cds-slider&gt;\n        &lt;span minLabel&gt;0GB&lt;/span&gt;\n        &lt;span maxLabel&gt;100GB&lt;/span&gt;\n        &lt;input/&gt;\n&lt;/cds-slider&gt;\n\n&lt;!-- with just an input --&gt;\n&lt;cds-slider&gt;\n        &lt;input/&gt;\n&lt;/cds-slider&gt;\n\n&lt;!-- with just one label --&gt;\n&lt;cds-slider&gt;\n        &lt;span maxLabel&gt;Maximum&lt;/span&gt;\n&lt;/cds-slider&gt;</code></pre></div><p>Slider supports <code>NgModel</code> by default, as well as two way binding to the <code>value</code> input.</p>\n<p><a href=\"../../?path=/story/components-slider--advanced\">See demo</a></p>\n",
             "rawdescription": "\n\nUsed to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n\nGet started with importing the module:\n\n```typescript\nimport { SkeletonModule } from 'carbon-components-angular';\n```\n\nThe simplest possible slider usage looks something like:\n\n```html\n\t<cds-slider></cds-slider>\n```\n\nThat will render a slider without labels or alternative value input. Labels can be provided by\nelements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\nfor use as an alternative value field.\n\nex:\n\n```html\n<!-- Full example -->\n<cds-slider>\n\t\t<span minLabel>0GB</span>\n\t\t<span maxLabel>100GB</span>\n\t\t<input/>\n</cds-slider>\n\n<!-- with just an input -->\n<cds-slider>\n\t\t<input/>\n</cds-slider>\n\n<!-- with just one label -->\n<cds-slider>\n\t\t<span maxLabel>Maximum</span>\n</cds-slider>\n```\n\nSlider supports `NgModel` by default, as well as two way binding to the `value` input.\n\n[See demo](../../?path=/story/components-slider--advanced)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tViewChildren,\n\tQueryList,\n\tChangeDetectorRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { SkeletonModule } from 'carbon-components-angular';\n * ```\n *\n * The simplest possible slider usage looks something like:\n *\n * ```html\n *\t<cds-slider></cds-slider>\n * ```\n *\n * That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n *\n * ex:\n *\n * ```html\n * <!-- Full example -->\n * <cds-slider>\n *\t\t<span minLabel>0GB</span>\n *\t\t<span maxLabel>100GB</span>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just an input -->\n * <cds-slider>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just one label -->\n * <cds-slider>\n *\t\t<span maxLabel>Maximum</span>\n * </cds-slider>\n * ```\n *\n * Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n *\n * [See demo](../../?path=/story/components-slider--advanced)\n */\n@Component({\n\tselector: \"cds-slider, ibm-slider\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\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]=\"{'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 class=\"cds--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--slider\"\n\t\t\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(value) * 100 + '%'}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t*ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\"\n\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"cds--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#filledTrack\n\t\t\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t\t<div class=\"cds--slider\">\n\t\t\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, ControlValueAccessor {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/** The lower bound of our range */\n\t@Input() set min(v) {\n\t\tif (!v) { return; }\n\t\tthis._min = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\tget min() {\n\t\treturn this._min;\n\t}\n\t/** The upper bound of our range */\n\t@Input() set max(v) {\n\t\tif (!v) { return; }\n\t\tthis._max = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\n\tget max() {\n\t\treturn this._max;\n\t}\n\t/** The interval for our range */\n\t@Input() step = 1;\n\t/** Set the initial value. Available for two way binding */\n\t@Input() set value(v) {\n\t\tif (!v) {\n\t\t\tv = [this.min];\n\t\t}\n\n\t\tif (typeof v === \"number\" || typeof v === \"string\") {\n\t\t\tv = [Number(v)];\n\t\t}\n\n\t\tif (v[0] < this.min) {\n\t\t\tv[0] = this.min;\n\t\t}\n\n\t\tif (v[0] > this.max) {\n\t\t\tv[0] = this.max;\n\t\t}\n\n\t\tif (this.isRange()) {\n\t\t\tif (this._previousValue[0] !== v[0]) { // left moved\n\t\t\t\tif (v[0] > v[1] - this.step) {\n\t\t\t\t\t// stop the left handle if surpassing the right one\n\t\t\t\t\tv[0] = v[1] - this.step;\n\t\t\t\t} else if (v[0] > this.max) {\n\t\t\t\t\tv[0] = this.max;\n\t\t\t\t} else if (v[0] < this.min) {\n\t\t\t\t\tv[0] = this.min;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this._previousValue[1] !== v[1]) { // right moved\n\t\t\t\tif (v[1] > this.max) {\n\t\t\t\t\tv[1] = this.max;\n\t\t\t\t} else if (v[1] < this._value[0] + this.step) {\n\t\t\t\t\t// stop the right handle if surpassing the left one\n\t\t\t\t\tv[1] = this._value[0] + this.step;\n\t\t\t\t} else if (v[1] < this.min) {\n\t\t\t\t\tv[1] = this.min;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._previousValue = [...this._value]; // store a copy, enable detection which handle moved\n\t\tthis._value = [...v]; // triggers change detection when ngModel value is an array (for range)\n\n\t\tif (this.isRange() && this.filledTrack) {\n\t\t\tthis.updateTrackRangeWidth();\n\t\t} else if (this.filledTrack) {\n\t\t\tthis.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;\n\t\t}\n\n\t\tif (this.inputs && this.inputs.length) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.value = this._value[index].toString();\n\t\t\t});\n\t\t}\n\n\t\tconst valueToEmit = this.isRange() ? v : v[0];\n\t\tthis.propagateChange(valueToEmit);\n\t\tthis.valueChange.emit(valueToEmit);\n\t}\n\n\tget value() {\n\t\tif (this.isRange()) {\n\t\t\treturn this._value;\n\t\t}\n\t\treturn this._value[0];\n\t}\n\n\t/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */\n\t@Input() id = `slider-${Slider.count++}`;\n\t/** Value used to \"multiply\" the `step` when using arrow keys to select values */\n\t@Input() shiftMultiplier = 4;\n\t/** Set to `true` for a loading slider */\n\t@Input() skeleton = false;\n\t/** Sets the text inside the `label` tag */\n\t@Input() label: string | TemplateRef<any>;\n\t/** Set to `true` for a slider without arrow key interactions. */\n\t@Input() disableArrowKeys = false;\n\t/** Disables the range visually and functionally */\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.disabled = v);\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/** Emits every time a new value is selected */\n\t@Output() valueChange: EventEmitter<number | number[]> = new EventEmitter();\n\t@HostBinding(\"class.cds--form-item\") hostClass = true;\n\t@ViewChildren(\"thumbs\") thumbs: QueryList<ElementRef>;\n\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"filledTrack\") filledTrack: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic labelId = `${this.id}-label`;\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\tpublic fractionComplete = 0;\n\n\tprotected isMouseDown = false;\n\tprotected inputs: HTMLInputElement[];\n\tprotected _min = 0;\n\tprotected _max = 100;\n\tprotected _value = [this.min];\n\tprotected _previousValue = [this.min];\n\tprotected _disabled = false;\n\tprotected _focusedThumbIndex = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected eventService: EventService,\n\t\tprivate changeDetection: ChangeDetectorRef\n\t) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventService.onDocument(\"mousemove\", this.onMouseMove.bind(this));\n\t\tthis.eventService.onDocument(\"mouseup\", this.onMouseUp.bind(this));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.changeDetection.detectChanges();\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.inputs = this.getInputs();\n\t\tif (this.inputs && this.inputs.length > 0) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.type = \"number\";\n\t\t\t\tinput.classList.add(\"cds--slider-text-input\");\n\t\t\t\tinput.classList.add(\"cds--text-input\");\n\t\t\t\tinput.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\n\t\t\t\tinput.value = index < this._value.length ? this._value[index].toString() : this.max.toString();\n\t\t\t\t// bind events on our optional input\n\t\t\t\tthis.eventService.on(input, \"change\", event => this.onChange(event, index));\n\n\t\t\t\tif (index === 0) {\n\t\t\t\t\tthis.eventService.on(input, \"focus\", this.onFocus.bind(this));\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\ttrackThumbsBy(index: number, item: any) {\n\t\treturn index;\n\t}\n\n\t/** Send changes back to the model */\n\tpropagateChange = (_: any) => { };\n\n\t/** Register a change propagation function for `ControlValueAccessor` */\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/** Callback to notify the model when our input has been touched */\n\tonTouched: () => any = () => { };\n\n\t/** Register a callback to notify when our input has been touched */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** Receives a value from the model */\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/**\n\t * Returns the amount of \"completeness\" of a value as a fraction of the total track width\n\t */\n\tgetFractionComplete(value: number) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.convertToPx(value) / trackWidth;\n\t}\n\n\t/** Helper function to return the CSS transform `scaleX` function */\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/** Converts a given px value to a \"real\" value in our range */\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range * unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with */\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// account for value shifting by subtracting min from value and max\n\t\treturn Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));\n\t}\n\n\t/**\n\t * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tincrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] + (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tdecrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] - (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Determines if the slider is in range mode.\n\t */\n\tisRange(): boolean {\n\t\treturn this._value.length > 1;\n\t}\n\n\t/**\n\t * Range mode only.\n\t * Updates the track width to span from the low thumb to the high thumb\n\t */\n\tupdateTrackRangeWidth() {\n\t\tconst fraction = this.getFractionComplete(this._value[0]);\n\t\tconst fraction2 = this.getFractionComplete(this._value[1]);\n\t\tthis.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;\n\t}\n\n\t/** Change handler for the optional input */\n\tonChange(event, index) {\n\t\tthis._value[index] = Number(event.target.value);\n\t\tthis.value = this.value;\n\t}\n\n\t/** Handles clicks on the range track, and setting the value to it's \"real\" equivalent */\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tthis._value[0] = this.convertToValue(event.clientX - trackLeft);\n\t\tthis.value = this.value;\n\t}\n\n\t/** Focus handler for the optional input */\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */\n\tonMouseMove(event) {\n\t\tif (this.disabled || !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\n\t\tlet value;\n\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tvalue = this.convertToValue(event.clientX - track.left);\n\t\t}\n\n\t\t// if the mouse is beyond the max, set the value to `max`\n\t\tif (event.clientX - track.left > track.width) {\n\t\t\tvalue = this.max;\n\t\t}\n\n\t\t// if the mouse is below the min, set the value to `min`\n\t\tif (event.clientX - track.left < 0) {\n\t\t\tvalue = this.min;\n\t\t}\n\n\t\tif (value !== undefined) {\n\t\t\tthis._value[this._focusedThumbIndex] = value;\n\t\t\tthis.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Enables the `onMouseMove` handler\n\t *\n\t * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.\n\t */\n\tonMouseDown(event, index = 0) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis._focusedThumbIndex = index;\n\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/** Disables the `onMouseMove` handler */\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/**\n\t * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\t *\n\t * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.\n\t */\n\tonKeyDown(event: KeyboardEvent, index = 0) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t} else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/** Get optional input fields */\n\tprotected getInputs(): HTMLInputElement[] {\n\t\treturn this.elementRef.nativeElement.querySelectorAll(\"input:not([type=range])\");\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tViewChildren,\n\tQueryList,\n\tChangeDetectorRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { SkeletonModule } from 'carbon-components-angular';\n * ```\n *\n * The simplest possible slider usage looks something like:\n *\n * ```html\n *\t<cds-slider></cds-slider>\n * ```\n *\n * That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n *\n * ex:\n *\n * ```html\n * <!-- Full example -->\n * <cds-slider>\n *\t\t<span minLabel>0GB</span>\n *\t\t<span maxLabel>100GB</span>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just an input -->\n * <cds-slider>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just one label -->\n * <cds-slider>\n *\t\t<span maxLabel>Maximum</span>\n * </cds-slider>\n * ```\n *\n * Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n *\n * [See demo](../../?path=/story/components-slider--advanced)\n */\n@Component({\n\tselector: \"cds-slider, ibm-slider\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\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]=\"{'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 class=\"cds--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--slider\"\n\t\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t\t\t[ngStyle]=\"{insetInlineStart: getFractionComplete(value) * 100 + '%'}\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t\t [ngStyle]=\"{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t\t\t *ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"cds--slider__track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#filledTrack\n\t\t\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t\t<div class=\"cds--slider\">\n\t\t\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, ControlValueAccessor {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/** The lower bound of our range */\n\t@Input() set min(v) {\n\t\tif (!v) { return; }\n\t\tthis._min = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\tget min() {\n\t\treturn this._min;\n\t}\n\t/** The upper bound of our range */\n\t@Input() set max(v) {\n\t\tif (!v) { return; }\n\t\tthis._max = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\n\tget max() {\n\t\treturn this._max;\n\t}\n\t/** The interval for our range */\n\t@Input() step = 1;\n\t/** Set the initial value. Available for two way binding */\n\t@Input() set value(v) {\n\t\tif (!v) {\n\t\t\tv = [this.min];\n\t\t}\n\n\t\tif (typeof v === \"number\" || typeof v === \"string\") {\n\t\t\tv = [Number(v)];\n\t\t}\n\n\t\tif (v[0] < this.min) {\n\t\t\tv[0] = this.min;\n\t\t}\n\n\t\tif (v[0] > this.max) {\n\t\t\tv[0] = this.max;\n\t\t}\n\n\t\tif (this.isRange()) {\n\t\t\tif (this._previousValue[0] !== v[0]) { // left moved\n\t\t\t\tif (v[0] > v[1] - this.step) {\n\t\t\t\t\t// stop the left handle if surpassing the right one\n\t\t\t\t\tv[0] = v[1] - this.step;\n\t\t\t\t} else if (v[0] > this.max) {\n\t\t\t\t\tv[0] = this.max;\n\t\t\t\t} else if (v[0] < this.min) {\n\t\t\t\t\tv[0] = this.min;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this._previousValue[1] !== v[1]) { // right moved\n\t\t\t\tif (v[1] > this.max) {\n\t\t\t\t\tv[1] = this.max;\n\t\t\t\t} else if (v[1] < this._value[0] + this.step) {\n\t\t\t\t\t// stop the right handle if surpassing the left one\n\t\t\t\t\tv[1] = this._value[0] + this.step;\n\t\t\t\t} else if (v[1] < this.min) {\n\t\t\t\t\tv[1] = this.min;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._previousValue = [...this._value]; // store a copy, enable detection which handle moved\n\t\tthis._value = [...v]; // triggers change detection when ngModel value is an array (for range)\n\n\t\tif (this.isRange() && this.filledTrack) {\n\t\t\tthis.updateTrackRangeWidth();\n\t\t} else if (this.filledTrack) {\n\t\t\tthis.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;\n\t\t}\n\n\t\tif (this.inputs && this.inputs.length) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.value = this._value[index].toString();\n\t\t\t});\n\t\t}\n\n\t\tconst valueToEmit = this.isRange() ? v : v[0];\n\t\tthis.propagateChange(valueToEmit);\n\t\tthis.valueChange.emit(valueToEmit);\n\t}\n\n\tget value() {\n\t\tif (this.isRange()) {\n\t\t\treturn this._value;\n\t\t}\n\t\treturn this._value[0];\n\t}\n\n\t/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */\n\t@Input() id = `slider-${Slider.count++}`;\n\t/** Value used to \"multiply\" the `step` when using arrow keys to select values */\n\t@Input() shiftMultiplier = 4;\n\t/** Set to `true` for a loading slider */\n\t@Input() skeleton = false;\n\t/** Sets the text inside the `label` tag */\n\t@Input() label: string | TemplateRef<any>;\n\t/** Set to `true` for a slider without arrow key interactions. */\n\t@Input() disableArrowKeys = false;\n\t/** Disables the range visually and functionally */\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.disabled = v);\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/** Emits every time a new value is selected */\n\t@Output() valueChange: EventEmitter<number | number[]> = new EventEmitter();\n\t@HostBinding(\"class.cds--form-item\") hostClass = true;\n\t@ViewChildren(\"thumbs\") thumbs: QueryList<ElementRef>;\n\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"filledTrack\") filledTrack: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic labelId = `${this.id}-label`;\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\tpublic fractionComplete = 0;\n\n\tprotected isMouseDown = false;\n\tprotected inputs: HTMLInputElement[];\n\tprotected _min = 0;\n\tprotected _max = 100;\n\tprotected _value = [this.min];\n\tprotected _previousValue = [this.min];\n\tprotected _disabled = false;\n\tprotected _focusedThumbIndex = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected eventService: EventService,\n\t\tprivate changeDetection: ChangeDetectorRef\n\t) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventService.onDocument(\"mousemove\", this.onMouseMove.bind(this));\n\t\tthis.eventService.onDocument(\"mouseup\", this.onMouseUp.bind(this));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.changeDetection.detectChanges();\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.inputs = this.getInputs();\n\t\tif (this.inputs && this.inputs.length > 0) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.type = \"number\";\n\t\t\t\tinput.classList.add(\"cds--slider-text-input\");\n\t\t\t\tinput.classList.add(\"cds--text-input\");\n\t\t\t\tinput.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\n\t\t\t\tinput.value = index < this._value.length ? this._value[index].toString() : this.max.toString();\n\t\t\t\t// bind events on our optional input\n\t\t\t\tthis.eventService.on(input, \"change\", event => this.onChange(event, index));\n\n\t\t\t\tif (index === 0) {\n\t\t\t\t\tthis.eventService.on(input, \"focus\", this.onFocus.bind(this));\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\ttrackThumbsBy(index: number, item: any) {\n\t\treturn index;\n\t}\n\n\t/** Send changes back to the model */\n\tpropagateChange = (_: any) => { };\n\n\t/** Register a change propagation function for `ControlValueAccessor` */\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/** Callback to notify the model when our input has been touched */\n\tonTouched: () => any = () => { };\n\n\t/** Register a callback to notify when our input has been touched */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** Receives a value from the model */\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/**\n\t * Returns the amount of \"completeness\" of a value as a fraction of the total track width\n\t */\n\tgetFractionComplete(value: number) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.convertToPx(value) / trackWidth;\n\t}\n\n\t/** Helper function to return the CSS transform `scaleX` function */\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/** Converts a given px value to a \"real\" value in our range */\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range * unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with */\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// account for value shifting by subtracting min from value and max\n\t\treturn Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));\n\t}\n\n\t/**\n\t * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tincrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] + (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tdecrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] - (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Determines if the slider is in range mode.\n\t */\n\tisRange(): boolean {\n\t\treturn this._value.length > 1;\n\t}\n\n\t/**\n\t * Range mode only.\n\t * Updates the track width to span from the low thumb to the high thumb\n\t */\n\tupdateTrackRangeWidth() {\n\t\tconst fraction = this.getFractionComplete(this._value[0]);\n\t\tconst fraction2 = this.getFractionComplete(this._value[1]);\n\t\tthis.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;\n\t}\n\n\t/** Change handler for the optional input */\n\tonChange(event, index) {\n\t\tthis._value[index] = Number(event.target.value);\n\t\tthis.value = this.value;\n\t}\n\n\t/**\n\t * Handles clicks on the slider, and setting the value to it's \"real\" equivalent.\n\t * Will assign the value to the closest thumb if in range mode.\n\t * */\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tconst trackValue = this.convertToValue(event.clientX - trackLeft);\n\t\tif (this.isRange()) {\n\t\t\tif (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {\n\t\t\t\tthis._value[0] = trackValue;\n\t\t\t} else {\n\t\t\t\tthis._value[1] = trackValue;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._value[0] = trackValue;\n\t\t}\n\n\t\tthis.value = this.value;\n\t}\n\n\t/** Focus handler for the optional input */\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */\n\tonMouseMove(event) {\n\t\tif (this.disabled || !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\n\t\tlet value;\n\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tvalue = this.convertToValue(event.clientX - track.left);\n\t\t}\n\n\t\t// if the mouse is beyond the max, set the value to `max`\n\t\tif (event.clientX - track.left > track.width) {\n\t\t\tvalue = this.max;\n\t\t}\n\n\t\t// if the mouse is below the min, set the value to `min`\n\t\tif (event.clientX - track.left < 0) {\n\t\t\tvalue = this.min;\n\t\t}\n\n\t\tif (value !== undefined) {\n\t\t\tthis._value[this._focusedThumbIndex] = value;\n\t\t\tthis.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Enables the `onMouseMove` handler\n\t *\n\t * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.\n\t */\n\tonMouseDown(event, index = 0) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis._focusedThumbIndex = index;\n\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/** Disables the `onMouseMove` handler */\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/**\n\t * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\t *\n\t * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.\n\t */\n\tonKeyDown(event: KeyboardEvent, index = 0) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t} else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/** Get optional input fields */\n\tprotected getInputs(): HTMLInputElement[] {\n\t\treturn this.elementRef.nativeElement.querySelectorAll(\"input:not([type=range])\");\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -49114,7 +49114,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 296,
+                "line": 300,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -49166,7 +49166,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 161,
+                        "line": 165,
                         "rawdescription": "\nThe lower bound of our range",
                         "description": "<p>The lower bound of our range</p>\n",
                         "jsdoctags": [
@@ -49185,7 +49185,7 @@
                         "name": "min",
                         "type": "",
                         "returnType": "",
-                        "line": 167
+                        "line": 171
                     }
                 },
                 "max": {
@@ -49204,7 +49204,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 171,
+                        "line": 175,
                         "rawdescription": "\nThe upper bound of our range",
                         "description": "<p>The upper bound of our range</p>\n",
                         "jsdoctags": [
@@ -49223,7 +49223,7 @@
                         "name": "max",
                         "type": "",
                         "returnType": "",
-                        "line": 178
+                        "line": 182
                     }
                 },
                 "value": {
@@ -49242,7 +49242,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 184,
+                        "line": 188,
                         "rawdescription": "\nSet the initial value. Available for two way binding",
                         "description": "<p>Set the initial value. Available for two way binding</p>\n",
                         "jsdoctags": [
@@ -49261,7 +49261,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 245
+                        "line": 249
                     }
                 },
                 "disabled": {
@@ -49280,7 +49280,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 263,
+                        "line": 267,
                         "rawdescription": "\nDisables the range visually and functionally",
                         "description": "<p>Disables the range visually and functionally</p>\n",
                         "jsdoctags": [
@@ -49299,7 +49299,7 @@
                         "name": "disabled",
                         "type": "",
                         "returnType": "",
-                        "line": 272
+                        "line": 276
                     }
                 }
             }
@@ -55778,7 +55778,7 @@
         },
         {
             "name": "TableRadio",
-            "id": "component-TableRadio-19d8c7d9bb4efe4d3d39d0e499985eb8ab28203fec831bd40d37f6c98b6d68ee5270bbf2dbdb98ab00b93e08c931c9bcbb5adc6f64682dbc0aeeaa8f7bc3a41a",
+            "id": "component-TableRadio-59a741fdc07d9c2cd4f74121d4378a59fc923e4ecd535ca8c171cf7491819ac51a64147873c83886b41d737075e00e27f03a809cc8630b27895ce3495ac12dfa",
             "file": "src/table/cell/table-radio.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -55900,7 +55900,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRadio], [ibmTableRadio]\",\n\ttemplate: `\n\t\t<cds-radio\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[attr.aria-label]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\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(change)=\"change.emit()\">\n\t\t</cds-radio>\n\t`\n})\nexport class TableRadio {\n\t@Input() row: any[];\n\n\t@Input() selected = false;\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\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\t\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() change = 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 } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRadio], [ibmTableRadio]\",\n\ttemplate: `\n\t\t<cds-radio\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[attr.aria-label]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\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(change)=\"change.emit()\">\n\t\t</cds-radio>\n\t`\n})\nexport class TableRadio {\n\t@Input() row: any[];\n\n\t@Input() selected = false;\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\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\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() change = 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": "",
@@ -57040,7 +57040,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> to expand the toolbar search component.</p>\n",
-                    "line": 73,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57053,7 +57053,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n",
                     "description": "<p>Sets the aria label on the <code>div</code> element with the <code>search</code> role.</p>\n",
-                    "line": 118,
+                    "line": 120,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57067,7 +57067,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n",
                     "description": "<p>Sets the autocomplete attribute on the <code>input</code> element.\nFor reference: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values</a></p>\n",
-                    "line": 98,
+                    "line": 100,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57081,7 +57081,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n",
                     "description": "<p>Used to set the <code>title</code> attribute of the clear button.</p>\n",
-                    "line": 110,
+                    "line": 112,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -57095,7 +57095,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled search input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled search input.</p>\n",
-                    "line": 56,
+                    "line": 58,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57109,7 +57109,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n",
                     "description": "<p>Set to <code>true</code> to make the search component expandable.\n<code>expandable</code> would override <code>toolbar</code> property behaviours.</p>\n",
-                    "line": 65,
+                    "line": 67,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57123,7 +57123,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the search component.\n",
                     "description": "<p>The unique id for the search component.</p>\n",
-                    "line": 85,
+                    "line": 87,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57137,7 +57137,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": 102,
+                    "line": 104,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -57150,7 +57150,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the name attribute on the `input` element.\n",
                     "description": "<p>Sets the name attribute on the <code>input</code> element.</p>\n",
-                    "line": 81,
+                    "line": 83,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57164,7 +57164,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": 106,
+                    "line": 108,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -57177,7 +57177,7 @@
                     "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": 89,
+                    "line": 91,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57191,7 +57191,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle for the search trigger\n",
                     "description": "<p>Title for the search trigger</p>\n",
-                    "line": 114,
+                    "line": 116,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57205,7 +57205,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the search field.\n",
                     "description": "<p>Size of the search field.</p>\n",
-                    "line": 51,
+                    "line": 53,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": [],
                     "inheritance": {
@@ -57219,7 +57219,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading search component.\n",
                     "description": "<p>Set to <code>true</code> for a loading search component.</p>\n",
-                    "line": 69,
+                    "line": 71,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57233,7 +57233,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n",
                     "description": "<p>Specifies whether the search component is used in the table toolbar.</p>\n",
-                    "line": 77,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57247,15 +57247,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.",
                     "jsdoctags": [
                         {
-                            "pos": 918,
-                            "end": 1012,
+                            "pos": 921,
+                            "end": 1015,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 919,
-                                "end": 929,
+                                "pos": 922,
+                                "end": 932,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57265,7 +57265,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> search theme.</p>\n"
                         }
                     ],
-                    "line": 46,
+                    "line": 48,
                     "type": "\"light\" | \"dark\"",
                     "decorators": [],
                     "inheritance": {
@@ -57279,7 +57279,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> for a toolbar search component.</p>\n",
-                    "line": 60,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -57293,7 +57293,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": 93,
+                    "line": 95,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -57309,7 +57309,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the clear button is clicked.\n",
                     "description": "<p>Emits an event when the clear button is clicked.</p>\n",
-                    "line": 127,
+                    "line": 129,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -57320,7 +57320,7 @@
                     "defaultValue": "new EventEmitter<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 125,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -57333,7 +57333,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event on enter.\n",
                     "description": "<p>Emits an event on enter.</p>\n",
-                    "line": 131,
+                    "line": 133,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -57346,7 +57346,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when value is changed.\n",
                     "description": "<p>Emits an event when value is changed.</p>\n",
-                    "line": 122,
+                    "line": 124,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -57400,7 +57400,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 133,
+                    "line": 135,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -57422,7 +57422,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when search input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 174,
+                    "line": 176,
                     "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n",
                     "inheritance": {
                         "file": "Search"
@@ -57436,7 +57436,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 179,
+                    "line": 181,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n",
                     "inheritance": {
                         "file": "Search"
@@ -57467,7 +57467,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 203,
+                    "line": 205,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when clear button is clicked.\n",
@@ -57489,7 +57489,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 266,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
@@ -57531,7 +57531,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
@@ -57566,7 +57566,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 209,
+                    "line": 211,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "inheritance": {
@@ -57586,7 +57586,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 244,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -57626,7 +57626,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 243,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -57666,7 +57666,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 221,
+                    "line": 223,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -57699,7 +57699,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 198,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled on enter.\n",
@@ -57721,7 +57721,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 185,
+                    "line": 187,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when text is written in the input.\n",
@@ -57729,8 +57729,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4393,
-                                "end": 4399,
+                                "pos": 4396,
+                                "end": 4402,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57741,8 +57741,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4387,
-                                "end": 4392,
+                                "pos": 4390,
+                                "end": 4395,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57762,7 +57762,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 216,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "inheritance": {
@@ -57782,7 +57782,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 159,
+                    "line": 161,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -57818,7 +57818,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 167,
+                    "line": 169,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -57829,8 +57829,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3939,
-                                "end": 3941,
+                                "pos": 3942,
+                                "end": 3944,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57841,8 +57841,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3933,
-                                "end": 3938,
+                                "pos": 3936,
+                                "end": 3941,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57869,7 +57869,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -57880,8 +57880,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3615,
-                                "end": 3620,
+                                "pos": 3618,
+                                "end": 3623,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57892,8 +57892,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3609,
-                                "end": 3614,
+                                "pos": 3612,
+                                "end": 3617,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -57950,7 +57950,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
                     "description": "<p>Called when IME composition finishes.</p>\n",
-                    "line": 266,
+                    "line": 277,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -57972,7 +57972,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
                     "description": "<p>Called when using IME composition.</p>\n",
-                    "line": 258,
+                    "line": 269,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -57992,7 +57992,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 244,
+                    "line": 255,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -58012,7 +58012,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 232,
+                    "line": 243,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -58032,7 +58032,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 221,
+                    "line": 223,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -71771,7 +71771,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\">\n\t\t</cds-search>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -76564,7 +76564,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\">\n\t\t</cds-search>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
                 }
             ],
             "src/select/select.stories.ts": [