carbon-components-angular 5.27.0 → 5.27.2

package/docs/documentation.json

@@ -24032,7 +24032,7 @@
         },
         {
             "name": "ContainedList",
-            "id": "component-ContainedList-44477bf19b919feee570020e17aea473448d53cc0ac107f279c904dc470293c3ef4b55a33bf5f2fc7a9b7ae01dc6ede24669e70657b0be632882066ded8c4f30",
+            "id": "component-ContainedList-1c5ffbaef841f69f00060fb737ec1c6de87711ca940bb0ee583f6f72a622bbd432d83b7a108c206bf6be21d76cbb9eba927f19cd6a805717037baf59af9656dd",
             "file": "src/contained-list/contained-list.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -24043,7 +24043,7 @@
             "selector": "cds-contained-list, ibm-contained-list",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tclass=\"cds--contained-list\"\n\t[ngClass]=\"{\n\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge\n\t}\">\n\t<div class=\"cds--contained-list__header\">\n\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</div>\n\n\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t</div>\n\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
+            "template": "<div\n\tclass=\"cds--contained-list\"\n\t[ngClass]=\"{\n\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge,\n\t\t'cds--layout--size-sm': size === ContainedListSize.Small,\n\t\t'cds--layout--size-md': size === ContainedListSize.Medium,\n\t\t'cds--layout--size-lg': size === ContainedListSize.Large,\n\t\t'cds--layout--size-xl': size === ContainedListSize.ExtraLarge\n\t}\">\n\t<div class=\"cds--contained-list__header\">\n\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</div>\n\n\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t</div>\n\t</div>\n\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -24054,7 +24054,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nA slot for a possible interactive element to render within the list header.\n",
                     "description": "<p>A slot for a possible interactive element to render within the list header.</p>\n",
-                    "line": 57,
+                    "line": 61,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -24065,7 +24065,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify whether the dividing lines in between list items should be inset.\n",
                     "description": "<p>Specify whether the dividing lines in between list items should be inset.</p>\n",
-                    "line": 62,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -24076,7 +24076,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe kind of ContainedList you want to display.\n",
                     "description": "<p>The kind of ContainedList you want to display.</p>\n",
-                    "line": 67,
+                    "line": 71,
                     "type": "ContainedListKind",
                     "decorators": []
                 },
@@ -24086,7 +24086,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nA label describing the contained list.\n",
                     "description": "<p>A label describing the contained list.</p>\n",
-                    "line": 72,
+                    "line": 76,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -24097,7 +24097,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel id for the contained list.\n",
                     "description": "<p>Label id for the contained list.</p>\n",
-                    "line": 82,
+                    "line": 86,
                     "type": "string",
                     "decorators": []
                 },
@@ -24108,7 +24108,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the size of the contained list.\n",
                     "description": "<p>Specify the size of the contained list.</p>\n",
-                    "line": 77,
+                    "line": 81,
                     "type": "ContainedListSize",
                     "decorators": []
                 }
@@ -24123,7 +24123,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Exposing ContainedListKind enum to the template</p>\n",
-                    "line": 92,
+                    "line": 96,
                     "rawdescription": "\n\nExposing ContainedListKind enum to the template\n",
                     "modifierKind": [
                         125
@@ -24137,7 +24137,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Exposing ContainedListSize enum to the template</p>\n",
-                    "line": 87,
+                    "line": 91,
                     "rawdescription": "\n\nExposing ContainedListSize enum to the template\n",
                     "modifierKind": [
                         125
@@ -24158,7 +24158,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 94,
+                    "line": 98,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -24186,7 +24186,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ContainedListModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-contained-list--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContainedListModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-contained-list--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ContainedListKind, ContainedListSize } from \"./contained-list.enums\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContainedListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-contained-list--basic)\n */\n@Component({\n\tselector: \"cds-contained-list, ibm-contained-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--contained-list\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge\n\t\t\t}\">\n\t\t\t<div class=\"cds--contained-list__header\">\n\t\t\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedList {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/**\n\t * A slot for a possible interactive element to render within the list header.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Specify whether the dividing lines in between list items should be inset.\n\t */\n\t@Input() isInset = false;\n\n\t/**\n\t * The kind of ContainedList you want to display.\n\t */\n\t@Input() kind: ContainedListKind = ContainedListKind.OnPage;\n\n\t/**\n\t * A label describing the contained list.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\n\t/**\n\t * Specify the size of the contained list.\n\t */\n\t@Input() size: ContainedListSize = ContainedListSize.Large;\n\n\t/**\n\t * Label id for the contained list.\n\t */\n\t@Input() labelId = `contained-list-${ContainedList.count++}-header`;\n\n\t/**\n\t * Exposing ContainedListSize enum to the template\n\t */\n\tpublic ContainedListSize: typeof ContainedListSize = ContainedListSize;\n\n\t/**\n\t * Exposing ContainedListKind enum to the template\n\t */\n\tpublic ContainedListKind: typeof ContainedListKind = ContainedListKind;\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ContainedListKind, ContainedListSize } from \"./contained-list.enums\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContainedListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-contained-list--basic)\n */\n@Component({\n\tselector: \"cds-contained-list, ibm-contained-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--contained-list\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--contained-list--inset-rulers': isInset,\n\t\t\t\t'cds--contained-list--on-page': kind === ContainedListKind.OnPage,\n\t\t\t\t'cds--contained-list--disclosed': kind === ContainedListKind.Disclosed,\n\t\t\t\t'cds--contained-list--sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--contained-list--md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--contained-list--lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--contained-list--xl': size === ContainedListSize.ExtraLarge,\n\t\t\t\t'cds--layout--size-sm': size === ContainedListSize.Small,\n\t\t\t\t'cds--layout--size-md': size === ContainedListSize.Medium,\n\t\t\t\t'cds--layout--size-lg': size === ContainedListSize.Large,\n\t\t\t\t'cds--layout--size-xl': size === ContainedListSize.ExtraLarge\n\t\t\t}\">\n\t\t\t<div class=\"cds--contained-list__header\">\n\t\t\t\t<div [id]=\"labelId\" class=\"cds--contained-list__label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"cds--contained-list__action\" *ngIf=\"action\">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role=\"list\" [attr.aria-labelledby]=\"labelId\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedList {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/**\n\t * A slot for a possible interactive element to render within the list header.\n\t */\n\t@Input() action: TemplateRef<any>;\n\n\t/**\n\t * Specify whether the dividing lines in between list items should be inset.\n\t */\n\t@Input() isInset = false;\n\n\t/**\n\t * The kind of ContainedList you want to display.\n\t */\n\t@Input() kind: ContainedListKind = ContainedListKind.OnPage;\n\n\t/**\n\t * A label describing the contained list.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\n\t/**\n\t * Specify the size of the contained list.\n\t */\n\t@Input() size: ContainedListSize = ContainedListSize.Large;\n\n\t/**\n\t * Label id for the contained list.\n\t */\n\t@Input() labelId = `contained-list-${ContainedList.count++}-header`;\n\n\t/**\n\t * Exposing ContainedListSize enum to the template\n\t */\n\tpublic ContainedListSize: typeof ContainedListSize = ContainedListSize;\n\n\t/**\n\t * Exposing ContainedListKind enum to the template\n\t */\n\tpublic ContainedListKind: typeof ContainedListKind = ContainedListKind;\n\n\tpublic isTemplate(value: string | TemplateRef<any>) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -48783,7 +48783,7 @@
         },
         {
             "name": "SideNavItem",
-            "id": "component-SideNavItem-0e90d789334ddeff849fa154a071e2be9fbc9fff93061fabaa13b524a0be523b6ec985e1cbeba78aee33da52011a7da7305958e51f17f3d665fa6d277cc26d71",
+            "id": "component-SideNavItem-4ee73859c5cb9524fc3b4aa56cccdc688c59ba72c7a1f463dd3735971000f5c0e12635a8336943a8f922bd7b49e9effffb0e7db1b82f92cf830d1c7ea5b076fc",
             "file": "src/ui-shell/sidenav/sidenav-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48795,7 +48795,7 @@
             "styles": [
                 "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"
             ],
-            "template": "<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\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<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\t(click)=\"navigate($event)\"\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",
+            "template": "<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\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<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n</a>\n\n<ng-template #sidenavItemRouterTpl>\n\t<a\n\t\t[attr.title]=\"title ? title : null\"\n\t\t[routerLink]=\"route\"\n\t\t\t[relativeTo]=\"routeExtras?.relativeTo\"\n\t\t[queryParams]=\"routeExtras?.queryParams\"\n\t\t[fragment]=\"routeExtras?.fragment\"\n\t\t[queryParamsHandling]=\"routeExtras?.queryParamsHandling\"\n\t\t[preserveFragment]=\"routeExtras?.preserveFragment\"\n\t\t[skipLocationChange]=\"routeExtras?.skipLocationChange\"\n\t\t[replaceUrl]=\"routeExtras?.replaceUrl\"\n\t\t[state]=\"routeExtras?.state\"\n\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\tariaCurrentWhenActive=\"page\"\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": [],
@@ -48807,7 +48807,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": 91,
+                    "line": 98,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48817,7 +48817,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": 63,
+                    "line": 70,
                     "type": "string",
                     "decorators": []
                 },
@@ -48826,7 +48826,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 99,
+                    "line": 106,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48836,7 +48836,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": 97,
+                    "line": 104,
                     "type": "any[]",
                     "decorators": []
                 },
@@ -48846,7 +48846,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": 105,
+                    "line": 112,
                     "type": "any",
                     "decorators": []
                 },
@@ -48856,7 +48856,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle attribute of the anchor element.\n",
                     "description": "<p>Title attribute of the anchor element.</p>\n",
-                    "line": 110,
+                    "line": 117,
                     "type": "string",
                     "decorators": []
                 },
@@ -48867,7 +48867,7 @@
                     "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": 78,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -48880,7 +48880,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": 115,
+                    "line": 122,
                     "type": "EventEmitter"
                 },
                 {
@@ -48890,7 +48890,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": 121,
+                    "line": 128,
                     "type": "EventEmitter"
                 }
             ],
@@ -48903,7 +48903,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 123,
+                    "line": 130,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -48929,7 +48929,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 142,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48953,7 +48953,7 @@
                     "defaultValue": "\"listitem\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 130,
                     "type": "string",
                     "decorators": []
                 },
@@ -48961,7 +48961,7 @@
                     "name": "class.cds--side-nav__item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 80,
+                    "line": 87,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48969,7 +48969,7 @@
                     "name": "class.cds--side-nav__menu-item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 84,
+                    "line": 91,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -48980,7 +48980,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\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\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<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\t(click)=\"navigate($event)\"\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 = false;\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",
+            "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\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<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[attr.title]=\"title ? title : null\"\n\t\t\t\t[routerLink]=\"route\"\n \t\t\t\t[relativeTo]=\"routeExtras?.relativeTo\"\n\t\t\t\t[queryParams]=\"routeExtras?.queryParams\"\n\t\t\t\t[fragment]=\"routeExtras?.fragment\"\n\t\t\t\t[queryParamsHandling]=\"routeExtras?.queryParamsHandling\"\n\t\t\t\t[preserveFragment]=\"routeExtras?.preserveFragment\"\n\t\t\t\t[skipLocationChange]=\"routeExtras?.skipLocationChange\"\n\t\t\t\t[replaceUrl]=\"routeExtras?.replaceUrl\"\n\t\t\t\t[state]=\"routeExtras?.state\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\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 = false;\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",
@@ -49003,7 +49003,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 125,
+                "line": 132,
                 "jsdoctags": [
                     {
                         "name": "domSanitizer",
@@ -49046,7 +49046,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 63,
+                        "line": 70,
                         "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": [
@@ -49065,7 +49065,7 @@
                         "name": "href",
                         "type": "",
                         "returnType": "",
-                        "line": 71
+                        "line": 78
                     }
                 },
                 "sideNav": {
@@ -49074,7 +49074,7 @@
                         "name": "sideNav",
                         "type": "",
                         "returnType": "",
-                        "line": 80
+                        "line": 87
                     }
                 },
                 "menuItem": {
@@ -49083,7 +49083,7 @@
                         "name": "menuItem",
                         "type": "",
                         "returnType": "",
-                        "line": 84
+                        "line": 91
                     }
                 }
             }
@@ -74394,7 +74394,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => {\n\targs = {\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\n\t\t\t<cds-contained-list label=\"List title\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
+                "defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
             },
             {
                 "name": "withActionsTemplate",
@@ -74404,7 +74404,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<cds-contained-list label=\"List title\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
+                "defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
             },
             {
                 "name": "WithAutoAlign",
@@ -77263,7 +77263,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => {\n\targs = {\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\n\t\t\t<cds-contained-list label=\"List title\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
+                    "defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t<ng-template #actionWithClick let-actionData>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"ghost\"\n\t\t\t\t\taria-label=\"Action\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t(click)=\"onActionClick(actionData)\">\n\t\t\t\t\t<svg ibmIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t\t<cds-contained-list-item\n\t\t\t\t\t*ngFor=\"let item of items\"\n\t\t\t\t\t[action]=\"actionWithClick\"\n\t\t\t\t\t[actionData]=\"item\">\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t</cds-contained-list-item>\n\t\t\t</cds-contained-list>\n\t\t`\n\t};\n}"
                 },
                 {
                     "name": "withActionsTemplate",
@@ -77273,7 +77273,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<cds-contained-list label=\"List title\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
+                    "defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<cds-contained-list label=\"List title\" [size]=\"size\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
                 },
                 {
                     "name": "withIcons",

package/docs/storybook/{3348.03939d46.iframe.bundle.js → 3348.542f8c47.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3348],{"./src/ui-shell/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p5:()=>UIShellModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let Header=class Header{constructor(i18n,domSanitizer,router){this.i18n=i18n,this.domSanitizer=domSanitizer,this.router=router,this.brand="IBM",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}isTemplate(value){return value instanceof core.TemplateRef}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};Header.ctorParameters=()=>[{type:i18n.oc},{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],Header.propDecorators={skipTo:[{type:core.Input}],name:[{type:core.Input}],brand:[{type:core.Input}],href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],useRouter:[{type:core.Input}],navigation:[{type:core.Output}]},Header=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header, ibm-header",template:'\n\t\t<header\n\t\t\tclass="cds--header"\n\t\t\t[attr.aria-label]="brand + \' \' + name">\n\t\t\t<a\n\t\t\t\t*ngIf="skipTo"\n\t\t\t\tclass="cds--skip-to-content"\n\t\t\t\t[href]="skipTo"\n\t\t\t\ttabindex="0">\n\t\t\t\t{{ i18n.get("UI_SHELL.SKIP_TO") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select="cds-hamburger,ibm-hamburger"></ng-content>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="isTemplate(brand)"\n\t\t\t\t[ngTemplateOutlet]="brand">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="false"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[href]="href"\n\t\t\t\t\t(click)="navigate($event)">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="true"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[routerLink]="route">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t'})],Header);let HeaderItem=class HeaderItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.role="listitem",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};HeaderItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],HeaderItem.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],href:[{type:core.Input}],useRouter:[{type:core.Input}],activeLinkClass:[{type:core.Input}],isCurrentPage:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},HeaderItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-item, ibm-header-item",template:'\n\t\t<ng-container [ngSwitch]="useRouter">\n\t\t\t<ng-template #content><ng-content></ng-content></ng-template>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="false"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[href]="href"\n\t\t\t\t(click)="navigate($event)">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="true"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\t[routerLinkActive]="[\'cds--header__menu-item--current\']"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[routerLink]="route"\n\t\t\t\t[routerLinkActive]="activeLinkClass">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t</ng-container>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderItem);let HeaderMenu=class HeaderMenu{constructor(domSanitizer,elementRef){this.domSanitizer=domSanitizer,this.elementRef=elementRef,this.subMenu=!0,this.role="listitem",this.trigger="click",this.expanded=!1,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}onClick(){"click"===this.trigger&&(this.expanded=!this.expanded)}onMouseOver(){"mouseover"===this.trigger&&(this.expanded=!0)}onMouseOut(){"mouseover"===this.trigger&&(this.expanded=!1)}onFocusOut(event){this.elementRef.nativeElement.contains(event.relatedTarget)||(this.expanded=!1)}navigate(event){"#"===this._href&&event.preventDefault()}};HeaderMenu.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:core.ElementRef}],HeaderMenu.propDecorators={subMenu:[{type:core.HostBinding,args:["class.cds--header__submenu"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],href:[{type:core.Input}],trigger:[{type:core.Input}],headerItems:[{type:core.Input}],icon:[{type:core.Input}],onClick:[{type:core.HostListener,args:["click"]}],onMouseOver:[{type:core.HostListener,args:["mouseover"]}],onMouseOut:[{type:core.HostListener,args:["mouseout"]}],onFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},HeaderMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-menu, ibm-header-menu",template:'\n\t\t<a\n\t\t\tclass="cds--header__menu-item cds--header__menu-title"\n\t\t\t[href]="href"\n\t\t\ttabindex="0"\n\t\t\taria-haspopup="menu"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\t(click)="navigate($event)">\n\t\t\t{{title}}\n\t\t\t<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t<ng-template #defaultIcon>\n\t\t\t\t<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">\n\t\t\t\t\t<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />\n\t\t\t\t</svg>\n\t\t\t</ng-template>\n\t\t</a>\n\t\t<div class="cds--header__menu" [attr.aria-label]="title">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let headerItem of headerItems">\n\t\t\t\t<cds-header-item\n\t\t\t\t\t[href]="headerItem.href"\n\t\t\t\t\t[route]="headerItem.route"\n\t\t\t\t\t[routeExtras]="headerItem.routeExtras">\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t</cds-header-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderMenu);let HeaderNavigation=class HeaderNavigation{constructor(){this.height=100}};HeaderNavigation.propDecorators={height:[{type:core.HostBinding,args:["style.height.%"]}],ariaLabel:[{type:core.Input}],navigationItems:[{type:core.Input}]},HeaderNavigation=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-navigation, ibm-header-navigation",template:'\n\t\t<nav class="cds--header__nav" [attr.aria-label]="ariaLabel">\n\t\t\t<div class="cds--header__menu-bar" role="list">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t<cds-header-item\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t[isCurrentPage]="!!navigationItem.isCurrentPage">\n\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t</cds-header-item>\n\t\t\t\t\t<cds-header-menu\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t[trigger]="navigationItem.trigger ? navigationItem.trigger : \'click\'"\n\t\t\t\t\t\t[headerItems]="navigationItem.menuItems">\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</nav>\n\t'})],HeaderNavigation);let HeaderGlobal=class HeaderGlobal{constructor(){this.hostClass=!0}};HeaderGlobal.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--header__global"]}]},HeaderGlobal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-global, ibm-header-global",template:"\n\t\t<ng-content></ng-content>\n\t"})],HeaderGlobal);let HeaderAction=class HeaderAction extends src_button.HL{constructor(){super(...arguments),this.active=!1,this.activeChange=new core.EventEmitter,this.selected=new core.EventEmitter}onClick(){this.active=!this.active,this.selected.emit(this.active),this.activeChange.emit(this.active)}};HeaderAction.propDecorators={description:[{type:core.Input}],ariaLabel:[{type:core.Input}],active:[{type:core.Input}],activeChange:[{type:core.Output}],selected:[{type:core.Output}]},HeaderAction=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-action, ibm-header-action",template:'\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{\n\t\t\t\t\'cds--header__action\': true,\n\t\t\t\t\'cds--header__action--active\': active\n\t\t\t}"\n\t\t\t(click)="onClick()"\n\t\t\t[align]="align"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[description]="description"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-label\': ariaLabel\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-icon-button>\n\t'})],HeaderAction);let Hamburger=class Hamburger{constructor(i18n){this.i18n=i18n,this.active=!1,this.activeTitle=this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU,this.inactiveTitle=this.i18n.get().UI_SHELL.HEADER.OPEN_MENU,this.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{type:core.Input}],activeTitle:[{type:core.Input}],inactiveTitle:[{type:core.Input}],selected:[{type:core.Output}]},Hamburger=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-hamburger, ibm-hamburger",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="doClick()"\n\t\t\t[ngClass]="{\'cds--header__action--active\': active}"\n\t\t\tclass="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"\n\t\t\t[attr.aria-label]="active ? activeTitle : inactiveTitle"\n\t\t\t[attr.title]="active ? activeTitle : inactiveTitle">\n\t\t\t<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>\n\t\t\t<svg *ngIf="active" cdsIcon="close" size="20"></svg>\n\t\t</button>\n\t'})],Hamburger);let HeaderModule=class HeaderModule{};HeaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger],imports:[common.CommonModule,src_button.hJ,i18n.LU,icon.QX,router.Bz],exports:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger]})],HeaderModule);let SideNav=class SideNav{constructor(i18n){this.i18n=i18n,this.hostClass=!0,this.ariaLabel="Side navigation",this.expanded=!0,this.hidden=!1,this.rail=!1,this.ux=!0,this.allowExpansion=!1,this.useRouter=!1}toggle(){this.expanded=!this.expanded}};SideNav.ctorParameters=()=>[{type:i18n.oc}],SideNav.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--side-nav"]}],ariaLabel:[{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--side-nav--expanded"]},{type:core.Input}],hidden:[{type:core.HostBinding,args:["class.cds--side-nav--hidden"]},{type:core.Input}],rail:[{type:core.HostBinding,args:["class.cds--side-nav--rail"]},{type:core.Input}],ux:[{type:core.HostBinding,args:["class.cds--side-nav__navigation"]}],allowExpansion:[{type:core.Input}],navigationItems:[{type:core.Input}],useRouter:[{type:core.Input}]},SideNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav, ibm-sidenav",template:'\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',encapsulation:core.ViewEncapsulation.None})],SideNav);let SideNavItem=class SideNavItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.useRouter=!1,this.active=!1,this.isSubMenu=!1,this.navigation=new core.EventEmitter,this.selected=new core.EventEmitter,this.role="listitem",this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}get sideNav(){return!this.isSubMenu}get menuItem(){return this.isSubMenu}ngOnChanges(changes){changes.active&&this.selected.emit(this.active)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SideNavItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SideNavItem.propDecorators={href:[{type:core.Input}],useRouter:[{type:core.Input}],sideNav:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],menuItem:[{type:core.HostBinding,args:["class.cds--side-nav__menu-item"]}],active:[{type:core.Input}],route:[{type:core.Input}],isSubMenu:[{type:core.Input}],routeExtras:[{type:core.Input}],title:[{type:core.Input}],navigation:[{type:core.Output}],selected:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}]},SideNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-item, ibm-sidenav-item",template:'\n\t\t<a *ngIf="!useRouter; else sidenavItemRouterTpl"\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<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\t(click)="navigate($event)"\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',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],SideNavItem);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js");let SideNavMenu=class SideNavMenu{constructor(){this.navItem=!0,this.navItemIcon=!0,this.role="listitem",this.useRouter=!1,this.expanded=!1,this.hasActiveChild=!1,this.activeItemsSubscription=new Subscription.w0}get navItemActive(){return this.hasActiveChild}ngAfterContentInit(){setTimeout((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)})),this.sidenavItems.changes.subscribe((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)}))}))}))}ngOnDestroy(){this.activeItemsSubscription.unsubscribe()}toggle(){this.expanded=!this.expanded}findActiveChildren(){this.hasActiveChild=this.sidenavItems.some((item=>item.active))}};SideNavMenu.propDecorators={navItem:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],navItemIcon:[{type:core.HostBinding,args:["class.cds--side-nav__item--icon"]}],navItemActive:[{type:core.HostBinding,args:["class.cds--side-nav__item--active"]}],role:[{type:core.HostBinding,args:["attr.role"]}],useRouter:[{type:core.Input}],title:[{type:core.Input}],expanded:[{type:core.Input}],hasActiveChild:[{type:core.Input}],menuItems:[{type:core.Input}],sidenavItems:[{type:core.ContentChildren,args:[SideNavItem]}]},SideNavMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-menu, ibm-sidenav-menu",template:'\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'})],SideNavMenu);let SideNavModule=class SideNavModule{};SideNavModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SideNav,SideNavItem,SideNavMenu],imports:[common.CommonModule,i18n.LU,router.Bz],exports:[SideNav,SideNavItem,SideNavMenu]})],SideNavModule);let Panel=class Panel{constructor(){this.expanded=!1}};Panel.propDecorators={expanded:[{type:core.Input}],ariaLabel:[{type:core.Input}]},Panel=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-panel, ibm-panel",template:'\n\t\t<div\n\t\t\tclass="cds--header-panel"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--header-panel--expanded\': expanded\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Panel);let SwitcherList=class SwitcherList{constructor(){this.switcher=!0,this.role="list"}};SwitcherList.propDecorators={switcher:[{type:core.HostBinding,args:["class.cds--switcher"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list, ibm-switcher-list",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],SwitcherList);let SwitcherListItem=class SwitcherListItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.navigation=new core.EventEmitter,this.itemClass=!0,this.itemRole="listitem",this._href="#",this._target=""}set href(value){this._href=value}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}set target(value){this._target=value}get target(){return this._target}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SwitcherListItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SwitcherListItem.propDecorators={active:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],href:[{type:core.Input}],navigation:[{type:core.Output}],target:[{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--switcher__item"]}],itemRole:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list-item, ibm-switcher-list-item",template:'\n\t\t<a\n\t\t\tclass="cds--switcher__item-link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--switcher__item-link--selected\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[target]="target"\n\t\t\t(click)="navigate($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t'})],SwitcherListItem);let PanelModule=class PanelModule{};PanelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Panel,SwitcherList,SwitcherListItem],imports:[common.CommonModule,i18n.LU],exports:[Panel,SwitcherList,SwitcherListItem]})],PanelModule);let UIShellModule=class UIShellModule{};UIShellModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,i18n.LU,HeaderModule,SideNavModule,PanelModule],exports:[HeaderModule,SideNavModule,PanelModule]})],UIShellModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3348],{"./src/ui-shell/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p5:()=>UIShellModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let Header=class Header{constructor(i18n,domSanitizer,router){this.i18n=i18n,this.domSanitizer=domSanitizer,this.router=router,this.brand="IBM",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}isTemplate(value){return value instanceof core.TemplateRef}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};Header.ctorParameters=()=>[{type:i18n.oc},{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],Header.propDecorators={skipTo:[{type:core.Input}],name:[{type:core.Input}],brand:[{type:core.Input}],href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],useRouter:[{type:core.Input}],navigation:[{type:core.Output}]},Header=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header, ibm-header",template:'\n\t\t<header\n\t\t\tclass="cds--header"\n\t\t\t[attr.aria-label]="brand + \' \' + name">\n\t\t\t<a\n\t\t\t\t*ngIf="skipTo"\n\t\t\t\tclass="cds--skip-to-content"\n\t\t\t\t[href]="skipTo"\n\t\t\t\ttabindex="0">\n\t\t\t\t{{ i18n.get("UI_SHELL.SKIP_TO") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select="cds-hamburger,ibm-hamburger"></ng-content>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="isTemplate(brand)"\n\t\t\t\t[ngTemplateOutlet]="brand">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="false"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[href]="href"\n\t\t\t\t\t(click)="navigate($event)">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="true"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[routerLink]="route">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t'})],Header);let HeaderItem=class HeaderItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.role="listitem",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};HeaderItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],HeaderItem.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],href:[{type:core.Input}],useRouter:[{type:core.Input}],activeLinkClass:[{type:core.Input}],isCurrentPage:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},HeaderItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-item, ibm-header-item",template:'\n\t\t<ng-container [ngSwitch]="useRouter">\n\t\t\t<ng-template #content><ng-content></ng-content></ng-template>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="false"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[href]="href"\n\t\t\t\t(click)="navigate($event)">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="true"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\t[routerLinkActive]="[\'cds--header__menu-item--current\']"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[routerLink]="route"\n\t\t\t\t[routerLinkActive]="activeLinkClass">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t</ng-container>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderItem);let HeaderMenu=class HeaderMenu{constructor(domSanitizer,elementRef){this.domSanitizer=domSanitizer,this.elementRef=elementRef,this.subMenu=!0,this.role="listitem",this.trigger="click",this.expanded=!1,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}onClick(){"click"===this.trigger&&(this.expanded=!this.expanded)}onMouseOver(){"mouseover"===this.trigger&&(this.expanded=!0)}onMouseOut(){"mouseover"===this.trigger&&(this.expanded=!1)}onFocusOut(event){this.elementRef.nativeElement.contains(event.relatedTarget)||(this.expanded=!1)}navigate(event){"#"===this._href&&event.preventDefault()}};HeaderMenu.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:core.ElementRef}],HeaderMenu.propDecorators={subMenu:[{type:core.HostBinding,args:["class.cds--header__submenu"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],href:[{type:core.Input}],trigger:[{type:core.Input}],headerItems:[{type:core.Input}],icon:[{type:core.Input}],onClick:[{type:core.HostListener,args:["click"]}],onMouseOver:[{type:core.HostListener,args:["mouseover"]}],onMouseOut:[{type:core.HostListener,args:["mouseout"]}],onFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},HeaderMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-menu, ibm-header-menu",template:'\n\t\t<a\n\t\t\tclass="cds--header__menu-item cds--header__menu-title"\n\t\t\t[href]="href"\n\t\t\ttabindex="0"\n\t\t\taria-haspopup="menu"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\t(click)="navigate($event)">\n\t\t\t{{title}}\n\t\t\t<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t<ng-template #defaultIcon>\n\t\t\t\t<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">\n\t\t\t\t\t<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />\n\t\t\t\t</svg>\n\t\t\t</ng-template>\n\t\t</a>\n\t\t<div class="cds--header__menu" [attr.aria-label]="title">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let headerItem of headerItems">\n\t\t\t\t<cds-header-item\n\t\t\t\t\t[href]="headerItem.href"\n\t\t\t\t\t[route]="headerItem.route"\n\t\t\t\t\t[routeExtras]="headerItem.routeExtras">\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t</cds-header-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderMenu);let HeaderNavigation=class HeaderNavigation{constructor(){this.height=100}};HeaderNavigation.propDecorators={height:[{type:core.HostBinding,args:["style.height.%"]}],ariaLabel:[{type:core.Input}],navigationItems:[{type:core.Input}]},HeaderNavigation=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-navigation, ibm-header-navigation",template:'\n\t\t<nav class="cds--header__nav" [attr.aria-label]="ariaLabel">\n\t\t\t<div class="cds--header__menu-bar" role="list">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t<cds-header-item\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t[isCurrentPage]="!!navigationItem.isCurrentPage">\n\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t</cds-header-item>\n\t\t\t\t\t<cds-header-menu\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t[trigger]="navigationItem.trigger ? navigationItem.trigger : \'click\'"\n\t\t\t\t\t\t[headerItems]="navigationItem.menuItems">\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</nav>\n\t'})],HeaderNavigation);let HeaderGlobal=class HeaderGlobal{constructor(){this.hostClass=!0}};HeaderGlobal.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--header__global"]}]},HeaderGlobal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-global, ibm-header-global",template:"\n\t\t<ng-content></ng-content>\n\t"})],HeaderGlobal);let HeaderAction=class HeaderAction extends src_button.HL{constructor(){super(...arguments),this.active=!1,this.activeChange=new core.EventEmitter,this.selected=new core.EventEmitter}onClick(){this.active=!this.active,this.selected.emit(this.active),this.activeChange.emit(this.active)}};HeaderAction.propDecorators={description:[{type:core.Input}],ariaLabel:[{type:core.Input}],active:[{type:core.Input}],activeChange:[{type:core.Output}],selected:[{type:core.Output}]},HeaderAction=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-action, ibm-header-action",template:'\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{\n\t\t\t\t\'cds--header__action\': true,\n\t\t\t\t\'cds--header__action--active\': active\n\t\t\t}"\n\t\t\t(click)="onClick()"\n\t\t\t[align]="align"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[description]="description"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-label\': ariaLabel\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-icon-button>\n\t'})],HeaderAction);let Hamburger=class Hamburger{constructor(i18n){this.i18n=i18n,this.active=!1,this.activeTitle=this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU,this.inactiveTitle=this.i18n.get().UI_SHELL.HEADER.OPEN_MENU,this.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{type:core.Input}],activeTitle:[{type:core.Input}],inactiveTitle:[{type:core.Input}],selected:[{type:core.Output}]},Hamburger=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-hamburger, ibm-hamburger",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="doClick()"\n\t\t\t[ngClass]="{\'cds--header__action--active\': active}"\n\t\t\tclass="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"\n\t\t\t[attr.aria-label]="active ? activeTitle : inactiveTitle"\n\t\t\t[attr.title]="active ? activeTitle : inactiveTitle">\n\t\t\t<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>\n\t\t\t<svg *ngIf="active" cdsIcon="close" size="20"></svg>\n\t\t</button>\n\t'})],Hamburger);let HeaderModule=class HeaderModule{};HeaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger],imports:[common.CommonModule,src_button.hJ,i18n.LU,icon.QX,router.Bz],exports:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger]})],HeaderModule);let SideNav=class SideNav{constructor(i18n){this.i18n=i18n,this.hostClass=!0,this.ariaLabel="Side navigation",this.expanded=!0,this.hidden=!1,this.rail=!1,this.ux=!0,this.allowExpansion=!1,this.useRouter=!1}toggle(){this.expanded=!this.expanded}};SideNav.ctorParameters=()=>[{type:i18n.oc}],SideNav.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--side-nav"]}],ariaLabel:[{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--side-nav--expanded"]},{type:core.Input}],hidden:[{type:core.HostBinding,args:["class.cds--side-nav--hidden"]},{type:core.Input}],rail:[{type:core.HostBinding,args:["class.cds--side-nav--rail"]},{type:core.Input}],ux:[{type:core.HostBinding,args:["class.cds--side-nav__navigation"]}],allowExpansion:[{type:core.Input}],navigationItems:[{type:core.Input}],useRouter:[{type:core.Input}]},SideNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav, ibm-sidenav",template:'\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',encapsulation:core.ViewEncapsulation.None})],SideNav);let SideNavItem=class SideNavItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.useRouter=!1,this.active=!1,this.isSubMenu=!1,this.navigation=new core.EventEmitter,this.selected=new core.EventEmitter,this.role="listitem",this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}get sideNav(){return!this.isSubMenu}get menuItem(){return this.isSubMenu}ngOnChanges(changes){changes.active&&this.selected.emit(this.active)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SideNavItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SideNavItem.propDecorators={href:[{type:core.Input}],useRouter:[{type:core.Input}],sideNav:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],menuItem:[{type:core.HostBinding,args:["class.cds--side-nav__menu-item"]}],active:[{type:core.Input}],route:[{type:core.Input}],isSubMenu:[{type:core.Input}],routeExtras:[{type:core.Input}],title:[{type:core.Input}],navigation:[{type:core.Output}],selected:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}]},SideNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-item, ibm-sidenav-item",template:'\n\t\t<a *ngIf="!useRouter; else sidenavItemRouterTpl"\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<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[attr.title]="title ? title : null"\n\t\t\t\t[routerLink]="route"\n \t\t\t\t[relativeTo]="routeExtras?.relativeTo"\n\t\t\t\t[queryParams]="routeExtras?.queryParams"\n\t\t\t\t[fragment]="routeExtras?.fragment"\n\t\t\t\t[queryParamsHandling]="routeExtras?.queryParamsHandling"\n\t\t\t\t[preserveFragment]="routeExtras?.preserveFragment"\n\t\t\t\t[skipLocationChange]="routeExtras?.skipLocationChange"\n\t\t\t\t[replaceUrl]="routeExtras?.replaceUrl"\n\t\t\t\t[state]="routeExtras?.state"\n\t\t\t\trouterLinkActive="cds--side-nav__item--active"\n\t\t\t\tariaCurrentWhenActive="page"\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',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],SideNavItem);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js");let SideNavMenu=class SideNavMenu{constructor(){this.navItem=!0,this.navItemIcon=!0,this.role="listitem",this.useRouter=!1,this.expanded=!1,this.hasActiveChild=!1,this.activeItemsSubscription=new Subscription.w0}get navItemActive(){return this.hasActiveChild}ngAfterContentInit(){setTimeout((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)})),this.sidenavItems.changes.subscribe((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)}))}))}))}ngOnDestroy(){this.activeItemsSubscription.unsubscribe()}toggle(){this.expanded=!this.expanded}findActiveChildren(){this.hasActiveChild=this.sidenavItems.some((item=>item.active))}};SideNavMenu.propDecorators={navItem:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],navItemIcon:[{type:core.HostBinding,args:["class.cds--side-nav__item--icon"]}],navItemActive:[{type:core.HostBinding,args:["class.cds--side-nav__item--active"]}],role:[{type:core.HostBinding,args:["attr.role"]}],useRouter:[{type:core.Input}],title:[{type:core.Input}],expanded:[{type:core.Input}],hasActiveChild:[{type:core.Input}],menuItems:[{type:core.Input}],sidenavItems:[{type:core.ContentChildren,args:[SideNavItem]}]},SideNavMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-menu, ibm-sidenav-menu",template:'\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'})],SideNavMenu);let SideNavModule=class SideNavModule{};SideNavModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SideNav,SideNavItem,SideNavMenu],imports:[common.CommonModule,i18n.LU,router.Bz],exports:[SideNav,SideNavItem,SideNavMenu]})],SideNavModule);let Panel=class Panel{constructor(){this.expanded=!1}};Panel.propDecorators={expanded:[{type:core.Input}],ariaLabel:[{type:core.Input}]},Panel=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-panel, ibm-panel",template:'\n\t\t<div\n\t\t\tclass="cds--header-panel"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--header-panel--expanded\': expanded\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Panel);let SwitcherList=class SwitcherList{constructor(){this.switcher=!0,this.role="list"}};SwitcherList.propDecorators={switcher:[{type:core.HostBinding,args:["class.cds--switcher"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list, ibm-switcher-list",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],SwitcherList);let SwitcherListItem=class SwitcherListItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.navigation=new core.EventEmitter,this.itemClass=!0,this.itemRole="listitem",this._href="#",this._target=""}set href(value){this._href=value}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}set target(value){this._target=value}get target(){return this._target}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SwitcherListItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SwitcherListItem.propDecorators={active:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],href:[{type:core.Input}],navigation:[{type:core.Output}],target:[{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--switcher__item"]}],itemRole:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list-item, ibm-switcher-list-item",template:'\n\t\t<a\n\t\t\tclass="cds--switcher__item-link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--switcher__item-link--selected\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[target]="target"\n\t\t\t(click)="navigate($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t'})],SwitcherListItem);let PanelModule=class PanelModule{};PanelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Panel,SwitcherList,SwitcherListItem],imports:[common.CommonModule,i18n.LU],exports:[Panel,SwitcherList,SwitcherListItem]})],PanelModule);let UIShellModule=class UIShellModule{};UIShellModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,i18n.LU,HeaderModule,SideNavModule,PanelModule],exports:[HeaderModule,SideNavModule,PanelModule]})],UIShellModule)}}]);