carbon-components-angular 3.13.3 → 3.13.4

package/docs/storybook/{main.3f838d69086764a1b2cd.bundle.js → main.b1eb580e9726667e78a3.bundle.js}

@@ -9574,7 +9574,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Welcome",
 /*!**********************!*\
   !*** ./src/index.ts ***!
   \**********************/
-/*! exports provided: Accordion, AccordionItem, AccordionModule, Breadcrumb, BreadcrumbItemComponent, BreadcrumbItem, BreadcrumbModule, Button, ButtonModule, Checkbox, CheckboxModule, CodeSnippet, CodeSnippetModule, ComboBox, ComboBoxModule, ContentSwitcher, ContentSwitcherOption, ContentSwitcherModule, DatePickerModule, DialogService, Dialog, DialogDirective, DialogPlaceholder, Tooltip, TooltipDefinition, TooltipIcon, TooltipDirective, EllipsisTooltip, OverflowMenu, OverflowMenuPane, OverflowMenuDirective, OverflowMenuOption, DialogModule, Documentation, DocumentationModule, Dropdown, DropdownList, ScrollableList, AbstractDropdownView, ListItem, DropdownService, DropdownModule, EXPERIMENTAL_SERVICE_PROVIDER_FACTORY, EXPERIMENTAL_SERVICE_PROVIDER, ExperimentalService, ExperimentalModule, FileUploader, FileUploaderModule, ToggleModule, RadioModule, InputModule, NFormsModule, GridModule, I18n, replace, ReplacePipe, I18N_SERVICE_PROVIDER_FACTORY, I18N_SERVICE_PROVIDER, I18nModule, InlineLoading, InlineLoadingModule, TextInput, Label, Link, LinkModule, ListModule, ListItemDirective, List, Loading, LoadingModule, Modal, ModalService, ModalModule, NotificationService, NotificationDisplayService, Notification, Toast, NotificationModule, NumberModule, Number, PaginationModel, Pagination, PaginationModule, Placeholder, PlaceholderService, PLACEHOLDER_SERVICE_PROVIDER_FACTORY, PLACEHOLDER_SERVICE_PROVIDER, PlaceholderModule, ProgressIndicator, ProgressIndicatorModule, Radio, RadioGroup, SearchModule, Search, Select, Option, OptGroup, SelectModule, SliderModule, Slider, StructuredListModule, StructuredList, ListRow, ListHeader, ListColumn, Table, TableModel, TableItem, TableHeaderItem, TableToolbar, TableContainer, TableHeader, TableHeaderTitle, TableHeaderDescription, TableToolbarActions, TableToolbarSearch, TableToolbarContent, DataGridFocus, ExpandedRowHover, TableModule, Tabs, Tab, TabHeaders, TabsModule, TagModule, Tile, ClickableTile, ExpandableTile, SelectionTile, TileGroup, TilesModule, TimePickerModule, TimePickerSelectModule, UIShellModule, AlertModalType, ModalButtonType, BaseModal, Tag, Header, HeaderItem, HeaderMenu, HeaderNavigation, HeaderGlobal, HeaderAction, Hamburger, HeaderModule, SideNav, SideNavHeader, SideNavItem, SideNavMenu, SideNavModule, Panel, ProductSwitcher, ProductSwitcherList, ProductSwitcherListItem, ProductSwitcherItem, PanelModule */
+/*! exports provided: Accordion, AccordionItem, AccordionModule, Breadcrumb, BreadcrumbItemComponent, BreadcrumbItem, BreadcrumbModule, Button, ButtonModule, Checkbox, CheckboxModule, CodeSnippet, CodeSnippetModule, ComboBox, ComboBoxModule, ContentSwitcher, ContentSwitcherOption, ContentSwitcherModule, DatePickerModule, DialogService, Dialog, DialogDirective, DialogPlaceholder, Tooltip, TooltipDefinition, TooltipIcon, TooltipDirective, EllipsisTooltip, OverflowMenu, OverflowMenuPane, OverflowMenuDirective, OverflowMenuOption, DialogModule, Documentation, DocumentationModule, Dropdown, DropdownList, ScrollableList, AbstractDropdownView, ListItem, DropdownService, DropdownModule, EXPERIMENTAL_SERVICE_PROVIDER_FACTORY, EXPERIMENTAL_SERVICE_PROVIDER, ExperimentalService, ExperimentalModule, FileUploader, FileUploaderModule, ToggleModule, RadioModule, InputModule, NFormsModule, GridModule, I18n, replace, ReplacePipe, I18N_SERVICE_PROVIDER_FACTORY, I18N_SERVICE_PROVIDER, I18nModule, InlineLoading, InlineLoadingModule, TextInput, Label, Link, LinkModule, ListModule, ListItemDirective, List, Loading, LoadingModule, Modal, ModalService, ModalModule, NotificationService, NotificationDisplayService, Notification, Toast, NotificationModule, NumberModule, Number, PaginationModel, Pagination, PaginationModule, Placeholder, PlaceholderService, PLACEHOLDER_SERVICE_PROVIDER_FACTORY, PLACEHOLDER_SERVICE_PROVIDER, PlaceholderModule, ProgressIndicator, ProgressIndicatorModule, Radio, RadioGroup, SearchModule, Search, Select, Option, OptGroup, SelectModule, SliderModule, Slider, StructuredListModule, StructuredList, ListRow, ListHeader, ListColumn, Table, TableModel, TableItem, TableHeaderItem, TableToolbar, TableContainer, TableHeader, TableHeaderTitle, TableHeaderDescription, TableToolbarActions, TableToolbarSearch, TableToolbarContent, DataGridFocus, ExpandedRowHover, TableModule, Tabs, Tab, TabHeaders, TabsModule, TagModule, Tile, ClickableTile, ExpandableTile, SelectionTile, TileGroup, TilesModule, TimePickerModule, TimePickerSelectModule, UIShellModule, AlertModalType, ModalButtonType, BaseModal, Tag, Header, HeaderItem, HeaderMenu, HeaderNavigation, HeaderGlobal, HeaderAction, Hamburger, HeaderModule, SideNav, SideNavHeader, SideNavItem, SideNavMenu, SideNavModule, Panel, ProductSwitcher, SwitcherList, SwitcherListItem, PanelModule */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9924,11 +9924,9 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcher", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["ProductSwitcher"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherList", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["ProductSwitcherList"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherList", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["SwitcherList"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherListItem", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["ProductSwitcherListItem"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherItem", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["ProductSwitcherItem"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherListItem", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["SwitcherListItem"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PanelModule", function() { return _ui_shell_ui_shell_module__WEBPACK_IMPORTED_MODULE_38__["PanelModule"]; });
 
@@ -22794,29 +22792,22 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 /**
- * A slide-out hamburger menu
- *
- * TODO: This is a stub component, and needs to be implemented.
+ * A toggle for the side navigation
  */
 var Hamburger = /** @class */ (function () {
     function Hamburger(i18n) {
         this.i18n = i18n;
         /**
          * Controls the active/selected state for the `Hamburger` menu.
-         * @type {boolean}
-         * @memberof Hamburger
          */
         this.active = false;
         /**
          * `EventEmitter` to notify parent components of menu click events.
-         * @type {EventEmitter<Object>}
-         * @memberof Hamburger
          */
         this.selected = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
     }
     /**
      * Emit the Hamburger click event upwards.
-     * @memberof Hamburger
      */
     Hamburger.prototype.doClick = function () {
         this.selected.emit(this.active);
@@ -22833,7 +22824,7 @@ var Hamburger = /** @class */ (function () {
     Hamburger = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-hamburger",
-            template: "\n\t\t<button\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'bx--header__action--active': active}\"\n\t\t\tclass=\"bx--header__menu-trigger bx--header__action\"\n\t\t\t[attr.aria-label]=\"i18n.get('UI_SHELL.HEADER.MENU') | async\"\n\t\t\t[attr.title]=\"i18n.get('UI_SHELL.HEADER.MENU') | async\">\n\n\t\t\t<svg *ngIf=\"!active\" aria-hidden=\"true\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n\t\t\t\t<path d=\"M4 6h24v2H4zm0 18h24v2H4zm0-9h24v2H4z\" />\n\t\t\t</svg>\n\n\t\t\t<svg *ngIf=\"active\" aria-hidden=\"true\" height=\"20\" width=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n\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\" />\n\t\t\t</svg>\n\t\t</button>\n\t"
+            template: "\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'bx--header__action--active': active}\"\n\t\t\tclass=\"bx--header__menu-trigger bx--header__action bx--header__menu-toggle\"\n\t\t\t[attr.aria-label]=\"i18n.get('UI_SHELL.HEADER.MENU') | async\"\n\t\t\t[attr.title]=\"i18n.get('UI_SHELL.HEADER.MENU') | async\">\n\n\t\t\t<svg *ngIf=\"!active\" aria-hidden=\"true\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n\t\t\t\t<path d=\"M4 6h24v2H4zm0 18h24v2H4zm0-9h24v2H4z\" />\n\t\t\t</svg>\n\n\t\t\t<svg *ngIf=\"active\" aria-hidden=\"true\" height=\"20\" width=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n\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\" />\n\t\t\t</svg>\n\t\t</button>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"]) === "function" && _b || Object])
     ], Hamburger);
@@ -22865,15 +22856,32 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+/**
+ * Contained by `HeaderGlobal`. Generally used to trigger `Panel`s
+ */
 var HeaderAction = /** @class */ (function () {
     function HeaderAction() {
+        /**
+         * Title. Populates the aria-label as well as the browser `title` tooltip
+         */
         this.title = "";
+        /**
+         * Toggles the active state. May be used to toggle a `Panel`s active state.
+         */
         this.active = false;
+        /**
+         * "Change" emitter to allow double binding to the `active` Input.
+         */
+        this.activeChange = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        /**
+         * Emits when the action has been clicked.
+         */
         this.selected = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
     }
     HeaderAction.prototype.onClick = function () {
         this.active = !this.active;
         this.selected.emit(this.active);
+        this.activeChange.emit(this.active);
     };
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -22883,6 +22891,10 @@ var HeaderAction = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], HeaderAction.prototype, "active", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], HeaderAction.prototype, "activeChange", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
         __metadata("design:type", Object)
@@ -22921,6 +22933,9 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+/**
+ * Container for `HeaderAction`s.
+ */
 var HeaderGlobal = /** @class */ (function () {
     function HeaderGlobal() {
         this.hostClass = true;
@@ -22953,6 +22968,7 @@ var HeaderGlobal = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderItem", function() { return HeaderItem; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -22963,19 +22979,37 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+
+/**
+ * Individual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu`
+ */
 var HeaderItem = /** @class */ (function () {
-    function HeaderItem() {
-        this.href = "javascript:void(0)";
+    function HeaderItem(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+        this._href = "javascript:void(0)";
     }
+    Object.defineProperty(HeaderItem.prototype, "href", {
+        get: function () {
+            return this.domSanitizer.bypassSecurityTrustUrl(this._href);
+        },
+        set: function (v) {
+            this._href = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var _a;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", Object)
-    ], HeaderItem.prototype, "href", void 0);
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], HeaderItem.prototype, "href", null);
     HeaderItem = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header-item",
             template: "\n\t\t<li style=\"height: 100%\">\n\t\t\t<a class=\"bx--header__menu-item\" [href]=\"href\" role=\"menuitem\" tabindex=\"0\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</a>\n\t\t</li>\n\t"
-        })
+        }),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object])
     ], HeaderItem);
     return HeaderItem;
 }());
@@ -22995,6 +23029,7 @@ var HeaderItem = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderMenu", function() { return HeaderMenu; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -23005,20 +23040,68 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+
+/**
+ * Dropdown menu container for navigation items.
+ */
 var HeaderMenu = /** @class */ (function () {
-    function HeaderMenu() {
+    function HeaderMenu(domSanitizer, elementRef) {
+        this.domSanitizer = domSanitizer;
+        this.elementRef = elementRef;
+        this.trigger = "click";
         this.expanded = false;
+        this._href = "javascript:void(0)";
     }
+    Object.defineProperty(HeaderMenu.prototype, "href", {
+        get: function () {
+            return this.domSanitizer.bypassSecurityTrustUrl(this._href);
+        },
+        set: function (v) {
+            this._href = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    HeaderMenu.prototype.onClick = function () {
+        if (this.trigger === "click") {
+            this.expanded = !this.expanded;
+        }
+    };
     HeaderMenu.prototype.onMouseOver = function () {
-        this.expanded = true;
+        if (this.trigger === "mouseover") {
+            this.expanded = true;
+        }
     };
     HeaderMenu.prototype.onMouseOut = function () {
-        this.expanded = false;
+        if (this.trigger === "mouseover") {
+            this.expanded = false;
+        }
+    };
+    HeaderMenu.prototype.onFocusOut = function (event) {
+        if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.expanded = false;
+        }
     };
+    var _a, _b;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", Object)
+        __metadata("design:type", String)
     ], HeaderMenu.prototype, "title", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], HeaderMenu.prototype, "href", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], HeaderMenu.prototype, "trigger", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("click"),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], HeaderMenu.prototype, "onClick", null);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("mouseover"),
         __metadata("design:type", Function),
@@ -23031,11 +23114,18 @@ var HeaderMenu = /** @class */ (function () {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], HeaderMenu.prototype, "onMouseOut", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("focusout", ["$event"]),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], HeaderMenu.prototype, "onFocusOut", null);
     HeaderMenu = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header-menu",
-            template: "\n\t\t<li\n\t\t\tclass=\"bx--header__submenu\"\n\t\t\tstyle=\"height: 100%\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--header__menu-item bx--header__menu-title\"\n\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\trole=\"menuitem\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t[attr.aria-expanded]=\"expanded\">\n\t\t\t\t{{title}}\n\t\t\t\t<svg class=\"bx--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</a>\n\t\t\t<ul class=\"bx--header__menu\" role=\"menu\" [attr.aria-label]=\"title\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t</li>\n\t"
-        })
+            template: "\n\t\t<li\n\t\t\tclass=\"bx--header__submenu\"\n\t\t\tstyle=\"height: 100%\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--header__menu-item bx--header__menu-title\"\n\t\t\t\t[href]=\"href\"\n\t\t\t\trole=\"menuitem\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t[attr.aria-expanded]=\"expanded\">\n\t\t\t\t{{title}}\n\t\t\t\t<svg class=\"bx--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</a>\n\t\t\t<ul class=\"bx--header__menu\" role=\"menu\" [attr.aria-label]=\"title\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t</li>\n\t"
+        }),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object, typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _b || Object])
     ], HeaderMenu);
     return HeaderMenu;
 }());
@@ -23065,6 +23155,9 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+/**
+ * Container for header navigation items
+ */
 var HeaderNavigation = /** @class */ (function () {
     function HeaderNavigation() {
         this.height = 100;
@@ -23110,17 +23203,9 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 /**
- * Carbon uses feature-flags to toggle the new ui-shell feature.
- *
- * To turn on this feature flag, include the feature-flag variable into your SCSS file before importing carbon-components,
- * then set ui-shell to true.
- *
- * ```scss
- * $feature-flags: (
- * 	ui-shell: true
- * );
- * @import 'carbon-components/src/globals/scss/styles';
- * ```
+ * A fixed header and navigation.
+ * Header may contain a Hamburger menu to toggle the side navigation, navigation actions,
+ * and global actions (generally in the form of `Panel`s).
  *
  * [See demo](../../?path=/story/ui-shell--header)
  *
@@ -23132,8 +23217,10 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 var Header = /** @class */ (function () {
     function Header(i18n) {
         this.i18n = i18n;
+        /**
+         * Top level branding. Defaults to "IBM"
+         */
         this.brand = "IBM";
-        this.hostClass = true;
     }
     var _a;
     __decorate([
@@ -23148,10 +23235,6 @@ var Header = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], Header.prototype, "brand", void 0);
-    __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--header"),
-        __metadata("design:type", Object)
-    ], Header.prototype, "hostClass", void 0);
     Header = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header",
@@ -23278,21 +23361,14 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 
 /**
- * Carbon uses feature-flags to toggle the new ui-shell feature.
- *
- * To turn on this feature flag, include the feature-flag variable into your SCSS file before importing carbon-components,
- * then set ui-shell to true.
- *
- * ```scss
- * $feature-flags: (
- * 	ui-shell: true
- * );
- * @import 'carbon-components/src/globals/scss/styles';
- * ```
- *
+ * `Panel` is a component that can be used to display content on the right side of the screen.
+ * `Panel`s are generally activated by and linked to a `HeaderAction` component.
  */
 var Panel = /** @class */ (function () {
     function Panel() {
+        /**
+         * Controls the visibility of the panel
+         */
         this.expanded = false;
     }
     __decorate([
@@ -23316,7 +23392,7 @@ var Panel = /** @class */ (function () {
 /*!********************************************!*\
   !*** ./src/ui-shell/panel/panel.module.ts ***!
   \********************************************/
-/*! exports provided: Panel, ProductSwitcher, ProductSwitcherList, ProductSwitcherListItem, ProductSwitcherItem, PanelModule */
+/*! exports provided: Panel, ProductSwitcher, SwitcherList, SwitcherListItem, PanelModule */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -23331,14 +23407,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _product_switcher_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./product-switcher.component */ "./src/ui-shell/panel/product-switcher.component.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcher", function() { return _product_switcher_component__WEBPACK_IMPORTED_MODULE_4__["ProductSwitcher"]; });
 
-/* harmony import */ var _product_switcher_list_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./product-switcher-list.component */ "./src/ui-shell/panel/product-switcher-list.component.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherList", function() { return _product_switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherList"]; });
+/* harmony import */ var _switcher_list_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./switcher-list.component */ "./src/ui-shell/panel/switcher-list.component.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherList", function() { return _switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["SwitcherList"]; });
 
-/* harmony import */ var _product_switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./product-switcher-list-item.component */ "./src/ui-shell/panel/product-switcher-list-item.component.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherListItem", function() { return _product_switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["ProductSwitcherListItem"]; });
-
-/* harmony import */ var _product_switcher_item_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./product-switcher-item.component */ "./src/ui-shell/panel/product-switcher-item.component.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherItem", function() { return _product_switcher_item_component__WEBPACK_IMPORTED_MODULE_7__["ProductSwitcherItem"]; });
+/* harmony import */ var _switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./switcher-list-item.component */ "./src/ui-shell/panel/switcher-list-item.component.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherListItem", function() { return _switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["SwitcherListItem"]; });
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -23354,7 +23427,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-
 var PanelModule = /** @class */ (function () {
     function PanelModule() {
     }
@@ -23363,17 +23435,15 @@ var PanelModule = /** @class */ (function () {
             declarations: [
                 _panel_component__WEBPACK_IMPORTED_MODULE_3__["Panel"],
                 _product_switcher_component__WEBPACK_IMPORTED_MODULE_4__["ProductSwitcher"],
-                _product_switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherList"],
-                _product_switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["ProductSwitcherListItem"],
-                _product_switcher_item_component__WEBPACK_IMPORTED_MODULE_7__["ProductSwitcherItem"]
+                _switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["SwitcherList"],
+                _switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["SwitcherListItem"]
             ],
             imports: [_angular_common__WEBPACK_IMPORTED_MODULE_1__["CommonModule"], _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18nModule"]],
             exports: [
                 _panel_component__WEBPACK_IMPORTED_MODULE_3__["Panel"],
                 _product_switcher_component__WEBPACK_IMPORTED_MODULE_4__["ProductSwitcher"],
-                _product_switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherList"],
-                _product_switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["ProductSwitcherListItem"],
-                _product_switcher_item_component__WEBPACK_IMPORTED_MODULE_7__["ProductSwitcherItem"]
+                _switcher_list_component__WEBPACK_IMPORTED_MODULE_5__["SwitcherList"],
+                _switcher_list_item_component__WEBPACK_IMPORTED_MODULE_6__["SwitcherListItem"]
             ]
         })
     ], PanelModule);
@@ -23384,16 +23454,16 @@ var PanelModule = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "./src/ui-shell/panel/product-switcher-item.component.ts":
-/*!***************************************************************!*\
-  !*** ./src/ui-shell/panel/product-switcher-item.component.ts ***!
-  \***************************************************************/
-/*! exports provided: ProductSwitcherItem */
+/***/ "./src/ui-shell/panel/product-switcher.component.ts":
+/*!**********************************************************!*\
+  !*** ./src/ui-shell/panel/product-switcher.component.ts ***!
+  \**********************************************************/
+/*! exports provided: ProductSwitcher */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherItem", function() { return ProductSwitcherItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcher", function() { return ProductSwitcher; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -23405,37 +23475,45 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
-var ProductSwitcherItem = /** @class */ (function () {
-    function ProductSwitcherItem() {
+/**
+ * @deprecated `ibm-product-x` selectors and components are deprecated and will be removed in the next major version
+ */
+var ProductSwitcher = /** @class */ (function () {
+    function ProductSwitcher() {
+        this.header = "";
         this.hostClass = true;
     }
     __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--product-switcher__item"),
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ProductSwitcher.prototype, "header", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--product-switcher"),
         __metadata("design:type", Object)
-    ], ProductSwitcherItem.prototype, "hostClass", void 0);
-    ProductSwitcherItem = __decorate([
+    ], ProductSwitcher.prototype, "hostClass", void 0);
+    ProductSwitcher = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-            selector: "ibm-product-switcher-item",
-            template: "<ng-content></ng-content>"
+            selector: "ibm-product-switcher",
+            template: "\n\t\t<div class=\"bx--product-switcher__search\">\n\t\t\t<ng-content select=\"ibm-search\"></ng-content>\n\t\t</div>\n\t\t<p class=\"bx--product-switcher__subheader\">{{header}}</p>\n\t\t<ng-content></ng-content>\n\t"
         })
-    ], ProductSwitcherItem);
-    return ProductSwitcherItem;
+    ], ProductSwitcher);
+    return ProductSwitcher;
 }());
 
 
 
 /***/ }),
 
-/***/ "./src/ui-shell/panel/product-switcher-list-item.component.ts":
-/*!********************************************************************!*\
-  !*** ./src/ui-shell/panel/product-switcher-list-item.component.ts ***!
-  \********************************************************************/
-/*! exports provided: ProductSwitcherListItem */
+/***/ "./src/ui-shell/panel/switcher-list-item.component.ts":
+/*!************************************************************!*\
+  !*** ./src/ui-shell/panel/switcher-list-item.component.ts ***!
+  \************************************************************/
+/*! exports provided: SwitcherListItem */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherListItem", function() { return ProductSwitcherListItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SwitcherListItem", function() { return SwitcherListItem; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -23449,51 +23527,67 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 
 
-var ProductSwitcherListItem = /** @class */ (function () {
-    function ProductSwitcherListItem(domSanitizer) {
+/**
+ * Represents an item in a switcher list.
+ *
+ * **Note:** `ibm-product-x` selectors and components are deprecated and will be removed in the next major version
+ */
+var SwitcherListItem = /** @class */ (function () {
+    function SwitcherListItem(domSanitizer) {
         this.domSanitizer = domSanitizer;
-        this.href = "javascript:void(0)";
+        /**
+         * Enables the "active" state for an item. Commonly used to indicate the current page or selection.
+         */
+        this.active = false;
+        this._href = "javascript:void(0)";
     }
-    Object.defineProperty(ProductSwitcherListItem.prototype, "href", {
+    Object.defineProperty(SwitcherListItem.prototype, "href", {
         get: function () {
-            return this._href;
+            return this.domSanitizer.bypassSecurityTrustUrl(this._href);
         },
+        /**
+         * Optional link for the underlying anchor.
+         */
         set: function (value) {
-            this._href = this.domSanitizer.bypassSecurityTrustUrl(value);
+            this._href = value;
         },
         enumerable: true,
         configurable: true
     });
     var _a;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], SwitcherListItem.prototype, "active", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
-    ], ProductSwitcherListItem.prototype, "href", null);
-    ProductSwitcherListItem = __decorate([
+    ], SwitcherListItem.prototype, "href", null);
+    SwitcherListItem = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-            selector: "ibm-product-switcher-list-item",
-            template: "\n\t\t<li class=\"bx--product-list__item\">\n\t\t\t<a class=\"bx--product-link\" tabindex=\"0\" [href]=\"href\">\n\t\t\t\t<div class=\"bx--product-switcher__icon\">\n\t\t\t\t\t<ng-content select=\"svg\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--product-link__name\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</a>\n\t\t\t<ng-content select=\"ibm-overflow-menu\"></ng-content>\n\t\t</li>\n\t"
+            selector: "ibm-switcher-list-item, ibm-product-switcher-list-item, ibm-product-switcher-item",
+            template: "\n\t\t<a\n\t\t\tclass=\"bx--switcher__item-link\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--switcher__item-link--selected': active\n\t\t\t}\"\n\t\t\t[href]=\"href\">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object])
-    ], ProductSwitcherListItem);
-    return ProductSwitcherListItem;
+    ], SwitcherListItem);
+    return SwitcherListItem;
 }());
 
 
 
 /***/ }),
 
-/***/ "./src/ui-shell/panel/product-switcher-list.component.ts":
-/*!***************************************************************!*\
-  !*** ./src/ui-shell/panel/product-switcher-list.component.ts ***!
-  \***************************************************************/
-/*! exports provided: ProductSwitcherList */
+/***/ "./src/ui-shell/panel/switcher-list.component.ts":
+/*!*******************************************************!*\
+  !*** ./src/ui-shell/panel/switcher-list.component.ts ***!
+  \*******************************************************/
+/*! exports provided: SwitcherList */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherList", function() { return ProductSwitcherList; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SwitcherList", function() { return SwitcherList; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -23502,63 +23596,29 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-var ProductSwitcherList = /** @class */ (function () {
-    function ProductSwitcherList() {
+/**
+ * Container for switcher items.
+ *
+ * ```html
+ * <ibm-switcher-list>
+ * 	<ibm-switcher-list-item>one</ibm-switcher-list-item>
+ * 	<ibm-switcher-list-item [active]="true">two</ibm-switcher-list-item>
+ * 	<ibm-switcher-list-item>three</ibm-switcher-list-item>
+ * </ibm-switcher-list>
+ * ```
+ *
+ * **Note**: `ibm-product-x` selectors and components are deprecated and will be removed in the next major version
+ */
+var SwitcherList = /** @class */ (function () {
+    function SwitcherList() {
     }
-    ProductSwitcherList = __decorate([
+    SwitcherList = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-            selector: "ibm-product-switcher-list",
-            template: "\n\t\t<ul class=\"bx--product-switcher__product-list\">\n\t\t\t<ng-content></ng-content>\n\t\t</ul>\n\t"
+            selector: "ibm-switcher-list, ibm-product-switcher-list",
+            template: "\n\t\t<ul class=\"bx--switcher__item\">\n\t\t\t<ng-content></ng-content>\n\t\t</ul>\n\t"
         })
-    ], ProductSwitcherList);
-    return ProductSwitcherList;
-}());
-
-
-
-/***/ }),
-
-/***/ "./src/ui-shell/panel/product-switcher.component.ts":
-/*!**********************************************************!*\
-  !*** ./src/ui-shell/panel/product-switcher.component.ts ***!
-  \**********************************************************/
-/*! exports provided: ProductSwitcher */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcher", function() { return ProductSwitcher; });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-
-var ProductSwitcher = /** @class */ (function () {
-    function ProductSwitcher() {
-        this.header = "";
-        this.hostClass = true;
-    }
-    __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", Object)
-    ], ProductSwitcher.prototype, "header", void 0);
-    __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--product-switcher"),
-        __metadata("design:type", Object)
-    ], ProductSwitcher.prototype, "hostClass", void 0);
-    ProductSwitcher = __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-            selector: "ibm-product-switcher",
-            template: "\n\t\t<div class=\"bx--product-switcher__search\">\n\t\t\t<ng-content select=\"ibm-search\"></ng-content>\n\t\t</div>\n\t\t<p class=\"bx--product-switcher__subheader\">{{header}}</p>\n\t\t<ng-content></ng-content>\n\t"
-        })
-    ], ProductSwitcher);
-    return ProductSwitcher;
+    ], SwitcherList);
+    return SwitcherList;
 }());
 
 
@@ -23588,6 +23648,9 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 
 
+/**
+ * @deprecated Until futher notice. Will be removed in a future version.
+ */
 var SideNavHeader = /** @class */ (function () {
     function SideNavHeader(i18n) {
         this.i18n = i18n;
@@ -23627,6 +23690,7 @@ var SideNavHeader = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SideNavItem", function() { return SideNavItem; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -23637,11 +23701,39 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 
+
+/**
+ * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`
+ */
 var SideNavItem = /** @class */ (function () {
-    function SideNavItem() {
+    function SideNavItem(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+        /**
+         * Toggles the active (current page) state for the link.
+         */
         this.active = false;
         this.isSubMenu = false;
+        this._href = "javascript:void(0)";
     }
+    Object.defineProperty(SideNavItem.prototype, "href", {
+        get: function () {
+            return this.domSanitizer.bypassSecurityTrustUrl(this._href);
+        },
+        /**
+         * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
+         */
+        set: function (v) {
+            this._href = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var _a;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], SideNavItem.prototype, "href", null);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -23649,8 +23741,9 @@ var SideNavItem = /** @class */ (function () {
     SideNavItem = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-sidenav-item",
-            template: "\n\t\t<li [ngClass]=\"{\n\t\t\t'bx--side-nav__item': !isSubMenu,\n\t\t\t'bx--side-nav__menu-item': isSubMenu\n\t\t}\"\n\t\t[attr.role]=\"(isSubMenu ? 'none' : null)\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--side-nav__link\"\n\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t[attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n\t\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\">\n\t\t\t\t<div *ngIf=\"!isSubMenu\" class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__link-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</a>\n\t\t</li>\n\t"
-        })
+            template: "\n\t\t<li [ngClass]=\"{\n\t\t\t'bx--side-nav__item': !isSubMenu,\n\t\t\t'bx--side-nav__menu-item': isSubMenu\n\t\t}\"\n\t\t[attr.role]=\"(isSubMenu ? 'none' : null)\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--side-nav__link\"\n\t\t\t\t[href]=\"href\"\n\t\t\t\t[attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n\t\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\">\n\t\t\t\t<div *ngIf=\"!isSubMenu\" class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__link-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</a>\n\t\t</li>\n\t"
+        }),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object])
     ], SideNavItem);
     return SideNavItem;
 }());
@@ -23682,8 +23775,14 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 };
 
 
+/**
+ * `SideNavMenu` provides a method to group `SideNavItem`s under a common heading.
+ */
 var SideNavMenu = /** @class */ (function () {
     function SideNavMenu() {
+        /**
+         * Controls the visibility of the child `SideNavItem`s
+         */
         this.expanded = false;
     }
     SideNavMenu.prototype.ngAfterContentInit = function () {
@@ -23697,20 +23796,20 @@ var SideNavMenu = /** @class */ (function () {
     var _a;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", Object)
+        __metadata("design:type", String)
     ], SideNavMenu.prototype, "title", void 0);
-    __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChildren"])(_sidenav_item_component__WEBPACK_IMPORTED_MODULE_1__["SideNavItem"]),
-        __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"]) === "function" && _a || Object)
-    ], SideNavMenu.prototype, "sidenavItems", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], SideNavMenu.prototype, "expanded", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChildren"])(_sidenav_item_component__WEBPACK_IMPORTED_MODULE_1__["SideNavItem"]),
+        __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"]) === "function" && _a || Object)
+    ], SideNavMenu.prototype, "sidenavItems", void 0);
     SideNavMenu = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-sidenav-menu",
-            template: "\n\t\t<li class=\"bx--side-nav__item\">\n\t\t\t<button\n\t\t\t\t(click)=\"toggle()\"\n\t\t\t\tclass=\"bx--side-nav__submenu\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t\ttype=\"button\">\n\t\t\t\t<div class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__submenu-title\">{{title}}</span>\n\t\t\t\t<div class=\"bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t</div>\n\t\t\t</button>\n\t\t\t<ul class=\"bx--side-nav__menu\" role=\"menu\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t</li>\n\t"
+            template: "\n\t\t<li class=\"bx--side-nav__item bx--side-nav__item--icon\">\n\t\t\t<button\n\t\t\t\t(click)=\"toggle()\"\n\t\t\t\tclass=\"bx--side-nav__submenu\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t\ttype=\"button\">\n\t\t\t\t<div class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__submenu-title\">{{title}}</span>\n\t\t\t\t<div class=\"bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\tviewBox=\"0 0 32 32\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t</div>\n\t\t\t</button>\n\t\t\t<ul class=\"bx--side-nav__menu\" role=\"menu\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t</li>\n\t"
         })
     ], SideNavMenu);
     return SideNavMenu;
@@ -23744,17 +23843,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 /**
- * Carbon uses feature-flags to toggle the new ui-shell feature.
- *
- * To turn on this feature flag, include the feature-flag variable into your SCSS file before importing carbon-components,
- * then set ui-shell to true.
- *
- * ```scss
- * $feature-flags: (
- * 	ui-shell: true
- * );
- * @import 'carbon-components/src/globals/scss/styles';
- * ```
+ * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s
  *
  * [See demo](../../?path=/story/ui-shell--side-navigation)
  *
@@ -23768,7 +23857,16 @@ var SideNav = /** @class */ (function () {
         this.i18n = i18n;
         this.role = "complementary";
         this.hostClass = true;
-        this.expanded = false;
+        /**
+         * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
+         */
+        this.expanded = true;
+        /**
+         * Controls the hidden (`true`) or visible (`false`) state
+         */
+        this.hidden = false;
+        this.ux = true;
+        this.allowExpansion = false;
     }
     SideNav.prototype.toggle = function () {
         this.expanded = !this.expanded;
@@ -23786,10 +23884,22 @@ var SideNav = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--side-nav--expanded"), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], SideNav.prototype, "expanded", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--side-nav--hidden"), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], SideNav.prototype, "hidden", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--side-nav--ux"),
+        __metadata("design:type", Object)
+    ], SideNav.prototype, "ux", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], SideNav.prototype, "allowExpansion", void 0);
     SideNav = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-sidenav",
-            template: "\n\t\t<nav\n\t\t\tclass=\"bx--side-nav__navigation\"\n\t\t\trole=\"navigation\"\n\t\t\t[attr.aria-label]=\"i18n.get('UI_SHELL.SIDE_NAV.LABEL')\">\n\t\t\t<ng-content select=\"ibm-sidenav-header\"></ng-content>\n\t\t\t<ul class=\"bx--side-nav__items\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t\t<footer class=\"bx--side-nav__footer\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--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=\"bx--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=\"bx--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",
+            template: "\n\t\t<nav\n\t\t\tclass=\"bx--side-nav__navigation\"\n\t\t\trole=\"navigation\"\n\t\t\t[attr.aria-label]=\"i18n.get('UI_SHELL.SIDE_NAV.LABEL')\">\n\t\t\t<ng-content select=\"ibm-sidenav-header\"></ng-content>\n\t\t\t<ul class=\"bx--side-nav__items\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ul>\n\t\t\t<footer class=\"bx--side-nav__footer\">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"allowExpansion\"\n\t\t\t\t\tclass=\"bx--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=\"bx--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=\"bx--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: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewEncapsulation"].None
         }),
         __metadata("design:paramtypes", [typeof (_a = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"]) === "function" && _a || Object])
@@ -23871,7 +23981,7 @@ var SideNavModule = /** @class */ (function () {
 /*!*****************************************!*\
   !*** ./src/ui-shell/ui-shell.module.ts ***!
   \*****************************************/
-/*! exports provided: UIShellModule, Header, HeaderItem, HeaderMenu, HeaderNavigation, HeaderGlobal, HeaderAction, Hamburger, HeaderModule, SideNav, SideNavHeader, SideNavItem, SideNavMenu, SideNavModule, Panel, ProductSwitcher, ProductSwitcherList, ProductSwitcherListItem, ProductSwitcherItem, PanelModule */
+/*! exports provided: UIShellModule, Header, HeaderItem, HeaderMenu, HeaderNavigation, HeaderGlobal, HeaderAction, Hamburger, HeaderModule, SideNav, SideNavHeader, SideNavItem, SideNavMenu, SideNavModule, Panel, ProductSwitcher, SwitcherList, SwitcherListItem, PanelModule */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -23913,11 +24023,9 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcher", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcher"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherList", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherList"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherListItem", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherListItem"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherList", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["SwitcherList"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ProductSwitcherItem", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["ProductSwitcherItem"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SwitcherListItem", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["SwitcherListItem"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PanelModule", function() { return _panel_panel_module__WEBPACK_IMPORTED_MODULE_5__["PanelModule"]; });
 
@@ -23985,8 +24093,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _dialog_dialog_module__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./../dialog/dialog.module */ "./src/dialog/dialog.module.ts");
 /* harmony import */ var _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./../documentation-component/documentation.module */ "./src/documentation-component/documentation.module.ts");
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { action } from '@storybook/addon-actions';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { UIShellModule } from './ui-shell.module';\nimport { SearchModule } from './../search/search.module';\nimport { DialogModule } from './../dialog/dialog.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\nstoriesOf('UI Shell', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [UIShellModule, SearchModule, DialogModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Header', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" (click)=\"expanded($event)\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      expanded: action('Menu clicked'),\n    },\n  }))\n  .add('Side Navigation', () => ({\n    template: `\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-header title=\"Side navigation title\" [options]=\"options\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</ibm-sidenav-header>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t`,\n    props: {\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Together', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action #firstAction title=\"action\">\n\t\t\t\t\t\t<svg class=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action #secondAction title=\"action\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-header title=\"Side navigation title\" [options]=\"options\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</ibm-sidenav-header>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<ibm-panel [expanded]=\"firstAction.active\">\n\t\t\t\t<ibm-product-switcher header=\"My Products\">\n\t\t\t\t\t<ibm-search size=\"sm\" theme=\"light\"></ibm-search>\n\t\t\t\t\t<ibm-product-switcher-list>\n\t\t\t\t\t\t<ibm-product-switcher-list-item>\n\t\t\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\tOne\n\t\t\t\t\t\t\t<ibm-overflow-menu flip=\"true\">\n\t\t\t\t\t\t\t\t<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>\n\t\t\t\t\t\t\t\t<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>\n\t\t\t\t\t\t\t</ibm-overflow-menu>\n\t\t\t\t\t\t</ibm-product-switcher-list-item>\n\t\t\t\t\t</ibm-product-switcher-list>\n\t\t\t\t\t<ibm-product-switcher-item>\n\t\t\t\t\t\t<button class=\"bx--product-switcher__all-btn\">View all products</button>\n\t\t\t\t\t</ibm-product-switcher-item>\n\t\t\t\t</ibm-product-switcher>\n\t\t\t</ibm-panel>\n\t\t\t<ibm-panel [expanded]=\"secondAction.active\"></ibm-panel>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Header Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Header.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Side Nav Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/SideNav.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "ui-shell--side-nav-documentation": { "startLoc": { "col": 7, "line": 278 }, "endLoc": { "col": 4, "line": 282 } }, "ui-shell--header-documentation": { "startLoc": { "col": 7, "line": 273 }, "endLoc": { "col": 4, "line": 277 } }, "ui-shell--together": { "startLoc": { "col": 7, "line": 133 }, "endLoc": { "col": 4, "line": 272 } }, "ui-shell--side-navigation": { "startLoc": { "col": 7, "line": 62 }, "endLoc": { "col": 4, "line": 132 } }, "ui-shell--header": { "startLoc": { "col": 7, "line": 17 }, "endLoc": { "col": 4, "line": 61 } } };
+var __STORY__ = "import { action } from '@storybook/addon-actions';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { UIShellModule } from './ui-shell.module';\nimport { SearchModule } from './../search/search.module';\nimport { DialogModule } from './../dialog/dialog.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\nstoriesOf('UI Shell', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [UIShellModule, SearchModule, DialogModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Header', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" (click)=\"expanded($event)\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      expanded: action('Menu clicked'),\n    },\n  }))\n  .add('Side Navigation', () => ({\n    template: `\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t`,\n    props: {\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Together', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" [active]=\"active\" (selected)=\"selected()\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action #firstAction title=\"action\">\n\t\t\t\t\t\t<svg class=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action #secondAction title=\"action\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t\t<ibm-sidenav [expanded]=\"active\">\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<ibm-panel [expanded]=\"firstAction.active\"></ibm-panel>\n\t\t\t<ibm-panel [expanded]=\"secondAction.active\">\n\t\t\t\t<ibm-switcher-list>\n\t\t\t\t\t<ibm-switcher-list-item active=\"true\">Switcher item one</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item two</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item three</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item four</ibm-switcher-list-item>\n\t\t\t\t</ibm-switcher-list>\n\t\t\t</ibm-panel>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      active: boolean('Left panel active', true),\n      selected: () => {\n        console.log('selected');\n      },\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Header Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Header.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Side Nav Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/SideNav.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "ui-shell--side-nav-documentation": { "startLoc": { "col": 7, "line": 242 }, "endLoc": { "col": 4, "line": 246 } }, "ui-shell--header-documentation": { "startLoc": { "col": 7, "line": 237 }, "endLoc": { "col": 4, "line": 241 } }, "ui-shell--together": { "startLoc": { "col": 7, "line": 122 }, "endLoc": { "col": 4, "line": 236 } }, "ui-shell--side-navigation": { "startLoc": { "col": 7, "line": 62 }, "endLoc": { "col": 4, "line": 121 } }, "ui-shell--header": { "startLoc": { "col": 7, "line": 17 }, "endLoc": { "col": 4, "line": 61 } } };
 
 
 
@@ -24012,7 +24120,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell",
     }
 }); })
     .add("Side Navigation", function () { return ({
-    template: "\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-header title=\"Side navigation title\" [options]=\"options\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</ibm-sidenav-header>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t",
+    template: "\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t",
     props: {
         options: [
             {
@@ -24031,9 +24139,11 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell",
     }
 }); })
     .add("Together", function () { return ({
-    template: "\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action #firstAction title=\"action\">\n\t\t\t\t\t\t<svg class=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action #secondAction title=\"action\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-header title=\"Side navigation title\" [options]=\"options\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</ibm-sidenav-header>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<ibm-panel [expanded]=\"firstAction.active\">\n\t\t\t\t<ibm-product-switcher header=\"My Products\">\n\t\t\t\t\t<ibm-search size=\"sm\" theme=\"light\"></ibm-search>\n\t\t\t\t\t<ibm-product-switcher-list>\n\t\t\t\t\t\t<ibm-product-switcher-list-item>\n\t\t\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\tOne\n\t\t\t\t\t\t\t<ibm-overflow-menu flip=\"true\">\n\t\t\t\t\t\t\t\t<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>\n\t\t\t\t\t\t\t\t<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>\n\t\t\t\t\t\t\t</ibm-overflow-menu>\n\t\t\t\t\t\t</ibm-product-switcher-list-item>\n\t\t\t\t\t</ibm-product-switcher-list>\n\t\t\t\t\t<ibm-product-switcher-item>\n\t\t\t\t\t\t<button class=\"bx--product-switcher__all-btn\">View all products</button>\n\t\t\t\t\t</ibm-product-switcher-item>\n\t\t\t\t</ibm-product-switcher>\n\t\t\t</ibm-panel>\n\t\t\t<ibm-panel [expanded]=\"secondAction.active\"></ibm-panel>\n\t\t",
+    template: "\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" [active]=\"active\" (selected)=\"selected()\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action #firstAction title=\"action\">\n\t\t\t\t\t\t<svg class=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action #secondAction title=\"action\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t\t<ibm-sidenav [expanded]=\"active\">\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<ibm-panel [expanded]=\"firstAction.active\"></ibm-panel>\n\t\t\t<ibm-panel [expanded]=\"secondAction.active\">\n\t\t\t\t<ibm-switcher-list>\n\t\t\t\t\t<ibm-switcher-list-item active=\"true\">Switcher item one</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item two</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item three</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item four</ibm-switcher-list-item>\n\t\t\t\t</ibm-switcher-list>\n\t\t\t</ibm-panel>\n\t\t",
     props: {
         hasHamburger: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show Hamburger", true),
+        active: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Left panel active", true),
+        selected: function () { console.log("selected"); },
         options: [
             {
                 content: "Option 1",
@@ -24173,4 +24283,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.3f838d69086764a1b2cd.bundle.js.map
+//# sourceMappingURL=main.b1eb580e9726667e78a3.bundle.js.map