carbon-components-angular 3.14.7 → 3.15.3

package/docs/storybook/{main.12c0e82df31275c6b327.bundle.js → main.d9349fe343a2c719f60b.bundle.js}

@@ -3500,6 +3500,7 @@ var DatePicker = /** @class */ (function () {
             onOpen: function () { _this.updateClassNames(); },
             value: this.value
         };
+        this.flatpickrInstance = null;
         this.onTouched = function () { };
         this.propagateChange = function (_) { };
     }
@@ -3549,7 +3550,7 @@ var DatePicker = /** @class */ (function () {
         configurable: true
     });
     DatePicker.prototype.ngOnChanges = function (changes) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var dates = this.flatpickrInstance.selectedDates;
             if (changes.value && this.didDateValueChange(changes.value.currentValue, changes.value.previousValue)) {
                 dates = changes.value.currentValue;
@@ -3559,10 +3560,18 @@ var DatePicker = /** @class */ (function () {
             this.setDateValues(dates);
         }
     };
-    DatePicker.prototype.ngAfterViewInit = function () {
-        this.flatpickrInstance = flatpickr__WEBPACK_IMPORTED_MODULE_2___default()("#" + this.id, this.flatpickrOptions);
-        if (this.value.length > 0) {
-            this.setDateValues(this.value);
+    // because the actual view may be delayed in loading (think projection into a tab pane)
+    // and because we rely on a library that operates outside the Angular view of the world
+    // we need to keep trying to load the library, until the relevant DOM is actually live
+    DatePicker.prototype.ngAfterViewChecked = function () {
+        if (!this.isFlatpickrLoaded()) {
+            this.flatpickrInstance = flatpickr__WEBPACK_IMPORTED_MODULE_2___default()("#" + this.id, this.flatpickrOptions);
+            // if (and only if) the initialization succeeded, we can set the date values
+            if (this.isFlatpickrLoaded()) {
+                if (this.value.length > 0) {
+                    this.setDateValues(this.value);
+                }
+            }
         }
     };
     DatePicker.prototype.onFocus = function () {
@@ -3570,7 +3579,7 @@ var DatePicker = /** @class */ (function () {
     };
     /**
      * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
-     * @param value value recived from the model
+     * @param value value received from the model
      */
     DatePicker.prototype.writeValue = function (value) {
         this.value = value;
@@ -3586,7 +3595,7 @@ var DatePicker = /** @class */ (function () {
      * Cleans up our flatpickr instance
      */
     DatePicker.prototype.ngOnDestroy = function () {
-        if (!this.flatpickrInstance) {
+        if (!this.isFlatpickrLoaded()) {
             return;
         }
         this.flatpickrInstance.destroy();
@@ -3595,7 +3604,7 @@ var DatePicker = /** @class */ (function () {
      * Handles the `valueChange` event from the primary/single input
      */
     DatePicker.prototype.onValueChange = function (event) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
             if (this.range) {
                 this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
@@ -3610,7 +3619,7 @@ var DatePicker = /** @class */ (function () {
      * Handles the `valueChange` event from the range input
      */
     DatePicker.prototype.onRangeValueChange = function (event) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
             this.setDateValues([this.flatpickrInstance.selectedDates[0], date]);
             this.doSelect(this.flatpickrInstance.selectedDates);
@@ -3668,7 +3677,7 @@ var DatePicker = /** @class */ (function () {
      * @param dates the date values to apply
      */
     DatePicker.prototype.setDateValues = function (dates) {
-        if (this.flatpickrInstance) {
+        if (this.isFlatpickrLoaded()) {
             var singleInput = this.elementRef.nativeElement.querySelector("#" + this.id);
             var rangeInput = this.elementRef.nativeElement.querySelector("#" + this.id + "-rangeInput");
             // set the date on the instance
@@ -3710,6 +3719,13 @@ var DatePicker = /** @class */ (function () {
     DatePicker.prototype.didDateValueChange = function (currentValue, previousValue) {
         return currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];
     };
+    /**
+     * More advanced checking of the loaded state of flatpickr
+     */
+    DatePicker.prototype.isFlatpickrLoaded = function () {
+        // cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`
+        return !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;
+    };
     var DatePicker_1, _a, _b, _c, _d;
     DatePicker.datePickerCount = 0;
     __decorate([
@@ -3880,6 +3896,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ */ "./src/index.ts");
 /* harmony import */ var _forms_forms_module__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../forms/forms.module */ "./src/forms/forms.module.ts");
+/* harmony import */ var _tabs_tabs_module__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../tabs/tabs.module */ "./src/tabs/tabs.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);
@@ -3890,8 +3907,9 @@ 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, array, select, text, boolean } from '@storybook/addon-knobs/angular';\nimport {\n  FormBuilder,\n  FormGroup,\n  Validators,\n  FormsModule,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { DatePickerModule, DocumentationModule } from '../';\nimport { ButtonModule } from '../forms/forms.module';\n\n@Component({\n  selector: 'app-date-picker',\n  template: `\n    <form [formGroup]=\"formGroup\">\n      <ibm-date-picker\n        formControlName=\"single\"\n        label=\"Date Picker Label\"\n        invalidText=\"Invalid date format\"\n        [invalid]=\"invalidSingle\"\n        (valueChange)=\"valueChange.emit($event)\"\n      >\n      </ibm-date-picker>\n      <code>{{ formGroup.controls['single'].value | json }}</code>\n      <br /><br />\n      <ibm-date-picker\n        range=\"true\"\n        formControlName=\"range\"\n        label=\"Date Picker Label\"\n        rangeLabel=\"Date Picker Label\"\n        invalidText=\"Invalid date format\"\n        [pattern]=\"pattern\"\n        [invalid]=\"invalidRange\"\n        (valueChange)=\"valueChange.emit($event)\"\n      >\n      </ibm-date-picker>\n      <code>{{ formGroup.controls['range'].value | json }}</code>\n    </form>\n  `,\n})\nclass DatePickerStory {\n  @Output() valueChange = new EventEmitter();\n\n  get invalidSingle() {\n    return this.formGroup.controls['single'].invalid && this.formGroup.controls['single'].touched;\n  }\n\n  get invalidRange() {\n    return this.formGroup.controls['range'].invalid && this.formGroup.controls['range'].touched;\n  }\n\n  formGroup: FormGroup;\n\n  constructor(protected formBuilder: FormBuilder) {\n    this.formGroup = this.formBuilder.group({\n      single: [[new Date()], Validators.required],\n      range: [\n        [\n          new Date(),\n          new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),\n        ],\n        Validators.required,\n      ],\n    });\n  }\n}\n\nstoriesOf('Date Picker', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        DatePickerModule,\n        FormsModule,\n        ReactiveFormsModule,\n        DocumentationModule,\n        ButtonModule,\n      ],\n      declarations: [DatePickerStory],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Simple', () => ({\n    template: `\n\t\t<ibm-date-picker-input\n\t\t\t[theme]=\"theme\"\n\t\t\t[label]=\"label\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker-input>\n\t\t`,\n    props: {\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      valueChange: action('Date change fired!'),\n    },\n  }))\n  .add('Single', () => ({\n    template: `\n\t\t\t<p>With initial value</p>\n\t\t\t<ibm-date-picker\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t</ibm-date-picker>\n\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t<ibm-date-picker\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t</ibm-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      dateFormat: text('Date format', 'm/d/Y'),\n      value: array('Value', ['10/19/2019']),\n    },\n  }))\n  .add('Range', () => ({\n    template: `\n\t\t<p>With initial value</p>\n\t\t<ibm-date-picker\n\t\t\t[label]=\"label\"\n\t\t\t[rangeLabel]=\"label\"\n\t\t\trange=\"true\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t[value]=\"value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker>\n\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t<ibm-date-picker\n\t\t\t[label]=\"label\"\n\t\t\t[rangeLabel]=\"label\"\n\t\t\trange=\"true\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      dateFormat: text('Date format', 'm/d/Y'),\n      value: array('Value', ['09/19/2019', '10/19/2019']),\n    },\n  }))\n  .add('With reactive forms', () => ({\n    template: `\n\t\t<app-date-picker\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</app-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t\t<div>\n\t\t\t\t<ibm-date-picker\n\t\t\t\t\tlabel=\"Date picker label\"\n\t\t\t\t\t[(ngModel)]=\"single\">\n\t\t\t\t</ibm-date-picker>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"single = null\"\n\t\t\t\t\tstyle=\"margin-top: 5px\">\n\t\t\t\t\tSend null\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"single = [date]\"\n\t\t\t\t\tstyle=\"margin-left: 5px\">\n\t\t\t\t\tSend date\n\t\t\t\t</button>\n\t\t\t\t<br>\n\t\t\t\t<code>{{ single | json }}</code>\n\t\t\t</div>\n\t\t\t<div style=\"margin-top: 15px;\">\n\t\t\t\t<ibm-date-picker\n\t\t\t\t\tlabel=\"Date picker\"\n\t\t\t\t\trangeLabel=\"Range label\"\n\t\t\t\t\trange=\"true\"\n\t\t\t\t\t[(ngModel)]=\"range\">\n\t\t\t\t</ibm-date-picker>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"range = null\"\n\t\t\t\t\tstyle=\"margin-top: 5px\">\n\t\t\t\t\tSend null\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"range = rangeDates\"\n\t\t\t\t\tstyle=\"margin-left: 5px\">\n\t\t\t\t\tSend date\n\t\t\t\t</button>\n\t\t\t\t<br>\n\t\t\t\t<code>{{ range | json }}</code>\n\t\t\t</div>\n\t\t`,\n    props: {\n      date: new Date(new Date().getFullYear(), 5, 15),\n      rangeDates: [\n        new Date(new Date().getFullYear(), 5, 15),\n        new Date(new Date().getFullYear(), 8, 19),\n      ],\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-date-picker\n\t\t\trange=\"true\"\n\t\t\tskeleton=\"true\">\n\t\t</ibm-date-picker>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/DatePicker.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "date-picker--documentation": { "startLoc": { "col": 7, "line": 258 }, "endLoc": { "col": 4, "line": 262 } }, "date-picker--skeleton": { "startLoc": { "col": 7, "line": 250 }, "endLoc": { "col": 4, "line": 257 } }, "date-picker--with-ngmodel": { "startLoc": { "col": 7, "line": 197 }, "endLoc": { "col": 4, "line": 249 } }, "date-picker--with-reactive-forms": { "startLoc": { "col": 7, "line": 187 }, "endLoc": { "col": 4, "line": 196 } }, "date-picker--range": { "startLoc": { "col": 7, "line": 145 }, "endLoc": { "col": 4, "line": 186 } }, "date-picker--single": { "startLoc": { "col": 7, "line": 107 }, "endLoc": { "col": 4, "line": 144 } }, "date-picker--simple": { "startLoc": { "col": 7, "line": 85 }, "endLoc": { "col": 4, "line": 106 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, array, select, text, boolean } from '@storybook/addon-knobs/angular';\nimport {\n  FormBuilder,\n  FormGroup,\n  Validators,\n  FormsModule,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { DatePickerModule, DocumentationModule } from '../';\nimport { ButtonModule } from '../forms/forms.module';\nimport { TabsModule } from '../tabs/tabs.module';\n\n@Component({\n  selector: 'app-date-picker',\n  template: `\n    <form [formGroup]=\"formGroup\">\n      <ibm-date-picker\n        formControlName=\"single\"\n        label=\"Date Picker Label\"\n        invalidText=\"Invalid date format\"\n        [invalid]=\"invalidSingle\"\n        (valueChange)=\"valueChange.emit($event)\"\n      >\n      </ibm-date-picker>\n      <code>{{ formGroup.controls['single'].value | json }}</code>\n      <br /><br />\n      <ibm-date-picker\n        range=\"true\"\n        formControlName=\"range\"\n        label=\"Date Picker Label\"\n        rangeLabel=\"Date Picker Label\"\n        invalidText=\"Invalid date format\"\n        [pattern]=\"pattern\"\n        [invalid]=\"invalidRange\"\n        (valueChange)=\"valueChange.emit($event)\"\n      >\n      </ibm-date-picker>\n      <code>{{ formGroup.controls['range'].value | json }}</code>\n    </form>\n  `,\n})\nclass DatePickerStory {\n  @Output() valueChange = new EventEmitter();\n\n  get invalidSingle() {\n    return this.formGroup.controls['single'].invalid && this.formGroup.controls['single'].touched;\n  }\n\n  get invalidRange() {\n    return this.formGroup.controls['range'].invalid && this.formGroup.controls['range'].touched;\n  }\n\n  formGroup: FormGroup;\n\n  constructor(protected formBuilder: FormBuilder) {\n    this.formGroup = this.formBuilder.group({\n      single: [[new Date()], Validators.required],\n      range: [\n        [\n          new Date(),\n          new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),\n        ],\n        Validators.required,\n      ],\n    });\n  }\n}\n\nstoriesOf('Date Picker', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        DatePickerModule,\n        FormsModule,\n        ReactiveFormsModule,\n        DocumentationModule,\n        ButtonModule,\n        TabsModule,\n      ],\n      declarations: [DatePickerStory],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Simple', () => ({\n    template: `\n\t\t<ibm-date-picker-input\n\t\t\t[theme]=\"theme\"\n\t\t\t[label]=\"label\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker-input>\n\t\t`,\n    props: {\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      valueChange: action('Date change fired!'),\n    },\n  }))\n  .add('Single', () => ({\n    template: `\n\t\t\t<p>With initial value</p>\n\t\t\t<ibm-date-picker\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t</ibm-date-picker>\n\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t<ibm-date-picker\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t</ibm-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      dateFormat: text('Date format', 'm/d/Y'),\n      value: array('Value', ['10/19/2019']),\n    },\n  }))\n  .add('Range', () => ({\n    template: `\n\t\t<p>With initial value</p>\n\t\t<ibm-date-picker\n\t\t\t[label]=\"label\"\n\t\t\t[rangeLabel]=\"label\"\n\t\t\trange=\"true\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t[value]=\"value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker>\n\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t<ibm-date-picker\n\t\t\t[label]=\"label\"\n\t\t\t[rangeLabel]=\"label\"\n\t\t\trange=\"true\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</ibm-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      dateFormat: text('Date format', 'm/d/Y'),\n      value: array('Value', ['09/19/2019', '10/19/2019']),\n    },\n  }))\n  .add('With reactive forms', () => ({\n    template: `\n\t\t<app-date-picker\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t</app-date-picker>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t\t<div>\n\t\t\t\t<ibm-date-picker\n\t\t\t\t\tlabel=\"Date picker label\"\n\t\t\t\t\t[(ngModel)]=\"single\">\n\t\t\t\t</ibm-date-picker>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"single = null\"\n\t\t\t\t\tstyle=\"margin-top: 5px\">\n\t\t\t\t\tSend null\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"single = [date]\"\n\t\t\t\t\tstyle=\"margin-left: 5px\">\n\t\t\t\t\tSend date\n\t\t\t\t</button>\n\t\t\t\t<br>\n\t\t\t\t<code>{{ single | json }}</code>\n\t\t\t</div>\n\t\t\t<div style=\"margin-top: 15px;\">\n\t\t\t\t<ibm-date-picker\n\t\t\t\t\tlabel=\"Date picker\"\n\t\t\t\t\trangeLabel=\"Range label\"\n\t\t\t\t\trange=\"true\"\n\t\t\t\t\t[(ngModel)]=\"range\">\n\t\t\t\t</ibm-date-picker>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"range = null\"\n\t\t\t\t\tstyle=\"margin-top: 5px\">\n\t\t\t\t\tSend null\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tibmButton\n\t\t\t\t\t(click)=\"range = rangeDates\"\n\t\t\t\t\tstyle=\"margin-left: 5px\">\n\t\t\t\t\tSend date\n\t\t\t\t</button>\n\t\t\t\t<br>\n\t\t\t\t<code>{{ range | json }}</code>\n\t\t\t</div>\n\t\t`,\n    props: {\n      date: new Date(new Date().getFullYear(), 5, 15),\n      rangeDates: [\n        new Date(new Date().getFullYear(), 5, 15),\n        new Date(new Date().getFullYear(), 8, 19),\n      ],\n    },\n  }))\n  .add('In tabs', () => ({\n    template: `\n\t\t\t<ibm-tabs>\n\t\t\t\t<ibm-tab heading=\"one\">\n\t\t\t\t\tTab Content 1\n\t\t\t\t\t<p>With initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">\n\t\t\t\t\t<p>With initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"three\">Tab Content 3</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      valueChange: action('Date change fired!'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      label: text('Label text', 'Date Picker Label'),\n      placeholder: text('Placeholder text', 'mm/dd/yyyy'),\n      invalidText: text('Form validation content', 'Invalid date format'),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('Disabled', false),\n      dateFormat: text('Date format', 'm/d/Y'),\n      value: array('Value', ['10/19/2019']),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-date-picker\n\t\t\trange=\"true\"\n\t\t\tskeleton=\"true\">\n\t\t</ibm-date-picker>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/DatePicker.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "date-picker--documentation": { "startLoc": { "col": 7, "line": 329 }, "endLoc": { "col": 4, "line": 333 } }, "date-picker--skeleton": { "startLoc": { "col": 7, "line": 321 }, "endLoc": { "col": 4, "line": 328 } }, "date-picker--in-tabs": { "startLoc": { "col": 7, "line": 252 }, "endLoc": { "col": 4, "line": 320 } }, "date-picker--with-ngmodel": { "startLoc": { "col": 7, "line": 199 }, "endLoc": { "col": 4, "line": 251 } }, "date-picker--with-reactive-forms": { "startLoc": { "col": 7, "line": 189 }, "endLoc": { "col": 4, "line": 198 } }, "date-picker--range": { "startLoc": { "col": 7, "line": 147 }, "endLoc": { "col": 4, "line": 188 } }, "date-picker--single": { "startLoc": { "col": 7, "line": 109 }, "endLoc": { "col": 4, "line": 146 } }, "date-picker--simple": { "startLoc": { "col": 7, "line": 87 }, "endLoc": { "col": 4, "line": 108 } } };
+
 
 
 
@@ -3952,7 +3970,8 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Date Picke
         _angular_forms__WEBPACK_IMPORTED_MODULE_3__["FormsModule"],
         _angular_forms__WEBPACK_IMPORTED_MODULE_3__["ReactiveFormsModule"],
         ___WEBPACK_IMPORTED_MODULE_5__["DocumentationModule"],
-        _forms_forms_module__WEBPACK_IMPORTED_MODULE_6__["ButtonModule"]
+        _forms_forms_module__WEBPACK_IMPORTED_MODULE_6__["ButtonModule"],
+        _tabs_tabs_module__WEBPACK_IMPORTED_MODULE_7__["TabsModule"]
     ],
     declarations: [
         DatePickerStory
@@ -4014,6 +4033,20 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Date Picke
             new Date(new Date().getFullYear(), 8, 19)
         ]
     }
+}); })
+    .add("In tabs", function () { return ({
+    template: "\n\t\t\t<ibm-tabs>\n\t\t\t\t<ibm-tab heading=\"one\">\n\t\t\t\t\tTab Content 1\n\t\t\t\t\t<p>With initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">\n\t\t\t\t\t<p>With initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t\t<p style=\"margin-top: 20px;\">Without initial value</p>\n\t\t\t\t\t<ibm-date-picker\n\t\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[theme]=\"theme\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t[dateFormat]=\"dateFormat\"\n\t\t\t\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t\t\t</ibm-date-picker>\n\t\t\t\t</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"three\">Tab Content 3</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t",
+    props: {
+        valueChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Date change fired!"),
+        theme: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["select"])("Theme", ["dark", "light"], "dark"),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label text", "Date Picker Label"),
+        placeholder: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Placeholder text", "mm/dd/yyyy"),
+        invalidText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Form validation content", "Invalid date format"),
+        invalid: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show form validation", false),
+        disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Disabled", false),
+        dateFormat: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Date format", "m/d/Y"),
+        value: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["array"])("Value", ["10/19/2019"])
+    }
 }); })
     .add("Skeleton", function () { return ({
     template: "\n\t\t<ibm-date-picker\n\t\t\trange=\"true\"\n\t\t\tskeleton=\"true\">\n\t\t</ibm-date-picker>\n\t\t"
@@ -4132,6 +4165,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _common_tab_service__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../common/tab.service */ "./src/common/tab.service.ts");
 /* harmony import */ var _dialog_config_interface__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./dialog-config.interface */ "./src/dialog/dialog-config.interface.ts");
 /* harmony import */ var _dialog_config_interface__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_dialog_config_interface__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _utils_scroll__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./../utils/scroll */ "./src/utils/scroll.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);
@@ -4148,6 +4182,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 /**
  * Implements a `Dialog` that can be positioned anywhere on the page.
  * Used to implement a popover or tooltip.
@@ -4218,7 +4253,7 @@ var Dialog = /** @class */ (function () {
     Dialog.prototype.ngAfterViewInit = function () {
         var _this = this;
         var dialogElement = this.dialog.nativeElement;
-        // split the wrapper class list and apply separately to avoid IE from
+        // split the wrapper class list and apply separately to avoid IE
         // 1. throwing an error due to assigning a readonly property (classList)
         // 2. throwing a SyntaxError due to passing an empty string to `add`
         if (this.dialogConfig.wrapperClass) {
@@ -4231,41 +4266,16 @@ var Dialog = /** @class */ (function () {
         if (Object(_common_tab_service__WEBPACK_IMPORTED_MODULE_4__["getFocusElementList"])(this.dialog.nativeElement).length > 0) {
             dialogElement.focus();
         }
-        var parentEl = this.dialogConfig.parentRef.nativeElement;
-        var node = parentEl;
-        var observables = [];
-        // if the element has an overflow set as part of
-        // its computed style it can scroll
-        var isScrollableElement = function (element) {
-            var computedStyle = getComputedStyle(element);
-            return (computedStyle.overflow === "auto" ||
-                computedStyle.overflow === "scroll" ||
-                computedStyle["overflow-y"] === "auto" ||
-                computedStyle["overflow-y"] === "scroll" ||
-                computedStyle["overflow-x"] === "auto" ||
-                computedStyle["overflow-x"] === "scroll");
-        };
-        var isVisibleInContainer = function (element, container) {
-            var elementRect = element.getBoundingClientRect();
-            var containerRect = container.getBoundingClientRect();
-            return elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;
-        };
+        var parentElement = this.dialogConfig.parentRef.nativeElement;
         var placeDialogInContainer = function () {
             // only do the work to find the scroll containers if we're appended to body
             // or skip this work if we're inline
             if (!_this.dialogConfig.appendInline) {
-                // walk the parents and subscribe to all the scroll events we can
-                while (node.parentElement && node !== document.body) {
-                    if (isScrollableElement(node)) {
-                        observables.push(Object(rxjs__WEBPACK_IMPORTED_MODULE_1__["fromEvent"])(node, "scroll"));
-                    }
-                    node = node.parentElement;
-                }
                 // subscribe to the observable, and update the position and visibility
-                var scrollObservable = rxjs__WEBPACK_IMPORTED_MODULE_1__["merge"].apply(void 0, observables);
+                var scrollObservable = Object(_utils_scroll__WEBPACK_IMPORTED_MODULE_6__["scrollableParentsObservable"])(parentElement);
                 _this.scrollSubscription = scrollObservable.subscribe(function (event) {
                     _this.placeDialog();
-                    if (!isVisibleInContainer(_this.dialogConfig.parentRef.nativeElement, event.target)) {
+                    if (!Object(_utils_scroll__WEBPACK_IMPORTED_MODULE_6__["isVisibleInContainer"])(_this.dialogConfig.parentRef.nativeElement, event.target)) {
                         _this.doClose();
                     }
                 });
@@ -5160,7 +5170,7 @@ var OverflowMenuOption = /** @class */ (function () {
     OverflowMenuOption = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-overflow-menu-option",
-            template: "\n\t\t<button\n\t\t\t*ngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"
+            template: "\n\t\t<button\n\t\t\t*ngIf=\"!href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</button>\n\n\t\t<a\n\t\t\t*ngIf=\"href\"\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.title]=\"title\">\n\t\t\t<ng-container *ngTemplateOutlet=\"tempOutlet\"></ng-container>\n\t\t</a>\n\n\t\t<ng-template #tempOutlet>\n\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-template>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object])
     ], OverflowMenuOption);
@@ -6444,6 +6454,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./abstract-dropdown-view.class */ "./src/dropdown/abstract-dropdown-view.class.ts");
 /* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
 /* harmony import */ var _dropdown_service__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./dropdown.service */ "./src/dropdown/dropdown.service.ts");
+/* harmony import */ var _utils_scroll__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./../utils/scroll */ "./src/utils/scroll.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);
@@ -6460,6 +6471,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 /**
  * Drop-down lists enable users to select one or more items from a list.
  *
@@ -6936,20 +6948,21 @@ var Dropdown = /** @class */ (function () {
      */
     Dropdown.prototype.addScrollEventListener = function () {
         var _this = this;
+        var scrollObservable = Object(_utils_scroll__WEBPACK_IMPORTED_MODULE_6__["scrollableParentsObservable"])(this.elementRef.nativeElement);
         if (this.scrollableContainer) {
-            var container_1 = document.querySelector(this.scrollableContainer);
-            if (container_1) {
-                this.scroll = Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(container_1, "scroll")
-                    .subscribe(function () {
-                    if (_this.isVisibleInContainer(_this.elementRef.nativeElement, container_1)) {
-                        _this.dropdownService.updatePosition(_this.dropdownButton.nativeElement);
-                    }
-                    else {
-                        _this.closeMenu();
-                    }
-                });
+            var container = document.querySelector(this.scrollableContainer);
+            if (container) {
+                scrollObservable = Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["merge"])(scrollObservable, Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(container, "scroll"));
             }
         }
+        this.scroll = scrollObservable.subscribe(function (event) {
+            if (Object(_utils_scroll__WEBPACK_IMPORTED_MODULE_6__["isVisibleInContainer"])(_this.elementRef.nativeElement, event.target)) {
+                _this.dropdownService.updatePosition(_this.dropdownButton.nativeElement);
+            }
+            else {
+                _this.closeMenu();
+            }
+        });
     };
     /**
      * Removes any `EventListeners` responsible for scroll functionality.
@@ -6970,19 +6983,6 @@ var Dropdown = /** @class */ (function () {
             this.closeMenu();
         }
     };
-    /**
-     * Returns `true` if the `elem` is visible within the `container`.
-     */
-    Dropdown.prototype.isVisibleInContainer = function (elem, container) {
-        var containerTop = container.scrollTop;
-        var containerBottom = containerTop + container.offsetHeight;
-        var elemTop = elem.offsetTop + elem.offsetHeight;
-        var elemBottom = elemTop;
-        if ((elemBottom <= containerBottom) && (elemTop >= containerTop)) {
-            return true;
-        }
-        return false;
-    };
     Dropdown.prototype.isTemplate = function (value) {
         return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
     };
@@ -21556,6 +21556,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Tag", modu
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClickableTile", function() { return ClickableTile; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -21565,6 +21566,10 @@ 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); }
+};
+
 
 /**
  * Build application's clickable tiles using this component.
@@ -21576,32 +21581,34 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
  * 		tile content
  * </ibm-clickable-tile>
  * ```
- *
- * @export
- * @class ClickableTile
- * @implements {OnInit}
  */
 var ClickableTile = /** @class */ (function () {
-    function ClickableTile() {
+    function ClickableTile(router) {
+        this.router = router;
+        /**
+         * Sets the `href` attribute on the `ibm-clickable-tile` element.
+         */
+        this.href = "#";
         /**
          * Set to `true` to disable the clickable tile.
-         * @type {boolean}
-         * @memberof ClickableTile
          */
         this.disabled = false;
-        this.clicked = false;
+        /**
+         * Emits the navigation status promise when the link is activated
+         */
+        this.navigation = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
     }
-    ClickableTile.prototype.onClick = function (event) {
-        this.clicked = !this.clicked;
-    };
-    ClickableTile.prototype.onKeyDown = function (event) {
-        if (event.key === "Enter" || event.key === " ") {
-            this.clicked = !this.clicked;
+    ClickableTile.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;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], ClickableTile.prototype, "href", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -21611,11 +21618,25 @@ var ClickableTile = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], ClickableTile.prototype, "disabled", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Array)
+    ], ClickableTile.prototype, "route", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ClickableTile.prototype, "routeExtras", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], ClickableTile.prototype, "navigation", void 0);
     ClickableTile = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-clickable-tile",
-            template: "\n\t<a\n\t\tibmLink\n\t\tclass=\"bx--tile bx--tile--clickable\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--tile--is-clicked': clicked\n\t\t}\"\n\t\ttabindex=\"0\"\n\t\t(click)=\"onClick($event)\"\n\t\t(keydown)=\"onKeyDown($event)\"\n\t\t[href]=\"href\"\n\t\t[target]=\"target\"\n\t\t[attr.aria-disabled]=\"disabled\">\n\t\t<ng-content></ng-content>\n\t</a>"
-        })
+            template: "\n\t<a\n\t\tibmLink\n\t\tclass=\"bx--tile bx--tile--clickable\"\n\t\ttabindex=\"0\"\n\t\t(click)=\"navigate($event)\"\n\t\t[href]=\"href\"\n\t\t[attr.target]=\"target\"\n\t\t[attr.aria-disabled]=\"disabled\">\n\t\t<ng-content></ng-content>\n\t</a>"
+        }),
+        __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"])()),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_router__WEBPACK_IMPORTED_MODULE_1__["Router"] !== "undefined" && _angular_router__WEBPACK_IMPORTED_MODULE_1__["Router"]) === "function" && _a || Object])
     ], ClickableTile);
     return ClickableTile;
 }());
@@ -22137,18 +22158,69 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @storybook/addon-actions */ "./node_modules/@storybook/addon-actions/dist/index.js");
 /* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ */ "./src/index.ts");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs } from '@storybook/addon-knobs/angular';\nimport { action } from '@storybook/addon-actions';\n\nimport { TilesModule, DocumentationModule } from '../';\n\nstoriesOf('Tiles', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [TilesModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-tile>\n\t\t\ttile content goes here...\n\t\t</ibm-tile>\n\t\t`,\n  }))\n  .add('Multiple', () => ({\n    template: `\n\t\t<div style=\"display: flex; flex-flow: row wrap; justify-content: space-around;\">\n\t\t\t<ibm-tile>\n\t\t\t\tTile 1\n\t\t\t</ibm-tile>\n\t\t\t<ibm-tile>\n\t\t\t\tTile 2\n\t\t\t</ibm-tile>\n\t\t\t<ibm-tile>\n\t\t\t\tTile 3\n\t\t\t</ibm-tile>\n\t\t</div>\n\t\t`,\n  }))\n  .add('Clickable', () => ({\n    template: `\n\t\t<ibm-clickable-tile href=\"https://www.carbondesignsystem.com/\" target=\"_blank\">\n\t\t\tClick the tile to open the Carbon Design System\n\t\t</ibm-clickable-tile>\n\t\t`,\n  }))\n  .add('Selectable', () => ({\n    template: `\n\t\t\t<ibm-tile-group (selected)=\"selected($event)\">\n\t\t\t\t<ibm-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile2\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile3\">Selectable Tile</ibm-selection-tile>\n\t\t\t</ibm-tile-group>\n\t\t`,\n    props: {\n      selected: action('tile selected'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t\t<ibm-tile-group (selected)=\"selected($event)\" [multiple]=\"true\">\n\t\t\t\t<ibm-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile2\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile3\">Selectable Tile</ibm-selection-tile>\n\t\t\t</ibm-tile-group>\n\t\t`,\n    props: {\n      selected: action('tile selected'),\n    },\n  }))\n  .add('Expandable', () => ({\n    template: `\n\t\t<ibm-expandable-tile>\n\t\t\t<span class=\"bx--tile-content__above-the-fold\" style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span class=\"bx--tile-content__below-the-fold\" style=\"height: 400px\">Below the fold content here</span>\n\t\t</ibm-expandable-tile>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Tile.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "tiles--documentation": { "startLoc": { "col": 7, "line": 75 }, "endLoc": { "col": 4, "line": 79 } }, "tiles--expandable": { "startLoc": { "col": 7, "line": 67 }, "endLoc": { "col": 4, "line": 74 } }, "tiles--multi-select": { "startLoc": { "col": 7, "line": 55 }, "endLoc": { "col": 4, "line": 66 } }, "tiles--selectable": { "startLoc": { "col": 7, "line": 43 }, "endLoc": { "col": 4, "line": 54 } }, "tiles--clickable": { "startLoc": { "col": 7, "line": 36 }, "endLoc": { "col": 4, "line": 42 } }, "tiles--multiple": { "startLoc": { "col": 7, "line": 21 }, "endLoc": { "col": 4, "line": 35 } }, "tiles--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 20 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs } from '@storybook/addon-knobs/angular';\nimport { action } from '@storybook/addon-actions';\n\nimport { TilesModule, DocumentationModule } from '../';\nimport { RouterModule } from '@angular/router';\nimport { APP_BASE_HREF } from '@angular/common';\nimport { Component } from '@angular/core';\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('Tiles', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [FooComponent, BarComponent],\n      imports: [\n        TilesModule,\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      providers: [{ provide: APP_BASE_HREF, useValue: '/' }],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-tile>\n\t\t\ttile content goes here...\n\t\t</ibm-tile>\n\t\t`,\n  }))\n  .add('Multiple', () => ({\n    template: `\n\t\t<div style=\"display: flex; flex-flow: row wrap; justify-content: space-around;\">\n\t\t\t<ibm-tile>\n\t\t\t\tTile 1\n\t\t\t</ibm-tile>\n\t\t\t<ibm-tile>\n\t\t\t\tTile 2\n\t\t\t</ibm-tile>\n\t\t\t<ibm-tile>\n\t\t\t\tTile 3\n\t\t\t</ibm-tile>\n\t\t</div>\n\t\t`,\n  }))\n  .add('Clickable', () => ({\n    template: `\n\t\t<ibm-clickable-tile href=\"https://www.carbondesignsystem.com/\" target=\"_blank\">\n\t\t\tClick the tile to open the Carbon Design System\n\t\t</ibm-clickable-tile>\n\t\t`,\n  }))\n  .add('Routable', () => ({\n    template: `\n\t\t\t<ibm-clickable-tile [route]=\"['foo']\">\n\t\t\t\tClick to trigger the <code>foo</code> route\n\t\t\t</ibm-clickable-tile>\n\t\t\t<ibm-clickable-tile [route]=\"['bar']\">\n\t\t\t\tClick to trigger the <code>bar</code> route\n\t\t\t</ibm-clickable-tile>\n\t\t\t<router-outlet></router-outlet>\n\t\t`,\n  }))\n  .add('Selectable', () => ({\n    template: `\n\t\t\t<ibm-tile-group (selected)=\"selected($event)\">\n\t\t\t\t<ibm-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile2\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile3\">Selectable Tile</ibm-selection-tile>\n\t\t\t</ibm-tile-group>\n\t\t`,\n    props: {\n      selected: action('tile selected'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t\t<ibm-tile-group (selected)=\"selected($event)\" [multiple]=\"true\">\n\t\t\t\t<ibm-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile2\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile3\">Selectable Tile</ibm-selection-tile>\n\t\t\t</ibm-tile-group>\n\t\t`,\n    props: {\n      selected: action('tile selected'),\n    },\n  }))\n  .add('Expandable', () => ({\n    template: `\n\t\t<ibm-expandable-tile>\n\t\t\t<span class=\"bx--tile-content__above-the-fold\" style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span class=\"bx--tile-content__below-the-fold\" style=\"height: 400px\">Below the fold content here</span>\n\t\t</ibm-expandable-tile>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Tile.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "tiles--documentation": { "startLoc": { "col": 7, "line": 122 }, "endLoc": { "col": 4, "line": 126 } }, "tiles--expandable": { "startLoc": { "col": 7, "line": 114 }, "endLoc": { "col": 4, "line": 121 } }, "tiles--multi-select": { "startLoc": { "col": 7, "line": 102 }, "endLoc": { "col": 4, "line": 113 } }, "tiles--selectable": { "startLoc": { "col": 7, "line": 90 }, "endLoc": { "col": 4, "line": 101 } }, "tiles--routable": { "startLoc": { "col": 7, "line": 79 }, "endLoc": { "col": 4, "line": 89 } }, "tiles--clickable": { "startLoc": { "col": 7, "line": 72 }, "endLoc": { "col": 4, "line": 78 } }, "tiles--multiple": { "startLoc": { "col": 7, "line": 57 }, "endLoc": { "col": 4, "line": 71 } }, "tiles--basic": { "startLoc": { "col": 7, "line": 50 }, "endLoc": { "col": 4, "line": 56 } } };
+
+
 
 
 
 
+
+var BarComponent = /** @class */ (function () {
+    function BarComponent() {
+    }
+    BarComponent = __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_6__["Component"])({
+            selector: "app-bar",
+            template: "<h1>bar</h1>"
+        })
+    ], BarComponent);
+    return BarComponent;
+}());
+var FooComponent = /** @class */ (function () {
+    function FooComponent() {
+    }
+    FooComponent = __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_6__["Component"])({
+            selector: "app-foo",
+            template: "<h1>foo</h1>"
+        })
+    ], FooComponent);
+    return FooComponent;
+}());
 Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Tiles", module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
     .addDecorator(Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["moduleMetadata"])({
+    declarations: [FooComponent, BarComponent],
     imports: [
         ___WEBPACK_IMPORTED_MODULE_3__["TilesModule"],
-        ___WEBPACK_IMPORTED_MODULE_3__["DocumentationModule"]
+        ___WEBPACK_IMPORTED_MODULE_3__["DocumentationModule"],
+        _angular_router__WEBPACK_IMPORTED_MODULE_4__["RouterModule"].forRoot([
+            {
+                path: "bar",
+                component: BarComponent
+            },
+            {
+                path: "foo",
+                component: FooComponent
+            }
+        ], {
+            initialNavigation: false,
+            useHash: true
+        })
+    ],
+    providers: [
+        { provide: _angular_common__WEBPACK_IMPORTED_MODULE_5__["APP_BASE_HREF"], useValue: "/" }
     ]
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
@@ -22160,6 +22232,9 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Tiles", mo
 }); })
     .add("Clickable", function () { return ({
     template: "\n\t\t<ibm-clickable-tile href=\"https://www.carbondesignsystem.com/\" target=\"_blank\">\n\t\t\tClick the tile to open the Carbon Design System\n\t\t</ibm-clickable-tile>\n\t\t"
+}); })
+    .add("Routable", function () { return ({
+    template: "\n\t\t\t<ibm-clickable-tile [route]=\"['foo']\">\n\t\t\t\tClick to trigger the <code>foo</code> route\n\t\t\t</ibm-clickable-tile>\n\t\t\t<ibm-clickable-tile [route]=\"['bar']\">\n\t\t\t\tClick to trigger the <code>bar</code> route\n\t\t\t</ibm-clickable-tile>\n\t\t\t<router-outlet></router-outlet>\n\t\t"
 }); })
     .add("Selectable", function () { return ({
     template: "\n\t\t\t<ibm-tile-group (selected)=\"selected($event)\">\n\t\t\t\t<ibm-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile2\">Selectable Tile</ibm-selection-tile>\n\t\t\t\t<ibm-selection-tile value=\"tile3\">Selectable Tile</ibm-selection-tile>\n\t\t\t</ibm-tile-group>\n\t\t",
@@ -23130,6 +23205,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderItem", function() { return HeaderItem; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -23139,14 +23215,23 @@ 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); }
+};
+
 
 
 /**
  * Individual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu`
  */
 var HeaderItem = /** @class */ (function () {
-    function HeaderItem(domSanitizer) {
+    function HeaderItem(domSanitizer, router) {
         this.domSanitizer = domSanitizer;
+        this.router = router;
+        /**
+         * 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)";
     }
     Object.defineProperty(HeaderItem.prototype, "href", {
@@ -23159,18 +23244,38 @@ var HeaderItem = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    var _a;
+    HeaderItem.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;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
     ], HeaderItem.prototype, "href", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Array)
+    ], HeaderItem.prototype, "route", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], HeaderItem.prototype, "routeExtras", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], HeaderItem.prototype, "navigation", void 0);
     HeaderItem = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-header-item",
-            template: "\n\t\t<li style=\"height: 100%\">\n\t\t\t<a class=\"bx--header__menu-item\" [href]=\"href\" role=\"menuitem\" tabindex=\"0\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</a>\n\t\t</li>\n\t"
+            template: "\n\t\t<li style=\"height: 100%\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--header__menu-item\"\n\t\t\t\trole=\"menuitem\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[href]=\"href\"\n\t\t\t\t(click)=\"navigate($event)\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</a>\n\t\t</li>\n\t"
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object])
+        __param(1, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"])()),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object, typeof (_b = typeof _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"] !== "undefined" && _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"]) === "function" && _b || Object])
     ], HeaderItem);
     return HeaderItem;
 }());
@@ -23856,6 +23961,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SideNavItem", function() { return SideNavItem; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -23865,18 +23971,27 @@ 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); }
+};
+
 
 
 /**
  * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`
  */
 var SideNavItem = /** @class */ (function () {
-    function SideNavItem(domSanitizer) {
+    function SideNavItem(domSanitizer, router) {
         this.domSanitizer = domSanitizer;
+        this.router = router;
         /**
          * Toggles the active (current page) state for the link.
          */
         this.active = false;
+        /**
+         * Emits the navigation status promise when the link is activated
+         */
+        this.navigation = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         this.isSubMenu = false;
         this._href = "javascript:void(0)";
     }
@@ -23893,7 +24008,14 @@ var SideNavItem = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    var _a;
+    SideNavItem.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;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String),
@@ -23903,12 +24025,25 @@ var SideNavItem = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], SideNavItem.prototype, "active", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Array)
+    ], SideNavItem.prototype, "route", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], SideNavItem.prototype, "routeExtras", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], SideNavItem.prototype, "navigation", void 0);
     SideNavItem = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-sidenav-item",
-            template: "\n\t\t<li [ngClass]=\"{\n\t\t\t'bx--side-nav__item': !isSubMenu,\n\t\t\t'bx--side-nav__menu-item': isSubMenu\n\t\t}\"\n\t\t[attr.role]=\"(isSubMenu ? 'none' : null)\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--side-nav__link\"\n\t\t\t\t[href]=\"href\"\n\t\t\t\t[attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n\t\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\">\n\t\t\t\t<div *ngIf=\"!isSubMenu\" class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__link-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</a>\n\t\t</li>\n\t"
+            template: "\n\t\t<li [ngClass]=\"{\n\t\t\t'bx--side-nav__item': !isSubMenu,\n\t\t\t'bx--side-nav__menu-item': isSubMenu\n\t\t}\"\n\t\t[attr.role]=\"(isSubMenu ? 'none' : null)\">\n\t\t\t<a\n\t\t\t\tclass=\"bx--side-nav__link\"\n\t\t\t\t[href]=\"href\"\n\t\t\t\t[attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n\t\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t\t\t(click)=\"navigate($event)\">\n\t\t\t\t<div *ngIf=\"!isSubMenu\" class=\"bx--side-nav__icon\">\n\t\t\t\t\t<ng-content select=\"[icon]\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--side-nav__link-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</a>\n\t\t</li>\n\t"
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object])
+        __param(1, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"])()),
+        __metadata("design:paramtypes", [typeof (_a = typeof _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"] !== "undefined" && _angular_platform_browser__WEBPACK_IMPORTED_MODULE_1__["DomSanitizer"]) === "function" && _a || Object, typeof (_b = typeof _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"] !== "undefined" && _angular_router__WEBPACK_IMPORTED_MODULE_2__["Router"]) === "function" && _b || Object])
     ], SideNavItem);
     return SideNavItem;
 }());
@@ -24257,9 +24392,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _search_search_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../search/search.module */ "./src/search/search.module.ts");
 /* harmony import */ var _dialog_dialog_module__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./../dialog/dialog.module */ "./src/dialog/dialog.module.ts");
 /* harmony import */ var _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./../documentation-component/documentation.module */ "./src/documentation-component/documentation.module.ts");
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/router */ "./node_modules/@angular/router/fesm5/router.js");
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { action } from '@storybook/addon-actions';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { UIShellModule } from './ui-shell.module';\nimport { SearchModule } from './../search/search.module';\nimport { DialogModule } from './../dialog/dialog.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\nstoriesOf('UI Shell', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [UIShellModule, SearchModule, DialogModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Header', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" (click)=\"expanded($event)\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action title=\"action\">\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      expanded: action('Menu clicked'),\n    },\n  }))\n  .add('Side Navigation', () => ({\n    template: `\n\t\t\t<ibm-sidenav>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t`,\n    props: {\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Together', () => ({\n    template: `\n\t\t\t<ibm-header name=\"[Platform]\">\n\t\t\t\t<ibm-hamburger *ngIf=\"hasHamburger\" [active]=\"active\" (selected)=\"selected()\"></ibm-hamburger>\n\t\t\t\t<ibm-header-navigation>\n\t\t\t\t\t<ibm-header-item>Catalog</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Docs</ibm-header-item>\n\t\t\t\t\t<ibm-header-item>Support</ibm-header-item>\n\t\t\t\t\t<ibm-header-menu title=\"Manage\">\n\t\t\t\t\t\t<ibm-header-item>Link 1</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 2</ibm-header-item>\n\t\t\t\t\t\t<ibm-header-item>Link 3</ibm-header-item>\n\t\t\t\t\t</ibm-header-menu>\n\t\t\t\t</ibm-header-navigation>\n\t\t\t\t<ibm-header-global>\n\t\t\t\t\t<ibm-header-action #firstAction title=\"action\">\n\t\t\t\t\t\t<svg class=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t\t<ibm-header-action #secondAction title=\"action\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"bx--navigation-menu-panel-expand-icon\"\n\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\theight=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ibm-header-action>\n\t\t\t\t</ibm-header-global>\n\t\t\t</ibm-header>\n\t\t\t<ibm-sidenav [expanded]=\"active\">\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-item>\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tLink\n\t\t\t\t</ibm-sidenav-item>\n\t\t\t\t<ibm-sidenav-menu title=\"Category title\">\n\t\t\t\t\t<svg icon width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n\t\t\t\t\t\t\t12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n\t\t\t\t\t\t\t23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n\t\t\t\t\t\t\t14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n\t\t\t\t\t\t\t10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n\t\t\t\t\t\t\t10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t\t<ibm-sidenav-item>Link</ibm-sidenav-item>\n\t\t\t\t</ibm-sidenav-menu>\n\t\t\t</ibm-sidenav>\n\t\t\t<ibm-panel [expanded]=\"firstAction.active\"></ibm-panel>\n\t\t\t<ibm-panel [expanded]=\"secondAction.active\">\n\t\t\t\t<ibm-switcher-list>\n\t\t\t\t\t<ibm-switcher-list-item active=\"true\">Switcher item one</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item two</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item three</ibm-switcher-list-item>\n\t\t\t\t\t<ibm-switcher-list-item>Switcher item four</ibm-switcher-list-item>\n\t\t\t\t</ibm-switcher-list>\n\t\t\t</ibm-panel>\n\t\t`,\n    props: {\n      hasHamburger: boolean('Show Hamburger', true),\n      active: boolean('Left panel active', true),\n      selected: () => {\n        console.log('selected');\n      },\n      options: [\n        {\n          content: 'Option 1',\n          value: 1,\n        },\n        {\n          content: 'Option 2',\n          value: 2,\n        },\n        {\n          content: 'Option 3',\n          value: 3,\n        },\n      ],\n    },\n  }))\n  .add('Header Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Header.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Side Nav Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/SideNav.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "ui-shell--side-nav-documentation": { "startLoc": { "col": 7, "line": 242 }, "endLoc": { "col": 4, "line": 246 } }, "ui-shell--header-documentation": { "startLoc": { "col": 7, "line": 237 }, "endLoc": { "col": 4, "line": 241 } }, "ui-shell--together": { "startLoc": { "col": 7, "line": 122 }, "endLoc": { "col": 4, "line": 236 } }, "ui-shell--side-navigation": { "startLoc": { "col": 7, "line": 62 }, "endLoc": { "col": 4, "line": 121 } }, "ui-shell--header": { "startLoc": { "col": 7, "line": 17 }, "endLoc": { "col": 4, "line": 61 } } };
+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 } } };
+
 
 
 
@@ -24267,13 +24411,50 @@ var __ADDS_MAP__ = { "ui-shell--side-nav-documentation": { "startLoc": { "col":
 
 
 
+
+var BarComponent = /** @class */ (function () {
+    function BarComponent() {
+    }
+    BarComponent = __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_7__["Component"])({
+            selector: "app-bar",
+            template: "<h1>bar</h1>"
+        })
+    ], BarComponent);
+    return BarComponent;
+}());
+var FooComponent = /** @class */ (function () {
+    function FooComponent() {
+    }
+    FooComponent = __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_7__["Component"])({
+            selector: "app-foo",
+            template: "<h1>foo</h1>"
+        })
+    ], FooComponent);
+    return FooComponent;
+}());
 Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell", module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
     .addDecorator(Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["moduleMetadata"])({
+    declarations: [BarComponent, FooComponent],
     imports: [
         _ui_shell_module__WEBPACK_IMPORTED_MODULE_3__["UIShellModule"],
         _search_search_module__WEBPACK_IMPORTED_MODULE_4__["SearchModule"],
         _dialog_dialog_module__WEBPACK_IMPORTED_MODULE_5__["DialogModule"],
-        _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_6__["DocumentationModule"]
+        _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_6__["DocumentationModule"],
+        _angular_router__WEBPACK_IMPORTED_MODULE_8__["RouterModule"].forRoot([
+            {
+                path: "bar",
+                component: BarComponent
+            },
+            {
+                path: "foo",
+                component: FooComponent
+            }
+        ], {
+            initialNavigation: false,
+            useHash: true
+        })
     ]
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
@@ -24283,6 +24464,12 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell",
         hasHamburger: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show Hamburger", true),
         expanded: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_0__["action"])("Menu clicked")
     }
+}); })
+    .add("Header with router", function () { return ({
+    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",
+    props: {
+        expanded: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_0__["action"])("Menu clicked")
+    }
 }); })
     .add("Side Navigation", function () { return ({
     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",
@@ -24302,6 +24489,9 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("UI Shell",
             }
         ]
     }
+}); })
+    .add("Side Navigation with router", function () { return ({
+    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",
@@ -24375,6 +24565,69 @@ var merge = function (target) {
 };
 
 
+/***/ }),
+
+/***/ "./src/utils/scroll.ts":
+/*!*****************************!*\
+  !*** ./src/utils/scroll.ts ***!
+  \*****************************/
+/*! exports provided: isScrollableElement, isVisibleInContainer, scrollableParentsObservable */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isScrollableElement", function() { return isScrollableElement; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isVisibleInContainer", function() { return isVisibleInContainer; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scrollableParentsObservable", function() { return scrollableParentsObservable; });
+/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
+/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
+
+
+/**
+ * Checks if a given element is scrollable.
+ * If the element has an overflow set as part of its computed style it can scroll.
+ * @param element the element to check scrollability
+ */
+var isScrollableElement = function (element) {
+    var computedStyle = getComputedStyle(element);
+    return (computedStyle.overflow === "auto" ||
+        computedStyle.overflow === "scroll" ||
+        computedStyle["overflow-y"] === "auto" ||
+        computedStyle["overflow-y"] === "scroll" ||
+        computedStyle["overflow-x"] === "auto" ||
+        computedStyle["overflow-x"] === "scroll");
+};
+/**
+ * Checks if an element is visible within a container
+ * @param element the element to check
+ * @param container the container to check
+ */
+var isVisibleInContainer = function (element, container) {
+    var elementRect = element.getBoundingClientRect();
+    var containerRect = container.getBoundingClientRect();
+    return elementRect.bottom <= containerRect.bottom && elementRect.top >= containerRect.top;
+};
+/**
+ * Returns an observable that emits whenever any scrollable parent element scrolls
+ *
+ * @param node root element to start finding scrolling parents from
+ */
+var scrollableParentsObservable = function (node) {
+    var windowScroll = Object(rxjs__WEBPACK_IMPORTED_MODULE_1__["fromEvent"])(window, "scroll").pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_0__["map"])(function (event) { return (
+    // update the event target to be something useful. In this case `body` is a sensible replacement
+    Object.assign({}, event, { target: document.body })); }));
+    var observables = [windowScroll];
+    // walk the parents and subscribe to all the scroll events we can
+    while (node.parentElement && node !== document.body) {
+        if (isScrollableElement(node)) {
+            observables.push(Object(rxjs__WEBPACK_IMPORTED_MODULE_1__["fromEvent"])(node, "scroll"));
+        }
+        node = node.parentElement;
+    }
+    return rxjs__WEBPACK_IMPORTED_MODULE_1__["merge"].apply(void 0, observables);
+};
+
+
 /***/ }),
 
 /***/ "./src/utils/utils.ts":
@@ -24448,4 +24701,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.12c0e82df31275c6b327.bundle.js.map
+//# sourceMappingURL=main.d9349fe343a2c719f60b.bundle.js.map