carbon-components-angular 5.21.0 → 5.22.0

package/docs/documentation.json

@@ -25300,7 +25300,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-1725045e700be17edf7bf7d8a40a8c9c210d2bb0213f874cbd88b0d4c2f36846d0491ff32f0a8c567b7f7ae4aa2bb15823fca28523744262f985fc77c55735f0",
+            "id": "component-DatePicker-a0acdcd291094fa05e95aec1ac1063610bdca7b867bd0cd327320cae558fcba75a6e639fc0b87bf879dff2d0ac3560ca8671a8273adfc73866db2b4c16f15b89",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -25328,7 +25328,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAria label added to datepicker's calendar container.\n",
                     "description": "<p>Aria label added to datepicker&#39;s calendar container.</p>\n",
-                    "line": 158,
+                    "line": 159,
                     "type": "string",
                     "decorators": []
                 },
@@ -25339,7 +25339,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFormat of date\n\nFor reference: https://flatpickr.js.org/formatting/\n",
                     "description": "<p>Format of date</p>\n<p>For reference: <a href=\"https://flatpickr.js.org/formatting/\">https://flatpickr.js.org/formatting/</a></p>\n",
-                    "line": 138,
+                    "line": 139,
                     "type": "string",
                     "decorators": []
                 },
@@ -25348,7 +25348,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 184,
+                    "line": 185,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25356,15 +25356,15 @@
                     "name": "flatpickrOptions",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 225,
-                    "type": "any",
+                    "line": 226,
+                    "type": "Partial<Options>",
                     "decorators": []
                 },
                 {
                     "name": "helperText",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 149,
+                    "line": 150,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25373,7 +25373,7 @@
                     "defaultValue": "`datepicker-${DatePicker.datePickerCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 165,
+                    "line": 166,
                     "type": "string",
                     "decorators": []
                 },
@@ -25384,7 +25384,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe pattern for the underlying input element\n",
                     "description": "<p>The pattern for the underlying input element</p>\n",
-                    "line": 163,
+                    "line": 164,
                     "type": "string",
                     "decorators": []
                 },
@@ -25395,7 +25395,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to display the invalid state.\n",
                     "description": "<p>Set to <code>true</code> to display the invalid state.</p>\n",
-                    "line": 188,
+                    "line": 189,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25405,7 +25405,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if datepicker is in an invalid state.\n",
                     "description": "<p>Value displayed if datepicker is in an invalid state.</p>\n",
-                    "line": 192,
+                    "line": 193,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25413,7 +25413,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 148,
+                    "line": 149,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25424,7 +25424,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLanguage of the flatpickr calendar.\n\nFor reference of the possible locales:\nhttps://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n",
                     "description": "<p>Language of the flatpickr calendar.</p>\n<p>For reference of the possible locales:\n<a href=\"https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\">https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts</a></p>\n",
-                    "line": 146,
+                    "line": 147,
                     "type": "string",
                     "decorators": []
                 },
@@ -25433,7 +25433,7 @@
                     "defaultValue": "\"mm/dd/yyyy\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 153,
+                    "line": 154,
                     "type": "string",
                     "decorators": []
                 },
@@ -25442,7 +25442,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 222,
+                    "line": 223,
                     "type": "{}",
                     "decorators": []
                 },
@@ -25453,7 +25453,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelect calendar range mode\n",
                     "description": "<p>Select calendar range mode</p>\n",
-                    "line": 131,
+                    "line": 132,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25461,7 +25461,7 @@
                     "name": "rangeHelperText",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 150,
+                    "line": 151,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25472,7 +25472,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to display the invalid state for the second datepicker input.\n",
                     "description": "<p>Set to <code>true</code> to display the invalid state for the second datepicker input.</p>\n",
-                    "line": 206,
+                    "line": 207,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25482,7 +25482,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if the second datepicker input is in an invalid state.\n",
                     "description": "<p>Value displayed if the second datepicker input is in an invalid state.</p>\n",
-                    "line": 210,
+                    "line": 211,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25490,7 +25490,7 @@
                     "name": "rangeLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 151,
+                    "line": 152,
                     "type": "string",
                     "decorators": []
                 },
@@ -25501,7 +25501,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning in the second datepicker input (contents set by rangeWarningText)</p>\n",
-                    "line": 214,
+                    "line": 215,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25511,7 +25511,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text for the second datepicker input\n",
                     "description": "<p>Sets the warning text for the second datepicker input</p>\n",
-                    "line": 218,
+                    "line": 219,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -25520,7 +25520,7 @@
                     "defaultValue": "\"md\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 202,
+                    "line": 203,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -25529,7 +25529,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 220,
+                    "line": 221,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25540,15 +25540,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 4527,
-                            "end": 4631,
+                            "pos": 4583,
+                            "end": 4687,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 4528,
-                                "end": 4538,
+                                "pos": 4584,
+                                "end": 4594,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25558,7 +25558,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>&quot;light&quot;</code> to apply the light style</p>\n"
                         }
                     ],
-                    "line": 182,
+                    "line": 183,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -25566,7 +25566,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 167,
+                    "line": 168,
                     "type": "[]",
                     "decorators": []
                 },
@@ -25577,7 +25577,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 196,
+                    "line": 197,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25587,7 +25587,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 200,
+                    "line": 201,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -25600,7 +25600,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWe are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes\n",
                     "description": "<p>We are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes</p>\n",
-                    "line": 250,
+                    "line": 251,
                     "type": "EventEmitter<any>"
                 },
                 {
@@ -25608,7 +25608,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 244,
+                    "line": 245,
                     "type": "EventEmitter<any>"
                 }
             ],
@@ -25620,7 +25620,7 @@
                     "type": "DatePickerInput",
                     "optional": false,
                     "description": "",
-                    "line": 241,
+                    "line": 242,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -25639,7 +25639,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "",
-                    "line": 405
+                    "line": 406
                 },
                 {
                     "name": "propagateChange",
@@ -25649,7 +25649,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 407
+                    "line": 408
                 },
                 {
                     "name": "rangeInput",
@@ -25658,7 +25658,7 @@
                     "type": "DatePickerInput",
                     "optional": false,
                     "description": "",
-                    "line": 242,
+                    "line": 243,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -25677,7 +25677,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 354,
+                    "line": 355,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -25696,7 +25696,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 369,
+                    "line": 370,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -25722,7 +25722,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 435,
+                    "line": 436,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the range input\n",
@@ -25752,7 +25752,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 420,
+                    "line": 421,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the primary/single input\n",
@@ -25782,7 +25782,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 446,
+                    "line": 447,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles opening the calendar \"properly\" when the calendar icon is clicked.\n",
@@ -25812,7 +25812,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 397,
+                    "line": 398,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -25840,7 +25840,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 401,
+                    "line": 402,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -25868,7 +25868,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 393,
+                    "line": 394,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the DatePicker.\n\nex: `this.formGroup.get(\"myDatePicker\").disable();`\n\n",
@@ -25876,8 +25876,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11055,
-                                "end": 11065,
+                                "pos": 11165,
+                                "end": 11175,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25888,8 +25888,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 11049,
-                                "end": 11054,
+                                "pos": 11159,
+                                "end": 11164,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25913,7 +25913,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 378,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n",
@@ -25921,8 +25921,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10654,
-                                "end": 10659,
+                                "pos": 10764,
+                                "end": 10769,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25933,8 +25933,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10648,
-                                "end": 10653,
+                                "pos": 10758,
+                                "end": 10763,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25956,7 +25956,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 354
+                    "line": 355
                 },
                 {
                     "name": "focusout",
@@ -25964,7 +25964,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 369
+                    "line": 370
                 }
             ],
             "standalone": false,
@@ -25972,7 +25972,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions() {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language]\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tif (this.flatpickrInstance.selectedDates.length !== 2) {\n\t\t\t\t\t// we could `this.flatpickrInstance.clear()` but it insists on opening the second picker\n\t\t\t\t\t// in some cases, so instead we do this\n\t\t\t\t\tthis.setDateValues([]);\n\t\t\t\t\tthis.doSelect([]);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language]\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tif (this.flatpickrInstance.selectedDates.length !== 2) {\n\t\t\t\t\t// we could `this.flatpickrInstance.clear()` but it insists on opening the second picker\n\t\t\t\t\t// in some cases, so instead we do this\n\t\t\t\t\tthis.setDateValues([]);\n\t\t\t\t\tthis.doSelect([]);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -25995,7 +25995,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 296,
+                "line": 297,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -26041,7 +26041,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 167,
+                        "line": 168,
                         "jsdoctags": [
                             {
                                 "name": "v",
@@ -26058,7 +26058,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 174
+                        "line": 175
                     }
                 },
                 "flatpickrOptions": {
@@ -26071,17 +26071,17 @@
                         "args": [
                             {
                                 "name": "options",
-                                "type": "",
+                                "type": "Partial<Options>",
                                 "deprecated": false,
                                 "deprecationMessage": ""
                             }
                         ],
                         "returnType": "void",
-                        "line": 225,
+                        "line": 226,
                         "jsdoctags": [
                             {
                                 "name": "options",
-                                "type": "",
+                                "type": "Partial<Options>",
                                 "deprecated": false,
                                 "deprecationMessage": "",
                                 "tagName": {
@@ -26093,8 +26093,8 @@
                     "getSignature": {
                         "name": "flatpickrOptions",
                         "type": "",
-                        "returnType": "",
-                        "line": 228
+                        "returnType": "Partial<Options>",
+                        "line": 229
                     }
                 }
             }
@@ -47167,7 +47167,7 @@
         },
         {
             "name": "SideNav",
-            "id": "component-SideNav-971427ecce046bab5c1bdd9e2f7411e3be9f461ffba908ae1c2a5321187f6178a1de8d126c1af993ad111ea2371d09751394ffda32787aa5a36762a98a5e6a72",
+            "id": "component-SideNav-6ce82417fce75681aad2fef673a42b9263d40532de80989b047515ecfabe6ae2ecddc25dea6fd306bcd6aad713be9eb4e706967645eb6160c7510eabe04bc5e7",
             "file": "src/ui-shell/sidenav/sidenav.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -47179,7 +47179,7 @@
             "selector": "cds-sidenav, ibm-sidenav",
             "styleUrls": [],
             "styles": [],
-            "template": "<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t<ng-content select=\"cds-sidenav-header,ibm-sidenav-header\"></ng-content>\n\t<div role=\"list\">\n\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<footer class=\"cds--side-nav__footer\">\n\t\t<button\n\t\t\t*ngIf=\"allowExpansion\"\n\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\ttype=\"button\"\n\t\t\t[title]=\"(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async\"\n\t\t\t(click)=\"toggle()\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!expanded\"\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}\n\t\t\t</span>\n\t\t</button>\n\t</footer>\n</nav>\n\t",
+            "template": "<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t<ng-content select=\"cds-sidenav-header,ibm-sidenav-header\"></ng-content>\n\t<div role=\"list\">\n\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t[useRouter]=\"useRouter\"\n\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t[useRouter]=\"useRouter\"\n\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<footer class=\"cds--side-nav__footer\">\n\t\t<button\n\t\t\t*ngIf=\"allowExpansion\"\n\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\ttype=\"button\"\n\t\t\t[title]=\"(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async\"\n\t\t\t(click)=\"toggle()\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!expanded\"\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}\n\t\t\t</span>\n\t\t</button>\n\t</footer>\n</nav>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -47189,7 +47189,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 95,
+                    "line": 97,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47198,7 +47198,7 @@
                     "defaultValue": "\"Side navigation\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 84,
+                    "line": 86,
                     "type": "string",
                     "decorators": []
                 },
@@ -47209,7 +47209,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n",
                     "description": "<p>Controls the expanded (<code>true</code>) or collapsed (<code>false</code>) state when on a small screen.</p>\n",
-                    "line": 88,
+                    "line": 90,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47220,7 +47220,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the hidden (`true`) or visible (`false`) state\n",
                     "description": "<p>Controls the hidden (<code>true</code>) or visible (<code>false</code>) state</p>\n",
-                    "line": 92,
+                    "line": 94,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47230,7 +47230,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNavigationItems from the header navigation component which are displayed on the sidenav when the window\ninnerWidth is small enough. Sidenav items and menus are created using the model used to create header\nnavigation items.\n",
                     "description": "<p>NavigationItems from the header navigation component which are displayed on the sidenav when the window\ninnerWidth is small enough. Sidenav items and menus are created using the model used to create header\nnavigation items.</p>\n",
-                    "line": 102,
+                    "line": 104,
                     "type": "NavigationItem[]",
                     "decorators": []
                 },
@@ -47239,7 +47239,18 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 93,
+                    "line": 95,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "useRouter",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nUse the routerLink attribute on <a> tag for navigation instead of using event handlers\n",
+                    "description": "<p>Use the routerLink attribute on <a> tag for navigation instead of using event handlers</p>\n",
+                    "line": 109,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -47254,7 +47265,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 83,
+                    "line": 85,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47272,7 +47283,7 @@
                     "type": "I18n",
                     "optional": false,
                     "description": "",
-                    "line": 104,
+                    "line": 111,
                     "modifierKind": [
                         123
                     ]
@@ -47285,7 +47296,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 94,
+                    "line": 96,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47304,7 +47315,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 106,
+                    "line": 113,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -47317,7 +47328,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 83,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47326,7 +47337,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94,
+                    "line": 96,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -47337,7 +47348,7 @@
             "description": "<p><code>Sidenav</code> is a fixed left navigation that may contain <code>SideNavItem</code>s or <code>SideNavMenu</code>s</p>\n<p><a href=\"../../?path=/story/components-ui-shell--side-navigation\">See demo</a></p>\n",
             "rawdescription": "\n\n`Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n\n[See demo](../../?path=/story/components-ui-shell--side-navigation)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NavigationItem } from \"../header/header-navigation-items.interface\";\n\n/**\n * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n *\n * [See demo](../../?path=/story/components-ui-shell--side-navigation)\n */\n@Component({\n\tselector: \"cds-sidenav, ibm-sidenav\",\n\ttemplate: `\n\t\t<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t\t\t<ng-content select=\"cds-sidenav-header,ibm-sidenav-header\"></ng-content>\n\t\t\t<div role=\"list\">\n\t\t\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t\t</cds-sidenav-item>\n\t\t\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t\t\t</cds-sidenav-menu>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<footer class=\"cds--side-nav__footer\">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"allowExpansion\"\n\t\t\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[title]=\"(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async\"\n\t\t\t\t\t(click)=\"toggle()\">\n\t\t\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"!expanded\"\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t\t\t{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</footer>\n\t\t</nav>\n\t`,\n\tencapsulation: ViewEncapsulation.None\n})\nexport class SideNav {\n\t@HostBinding(\"class.cds--side-nav\") hostClass = true;\n\t@Input() ariaLabel = \"Side navigation\";\n\t/**\n\t * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n\t */\n\t@HostBinding(\"class.cds--side-nav--expanded\") @Input() expanded = true;\n\t/**\n\t * Controls the hidden (`true`) or visible (`false`) state\n\t */\n\t@HostBinding(\"class.cds--side-nav--hidden\") @Input() hidden = false;\n\t@HostBinding(\"class.cds--side-nav--rail\") @Input() rail = false;\n\t@HostBinding(\"class.cds--side-nav__navigation\") ux = true;\n\t@Input() allowExpansion = false;\n\n\t/**\n\t * NavigationItems from the header navigation component which are displayed on the sidenav when the window\n\t * innerWidth is small enough. Sidenav items and menus are created using the model used to create header\n\t * navigation items.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n\n\tconstructor(public i18n: I18n) { }\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NavigationItem } from \"../header/header-navigation-items.interface\";\n\n/**\n * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n *\n * [See demo](../../?path=/story/components-ui-shell--side-navigation)\n */\n@Component({\n\tselector: \"cds-sidenav, ibm-sidenav\",\n\ttemplate: `\n\t\t<nav class=\"cds--side-nav__items\" [attr.aria-label]=\"ariaLabel\">\n\t\t\t<ng-content select=\"cds-sidenav-header,ibm-sidenav-header\"></ng-content>\n\t\t\t<div role=\"list\">\n\t\t\t\t<div class=\"cds--side-nav__header-navigation cds--side-nav__header-divider\">\n\t\t\t\t\t<ng-container *ngFor=\"let navigationItem of navigationItems\">\n\t\t\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t\t\t*ngIf=\"navigationItem.type === 'item'\"\n\t\t\t\t\t\t\t[href]=\"navigationItem.href\"\n\t\t\t\t\t\t\t[route]=\"navigationItem.route\"\n\t\t\t\t\t\t\t[routeExtras]=\"navigationItem.routeExtras\"\n\t\t\t\t\t\t\t[useRouter]=\"useRouter\"\n\t\t\t\t\t\t\t[title]=\"navigationItem.title\">\n\t\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t\t</cds-sidenav-item>\n\t\t\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t\t\t*ngIf=\"navigationItem.type === 'menu'\"\n\t\t\t\t\t\t\t[title]=\"navigationItem.title\"\n\t\t\t\t\t\t\t[useRouter]=\"useRouter\"\n\t\t\t\t\t\t\t[menuItems]=\"navigationItem.menuItems\">\n\t\t\t\t\t\t</cds-sidenav-menu>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<footer class=\"cds--side-nav__footer\">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"allowExpansion\"\n\t\t\t\t\tclass=\"cds--side-nav__toggle\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[title]=\"(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async\"\n\t\t\t\t\t(click)=\"toggle()\">\n\t\t\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"!expanded\"\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t\t\t{{(expanded ? i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_CLOSE') : i18n.get('UI_SHELL.SIDE_NAV.TOGGLE_OPEN')) | async}}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</footer>\n\t\t</nav>\n\t`,\n\tencapsulation: ViewEncapsulation.None\n})\nexport class SideNav {\n\t@HostBinding(\"class.cds--side-nav\") hostClass = true;\n\t@Input() ariaLabel = \"Side navigation\";\n\t/**\n\t * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n\t */\n\t@HostBinding(\"class.cds--side-nav--expanded\") @Input() expanded = true;\n\t/**\n\t * Controls the hidden (`true`) or visible (`false`) state\n\t */\n\t@HostBinding(\"class.cds--side-nav--hidden\") @Input() hidden = false;\n\t@HostBinding(\"class.cds--side-nav--rail\") @Input() rail = false;\n\t@HostBinding(\"class.cds--side-nav__navigation\") ux = true;\n\t@Input() allowExpansion = false;\n\n\t/**\n\t * NavigationItems from the header navigation component which are displayed on the sidenav when the window\n\t * innerWidth is small enough. Sidenav items and menus are created using the model used to create header\n\t * navigation items.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\tconstructor(public i18n: I18n) { }\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -47354,7 +47365,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 102,
+                "line": 109,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -47370,7 +47381,7 @@
         },
         {
             "name": "SideNavItem",
-            "id": "component-SideNavItem-51cb2d7cae1120cc169374c46e49c1997f588f579393d6a6f3f9f3aa1e9ae98e85ab90b51326891f97e6656d0440e70d19902c62400c7406c312968dae59285f",
+            "id": "component-SideNavItem-c7f33f795f7154b1ee127dad424fc25fed922d4948b47cd8720dbb64bf73001461f84b06a37c32193a9212b7c9c077e588fd16d866d175d3503c728024b82418",
             "file": "src/ui-shell/sidenav/sidenav-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -47382,7 +47393,7 @@
             "styles": [
                 "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"
             ],
-            "template": "<a\n\tclass=\"cds--side-nav__link\"\n\t[ngClass]=\"{\n\t\t'cds--side-nav__item--active': active\n\t}\"\n\t[href]=\"href\"\n\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t[attr.title]=\"title ? title : null\"\n\t(click)=\"navigate($event)\">\n\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__link-text\">\n\t\t<ng-content></ng-content>\n\t</span>\n</a>\n\t",
+            "template": "<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n   class=\"cds--side-nav__link\"\n   [ngClass]=\"{\n\t\t'cds--side-nav__item--active': active\n\t}\"\n   [href]=\"href\"\n   [attr.aria-current]=\"(active ? 'page' : null)\"\n   [attr.title]=\"title ? title : null\"\n   (click)=\"navigate($event)\">\n\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n</a>\n\n<ng-template #sidenavItemRouterTpl>\n\t<a\n\t\t[routerLink]=\"route\"\n\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\tariaCurrentWhenActive=\"page\"\n\t\t[attr.title]=\"title ? title : null\"\n\t\tclass=\"cds--side-nav__link\">\n\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t</a>\n</ng-template>\n\n<ng-template #sidenavItemContentTpl>\n\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__link-text\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -47394,7 +47405,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the active (current page) state for the link.\n",
                     "description": "<p>Toggles the active (current page) state for the link.</p>\n",
-                    "line": 69,
+                    "line": 90,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47404,7 +47415,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n",
                     "description": "<p>Link for the item. NOTE: <em>do not</em> pass unsafe or untrusted values, this has the potential to open you up to XSS attacks</p>\n",
-                    "line": 46,
+                    "line": 62,
                     "type": "string",
                     "decorators": []
                 },
@@ -47413,7 +47424,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 77,
+                    "line": 98,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47423,7 +47434,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n",
                     "description": "<p>Array of commands to send to the router when the link is activated\nSee: <a href=\"https://angular.io/api/router/Router#navigate\">https://angular.io/api/router/Router#navigate</a></p>\n",
-                    "line": 75,
+                    "line": 96,
                     "type": "any[]",
                     "decorators": []
                 },
@@ -47433,7 +47444,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n",
                     "description": "<p>Router options. Used in conjunction with <code>route</code>\nSee: <a href=\"https://angular.io/api/router/Router#navigate\">https://angular.io/api/router/Router#navigate</a></p>\n",
-                    "line": 83,
+                    "line": 104,
                     "type": "any",
                     "decorators": []
                 },
@@ -47443,9 +47454,20 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle attribute of the anchor element.\n",
                     "description": "<p>Title attribute of the anchor element.</p>\n",
-                    "line": 88,
+                    "line": 109,
                     "type": "string",
                     "decorators": []
+                },
+                {
+                    "name": "useRouter",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nUse the routerLink attribute on <a> tag for navigation instead of using event handlers\n",
+                    "description": "<p>Use the routerLink attribute on <a> tag for navigation instead of using event handlers</p>\n",
+                    "line": 77,
+                    "type": "boolean",
+                    "decorators": []
                 }
             ],
             "outputsClass": [
@@ -47456,7 +47478,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n",
                     "description": "<p>Emits the navigation status promise when the link is activated</p>\n",
-                    "line": 93,
+                    "line": 114,
                     "type": "EventEmitter"
                 },
                 {
@@ -47466,7 +47488,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.\n",
                     "description": "<p>Emits when <code>active</code> input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.</p>\n",
-                    "line": 99,
+                    "line": 120,
                     "type": "EventEmitter"
                 }
             ],
@@ -47479,7 +47501,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 101,
+                    "line": 122,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47497,7 +47519,7 @@
                     "args": [
                         {
                             "name": "event",
-                            "type": "",
+                            "type": "MouseEvent",
                             "deprecated": false,
                             "deprecationMessage": ""
                         }
@@ -47505,13 +47527,13 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 113,
+                    "line": 134,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
                             "name": "event",
-                            "type": "",
+                            "type": "MouseEvent",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
@@ -47529,7 +47551,7 @@
                     "defaultValue": "\"listitem\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 101,
+                    "line": 122,
                     "type": "string",
                     "decorators": []
                 },
@@ -47537,7 +47559,7 @@
                     "name": "class.cds--side-nav__item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 58,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47545,7 +47567,7 @@
                     "name": "class.cds--side-nav__menu-item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 62,
+                    "line": 83,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -47556,7 +47578,7 @@
             "description": "<p><code>SideNavItem</code> can either be a child of <code>SideNav</code> or <code>SideNavMenu</code></p>\n",
             "rawdescription": "\n\n`SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a\n\t\t\tclass=\"cds--side-nav__link\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t(click)=\"navigate($event)\">\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</a>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\t\t   class=\"cds--side-nav__link\"\n\t\t   [ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t   [href]=\"href\"\n\t\t   [attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t   [attr.title]=\"title ? title : null\"\n\t\t   (click)=\"navigate($event)\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t</a>\n\n\t\t<ng-template #sidenavItemRouterTpl>\n\t\t\t<a\n\t\t\t\t[routerLink]=\"route\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\tclass=\"cds--side-nav__link\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t\t</a>\n\t\t</ng-template>\n\n\t\t<ng-template #sidenavItemContentTpl>\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = true;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n",
@@ -47579,7 +47601,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 103,
+                "line": 124,
                 "jsdoctags": [
                     {
                         "name": "domSanitizer",
@@ -47621,7 +47643,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 46,
+                        "line": 62,
                         "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n",
                         "description": "<p>Link for the item. NOTE: <em>do not</em> pass unsafe or untrusted values, this has the potential to open you up to XSS attacks</p>\n",
                         "jsdoctags": [
@@ -47640,7 +47662,7 @@
                         "name": "href",
                         "type": "",
                         "returnType": "",
-                        "line": 54
+                        "line": 70
                     }
                 },
                 "sideNav": {
@@ -47649,7 +47671,7 @@
                         "name": "sideNav",
                         "type": "",
                         "returnType": "",
-                        "line": 58
+                        "line": 79
                     }
                 },
                 "menuItem": {
@@ -47658,14 +47680,14 @@
                         "name": "menuItem",
                         "type": "",
                         "returnType": "",
-                        "line": 62
+                        "line": 83
                     }
                 }
             }
         },
         {
             "name": "SideNavMenu",
-            "id": "component-SideNavMenu-bd726f1a0605662b47c7fc558b5e65d77e1d9c860eab8efedc5422c1d3f545ffda9f234c96fa9a0c174372be3b5766ce2de58a7a757d5564b1bd774318ba97a9",
+            "id": "component-SideNavMenu-367a6d1f9a7d1546e5cc731dced52c8b64c395628932b674b0c178bc917de90f4b8fe173667fcb753f5d570ce323e93c82929fe0dde2d1bcef628209f2ae676b",
             "file": "src/ui-shell/sidenav/sidenav-menu.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -47675,7 +47697,7 @@
             "selector": "cds-sidenav-menu, ibm-sidenav-menu",
             "styleUrls": [],
             "styles": [],
-            "template": "<button\n\t(click)=\"toggle()\"\n\tclass=\"cds--side-nav__submenu\"\n\taria-haspopup=\"true\"\n\t[attr.aria-expanded]=\"expanded\"\n\ttype=\"button\">\n\t<div class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__submenu-title\">{{title}}</span>\n\t<div class=\"cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron\">\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\twidth=\"20\"\n\t\t\theight=\"20\"\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z\"></path>\n\t\t</svg>\n\t</div>\n</button>\n<div class=\"cds--side-nav__menu\" role=\"list\">\n\t<ng-content></ng-content>\n\t<ng-container *ngFor=\"let menuItem of menuItems\">\n\t\t<cds-sidenav-item\n\t\t\t[href]=\"menuItem.href\"\n\t\t\t[route]=\"menuItem.route\"\n\t\t\t[routeExtras]=\"menuItem.routeExtras\"\n\t\t\t[isSubMenu]=\"true\">\n\t\t\t{{ menuItem.content }}\n\t\t</cds-sidenav-item>\n\t</ng-container>\n</div>\n\t",
+            "template": "<button\n\t(click)=\"toggle()\"\n\tclass=\"cds--side-nav__submenu\"\n\taria-haspopup=\"true\"\n\t[attr.aria-expanded]=\"expanded\"\n\ttype=\"button\">\n\t<div class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__submenu-title\">{{title}}</span>\n\t<div class=\"cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron\">\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\twidth=\"20\"\n\t\t\theight=\"20\"\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z\"></path>\n\t\t</svg>\n\t</div>\n</button>\n<div class=\"cds--side-nav__menu\" role=\"list\">\n\t<ng-content></ng-content>\n\t<ng-container *ngFor=\"let menuItem of menuItems\">\n\t\t<cds-sidenav-item\n\t\t\t[href]=\"menuItem.href\"\n\t\t\t[route]=\"menuItem.route\"\n\t\t\t[routeExtras]=\"menuItem.routeExtras\"\n\t\t\t[useRouter]=\"useRouter\"\n\t\t\t[isSubMenu]=\"true\">\n\t\t\t{{ menuItem.content }}\n\t\t</cds-sidenav-item>\n\t</ng-container>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -47687,7 +47709,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the visibility of the child `SideNavItem`s\n",
                     "description": "<p>Controls the visibility of the child <code>SideNavItem</code>s</p>\n",
-                    "line": 73,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47698,7 +47720,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the active status indicator on the menu if there is an active\nchild sidenav item.\n",
                     "description": "<p>Controls the active status indicator on the menu if there is an active\nchild sidenav item.</p>\n",
-                    "line": 78,
+                    "line": 84,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47706,7 +47728,7 @@
                     "name": "menuItems",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 80,
+                    "line": 86,
                     "type": "SideNavItemInterface[]",
                     "decorators": []
                 },
@@ -47714,11 +47736,22 @@
                     "name": "title",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nHeading for the gorup\n",
-                    "description": "<p>Heading for the gorup</p>\n",
-                    "line": 69,
+                    "rawdescription": "\n\nHeading for the group\n",
+                    "description": "<p>Heading for the group</p>\n",
+                    "line": 75,
                     "type": "string",
                     "decorators": []
+                },
+                {
+                    "name": "useRouter",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nUse the routerLink attribute on <a> tag for navigation instead of using event handlers\n",
+                    "description": "<p>Use the routerLink attribute on <a> tag for navigation instead of using event handlers</p>\n",
+                    "line": 70,
+                    "type": "boolean",
+                    "decorators": []
                 }
             ],
             "outputsClass": [],
@@ -47731,7 +47764,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 59,
+                    "line": 60,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47750,7 +47783,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 60,
+                    "line": 61,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47769,7 +47802,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 64,
+                    "line": 65,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -47787,7 +47820,7 @@
                     "type": "QueryList<SideNavItem>",
                     "optional": false,
                     "description": "",
-                    "line": 82,
+                    "line": 88,
                     "decorators": [
                         {
                             "name": "ContentChildren",
@@ -47806,7 +47839,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 114,
+                    "line": 120,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -47819,7 +47852,7 @@
                     "defaultValue": "\"listitem\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 64,
+                    "line": 65,
                     "type": "string",
                     "decorators": []
                 },
@@ -47828,7 +47861,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 60,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47836,7 +47869,7 @@
                     "name": "class.cds--side-nav__item--active",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 61,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47845,7 +47878,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 60,
+                    "line": 61,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -47856,7 +47889,7 @@
             "description": "<p><code>SideNavMenu</code> provides a method to group <code>SideNavItem</code>s under a common heading.</p>\n",
             "rawdescription": "\n\n`SideNavMenu` provides a method to group `SideNavItem`s under a common heading.\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterContentInit,\n\tComponent,\n\tContentChildren,\n\tInput,\n\tQueryList,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { SideNavItem } from \"./sidenav-item.component\";\nimport { Subscription } from \"rxjs\";\nimport { SideNavItemInterface } from \"./sidenav-item.interface\";\n\n/**\n * `SideNavMenu` provides a method to group `SideNavItem`s under a common heading.\n */\n@Component({\n\tselector: \"cds-sidenav-menu, ibm-sidenav-menu\",\n\ttemplate: `\n\t\t<button\n\t\t\t(click)=\"toggle()\"\n\t\t\tclass=\"cds--side-nav__submenu\"\n\t\t\taria-haspopup=\"true\"\n\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\ttype=\"button\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__submenu-title\">{{title}}</span>\n\t\t\t<div class=\"cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron\">\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t\t<div class=\"cds--side-nav__menu\" role=\"list\">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor=\"let menuItem of menuItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t[href]=\"menuItem.href\"\n\t\t\t\t\t[route]=\"menuItem.route\"\n\t\t\t\t\t[routeExtras]=\"menuItem.routeExtras\"\n\t\t\t\t\t[isSubMenu]=\"true\">\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t`\n})\nexport class SideNavMenu implements AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--side-nav__item\") navItem = true;\n\t@HostBinding(\"class.cds--side-nav__item--icon\") navItemIcon = true;\n\t@HostBinding(\"class.cds--side-nav__item--active\") get navItemActive() {\n\t\treturn this.hasActiveChild;\n\t}\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Heading for the gorup\n\t */\n\t@Input() title: string;\n\t/**\n\t * Controls the visibility of the child `SideNavItem`s\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the active status indicator on the menu if there is an active\n\t * child sidenav item.\n\t */\n\t@Input() hasActiveChild = false;\n\n\t@Input() menuItems: SideNavItemInterface[];\n\n\t@ContentChildren(SideNavItem) sidenavItems: QueryList<SideNavItem>;\n\n\tprotected activeItemsSubscription = new Subscription();\n\n\tngAfterContentInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\titem.isSubMenu = true;\n\t\t\t\tthis.findActiveChildren();\n\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t});\n\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t});\n\n\t\t\tthis.sidenavItems.changes.subscribe(() => {\n\t\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\t\titem.isSubMenu = true;\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\t});\n\t\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\tngOnDestroy() {\n\t\tthis.activeItemsSubscription.unsubscribe();\n\t}\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n\n\tprotected findActiveChildren() {\n\t\tthis.hasActiveChild = this.sidenavItems.some(item => item.active);\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentInit,\n\tComponent,\n\tContentChildren,\n\tInput,\n\tQueryList,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { SideNavItem } from \"./sidenav-item.component\";\nimport { Subscription } from \"rxjs\";\nimport { SideNavItemInterface } from \"./sidenav-item.interface\";\n\n/**\n * `SideNavMenu` provides a method to group `SideNavItem`s under a common heading.\n */\n@Component({\n\tselector: \"cds-sidenav-menu, ibm-sidenav-menu\",\n\ttemplate: `\n\t\t<button\n\t\t\t(click)=\"toggle()\"\n\t\t\tclass=\"cds--side-nav__submenu\"\n\t\t\taria-haspopup=\"true\"\n\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\ttype=\"button\">\n\t\t\t<div class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__submenu-title\">{{title}}</span>\n\t\t\t<div class=\"cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron\">\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"20\"\n\t\t\t\t\theight=\"20\"\n\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t\t<div class=\"cds--side-nav__menu\" role=\"list\">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor=\"let menuItem of menuItems\">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t[href]=\"menuItem.href\"\n\t\t\t\t\t[route]=\"menuItem.route\"\n\t\t\t\t\t[routeExtras]=\"menuItem.routeExtras\"\n\t\t\t\t\t[useRouter]=\"useRouter\"\n\t\t\t\t\t[isSubMenu]=\"true\">\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t`\n})\nexport class SideNavMenu implements AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--side-nav__item\") navItem = true;\n\t@HostBinding(\"class.cds--side-nav__item--icon\") navItemIcon = true;\n\t@HostBinding(\"class.cds--side-nav__item--active\") get navItemActive() {\n\t\treturn this.hasActiveChild;\n\t}\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * Heading for the group\n\t */\n\t@Input() title: string;\n\t/**\n\t * Controls the visibility of the child `SideNavItem`s\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the active status indicator on the menu if there is an active\n\t * child sidenav item.\n\t */\n\t@Input() hasActiveChild = false;\n\n\t@Input() menuItems: SideNavItemInterface[];\n\n\t@ContentChildren(SideNavItem) sidenavItems: QueryList<SideNavItem>;\n\n\tprotected activeItemsSubscription = new Subscription();\n\n\tngAfterContentInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\titem.isSubMenu = true;\n\t\t\t\tthis.findActiveChildren();\n\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t});\n\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t});\n\n\t\t\tthis.sidenavItems.changes.subscribe(() => {\n\t\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\t\titem.isSubMenu = true;\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\t});\n\t\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\tngOnDestroy() {\n\t\tthis.activeItemsSubscription.unsubscribe();\n\t}\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n\n\tprotected findActiveChildren() {\n\t\tthis.hasActiveChild = this.sidenavItems.some(item => item.active);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -47871,7 +47904,7 @@
                         "name": "navItemActive",
                         "type": "",
                         "returnType": "",
-                        "line": 61
+                        "line": 62
                     }
                 }
             }
@@ -67579,13 +67612,13 @@
         },
         {
             "name": "SideNavModule",
-            "id": "module-SideNavModule-8abc8f4178079676eafae7d8b35bf88b2f873b13f48e01ae7a1fca260069d9da97b85cf09a0d43ad04ed69299c604c7836200e4e40635a7b4f8da955dd4d7122",
+            "id": "module-SideNavModule-1610967950c32132f9d79a85c5f9a68964d706441e799842c0f364cd6226a51c042421f2c369d3c13bf4d8dd430bbaa01b8ff20b03bdf329e31210c556d8d179",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/ui-shell/sidenav/sidenav.module.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { I18nModule } from \"carbon-components-angular/i18n\";\n\nimport { SideNav } from \"./sidenav.component\";\nimport { SideNavItem } from \"./sidenav-item.component\";\nimport { SideNavMenu } from \"./sidenav-menu.component\";\n\nexport { SideNavItemInterface } from \"./sidenav-item.interface\";\n\nexport {\n\tSideNav,\n\tSideNavItem,\n\tSideNavMenu\n};\n\n@NgModule({\n\tdeclarations: [\n\t\tSideNav,\n\t\tSideNavItem,\n\t\tSideNavMenu\n\t],\n\timports: [CommonModule, I18nModule],\n\texports: [\n\t\tSideNav,\n\t\tSideNavItem,\n\t\tSideNavMenu\n\t]\n})\nexport class SideNavModule { }\n",
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { RouterModule } from \"@angular/router\";\n\nimport { I18nModule } from \"carbon-components-angular/i18n\";\n\nimport { SideNav } from \"./sidenav.component\";\nimport { SideNavItem } from \"./sidenav-item.component\";\nimport { SideNavMenu } from \"./sidenav-menu.component\";\n\nexport { SideNavItemInterface } from \"./sidenav-item.interface\";\n\nexport {\n\tSideNav,\n\tSideNavItem,\n\tSideNavMenu\n};\n\n@NgModule({\n\tdeclarations: [\n\t\tSideNav,\n\t\tSideNavItem,\n\t\tSideNavMenu\n\t],\n\timports: [CommonModule, I18nModule, RouterModule],\n\texports: [\n\t\tSideNav,\n\t\tSideNavItem,\n\t\tSideNavMenu\n\t]\n})\nexport class SideNavModule { }\n",
             "children": [
                 {
                     "type": "providers",
@@ -71075,6 +71108,26 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div [cdsTheme]=\"theme\">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item [active]=\"true\">\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" icon size=\"16\"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t`\n})"
             },
+            {
+                "name": "SideNavigationUseRouter",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/ui-shell/ui-shell.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "SideNavigationUseRouterTemplate.bind({})"
+            },
+            {
+                "name": "SideNavigationUseRouterTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/ui-shell/ui-shell.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div [cdsTheme]=\"theme\">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item [route]=\"['bar']\" [useRouter]=\"true\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" icon size=\"16\"></svg>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['bar']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t\t<div style=\"margin-left: 256px\">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t`\n})"
+            },
             {
                 "name": "SidePanel",
                 "ctype": "miscellaneous",
@@ -74631,6 +74684,26 @@
                     "type": "",
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div [cdsTheme]=\"theme\">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item [active]=\"true\">\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item>\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" icon size=\"16\"></svg>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item>Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t`\n})"
                 },
+                {
+                    "name": "SideNavigationUseRouter",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/ui-shell/ui-shell.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "SideNavigationUseRouterTemplate.bind({})"
+                },
+                {
+                    "name": "SideNavigationUseRouterTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/ui-shell/ui-shell.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div [cdsTheme]=\"theme\">\n\t\t\t<cds-sidenav>\n\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-item [route]=\"['bar']\" [useRouter]=\"true\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" size=\"16\"></svg>\n\t\t\t\t\tLink\n\t\t\t\t</cds-sidenav-item>\n\t\t\t\t<cds-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg cdsIcon=\"fade\" icon size=\"16\"></svg>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['bar']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t\t<cds-sidenav-item [route]=\"['foo']\" [useRouter]=\"true\">Link</cds-sidenav-item>\n\t\t\t\t</cds-sidenav-menu>\n\t\t\t</cds-sidenav>\n\t\t</div>\n\t\t<div style=\"margin-left: 256px\">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t`\n})"
+                },
                 {
                     "name": "SidePanel",
                     "ctype": "miscellaneous",
@@ -86128,8 +86201,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "SideNavItem",
-                "coveragePercent": 53,
-                "coverageCount": "8/15",
+                "coveragePercent": 56,
+                "coverageCount": "9/16",
                 "status": "good"
             },
             {
@@ -86146,8 +86219,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "SideNavMenu",
-                "coveragePercent": 28,
-                "coverageCount": "4/14",
+                "coveragePercent": 33,
+                "coverageCount": "5/15",
                 "status": "medium"
             },
             {
@@ -86155,8 +86228,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "SideNav",
-                "coveragePercent": 28,
-                "coverageCount": "4/14",
+                "coveragePercent": 33,
+                "coverageCount": "5/15",
                 "status": "medium"
             },
             {
@@ -86356,6 +86429,26 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/ui-shell/ui-shell.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SideNavigationUseRouter",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/ui-shell/ui-shell.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SideNavigationUseRouterTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/ui-shell/ui-shell.stories.ts",
                 "type": "variable",