carbon-components-angular 3.17.2 → 3.17.3

package/docs/storybook/{main.8bb53895aa13a93f113f.bundle.js → main.edce6b8dbd74b486e13b.bundle.js}

@@ -6826,6 +6826,10 @@ var Dropdown = /** @class */ (function () {
      */
     Dropdown.prototype.openMenu = function () {
         var _this = this;
+        // prevents the dropdown from opening when list of items is empty
+        if (this.view.getListItems().length === 0) {
+            return;
+        }
         this.menuIsClosed = false;
         // move the dropdown list to the body if we're not appending inline
         // and position it relative to the dropdown wrapper
@@ -8526,6 +8530,8 @@ var FileUploader = /** @class */ (function () {
             var fileItem = {
                 uploaded: false,
                 state: "edit",
+                invalid: false,
+                invalidText: "",
                 file: file
             };
             this.files.add(fileItem);
@@ -8602,7 +8608,7 @@ var FileUploader = /** @class */ (function () {
     FileUploader = FileUploader_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-file-uploader",
-            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<strong class=\"bx--file--label\">{{title}}</strong>\n\t\t\t<p class=\"bx--label-description\">{{description}}</p>\n\t\t\t<div class=\"bx--file\">\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"primary\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"bx--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"/>\n\t\t\t\t<div class=\"bx--file-container\">\n\t\t\t\t\t<ibm-file *ngFor=\"let fileItem of files\" [fileItem]=\"fileItem\" (remove)=\"removeFile(fileItem)\"></ibm-file>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button ibmButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t",
+            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<strong class=\"bx--file--label\">{{title}}</strong>\n\t\t\t<p class=\"bx--label-description\">{{description}}</p>\n\t\t\t<div class=\"bx--file\">\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"primary\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"bx--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"/>\n\t\t\t\t<div class=\"bx--file-container\">\n\t\t\t\t\t<div *ngFor=\"let fileItem of files\">\n\t\t\t\t\t\t<ibm-file [fileItem]=\"fileItem\" (remove)=\"removeFile(fileItem)\"></ibm-file>\n\t\t\t\t\t\t<div *ngIf=\"fileItem.invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t\t{{fileItem.invalidText}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button ibmButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -8634,11 +8640,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
 /* harmony import */ var _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-angular/lib/close/16 */ "./node_modules/@carbon/icons-angular/lib/close/16.js");
 /* harmony import */ var _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @carbon/icons-angular/lib/checkmark--filled/16 */ "./node_modules/@carbon/icons-angular/lib/checkmark--filled/16.js");
-/* harmony import */ var _file_uploader_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./file-uploader.component */ "./src/file-uploader/file-uploader.component.ts");
-/* harmony import */ var _file_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./file.component */ "./src/file-uploader/file.component.ts");
-/* harmony import */ var _button_button_module__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../button/button.module */ "./src/button/button.module.ts");
-/* harmony import */ var _loading_loading_module__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../loading/loading.module */ "./src/loading/loading.module.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FileUploader", function() { return _file_uploader_component__WEBPACK_IMPORTED_MODULE_4__["FileUploader"]; });
+/* harmony import */ var _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @carbon/icons-angular/lib/warning--filled/16 */ "./node_modules/@carbon/icons-angular/lib/warning--filled/16.js");
+/* harmony import */ var _file_uploader_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./file-uploader.component */ "./src/file-uploader/file-uploader.component.ts");
+/* harmony import */ var _file_component__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./file.component */ "./src/file-uploader/file.component.ts");
+/* harmony import */ var _button_button_module__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../button/button.module */ "./src/button/button.module.ts");
+/* harmony import */ var _loading_loading_module__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../loading/loading.module */ "./src/loading/loading.module.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FileUploader", function() { return _file_uploader_component__WEBPACK_IMPORTED_MODULE_5__["FileUploader"]; });
 
 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;
@@ -8655,19 +8662,21 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var FileUploaderModule = /** @class */ (function () {
     function FileUploaderModule() {
     }
     FileUploaderModule = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"])({
-            declarations: [_file_uploader_component__WEBPACK_IMPORTED_MODULE_4__["FileUploader"], _file_component__WEBPACK_IMPORTED_MODULE_5__["File"]],
-            exports: [_file_uploader_component__WEBPACK_IMPORTED_MODULE_4__["FileUploader"]],
+            declarations: [_file_uploader_component__WEBPACK_IMPORTED_MODULE_5__["FileUploader"], _file_component__WEBPACK_IMPORTED_MODULE_6__["File"]],
+            exports: [_file_uploader_component__WEBPACK_IMPORTED_MODULE_5__["FileUploader"]],
             imports: [
                 _angular_common__WEBPACK_IMPORTED_MODULE_1__["CommonModule"],
-                _button_button_module__WEBPACK_IMPORTED_MODULE_6__["ButtonModule"],
-                _loading_loading_module__WEBPACK_IMPORTED_MODULE_7__["LoadingModule"],
+                _button_button_module__WEBPACK_IMPORTED_MODULE_7__["ButtonModule"],
+                _loading_loading_module__WEBPACK_IMPORTED_MODULE_8__["LoadingModule"],
                 _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_2__["Close16Module"],
-                _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_3__["CheckmarkFilled16Module"]
+                _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_3__["CheckmarkFilled16Module"],
+                _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_4__["WarningFilled16Module"]
             ]
         })
     ], FileUploaderModule);
@@ -8707,8 +8716,8 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { Component, Input } from '@angular/core';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\n\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, text, select, array } from '@storybook/addon-knobs';\n\nimport { FileUploaderModule, NotificationModule, ButtonModule, DocumentationModule } from '../';\nimport { NotificationService } from '../notification/notification.service';\n\n@Component({\n  selector: 'app-file-uploader',\n  template: `\n    <ibm-file-uploader\n      [title]=\"title\"\n      [description]=\"description\"\n      [buttonText]=\"buttonText\"\n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [skeleton]=\"skeleton\"\n      [(files)]=\"files\"\n      [size]=\"size\"\n    >\n    </ibm-file-uploader>\n\n    <div [id]=\"notificationId\" style=\"width: 300px; margin-top: 20px\"></div>\n    <button ibmButton *ngIf=\"files && files.size > 0\" (click)=\"onUpload()\">\n      Upload\n    </button>\n  `,\n})\nclass FileUploaderStory {\n  static notificationCount = 0;\n\n  @Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;\n  @Input() files = new Set();\n  @Input() title;\n  @Input() description;\n  @Input() buttonText;\n  @Input() accept;\n  @Input() multiple;\n  @Input() skeleton = false;\n  @Input() size = 'normal';\n\n  protected maxSize = 500000;\n\n  constructor(protected notificationService: NotificationService) {\n    FileUploaderStory.notificationCount++;\n  }\n\n  onUpload() {\n    this.files.forEach(fileItem => {\n      if (fileItem.file.size > this.maxSize) {\n        this.notificationService.showNotification({\n          type: 'error',\n          title: `'${fileItem.file.name}' exceeds size limit`,\n          message: `500kb max size. Please select a new file and try again`,\n          target: `#${this.notificationId}`,\n        });\n      }\n    });\n\n    let filesArray = Array.from<any>(this.files);\n    if (filesArray.every(fileItem => fileItem.file.size <= this.maxSize)) {\n      this.files.forEach(fileItem => {\n        if (!fileItem.uploaded) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'complete';\n            fileItem.uploaded = true;\n            console.log(fileItem);\n          }, 1500);\n        }\n      });\n    }\n  }\n}\n\n@Component({\n  selector: 'app-ngmodel-file-uploader',\n  template: `\n    <ibm-file-uploader\n      [title]=\"title\"\n      [description]=\"description\"\n      [buttonText]=\"buttonText\"\n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [size]=\"size\"\n      [(ngModel)]=\"model\"\n    >\n    </ibm-file-uploader>\n\n    <br />\n    <div [id]=\"notificationId\" style=\"width: 300px\"></div>\n    <button ibmButton *ngIf=\"model && model.size > 0\" (click)=\"onUpload()\">\n      Upload\n    </button>\n  `,\n})\nclass NgModelFileUploaderStory {\n  static notificationCount = 0;\n\n  @Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;\n  @Input() title;\n  @Input() description;\n  @Input() buttonText;\n  @Input() accept;\n  @Input() multiple;\n  @Input() size = 'normal';\n\n  protected model = new Set();\n  protected maxSize = 500000;\n\n  constructor(protected notificationService: NotificationService) {\n    FileUploaderStory.notificationCount++;\n  }\n\n  onUpload() {\n    this.model.forEach(fileItem => {\n      if (fileItem.file.size > this.maxSize) {\n        this.notificationService.showNotification({\n          type: 'error',\n          title: `'${fileItem.file.name}' exceeds size limit`,\n          message: `500kb max size. Please select a new file and try again`,\n          target: `#${this.notificationId}`,\n        });\n      }\n    });\n\n    let filesArray = Array.from<any>(this.model);\n    if (filesArray.every(fileItem => fileItem.file.size <= this.maxSize)) {\n      this.model.forEach(fileItem => {\n        if (!fileItem.uploaded) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'complete';\n            fileItem.uploaded = true;\n            console.log(fileItem);\n          }, 1500);\n        }\n      });\n    }\n  }\n}\n\nstoriesOf('File Uploader', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [FileUploaderModule, NotificationModule, ButtonModule, DocumentationModule],\n      declarations: [FileUploaderStory, NgModelFileUploaderStory],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<app-file-uploader\n\t\t\t\t[title]=\"title\"\n\t\t\t\t[description]=\"description\"\n\t\t\t\t[buttonText]=\"buttonText\"\n\t\t\t\t[accept]=\"accept\"\n\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</app-file-uploader>\n\t\t`,\n    props: {\n      title: text('The title', 'Account Photo'),\n      description: text('The description', 'only .jpg and .png files. 500kb max file size.'),\n      buttonText: text('Button text', 'Add files'),\n      size: select('size', { Small: 'sm', Normal: 'normal' }, 'normal'),\n      accept: array('Accepted file extensions', ['.png', '.jpg'], ','),\n      multiple: boolean('Supports multiple files', true),\n    },\n  }))\n  .add('Using ngModel', () => ({\n    template: `\n\t\t\t<app-ngmodel-file-uploader\n\t\t\t\t[title]=\"title\"\n\t\t\t\t[description]=\"description\"\n\t\t\t\t[buttonText]=\"buttonText\"\n\t\t\t\t[accept]=\"accept\"\n\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</app-ngmodel-file-uploader>\n\t\t`,\n    props: {\n      title: text('The title', 'Account Photo'),\n      description: text('The description', 'only .jpg and .png files. 500kb max file size.'),\n      buttonText: text('Button text', 'Add files'),\n      size: select('size', { Small: 'sm', Normal: 'normal' }, 'normal'),\n      accept: array('Accepted file extensions', ['.png', '.jpg'], ','),\n      multiple: boolean('Supports multiple files', true),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-file-uploader skeleton=\"true\"></app-file-uploader>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/FileUploader.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "file-uploader--documentation": { "startLoc": { "col": 7, "line": 198 }, "endLoc": { "col": 4, "line": 202 } }, "file-uploader--skeleton": { "startLoc": { "col": 7, "line": 193 }, "endLoc": { "col": 4, "line": 197 } }, "file-uploader--using-ngmodel": { "startLoc": { "col": 7, "line": 173 }, "endLoc": { "col": 4, "line": 192 } }, "file-uploader--basic": { "startLoc": { "col": 7, "line": 153 }, "endLoc": { "col": 4, "line": 172 } } };
+var __STORY__ = "import { Component, Input } from '@angular/core';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\n\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, text, select, array } from '@storybook/addon-knobs';\n\nimport { FileUploaderModule, NotificationModule, ButtonModule, DocumentationModule } from '../';\nimport { NotificationService } from '../notification/notification.service';\n\n@Component({\n  selector: 'app-file-uploader',\n  template: `\n    <ibm-file-uploader\n      [title]=\"title\"\n      [description]=\"description\"\n      [buttonText]=\"buttonText\"\n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [skeleton]=\"skeleton\"\n      [(files)]=\"files\"\n      [size]=\"size\"\n    >\n    </ibm-file-uploader>\n\n    <div [id]=\"notificationId\" style=\"width: 300px; margin-top: 20px\"></div>\n    <button ibmButton *ngIf=\"files && files.size > 0\" (click)=\"onUpload()\">\n      Upload\n    </button>\n  `,\n})\nclass FileUploaderStory {\n  static notificationCount = 0;\n\n  @Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;\n  @Input() files = new Set();\n  @Input() title;\n  @Input() description;\n  @Input() buttonText;\n  @Input() accept;\n  @Input() multiple;\n  @Input() skeleton = false;\n  @Input() size = 'normal';\n\n  protected maxSize = 500000;\n\n  constructor(protected notificationService: NotificationService) {\n    FileUploaderStory.notificationCount++;\n  }\n\n  onUpload() {\n    this.files.forEach(fileItem => {\n      if (!fileItem.uploaded) {\n        if (fileItem.file.size < this.maxSize) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'complete';\n            fileItem.uploaded = true;\n            console.log(fileItem);\n          }, 1500);\n        }\n\n        if (fileItem.file.size > this.maxSize) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'edit';\n            fileItem.invalid = true;\n            fileItem.invalidText = 'File size exceeds limit';\n          }, 1500);\n        }\n      }\n    });\n  }\n}\n\n@Component({\n  selector: 'app-ngmodel-file-uploader',\n  template: `\n    <ibm-file-uploader\n      [title]=\"title\"\n      [description]=\"description\"\n      [buttonText]=\"buttonText\"\n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [size]=\"size\"\n      [(ngModel)]=\"model\"\n    >\n    </ibm-file-uploader>\n\n    <br />\n    <div [id]=\"notificationId\" style=\"width: 300px\"></div>\n    <button ibmButton *ngIf=\"model && model.size > 0\" (click)=\"onUpload()\">\n      Upload\n    </button>\n  `,\n})\nclass NgModelFileUploaderStory {\n  static notificationCount = 0;\n\n  @Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;\n  @Input() title;\n  @Input() description;\n  @Input() buttonText;\n  @Input() accept;\n  @Input() multiple;\n  @Input() size = 'normal';\n\n  protected model = new Set();\n  protected maxSize = 500000;\n\n  constructor(protected notificationService: NotificationService) {\n    FileUploaderStory.notificationCount++;\n  }\n\n  onUpload() {\n    this.model.forEach(fileItem => {\n      if (!fileItem.uploaded) {\n        if (fileItem.file.size < this.maxSize) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'complete';\n            fileItem.uploaded = true;\n            console.log(fileItem);\n          }, 1500);\n        }\n\n        if (fileItem.file.size > this.maxSize) {\n          fileItem.state = 'upload';\n          setTimeout(() => {\n            fileItem.state = 'edit';\n            fileItem.invalid = true;\n            fileItem.invalidText = 'File size exceeds limit';\n          }, 1500);\n        }\n      }\n    });\n  }\n}\n\nstoriesOf('File Uploader', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [FileUploaderModule, NotificationModule, ButtonModule, DocumentationModule],\n      declarations: [FileUploaderStory, NgModelFileUploaderStory],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<app-file-uploader\n\t\t\t\t[title]=\"title\"\n\t\t\t\t[description]=\"description\"\n\t\t\t\t[buttonText]=\"buttonText\"\n\t\t\t\t[accept]=\"accept\"\n\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</app-file-uploader>\n\t\t`,\n    props: {\n      title: text('The title', 'Account Photo'),\n      description: text('The description', 'only .jpg and .png files. 500kb max file size.'),\n      buttonText: text('Button text', 'Add files'),\n      size: select('size', { Small: 'sm', Normal: 'normal' }, 'normal'),\n      accept: array('Accepted file extensions', ['.png', '.jpg'], ','),\n      multiple: boolean('Supports multiple files', true),\n    },\n  }))\n  .add('Using ngModel', () => ({\n    template: `\n\t\t\t<app-ngmodel-file-uploader\n\t\t\t\t[title]=\"title\"\n\t\t\t\t[description]=\"description\"\n\t\t\t\t[buttonText]=\"buttonText\"\n\t\t\t\t[accept]=\"accept\"\n\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</app-ngmodel-file-uploader>\n\t\t`,\n    props: {\n      title: text('The title', 'Account Photo'),\n      description: text('The description', 'only .jpg and .png files. 500kb max file size.'),\n      buttonText: text('Button text', 'Add files'),\n      size: select('size', { Small: 'sm', Normal: 'normal' }, 'normal'),\n      accept: array('Accepted file extensions', ['.png', '.jpg'], ','),\n      multiple: boolean('Supports multiple files', true),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-file-uploader skeleton=\"true\"></app-file-uploader>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/FileUploader.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "file-uploader--documentation": { "startLoc": { "col": 7, "line": 192 }, "endLoc": { "col": 4, "line": 196 } }, "file-uploader--skeleton": { "startLoc": { "col": 7, "line": 187 }, "endLoc": { "col": 4, "line": 191 } }, "file-uploader--using-ngmodel": { "startLoc": { "col": 7, "line": 167 }, "endLoc": { "col": 4, "line": 186 } }, "file-uploader--basic": { "startLoc": { "col": 7, "line": 147 }, "endLoc": { "col": 4, "line": 166 } } };
 
 
 
@@ -8728,19 +8737,8 @@ var FileUploaderStory = /** @class */ (function () {
     FileUploaderStory.prototype.onUpload = function () {
         var _this = this;
         this.files.forEach(function (fileItem) {
-            if (fileItem.file.size > _this.maxSize) {
-                _this.notificationService.showNotification({
-                    type: "error",
-                    title: "'" + fileItem.file.name + "' exceeds size limit",
-                    message: "500kb max size. Please select a new file and try again",
-                    target: "#" + _this.notificationId
-                });
-            }
-        });
-        var filesArray = Array.from(this.files);
-        if (filesArray.every(function (fileItem) { return fileItem.file.size <= _this.maxSize; })) {
-            this.files.forEach(function (fileItem) {
-                if (!fileItem.uploaded) {
+            if (!fileItem.uploaded) {
+                if (fileItem.file.size < _this.maxSize) {
                     fileItem.state = "upload";
                     setTimeout(function () {
                         fileItem.state = "complete";
@@ -8748,8 +8746,16 @@ var FileUploaderStory = /** @class */ (function () {
                         console.log(fileItem);
                     }, 1500);
                 }
-            });
-        }
+                if (fileItem.file.size > _this.maxSize) {
+                    fileItem.state = "upload";
+                    setTimeout(function () {
+                        fileItem.state = "edit";
+                        fileItem.invalid = true;
+                        fileItem.invalidText = "File size exceeds limit";
+                    }, 1500);
+                }
+            }
+        });
     };
     var FileUploaderStory_1, _a;
     FileUploaderStory.notificationCount = 0;
@@ -8810,19 +8816,8 @@ var NgModelFileUploaderStory = /** @class */ (function () {
     NgModelFileUploaderStory.prototype.onUpload = function () {
         var _this = this;
         this.model.forEach(function (fileItem) {
-            if (fileItem.file.size > _this.maxSize) {
-                _this.notificationService.showNotification({
-                    type: "error",
-                    title: "'" + fileItem.file.name + "' exceeds size limit",
-                    message: "500kb max size. Please select a new file and try again",
-                    target: "#" + _this.notificationId
-                });
-            }
-        });
-        var filesArray = Array.from(this.model);
-        if (filesArray.every(function (fileItem) { return fileItem.file.size <= _this.maxSize; })) {
-            this.model.forEach(function (fileItem) {
-                if (!fileItem.uploaded) {
+            if (!fileItem.uploaded) {
+                if (fileItem.file.size < _this.maxSize) {
                     fileItem.state = "upload";
                     setTimeout(function () {
                         fileItem.state = "complete";
@@ -8830,8 +8825,16 @@ var NgModelFileUploaderStory = /** @class */ (function () {
                         console.log(fileItem);
                     }, 1500);
                 }
-            });
-        }
+                if (fileItem.file.size > _this.maxSize) {
+                    fileItem.state = "upload";
+                    setTimeout(function () {
+                        fileItem.state = "edit";
+                        fileItem.invalid = true;
+                        fileItem.invalidText = "File size exceeds limit";
+                    }, 1500);
+                }
+            }
+        });
     };
     var _b;
     NgModelFileUploaderStory.notificationCount = 0;
@@ -8947,6 +8950,13 @@ var File = /** @class */ (function () {
         this.remove = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         this.selectedFile = true;
     }
+    Object.defineProperty(File.prototype, "isInvalidText", {
+        get: function () {
+            return this.fileItem.invalidText;
+        },
+        enumerable: true,
+        configurable: true
+    });
     var _a, _b;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -8964,10 +8974,15 @@ var File = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--file__selected-file"),
         __metadata("design:type", Object)
     ], File.prototype, "selectedFile", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--file__selected-file--invalid"),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], File.prototype, "isInvalidText", null);
     File = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-file",
-            template: "\n\t\t<p class=\"bx--file-filename\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t(keyup.space)=\"remove.emit()\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-close16\n\t\t\t\tclass=\"bx--file-close\"\n\t\t\t\t[ariaLabel]=\"translations.REMOVE_BUTTON\">\n\t\t\t</ibm-icon-close16>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<ibm-loading size=\"sm\"></ibm-loading>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\tclass=\"bx--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t</span>\n\t"
+            template: "\n\t\t<p class=\"bx--file-filename\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t(keyup.space)=\"remove.emit()\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t*ngIf=\"isInvalidText\"\n\t\t\t\tclass=\"bx--file--invalid\">\n\t\t\t</ibm-icon-warning-filled16>\n\t\t\t<ibm-icon-close16\n\t\t\t\tclass=\"bx--file-close\"\n\t\t\t\t[ariaLabel]=\"translations.REMOVE_BUTTON\">\n\t\t\t</ibm-icon-close16>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<ibm-loading size=\"sm\"></ibm-loading>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\tclass=\"bx--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t</span>\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])
     ], File);
@@ -12746,6 +12761,11 @@ var Notification = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Notification.prototype, "isLowContrast", {
+        get: function () { return this.notificationObj.lowContrast; },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * Emits close event.
      */
@@ -12801,6 +12821,11 @@ var Notification = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Notification.prototype, "isWarning", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--inline-notification--low-contrast"),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Notification.prototype, "isLowContrast", null);
     Notification = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-notification",
@@ -13148,8 +13173,8 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';\n\nimport { Component } from '@angular/core';\n\nimport { NotificationModule, NotificationService } from './notification.module';\nimport { I18n } from '../i18n/i18n.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\n@Component({\n  selector: 'app-notification-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showNotification()\">\n      Show info notification\n    </button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass NotificationStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showNotification() {\n    this.notificationService.showNotification({\n      type: 'info',\n      title: 'Sample notification',\n      message: 'Sample info message',\n      target: '.notification-container',\n    });\n  }\n}\n\n@Component({\n  selector: 'app-toast-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showToast()\">Show info toast</button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass ToastStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showToast() {\n    this.notificationService.showToast({\n      type: 'info',\n      title: 'Sample toast',\n      subtitle: 'Sample subtitle message',\n      caption: 'Sample caption',\n      target: '.notification-container',\n      message: 'message',\n    });\n  }\n}\n\nstoriesOf('Notification', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [NotificationStory, ToastStory],\n      imports: [NotificationModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'error', title: 'Sample notification', message: 'Sample error message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'info', title: 'Sample notification', message: 'Sample info message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'success', title: 'Sample notification', message: 'Sample success message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'warning', title: 'Sample notification', message: 'Sample warning message'}\">\n\t\t\t</ibm-notification>\n\t\t`,\n  }))\n  .add('Dynamic', () => ({\n    template: `\n\t\t\t<app-notification-story></app-notification-story>\n\t\t`,\n  }))\n  .add('Toast', () => ({\n    template: `\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption'\n\t\t\t}\"></ibm-toast>\n\t\t`,\n  }))\n  .add('Dynamic toast', () => ({\n    template: `\n\t\t\t<app-toast-story></app-toast-story>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Notification.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Toast Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toast.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "notification--toast-documentation": { "startLoc": { "col": 7, "line": 102 }, "endLoc": { "col": 4, "line": 106 } }, "notification--documentation": { "startLoc": { "col": 7, "line": 97 }, "endLoc": { "col": 4, "line": 101 } }, "notification--dynamic-toast": { "startLoc": { "col": 7, "line": 92 }, "endLoc": { "col": 4, "line": 96 } }, "notification--toast": { "startLoc": { "col": 7, "line": 82 }, "endLoc": { "col": 4, "line": 91 } }, "notification--dynamic": { "startLoc": { "col": 7, "line": 77 }, "endLoc": { "col": 4, "line": 81 } }, "notification--basic": { "startLoc": { "col": 7, "line": 65 }, "endLoc": { "col": 4, "line": 76 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';\n\nimport { Component } from '@angular/core';\n\nimport { NotificationModule, NotificationService } from './notification.module';\nimport { I18n } from '../i18n/i18n.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\n@Component({\n  selector: 'app-notification-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showNotification()\">\n      Show info notification\n    </button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass NotificationStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showNotification() {\n    this.notificationService.showNotification({\n      type: 'info',\n      title: 'Sample notification',\n      message: 'Sample info message',\n      target: '.notification-container',\n    });\n  }\n}\n\n@Component({\n  selector: 'app-toast-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showToast()\">Show info toast</button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass ToastStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showToast() {\n    this.notificationService.showToast({\n      type: 'info',\n      title: 'Sample toast',\n      subtitle: 'Sample subtitle message',\n      caption: 'Sample caption',\n      target: '.notification-container',\n      message: 'message',\n    });\n  }\n}\n\nstoriesOf('Notification', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [NotificationStory, ToastStory],\n      imports: [NotificationModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample error message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample info message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample success message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample warning message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t`,\n    props: {\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('Dynamic', () => ({\n    template: `\n\t\t\t<app-notification-story></app-notification-story>\n\t\t`,\n  }))\n  .add('Toast', () => ({\n    template: `\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t`,\n    props: {\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('Dynamic toast', () => ({\n    template: `\n\t\t\t<app-toast-story></app-toast-story>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Notification.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Toast Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toast.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "notification--toast-documentation": { "startLoc": { "col": 7, "line": 146 }, "endLoc": { "col": 4, "line": 150 } }, "notification--documentation": { "startLoc": { "col": 7, "line": 141 }, "endLoc": { "col": 4, "line": 145 } }, "notification--dynamic-toast": { "startLoc": { "col": 7, "line": 136 }, "endLoc": { "col": 4, "line": 140 } }, "notification--toast": { "startLoc": { "col": 7, "line": 101 }, "endLoc": { "col": 4, "line": 135 } }, "notification--dynamic": { "startLoc": { "col": 7, "line": 96 }, "endLoc": { "col": 4, "line": 100 } }, "notification--basic": { "startLoc": { "col": 7, "line": 65 }, "endLoc": { "col": 4, "line": 95 } } };
 
 
 
@@ -13216,13 +13241,19 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Notificati
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'error', title: 'Sample notification', message: 'Sample error message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'info', title: 'Sample notification', message: 'Sample info message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'success', title: 'Sample notification', message: 'Sample success message'}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{type: 'warning', title: 'Sample notification', message: 'Sample warning message'}\">\n\t\t\t</ibm-notification>\n\t\t"
+    template: "\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample error message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample info message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample success message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample warning message',\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t",
+    props: {
+        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Low Contrast", false)
+    }
 }); })
     .add("Dynamic", function () { return ({
     template: "\n\t\t\t<app-notification-story></app-notification-story>\n\t\t"
 }); })
     .add("Toast", function () { return ({
-    template: "\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption'\n\t\t\t}\"></ibm-toast>\n\t\t"
+    template: "\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast\n\t\t\t}\"></ibm-toast>\n\t\t",
+    props: {
+        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Low Contrast", false)
+    }
 }); })
     .add("Dynamic toast", function () { return ({
     template: "\n\t\t\t<app-toast-story></app-toast-story>\n\t\t"
@@ -13319,6 +13350,11 @@ var Toast = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Toast.prototype, "isLowContrast", {
+        get: function () { return this.notificationObj.lowContrast; },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Toast.prototype, "isExperimental", {
         get: function () {
             return this.experimental.isExperimental;
@@ -13368,6 +13404,11 @@ var Toast = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Toast.prototype, "isWarning", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--toast-notification--low-contrast"),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Toast.prototype, "isLowContrast", null);
     Toast = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-toast",
@@ -25289,7 +25330,7 @@ var HeaderAction = /** @class */ (function () {
     HeaderAction = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header-action",
-            template: "\n\t\t<button\n\t\t\tclass=\"bx--header__action\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--header__action--active': active\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"title\"\n\t\t\t[title]=\"title\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t<ng-content></ng-content>\n\t\t\t<svg ibmIconClose20 class=\"bx--navigation-menu-panel-collapse-icon\"></svg>\n\t\t</button>\n\t"
+            template: "\n\t\t<button\n\t\t\tclass=\"bx--header__action\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--header__action--active': active\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"title\"\n\t\t\t[title]=\"title\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t"
         })
     ], HeaderAction);
     return HeaderAction;
@@ -25611,7 +25652,9 @@ var HeaderNavigation = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return Header; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
-/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
+/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
+/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
 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);
@@ -25621,6 +25664,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+
+
 
 
 /**
@@ -25633,14 +25681,41 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
  * <example-url>../../iframe.html?id=ui-shell--header</example-url>
  */
 var Header = /** @class */ (function () {
-    function Header(i18n) {
+    function Header(i18n, domSanitizer, router) {
         this.i18n = i18n;
+        this.domSanitizer = domSanitizer;
+        this.router = router;
         /**
          * Top level branding. Defaults to "IBM"
          */
         this.brand = "IBM";
+        /**
+         * Emits the navigation status promise when the link is activated
+         */
+        this.navigation = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        this._href = "javascript:void(0)";
     }
-    var _a;
+    Object.defineProperty(Header.prototype, "href", {
+        get: function () {
+            return this.domSanitizer.bypassSecurityTrustUrl(this._href);
+        },
+        /**
+         * Optional link for the header
+         */
+        set: function (v) {
+            this._href = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Header.prototype.navigate = function (event) {
+        if (this.router && this.route) {
+            event.preventDefault();
+            var status = this.router.navigate(this.route, this.routeExtras);
+            this.navigation.emit(status);
+        }
+    };
+    var _a, _b, _c;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String)
@@ -25653,12 +25728,30 @@ 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__["Input"])(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], Header.prototype, "href", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Array)
+    ], Header.prototype, "route", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Header.prototype, "routeExtras", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], Header.prototype, "navigation", void 0);
     Header = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header",
-            template: "\n\t\t<header\n\t\t\tclass=\"bx--header\"\n\t\t\trole=\"banner\"\n\t\t\t[attr.aria-label]=\"brand + ' ' + name\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--skip-to-content\"\n\t\t\t\t[href]=\"skipTo\"\n\t\t\t\ttabindex=\"0\">\n\t\t\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select=\"ibm-hamburger\"></ng-content>\n\t\t\t<a class=\"bx--header__name\" href=\"#\">\n\t\t\t\t<span class=\"bx--header__name--prefix\">{{brand}}&nbsp;</span>\n\t\t\t\t{{name}}\n\t\t\t</a>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t"
+            template: "\n\t\t<header\n\t\t\tclass=\"bx--header\"\n\t\t\trole=\"banner\"\n\t\t\t[attr.aria-label]=\"brand + ' ' + name\">\n\t\t\t<a\n\t\t\t\t*ngIf=\"!skipTo\"\n\t\t\t\tclass=\"bx--skip-to-content\"\n\t\t\t\t[href]=\"skipTo\"\n\t\t\t\ttabindex=\"0\">\n\t\t\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select=\"ibm-hamburger\"></ng-content>\n\t\t\t<a\n\t\t\t\tclass=\"bx--header__name\"\n\t\t\t\thref=\"#\"\n\t\t\t\t(click)=\"navigate($event)\">\n\t\t\t\t<span class=\"bx--header__name--prefix\">{{brand}}&nbsp;</span>\n\t\t\t\t{{name}}\n\t\t\t</a>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t"
         }),
-        __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])
+        __param(2, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"])()),
+        __metadata("design:paramtypes", [typeof (_a = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"]) === "function" && _a || Object, typeof (_b = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _b || Object, typeof (_c = typeof _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"] !== "undefined" && _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"]) === "function" && _c || Object])
     ], Header);
     return Header;
 }());
@@ -26546,8 +26639,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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';\nimport { Component } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n  selector: 'app-bar',\n  template: '<h1>bar</h1>',\n})\nclass BarComponent {}\n\n@Component({\n  selector: 'app-foo',\n  template: '<h1>foo</h1>',\n})\nclass FooComponent {}\n\nstoriesOf('UI Shell', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [BarComponent, FooComponent],\n      imports: [\n        UIShellModule,\n        SearchModule,\n        DialogModule,\n        DocumentationModule,\n        RouterModule.forRoot(\n          [\n            {\n              path: 'bar',\n              component: BarComponent,\n            },\n            {\n              path: 'foo',\n              component: FooComponent,\n            },\n          ],\n          {\n            initialNavigation: false,\n            useHash: true,\n          }\n        ),\n      ],\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('Header with router', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item [route]=\"['bar']\">Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">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 [route]=\"['foo']\">Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item [route]=\"['bar']\">Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">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</ibm-header>\n\t\t\t<div style=\"margin-top: 2rem\">\n\t\t\t\t<router-outlet></router-outlet>\n\t\t\t</div>\n\t\t`,\n    props: {\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('Side Navigation with router', () => ({\n    template: `\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">\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 [route]=\"['bar']\">\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 [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['bar']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<div>\n\t\t\t\t<router-outlet></router-outlet>\n\t\t\t</div>\n\t\t`,\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": 347 }, "endLoc": { "col": 4, "line": 351 } }, "ui-shell--header-documentation": { "startLoc": { "col": 7, "line": 342 }, "endLoc": { "col": 4, "line": 346 } }, "ui-shell--together": { "startLoc": { "col": 7, "line": 227 }, "endLoc": { "col": 4, "line": 341 } }, "ui-shell--side-navigation-with-router": { "startLoc": { "col": 7, "line": 180 }, "endLoc": { "col": 4, "line": 226 } }, "ui-shell--side-navigation": { "startLoc": { "col": 7, "line": 120 }, "endLoc": { "col": 4, "line": 179 } }, "ui-shell--header-with-router": { "startLoc": { "col": 7, "line": 98 }, "endLoc": { "col": 4, "line": 119 } }, "ui-shell--header": { "startLoc": { "col": 7, "line": 53 }, "endLoc": { "col": 4, "line": 97 } } };
+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';\nimport { Component } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n  selector: 'app-bar',\n  template: '<h1>bar</h1>',\n})\nclass BarComponent {}\n\n@Component({\n  selector: 'app-foo',\n  template: '<h1>foo</h1>',\n})\nclass FooComponent {}\n\nstoriesOf('UI Shell', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [BarComponent, FooComponent],\n      imports: [\n        UIShellModule,\n        SearchModule,\n        DialogModule,\n        DocumentationModule,\n        RouterModule.forRoot(\n          [\n            {\n              path: 'bar',\n              component: BarComponent,\n            },\n            {\n              path: 'foo',\n              component: FooComponent,\n            },\n          ],\n          {\n            initialNavigation: false,\n            useHash: true,\n          }\n        ),\n      ],\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('Header with router', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item [route]=\"['bar']\">Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">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 [route]=\"['foo']\">Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item [route]=\"['bar']\">Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item [route]=\"['foo']\">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</ibm-header>\n\t\t\t<div style=\"margin-top: 2rem\">\n\t\t\t\t<router-outlet></router-outlet>\n\t\t\t</div>\n\t\t`,\n    props: {\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('Side Navigation with router', () => ({\n    template: `\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">\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 [route]=\"['bar']\">\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 [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['bar']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<div>\n\t\t\t\t<router-outlet></router-outlet>\n\t\t\t</div>\n\t\t`,\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\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\txmlns=\"http://www.w3.org/2000/svg\"\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\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\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\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\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": 353 }, "endLoc": { "col": 4, "line": 357 } }, "ui-shell--header-documentation": { "startLoc": { "col": 7, "line": 348 }, "endLoc": { "col": 4, "line": 352 } }, "ui-shell--together": { "startLoc": { "col": 7, "line": 227 }, "endLoc": { "col": 4, "line": 347 } }, "ui-shell--side-navigation-with-router": { "startLoc": { "col": 7, "line": 180 }, "endLoc": { "col": 4, "line": 226 } }, "ui-shell--side-navigation": { "startLoc": { "col": 7, "line": 120 }, "endLoc": { "col": 4, "line": 179 } }, "ui-shell--header-with-router": { "startLoc": { "col": 7, "line": 98 }, "endLoc": { "col": 4, "line": 119 } }, "ui-shell--header": { "startLoc": { "col": 7, "line": 53 }, "endLoc": { "col": 4, "line": 97 } } };
 
 
 
@@ -26639,7 +26732,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell",
     template: "\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">\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 [route]=\"['bar']\">\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 [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['bar']\">Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item [route]=\"['foo']\">Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<div>\n\t\t\t\t<router-outlet></router-outlet>\n\t\t\t</div>\n\t\t"
 }); })
     .add("Together", function () { return ({
-    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",
+    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\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\txmlns=\"http://www.w3.org/2000/svg\"\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\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\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\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\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),
@@ -26818,4 +26911,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.8bb53895aa13a93f113f.bundle.js.map
+//# sourceMappingURL=main.edce6b8dbd74b486e13b.bundle.js.map