carbon-components-angular 3.30.1 → 3.31.1

package/docs/storybook/{main.2960150400d7b060c26a.bundle.js → main.976bd14fa9d2408462dd.bundle.js}

@@ -2261,10 +2261,10 @@ var ComboBox = /** @class */ (function () {
                     // not guarding these since the nativeElement has to be loaded
                     // for select to even fire
                     _this.elementRef.nativeElement.querySelector("input").focus();
+                    _this.view.filterBy("");
                     _this.closeDropdown();
                 }
                 _this.selected.emit(event);
-                _this.view.filterBy("");
             });
             this.view.items = this.items;
             // update the rest of combobox with any pre-selected items
@@ -3257,7 +3257,7 @@ var DatePickerInput = /** @class */ (function () {
     DatePickerInput.prototype.isTemplate = function (value) {
         return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
     };
-    var DatePickerInput_1, _a, _b, _c, _d;
+    var DatePickerInput_1, _a, _b, _c, _d, _e;
     DatePickerInput.datePickerCount = 0;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3311,10 +3311,14 @@ var DatePickerInput = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], DatePickerInput.prototype, "value", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("input"),
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object)
+    ], DatePickerInput.prototype, "input", void 0);
     DatePickerInput = DatePickerInput_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-date-picker-input",
-            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label *ngIf=\"label\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"bx--date-picker-input__wrapper\">\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t<ibm-icon-calendar16 class=\"bx--date-picker__icon\">\n\t\t\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t",
+            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label *ngIf=\"label\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class=\"bx--date-picker-input__wrapper\">\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t<ibm-icon-calendar16 class=\"bx--date-picker__icon\">\n\t\t\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -3323,7 +3327,7 @@ var DatePickerInput = /** @class */ (function () {
                 }
             ]
         }),
-        __metadata("design:paramtypes", [typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object])
+        __metadata("design:paramtypes", [typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _e || Object])
     ], DatePickerInput);
     return DatePickerInput;
 }());
@@ -3462,6 +3466,7 @@ var carbonFlatpickrMonthSelectPlugin = function (fp) {
     };
     return {
         onMonthChange: updateCurrentMonth,
+        onValueUpdate: updateCurrentMonth,
         onOpen: updateCurrentMonth,
         onReady: [setupElements, updateCurrentMonth, register]
     };
@@ -3487,6 +3492,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var flatpickr__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(flatpickr__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/forms */ "./node_modules/@angular/forms/fesm5/forms.js");
 /* harmony import */ var _carbon_flatpickr_month_select__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./carbon-flatpickr-month-select */ "./src/datepicker/carbon-flatpickr-month-select.ts");
+/* harmony import */ var _datepicker_input_datepicker_input_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../datepicker-input/datepicker-input.component */ "./src/datepicker-input/datepicker-input.component.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);
@@ -3501,6 +3507,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 /**
  * [See demo](../../?path=/story/date-picker--single)
  *
@@ -3619,6 +3626,18 @@ var DatePicker = /** @class */ (function () {
         }
     };
     DatePicker.prototype.onFocus = function () {
+        // Updates the month manually when calendar mode is range because month
+        // will not update properly without manually updating them on focus.
+        if (this.range) {
+            if (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {
+                var currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();
+                this.flatpickrInstance.changeMonth(currentMonth, false);
+            }
+            else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {
+                var currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();
+                this.flatpickrInstance.changeMonth(currentMonth, false);
+            }
+        }
         this.onTouched();
     };
     /**
@@ -3671,10 +3690,19 @@ var DatePicker = /** @class */ (function () {
             this.doSelect(this.flatpickrInstance.selectedDates);
         }
     };
-    // FlatpickrInstance needs to be opened like this when calendar Icon is clicked to avoid the error:
-    // Property 'flatpickrInstance' is protected and only accessible within class 'DatePicker' and its subclasses.
-    DatePicker.prototype.openFlatpickrInstance = function () {
-        this.flatpickrInstance.open();
+    /**
+     * Handles opening the calendar "properly" when the calendar icon is clicked.
+     */
+    DatePicker.prototype.openCalendar = function (datepickerInput) {
+        datepickerInput.input.nativeElement.click();
+        // If the first input's calendar icon is clicked when calendar is in range mode, then
+        // the month and year needs to be manually changed to the current selected month and
+        // year otherwise the calendar view will not be updated upon opening.
+        if (datepickerInput === this.input && this.range && this.flatpickrInstance.selectedDates[0]) {
+            var currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();
+            this.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();
+            this.flatpickrInstance.changeMonth(currentMonth, false);
+        }
     };
     DatePicker.prototype.updateCalendarListeners = function () {
         var _this = this;
@@ -3786,7 +3814,7 @@ var DatePicker = /** @class */ (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;
+    var DatePicker_1, _a, _b, _c, _d, _e, _f;
     DatePicker.datePickerCount = 0;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3850,9 +3878,17 @@ var DatePicker = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], DatePicker.prototype, "flatpickrOptions", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("input"),
+        __metadata("design:type", typeof (_c = typeof _datepicker_input_datepicker_input_component__WEBPACK_IMPORTED_MODULE_5__["DatePickerInput"] !== "undefined" && _datepicker_input_datepicker_input_component__WEBPACK_IMPORTED_MODULE_5__["DatePickerInput"]) === "function" && _c || Object)
+    ], DatePicker.prototype, "input", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("rangeInput"),
+        __metadata("design:type", typeof (_d = typeof _datepicker_input_datepicker_input_component__WEBPACK_IMPORTED_MODULE_5__["DatePickerInput"] !== "undefined" && _datepicker_input_datepicker_input_component__WEBPACK_IMPORTED_MODULE_5__["DatePickerInput"]) === "function" && _d || Object)
+    ], DatePicker.prototype, "rangeInput", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _c || Object)
+        __metadata("design:type", typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _e || Object)
     ], DatePicker.prototype, "valueChange", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("focusin"),
@@ -3863,7 +3899,7 @@ var DatePicker = /** @class */ (function () {
     DatePicker = DatePicker_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-date-picker",
-            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\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[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\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[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openFlatpickrInstance()\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\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[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openFlatpickrInstance()\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t",
+            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t#input\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[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\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[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t#rangeInput\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\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[skeleton]=\"skeleton\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t",
             styles: [
                 ".dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}"
             ],
@@ -3876,7 +3912,7 @@ var DatePicker = /** @class */ (function () {
             ],
             encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewEncapsulation"].None
         }),
-        __metadata("design:paramtypes", [typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object])
+        __metadata("design:paramtypes", [typeof (_f = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _f || Object])
     ], DatePicker);
     return DatePicker;
 }());
@@ -12323,7 +12359,7 @@ var ModalHeader = /** @class */ (function () {
     ModalHeader = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-modal-header",
-            template: "\n\t\t<header class=\"{{theme}} bx--modal-header\">\n\t\t\t<ng-content></ng-content>\n\t\t\t<button\n\t\t\t\tclass=\"bx--modal-close\"\n\t\t\t\t[attr.aria-label]=\"closeLabel\"\n\t\t\t\t(click)=\"onClose()\">\n\t\t\t\t<ibm-icon-close16 class=\"bx--modal-close__icon\"></ibm-icon-close16>\n\t\t\t</button>\n\t\t</header>\n\n\t"
+            template: "\n\t\t<header class=\"{{theme}} bx--modal-header\">\n\t\t\t<ng-content></ng-content>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"bx--modal-close\"\n\t\t\t\t[attr.aria-label]=\"closeLabel\"\n\t\t\t\t(click)=\"onClose()\">\n\t\t\t\t<ibm-icon-close16 class=\"bx--modal-close__icon\"></ibm-icon-close16>\n\t\t\t</button>\n\t\t</header>\n\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_a = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"]) === "function" && _a || Object, typeof (_b = typeof _experimental_service__WEBPACK_IMPORTED_MODULE_2__["ExperimentalService"] !== "undefined" && _experimental_service__WEBPACK_IMPORTED_MODULE_2__["ExperimentalService"]) === "function" && _b || Object])
     ], ModalHeader);
@@ -13416,6 +13452,17 @@ var Notification = /** @class */ (function () {
     Notification.prototype.onClose = function () {
         this.close.emit();
     };
+    Notification.prototype.onClick = function (action, event) {
+        if (!action.click) {
+            return;
+        }
+        if (Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["isObservable"])(action.click)) {
+            action.click.next({ event: event, action: action });
+        }
+        else {
+            action.click({ event: event, action: action });
+        }
+    };
     Notification.prototype.destroy = function () {
         this.notificationDisplayService.close(this);
     };
@@ -13473,7 +13520,7 @@ var Notification = /** @class */ (function () {
     Notification = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-notification",
-            template: "\n\t\t<div class=\"bx--inline-notification__details\">\n\t\t\t<ibm-icon-error-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'error'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-error-filled16>\n\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'warning'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-warning-filled16>\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'success'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t\t<div class=\"bx--inline-notification__text-wrapper\">\n\t\t\t\t<p [innerHTML]=\"notificationObj.title\" class=\"bx--inline-notification__title\"></p>\n\t\t\t\t<p [innerHTML]=\"notificationObj.message\" class=\"bx--inline-notification__subtitle\"></p>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"showClose\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"bx--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<ibm-icon-close16 class=\"bx--inline-notification__close-icon\"></ibm-icon-close16>\n\t\t</button>\n\t"
+            template: "\n\t\t<div class=\"bx--inline-notification__details\">\n\t\t\t<ibm-icon-error-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'error'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-error-filled16>\n\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'warning'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-warning-filled16>\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\t*ngIf=\"notificationObj.type === 'success'\"\n\t\t\t\tclass=\"bx--inline-notification__icon\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t\t<div class=\"bx--inline-notification__text-wrapper\">\n\t\t\t\t<p [innerHTML]=\"notificationObj.title\" class=\"bx--inline-notification__title\"></p>\n\t\t\t\t<p [innerHTML]=\"notificationObj.message\" class=\"bx--inline-notification__subtitle\"></p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngFor=\"let action of notificationObj.actions\">\n\t\t\t<button\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tclass=\"bx--inline-notification__action-button\"\n\t\t\t\ttype=\"button\">\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"showClose\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"bx--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<ibm-icon-close16 class=\"bx--inline-notification__close-icon\"></ibm-icon-close16>\n\t\t</button>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_d = typeof _notification_display_service__WEBPACK_IMPORTED_MODULE_3__["NotificationDisplayService"] !== "undefined" && _notification_display_service__WEBPACK_IMPORTED_MODULE_3__["NotificationDisplayService"]) === "function" && _d || Object, typeof (_e = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"]) === "function" && _e || Object])
     ], Notification);
@@ -13495,24 +13542,25 @@ var Notification = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NotificationModule", function() { return NotificationModule; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
-/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
-/* harmony import */ var _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-angular/lib/close/16 */ "./node_modules/@carbon/icons-angular/lib/close/16.js");
-/* harmony import */ var _carbon_icons_angular_lib_error_filled_16__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @carbon/icons-angular/lib/error--filled/16 */ "./node_modules/@carbon/icons-angular/lib/error--filled/16.js");
-/* harmony import */ var _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @carbon/icons-angular/lib/checkmark--filled/16 */ "./node_modules/@carbon/icons-angular/lib/checkmark--filled/16.js");
-/* harmony import */ var _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @carbon/icons-angular/lib/warning--filled/16 */ "./node_modules/@carbon/icons-angular/lib/warning--filled/16.js");
-/* harmony import */ var _toast_component__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./toast.component */ "./src/notification/toast.component.ts");
-/* harmony import */ var _notification_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./notification.component */ "./src/notification/notification.component.ts");
-/* harmony import */ var _notification_service__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./notification.service */ "./src/notification/notification.service.ts");
-/* harmony import */ var _notification_display_service__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./notification-display.service */ "./src/notification/notification-display.service.ts");
-/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
-/* harmony import */ var _experimental_module__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./../experimental.module */ "./src/experimental.module.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotificationService", function() { return _notification_service__WEBPACK_IMPORTED_MODULE_8__["NotificationService"]; });
+/* harmony import */ var _button_button_module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../button/button.module */ "./src/button/button.module.ts");
+/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
+/* harmony import */ var _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @carbon/icons-angular/lib/close/16 */ "./node_modules/@carbon/icons-angular/lib/close/16.js");
+/* harmony import */ var _carbon_icons_angular_lib_error_filled_16__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @carbon/icons-angular/lib/error--filled/16 */ "./node_modules/@carbon/icons-angular/lib/error--filled/16.js");
+/* harmony import */ var _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @carbon/icons-angular/lib/checkmark--filled/16 */ "./node_modules/@carbon/icons-angular/lib/checkmark--filled/16.js");
+/* harmony import */ var _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @carbon/icons-angular/lib/warning--filled/16 */ "./node_modules/@carbon/icons-angular/lib/warning--filled/16.js");
+/* harmony import */ var _toast_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./toast.component */ "./src/notification/toast.component.ts");
+/* harmony import */ var _notification_component__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./notification.component */ "./src/notification/notification.component.ts");
+/* harmony import */ var _notification_service__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./notification.service */ "./src/notification/notification.service.ts");
+/* harmony import */ var _notification_display_service__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./notification-display.service */ "./src/notification/notification-display.service.ts");
+/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
+/* harmony import */ var _experimental_module__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./../experimental.module */ "./src/experimental.module.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotificationService", function() { return _notification_service__WEBPACK_IMPORTED_MODULE_9__["NotificationService"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotificationDisplayService", function() { return _notification_display_service__WEBPACK_IMPORTED_MODULE_9__["NotificationDisplayService"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotificationDisplayService", function() { return _notification_display_service__WEBPACK_IMPORTED_MODULE_10__["NotificationDisplayService"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Notification", function() { return _notification_component__WEBPACK_IMPORTED_MODULE_7__["Notification"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Notification", function() { return _notification_component__WEBPACK_IMPORTED_MODULE_8__["Notification"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Toast", function() { return _toast_component__WEBPACK_IMPORTED_MODULE_6__["Toast"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Toast", function() { return _toast_component__WEBPACK_IMPORTED_MODULE_7__["Toast"]; });
 
 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;
@@ -13536,30 +13584,32 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var NotificationModule = /** @class */ (function () {
     function NotificationModule() {
     }
     NotificationModule = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"])({
             declarations: [
-                _notification_component__WEBPACK_IMPORTED_MODULE_7__["Notification"],
-                _toast_component__WEBPACK_IMPORTED_MODULE_6__["Toast"]
+                _notification_component__WEBPACK_IMPORTED_MODULE_8__["Notification"],
+                _toast_component__WEBPACK_IMPORTED_MODULE_7__["Toast"]
             ],
             exports: [
-                _notification_component__WEBPACK_IMPORTED_MODULE_7__["Notification"],
-                _toast_component__WEBPACK_IMPORTED_MODULE_6__["Toast"]
+                _notification_component__WEBPACK_IMPORTED_MODULE_8__["Notification"],
+                _toast_component__WEBPACK_IMPORTED_MODULE_7__["Toast"]
             ],
-            entryComponents: [_notification_component__WEBPACK_IMPORTED_MODULE_7__["Notification"], _toast_component__WEBPACK_IMPORTED_MODULE_6__["Toast"]],
+            entryComponents: [_notification_component__WEBPACK_IMPORTED_MODULE_8__["Notification"], _toast_component__WEBPACK_IMPORTED_MODULE_7__["Toast"]],
             imports: [
-                _angular_common__WEBPACK_IMPORTED_MODULE_1__["CommonModule"],
-                _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_10__["I18nModule"],
-                _experimental_module__WEBPACK_IMPORTED_MODULE_11__["ExperimentalModule"],
-                _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_2__["Close16Module"],
-                _carbon_icons_angular_lib_error_filled_16__WEBPACK_IMPORTED_MODULE_3__["ErrorFilled16Module"],
-                _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_4__["CheckmarkFilled16Module"],
-                _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_5__["WarningFilled16Module"]
+                _button_button_module__WEBPACK_IMPORTED_MODULE_1__["ButtonModule"],
+                _angular_common__WEBPACK_IMPORTED_MODULE_2__["CommonModule"],
+                _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_11__["I18nModule"],
+                _experimental_module__WEBPACK_IMPORTED_MODULE_12__["ExperimentalModule"],
+                _carbon_icons_angular_lib_close_16__WEBPACK_IMPORTED_MODULE_3__["Close16Module"],
+                _carbon_icons_angular_lib_error_filled_16__WEBPACK_IMPORTED_MODULE_4__["ErrorFilled16Module"],
+                _carbon_icons_angular_lib_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_5__["CheckmarkFilled16Module"],
+                _carbon_icons_angular_lib_warning_filled_16__WEBPACK_IMPORTED_MODULE_6__["WarningFilled16Module"]
             ],
-            providers: [_notification_service__WEBPACK_IMPORTED_MODULE_8__["NotificationService"], _notification_display_service__WEBPACK_IMPORTED_MODULE_9__["NotificationDisplayService"]]
+            providers: [_notification_service__WEBPACK_IMPORTED_MODULE_9__["NotificationService"], _notification_display_service__WEBPACK_IMPORTED_MODULE_10__["NotificationDisplayService"]]
         })
     ], NotificationModule);
     return NotificationModule;
@@ -13802,11 +13852,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__ADDS_MAP__", function() { return __ADDS_MAP__; });
 /* harmony import */ var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @storybook/angular */ "./node_modules/@storybook/angular/dist/client/index.js");
 /* harmony import */ var _storybook_angular__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @storybook/addon-knobs/angular */ "./node_modules/@storybook/addon-knobs/angular.js");
-/* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
-/* harmony import */ var _notification_module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./notification.module */ "./src/notification/notification.module.ts");
-/* harmony import */ var _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../documentation-component/documentation.module */ "./src/documentation-component/documentation.module.ts");
+/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @storybook/addon-actions */ "./node_modules/@storybook/addon-actions/dist/index.js");
+/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @storybook/addon-knobs/angular */ "./node_modules/@storybook/addon-knobs/angular.js");
+/* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
+/* harmony import */ var _notification_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./notification.module */ "./src/notification/notification.module.ts");
+/* harmony import */ var _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./../documentation-component/documentation.module */ "./src/documentation-component/documentation.module.ts");
+/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.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);
@@ -13817,13 +13870,56 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';\n\nimport { Component } from '@angular/core';\n\nimport { NotificationModule, NotificationService } from './notification.module';\nimport { I18n } from '../i18n/i18n.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\n@Component({\n  selector: 'app-notification-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showNotification()\">\n      Show info notification\n    </button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass NotificationStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showNotification() {\n    this.notificationService.showNotification({\n      type: 'info',\n      title: 'Sample notification',\n      message: 'Sample info message',\n      target: '.notification-container',\n    });\n  }\n}\n\n@Component({\n  selector: 'app-toast-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showToast()\">Show info toast</button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass ToastStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showToast() {\n    this.notificationService.showToast({\n      type: 'info',\n      title: 'Sample toast',\n      subtitle: 'Sample subtitle message',\n      caption: 'Sample caption',\n      target: '.notification-container',\n      message: 'message',\n    });\n  }\n}\n\nstoriesOf('Components|Notification', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [NotificationStory, ToastStory],\n      imports: [NotificationModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample error message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample info message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample success message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample warning message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t`,\n    props: {\n      showClose: boolean('Show close icon', true),\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('Dynamic', () => ({\n    template: `\n\t\t\t<app-notification-story></app-notification-story>\n\t\t`,\n  }))\n  .add('Toast', () => ({\n    template: `\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t`,\n    props: {\n      showClose: boolean('Show close icon', true),\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('Dynamic toast', () => ({\n    template: `\n\t\t\t<app-toast-story></app-toast-story>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Notification.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Toast Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toast.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "components-notification--toast-documentation": { "startLoc": { "col": 7, "line": 156 }, "endLoc": { "col": 4, "line": 160 } }, "components-notification--documentation": { "startLoc": { "col": 7, "line": 151 }, "endLoc": { "col": 4, "line": 155 } }, "components-notification--dynamic-toast": { "startLoc": { "col": 7, "line": 146 }, "endLoc": { "col": 4, "line": 150 } }, "components-notification--toast": { "startLoc": { "col": 7, "line": 106 }, "endLoc": { "col": 4, "line": 145 } }, "components-notification--dynamic": { "startLoc": { "col": 7, "line": 101 }, "endLoc": { "col": 4, "line": 105 } }, "components-notification--basic": { "startLoc": { "col": 7, "line": 65 }, "endLoc": { "col": 4, "line": 100 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { Component, Input, EventEmitter, Output, OnInit } from '@angular/core';\n\nimport { NotificationModule, NotificationService } from './notification.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\nimport { Subject } from 'rxjs';\n\n@Component({\n  selector: 'app-notification-action-story',\n  template: `\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'error',\n        title: 'Sample notification',\n        message: 'Sample error message',\n        showClose: showClose,\n        lowContrast: lowContrast,\n        actions: actions\n      }\"\n    >\n    </ibm-notification>\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'Sample notification',\n        message: 'Sample error message',\n        showClose: showClose,\n        lowContrast: lowContrast,\n        actions: actions\n      }\"\n    >\n    </ibm-notification>\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'success',\n        title: 'Sample notification',\n        message: 'Sample error message',\n        showClose: showClose,\n        lowContrast: lowContrast,\n        actions: actions\n      }\"\n    >\n    </ibm-notification>\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'Sample notification',\n        message: 'Sample error message',\n        showClose: showClose,\n        lowContrast: lowContrast,\n        actions: actions\n      }\"\n    >\n    </ibm-notification>\n  `,\n  providers: [NotificationService],\n})\nclass NotificationActionStory implements OnInit {\n  @Input() showClose = true;\n  @Input() lowContrast = false;\n\n  @Output() actionClicked = new EventEmitter();\n\n  actionSubject = new Subject<any>();\n\n  actions = [\n    {\n      text: 'Action',\n      click: this.actionSubject,\n    },\n  ];\n\n  constructor(protected notificationService: NotificationService) {}\n\n  ngOnInit() {\n    this.actions.forEach(action =>\n      action.click.subscribe({ next: () => this.actionClicked.emit() })\n    );\n  }\n}\n\n@Component({\n  selector: 'app-notification-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showNotification()\">\n      Show info notification\n    </button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass NotificationStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showNotification() {\n    this.notificationService.showNotification({\n      type: 'info',\n      title: 'Sample notification',\n      message: 'Sample info message',\n      target: '.notification-container',\n    });\n  }\n}\n\n@Component({\n  selector: 'app-toast-story',\n  template: `\n    <button class=\"bx--btn bx--btn--primary\" (click)=\"showToast()\">Show info toast</button>\n    <div class=\"notification-container\"></div>\n  `,\n  providers: [NotificationService],\n})\nclass ToastStory {\n  constructor(protected notificationService: NotificationService) {}\n\n  showToast() {\n    this.notificationService.showToast({\n      type: 'info',\n      title: 'Sample toast',\n      subtitle: 'Sample subtitle message',\n      caption: 'Sample caption',\n      target: '.notification-container',\n      message: 'message',\n    });\n  }\n}\n\nstoriesOf('Components|Notification', module)\n  .addDecorator(\n    moduleMetadata({\n      declarations: [NotificationStory, NotificationActionStory, ToastStory],\n      imports: [NotificationModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample error message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample info message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample success message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample warning message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t`,\n    props: {\n      showClose: boolean('Show close icon', true),\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('With Actions', () => ({\n    template: `\n\t\t\t<app-notification-action-story\n\t\t\t\t[showClose]=\"showClose\"\n\t\t\t\t[lowContrast]=\"lowContrast\"\n\t\t\t\t(actionClicked)=\"selected()\">\n\t\t\t</app-notification-action-story>\n\t\t`,\n    props: {\n      showClose: boolean('Show close icon', true),\n      lowContrast: boolean('Low Contrast', false),\n      selected: action('Action button clicked!'),\n    },\n  }))\n  .add('Dynamic', () => ({\n    template: `\n\t\t\t<app-notification-story></app-notification-story>\n\t\t`,\n  }))\n  .add('Toast', () => ({\n    template: `\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t`,\n    props: {\n      showClose: boolean('Show close icon', true),\n      lowContrast: boolean('Low Contrast', false),\n    },\n  }))\n  .add('Dynamic toast', () => ({\n    template: `\n\t\t\t<app-toast-story></app-toast-story>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Notification.html\"></ibm-documentation>\n\t\t`,\n  }))\n  .add('Toast Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toast.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "components-notification--toast-documentation": { "startLoc": { "col": 7, "line": 244 }, "endLoc": { "col": 4, "line": 248 } }, "components-notification--documentation": { "startLoc": { "col": 7, "line": 239 }, "endLoc": { "col": 4, "line": 243 } }, "components-notification--dynamic-toast": { "startLoc": { "col": 7, "line": 234 }, "endLoc": { "col": 4, "line": 238 } }, "components-notification--toast": { "startLoc": { "col": 7, "line": 194 }, "endLoc": { "col": 4, "line": 233 } }, "components-notification--dynamic": { "startLoc": { "col": 7, "line": 189 }, "endLoc": { "col": 4, "line": 193 } }, "components-notification--with-actions": { "startLoc": { "col": 7, "line": 175 }, "endLoc": { "col": 4, "line": 188 } }, "components-notification--basic": { "startLoc": { "col": 7, "line": 139 }, "endLoc": { "col": 4, "line": 174 } } };
+
+
 
 
 
 
 
+var NotificationActionStory = /** @class */ (function () {
+    function NotificationActionStory(notificationService) {
+        this.notificationService = notificationService;
+        this.showClose = true;
+        this.lowContrast = false;
+        this.actionClicked = new _angular_core__WEBPACK_IMPORTED_MODULE_3__["EventEmitter"]();
+        this.actionSubject = new rxjs__WEBPACK_IMPORTED_MODULE_6__["Subject"]();
+        this.actions = [
+            {
+                text: "Action",
+                click: this.actionSubject
+            }
+        ];
+    }
+    NotificationActionStory.prototype.ngOnInit = function () {
+        var _this = this;
+        this.actions.forEach(function (action) { return action.click.subscribe({ next: function () { return _this.actionClicked.emit(); } }); });
+    };
+    var _a;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Input"])(),
+        __metadata("design:type", Object)
+    ], NotificationActionStory.prototype, "showClose", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Input"])(),
+        __metadata("design:type", Object)
+    ], NotificationActionStory.prototype, "lowContrast", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Output"])(),
+        __metadata("design:type", Object)
+    ], NotificationActionStory.prototype, "actionClicked", void 0);
+    NotificationActionStory = __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Component"])({
+            selector: "app-notification-action-story",
+            template: "\n\t\t<ibm-notification [notificationObj]=\"{\n\t\t\ttype: 'error',\n\t\t\ttitle: 'Sample notification',\n\t\t\tmessage: 'Sample error message',\n\t\t\tshowClose: showClose,\n\t\t\tlowContrast: lowContrast,\n\t\t\tactions: actions}\">\n\t\t</ibm-notification>\n\t\t<ibm-notification [notificationObj]=\"{\n\t\t\ttype: 'info',\n\t\t\ttitle: 'Sample notification',\n\t\t\tmessage: 'Sample error message',\n\t\t\tshowClose: showClose,\n\t\t\tlowContrast: lowContrast,\n\t\t\tactions: actions}\">\n\t\t</ibm-notification>\n\t\t<ibm-notification [notificationObj]=\"{\n\t\t\ttype: 'success',\n\t\t\ttitle: 'Sample notification',\n\t\t\tmessage: 'Sample error message',\n\t\t\tshowClose: showClose,\n\t\t\tlowContrast: lowContrast,\n\t\t\tactions: actions}\">\n\t\t</ibm-notification>\n\t\t<ibm-notification [notificationObj]=\"{\n\t\t\ttype: 'warning',\n\t\t\ttitle: 'Sample notification',\n\t\t\tmessage: 'Sample error message',\n\t\t\tshowClose: showClose,\n\t\t\tlowContrast: lowContrast,\n\t\t\tactions: actions}\">\n\t\t</ibm-notification>\n\t\t",
+            providers: [_notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]]
+        }),
+        __metadata("design:paramtypes", [typeof (_a = typeof _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"] !== "undefined" && _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]) === "function" && _a || Object])
+    ], NotificationActionStory);
+    return NotificationActionStory;
+}());
 var NotificationStory = /** @class */ (function () {
     function NotificationStory(notificationService) {
         this.notificationService = notificationService;
@@ -13836,14 +13932,14 @@ var NotificationStory = /** @class */ (function () {
             target: ".notification-container"
         });
     };
-    var _a;
+    var _b;
     NotificationStory = __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"])({
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Component"])({
             selector: "app-notification-story",
             template: "\n\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"showNotification()\">Show info notification</button>\n\t\t<div class=\"notification-container\"></div>\n\t",
-            providers: [_notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"]]
+            providers: [_notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]]
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof _notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"] !== "undefined" && _notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"]) === "function" && _a || Object])
+        __metadata("design:paramtypes", [typeof (_b = typeof _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"] !== "undefined" && _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]) === "function" && _b || Object])
     ], NotificationStory);
     return NotificationStory;
 }());
@@ -13861,14 +13957,14 @@ var ToastStory = /** @class */ (function () {
             message: "message"
         });
     };
-    var _b;
+    var _c;
     ToastStory = __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"])({
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Component"])({
             selector: "app-toast-story",
             template: "\n\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"showToast()\">Show info toast</button>\n\t\t<div class=\"notification-container\"></div>\n\t",
-            providers: [_notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"]]
+            providers: [_notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]]
         }),
-        __metadata("design:paramtypes", [typeof (_b = typeof _notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"] !== "undefined" && _notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationService"]) === "function" && _b || Object])
+        __metadata("design:paramtypes", [typeof (_c = typeof _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"] !== "undefined" && _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationService"]) === "function" && _c || Object])
     ], ToastStory);
     return ToastStory;
 }());
@@ -13876,19 +13972,28 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components
     .addDecorator(Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["moduleMetadata"])({
     declarations: [
         NotificationStory,
+        NotificationActionStory,
         ToastStory
     ],
     imports: [
-        _notification_module__WEBPACK_IMPORTED_MODULE_3__["NotificationModule"],
-        _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_4__["DocumentationModule"]
+        _notification_module__WEBPACK_IMPORTED_MODULE_4__["NotificationModule"],
+        _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_5__["DocumentationModule"]
     ]
 }))
-    .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
+    .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
     template: "\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample error message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample info message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample success message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t\t<ibm-notification [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample notification',\n\t\t\t\tmessage: 'Sample warning message',\n\t\t\t\tshowClose: showClose,\n\t\t\t\tlowContrast: lowContrast}\">\n\t\t\t</ibm-notification>\n\t\t",
     props: {
-        showClose: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Show close icon", true),
-        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Low Contrast", false)
+        showClose: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show close icon", true),
+        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Low Contrast", false)
+    }
+}); })
+    .add("With Actions", function () { return ({
+    template: "\n\t\t\t<app-notification-action-story\n\t\t\t\t[showClose]=\"showClose\"\n\t\t\t\t[lowContrast]=\"lowContrast\"\n\t\t\t\t(actionClicked)=\"selected()\">\n\t\t\t</app-notification-action-story>\n\t\t",
+    props: {
+        showClose: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show close icon", true),
+        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Low Contrast", false),
+        selected: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Action button clicked!")
     }
 }); })
     .add("Dynamic", function () { return ({
@@ -13897,8 +14002,8 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components
     .add("Toast", function () { return ({
     template: "\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'error',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'info',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'success',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t\t<ibm-toast [notificationObj]=\"{\n\t\t\t\ttype: 'warning',\n\t\t\t\ttitle: 'Sample toast',\n\t\t\t\tsubtitle: 'Sample subtitle message',\n\t\t\t\tcaption: 'Sample caption',\n\t\t\t\tlowContrast: lowContrast,\n\t\t\t\tshowClose: showClose\n\t\t\t}\"></ibm-toast>\n\t\t",
     props: {
-        showClose: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Show close icon", true),
-        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Low Contrast", false)
+        showClose: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Show close icon", true),
+        lowContrast: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Low Contrast", false)
     }
 }); })
     .add("Dynamic toast", function () { return ({
@@ -19202,7 +19307,7 @@ var TableRowComponent = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             // tslint:disable-next-line: component-selector
             selector: "[ibmTableRow]",
-            template: "\n\t\t<ng-container *ngIf=\"model\">\n\t\t\t<td\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tibmTableExpandButton\n\t\t\t\t[expanded]=\"expanded\"\n\t\t\t\t[expandable]=\"expandable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[ariaLabel]=\"getExpandButtonAriaLabel()\"\n\t\t\t\t[headers]=\"model.getHeaderId('expand')\"\n\t\t\t\t(expandRow)=\"expandRow.emit()\">\n\t\t\t</td>\n\t\t\t<td\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tibmTableCheckbox\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[selected]=\"selected\"\n\t\t\t\t[label]=\"getCheckboxLabel()\"\n\t\t\t\t[row]=\"row\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[headers]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectionChange()\">\n\t\t\t</td>\n\t\t\t<td\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tibmTableRadio\n\t\t\t\t[selected]=\"selected\"\n\t\t\t\t[label]=\"getCheckboxLabel()\"\n\t\t\t\t[row]=\"row\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[headers]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectionChange()\">\n\t\t\t</td>\n\t\t\t<ng-container *ngFor=\"let item of row; let j = index\">\n\t\t\t\t<td\n\t\t\t\t\t*ngIf=\"item && model.getHeader(j) && model.getHeader(j).visible\"\n\t\t\t\t\tibmTableData\n\t\t\t\t\t[headers]=\"model.getHeaderId(j, item.colSpan)\"\n\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t[class]=\"model.getHeader(j).className\"\n\t\t\t\t\t[ngStyle]=\"model.getHeader(j).style\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[attr.colspan]=\"item.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"item.rowSpan\">\n\t\t\t\t</td>\n\t\t\t\t<td\n\t\t\t\t\t*ngIf=\"item && model.getHeader(j) == null\"\n\t\t\t\t\tibmTableData\n\t\t\t\t\t[headers]=\"model.getHeaderId(j, item.colSpan)\"\n\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[attr.colspan]=\"item.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"item.rowSpan\">\n\t\t\t\t</td>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t"
+            template: "\n\t\t<ng-container *ngIf=\"model\">\n\t\t\t<td\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tibmTableExpandButton\n\t\t\t\tclass=\"bx--table-expand-v2\"\n\t\t\t\t[expanded]=\"expanded\"\n\t\t\t\t[expandable]=\"expandable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[ariaLabel]=\"getExpandButtonAriaLabel()\"\n\t\t\t\t[headers]=\"model.getHeaderId('expand')\"\n\t\t\t\t(expandRow)=\"expandRow.emit()\">\n\t\t\t</td>\n\t\t\t<td\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tibmTableCheckbox\n\t\t\t\tclass=\"bx--table-column-checkbox\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[selected]=\"selected\"\n\t\t\t\t[label]=\"getCheckboxLabel()\"\n\t\t\t\t[row]=\"row\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[headers]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectionChange()\">\n\t\t\t</td>\n\t\t\t<td\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tibmTableRadio\n\t\t\t\t[selected]=\"selected\"\n\t\t\t\t[label]=\"getCheckboxLabel()\"\n\t\t\t\t[row]=\"row\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[headers]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectionChange()\">\n\t\t\t</td>\n\t\t\t<ng-container *ngFor=\"let item of row; let j = index\">\n\t\t\t\t<td\n\t\t\t\t\t*ngIf=\"item && model.getHeader(j) && model.getHeader(j).visible\"\n\t\t\t\t\tibmTableData\n\t\t\t\t\t[headers]=\"model.getHeaderId(j, item.colSpan)\"\n\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t[class]=\"model.getHeader(j).className\"\n\t\t\t\t\t[ngStyle]=\"model.getHeader(j).style\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[attr.colspan]=\"item.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"item.rowSpan\">\n\t\t\t\t</td>\n\t\t\t\t<td\n\t\t\t\t\t*ngIf=\"item && model.getHeader(j) == null\"\n\t\t\t\t\tibmTableData\n\t\t\t\t\t[headers]=\"model.getHeaderId(j, item.colSpan)\"\n\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[attr.colspan]=\"item.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"item.rowSpan\">\n\t\t\t\t</td>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_f = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"]) === "function" && _f || Object])
     ], TableRowComponent);
@@ -20400,7 +20505,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableHead", function() { return TableHead; });
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var _table_model_class__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../table-model.class */ "./src/table/table-model.class.ts");
-/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
+/* harmony import */ var _utils_window_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/window-tools */ "./src/utils/window-tools.ts");
+/* harmony import */ var _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../i18n/i18n.module */ "./src/i18n/i18n.module.ts");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -20413,6 +20519,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 /**
  * A subcomponent that creates the thead of the table
  *
@@ -20497,6 +20604,9 @@ var TableHead = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    TableHead.prototype.ngAfterViewInit = function () {
+        this.scrollbarWidth = Object(_utils_window_tools__WEBPACK_IMPORTED_MODULE_2__["getScrollbarWidth"])();
+    };
     TableHead.prototype.onSelectAllCheckboxChange = function () {
         if (!this.selectAllCheckbox) {
             this.selectAll.emit(this.model);
@@ -20586,9 +20696,10 @@ var TableHead = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             // tslint:disable-next-line:component-selector
             selector: "[ibmTableHead]",
-            template: "\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tibmTableHeadExpand\n\t\t\t\t[id]=\"model.getId('expand')\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tstyle=\"width: 0;\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tibmTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tibmTableHeadCell\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\" [ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t"
+            template: "\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tibmTableHeadExpand\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\t[ngClass]=\"{'bx--table-expand-v2': stickyHeader}\"\n\t\t\t\t[id]=\"model.getId('expand')\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tstyle=\"width: 0;\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tibmTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tibmTableHeadCell\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\" [ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t",
+            styles: ["\n\t\t.bx--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t"]
         }),
-        __metadata("design:paramtypes", [typeof (_k = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"]) === "function" && _k || Object])
+        __metadata("design:paramtypes", [typeof (_k = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"]) === "function" && _k || Object])
     ], TableHead);
     return TableHead;
 }());
@@ -20795,6 +20906,7 @@ var DynamicTableStory = /** @class */ (function () {
         this.showSelectionColumn = true;
         this.striped = true;
         this.isDataGrid = false;
+        this.stickyHeader = false;
         this.skeleton = false;
     }
     DynamicTableStory.prototype.ngOnInit = function () {
@@ -20802,14 +20914,17 @@ var DynamicTableStory = /** @class */ (function () {
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 1" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { name: "Lessy", link: "#" }, template: this.customTableItemTemplate })],
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 3" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "swer" })],
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 2" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { name: "Alice", surname: "Bob" }, template: this.customTableItemTemplate })],
-            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })]
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 5" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 6" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 7" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 8" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })]
         ];
         this.model.header = [
             new _table_header_item_class__WEBPACK_IMPORTED_MODULE_3__["TableHeaderItem"]({ data: "Very long title indeed" }),
             new CustomHeaderItem({
                 data: { name: "Custom header", link: "#" },
-                template: this.customHeaderTemplate,
-                style: { "width": "auto" }
+                template: this.customHeaderTemplate
             })
         ];
     };
@@ -20853,6 +20968,10 @@ var DynamicTableStory = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], DynamicTableStory.prototype, "isDataGrid", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], DynamicTableStory.prototype, "stickyHeader", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -20868,7 +20987,7 @@ var DynamicTableStory = /** @class */ (function () {
     DynamicTableStory = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "app-custom-table",
-            template: "\n\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t<button ibmButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button ibmButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</ibm-table-toolbar>\n\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</ibm-table>\n\t"
+            template: "\n\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t<button ibmButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button ibmButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</ibm-table-toolbar>\n\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</ibm-table>\n\t"
         })
     ], DynamicTableStory);
     return DynamicTableStory;
@@ -20943,6 +21062,7 @@ var ExpansionTableStory = /** @class */ (function () {
         this.showSelectionColumn = true;
         this.striped = true;
         this.isDataGrid = false;
+        this.stickyHeader = false;
         this.skeleton = false;
     }
     ExpansionTableStory.prototype.ngOnInit = function () {
@@ -20960,14 +21080,16 @@ var ExpansionTableStory = /** @class */ (function () {
                 new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "swer" })
             ],
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 2" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { name: "Alice", surname: "Bob" }, template: this.customTableItemTemplate })],
-            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })]
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 5" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 6" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 7" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "twer" })]
         ];
         this.model.header = [
             new _table_header_item_class__WEBPACK_IMPORTED_MODULE_3__["TableHeaderItem"]({ data: "Very long title indeed" }),
             new CustomHeaderItem({
                 data: { name: "Custom header", link: "#" },
-                template: this.customHeaderTemplate,
-                style: { "width": "auto" }
+                template: this.customHeaderTemplate
             })
         ];
     };
@@ -21002,6 +21124,10 @@ var ExpansionTableStory = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], ExpansionTableStory.prototype, "isDataGrid", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ExpansionTableStory.prototype, "stickyHeader", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -21017,7 +21143,7 @@ var ExpansionTableStory = /** @class */ (function () {
     ExpansionTableStory = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "app-expansion-table",
-            template: "\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</ibm-table>\n\t"
+            template: "\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</ibm-table>\n\t"
         })
     ], ExpansionTableStory);
     return ExpansionTableStory;
@@ -21166,6 +21292,7 @@ var OverflowTableStory = /** @class */ (function () {
         this.showSelectionColumn = true;
         this.striped = true;
         this.isDataGrid = false;
+        this.stickyHeader = false;
         this.skeleton = false;
     }
     OverflowTableStory.prototype.ngOnInit = function () {
@@ -21173,7 +21300,12 @@ var OverflowTableStory = /** @class */ (function () {
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 1" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "1" }, template: this.overflowMenuItemTemplate })],
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 2" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "2" }, template: this.overflowMenuItemTemplate })],
             [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 3" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "3" }, template: this.overflowMenuItemTemplate })],
-            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })]
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 5" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 6" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 7" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 8" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })],
+            [new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: "Name 9" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_2__["TableItem"]({ data: { id: "4" }, template: this.overflowMenuItemTemplate })]
         ];
         this.model.header = [
             new _table_header_item_class__WEBPACK_IMPORTED_MODULE_3__["TableHeaderItem"]({ data: "Name" }),
@@ -21201,6 +21333,10 @@ var OverflowTableStory = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], OverflowTableStory.prototype, "isDataGrid", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], OverflowTableStory.prototype, "stickyHeader", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -21212,7 +21348,7 @@ var OverflowTableStory = /** @class */ (function () {
     OverflowTableStory = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "app-overflow-table",
-            template: "\n\t\t<ng-template #overflowMenuItemTemplate let-data=\"data\">\n\t\t\t<ibm-overflow-menu>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tFirst Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tSecond Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tThird Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t</ibm-overflow-menu>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t[striped]=\"striped\">\n\t\t</ibm-table>\n\t"
+            template: "\n\t\t<ng-template #overflowMenuItemTemplate let-data=\"data\">\n\t\t\t<ibm-overflow-menu>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tFirst Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tSecond Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t\t<ibm-overflow-menu-option>\n\t\t\t\t\tThird Option\n\t\t\t\t</ibm-overflow-menu-option>\n\t\t\t</ibm-overflow-menu>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t[striped]=\"striped\">\n\t\t</ibm-table>\n\t"
         })
     ], OverflowTableStory);
     return OverflowTableStory;
@@ -21253,6 +21389,7 @@ var PaginationTableStory = /** @class */ (function () {
     function PaginationTableStory() {
         this.model = new _table_model_class__WEBPACK_IMPORTED_MODULE_1__["TableModel"]();
         this.skeleton = false;
+        this.stickyHeader = false;
     }
     Object.defineProperty(PaginationTableStory.prototype, "totalDataLength", {
         get: function () {
@@ -21269,8 +21406,7 @@ var PaginationTableStory = /** @class */ (function () {
         this.model.header = [
             new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__["TableHeaderItem"]({ data: "Very long title indeed" }),
             new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__["TableHeaderItem"]({
-                data: "Very long title indeed",
-                style: { "width": "auto" }
+                data: "Very long title indeed"
             })
         ];
         this.model.pageLength = 10;
@@ -21337,6 +21473,10 @@ var PaginationTableStory = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], PaginationTableStory.prototype, "totalDataLength", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], PaginationTableStory.prototype, "stickyHeader", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("filter"),
         __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"]) === "function" && _a || Object)
@@ -21352,7 +21492,7 @@ var PaginationTableStory = /** @class */ (function () {
     PaginationTableStory = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "app-pagination-table",
-            template: "\n\t\t<ng-template #paginationTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #filterableHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\t\t<ng-template #filter let-popover=\"popover\" let-filter=\"data\">\n\t\t\t<ibm-label class=\"first-label\">\n\t\t\t\tValue\n\t\t\t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t\t\t\t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.doClose()\">Apply</button>\n\t\t\t\t<button class=\"btn--secondary\" (click)=\"popover.doClose()\">Cancel</button>\n\t\t\t</ibm-label>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[model]=\"model\"\n\t\t\t(sort)=\"paginationSort($event)\">\n\t\t</ibm-table>\n\t\t<ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n\t"
+            template: "\n\t\t<ng-template #paginationTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #filterableHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\t\t<ng-template #filter let-popover=\"popover\" let-filter=\"data\">\n\t\t\t<ibm-label class=\"first-label\">\n\t\t\t\tValue\n\t\t\t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t\t\t\t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.doClose()\">Apply</button>\n\t\t\t\t<button class=\"btn--secondary\" (click)=\"popover.doClose()\">Cancel</button>\n\t\t\t</ibm-label>\n\t\t</ng-template>\n\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t(sort)=\"paginationSort($event)\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</ibm-table>\n\t\t<ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n\t"
         })
     ], PaginationTableStory);
     return PaginationTableStory;
@@ -21470,6 +21610,7 @@ var TableStory = /** @class */ (function () {
         this.sortable = true;
         this.isDataGrid = false;
         this.noData = false;
+        this.stickyHeader = false;
         this.skeleton = false;
     }
     TableStory.prototype.ngOnInit = function () {
@@ -21488,7 +21629,10 @@ var TableStory = /** @class */ (function () {
                 [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 1" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "qwer" })],
                 [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 3" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "zwer" })],
                 [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 2" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "swer" })],
-                [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "twer" })]
+                [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 4" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "twer" })],
+                [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 5" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "twer" })],
+                [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 6" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "twer" })],
+                [new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "Name 7" }), new _table_item_class__WEBPACK_IMPORTED_MODULE_3__["TableItem"]({ data: "twer" })]
             ];
         }
     };
@@ -21531,6 +21675,10 @@ var TableStory = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], TableStory.prototype, "noData", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], TableStory.prototype, "stickyHeader", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -21538,7 +21686,7 @@ var TableStory = /** @class */ (function () {
     TableStory = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "app-table",
-            template: "\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"true\"\n\t\t\t[enableSingleSelect]=\"false\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(sort)=\"simpleSort($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</ibm-table>\n\t"
+            template: "\n\t\t<ibm-table\n\t\t\tstyle=\"display: block; width: 650px;\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"true\"\n\t\t\t[enableSingleSelect]=\"false\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(sort)=\"simpleSort($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</ibm-table>\n\t"
         })
     ], TableStory);
     return TableStory;
@@ -23478,7 +23626,7 @@ var Table = /** @class */ (function () {
         __metadata("design:type", Object)
     ], Table.prototype, "striped", void 0);
     __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--data-table_inner-container"), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], Table.prototype, "stickyHeader", void 0);
     __decorate([
@@ -23516,7 +23664,7 @@ var Table = /** @class */ (function () {
     Table = Table_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-table",
-            template: "\n\t<table\n\t\tibmTable\n\t\tsortable=\"true\"\n\t\t[size]=\"size\"\n\t\t[striped]=\"striped\"\n\t\t[skeleton]=\"skeleton\">\n\t\t<thead\n\t\t\tibmTableHead\n\t\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t\t(selectAll)=\"onSelectAll()\"\n\t\t\t(sort)=\"sort.emit($event)\"\n\t\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t\t[stickyHeader]=\"stickyHeader\">\n\t\t</thead>\n\t\t<tbody\n\t\t\tibmTableBody\n\t\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t\t</tbody>\n\t\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t\t<tfoot>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t\t</ng-template>\n\t\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t\t<div class=\"bx--loading bx--loading--small\">\n\t\t\t\t\t\t<svg class=\"bx--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t\t<circle class=\"bx--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t\t</button>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tfoot>\n\t</table>\n\t"
+            template: "\n\t<table\n\t\tibmTable\n\t\t[ngClass]=\"{'bx--data-table--sticky-header': stickyHeader}\"\n\t\tsortable=\"true\"\n\t\t[size]=\"size\"\n\t\t[striped]=\"striped\"\n\t\t[skeleton]=\"skeleton\">\n\t\t<thead\n\t\t\tibmTableHead\n\t\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t\t(selectAll)=\"onSelectAll()\"\n\t\t\t(sort)=\"sort.emit($event)\"\n\t\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t\t[stickyHeader]=\"stickyHeader\">\n\t\t</thead>\n\t\t<tbody\n\t\t\tibmTableBody\n\t\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t\t</tbody>\n\t\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t\t<tfoot>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t\t</ng-template>\n\t\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t\t<div class=\"bx--loading bx--loading--small\">\n\t\t\t\t\t\t<svg class=\"bx--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t\t<circle class=\"bx--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t\t</button>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tfoot>\n\t</table>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_k = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _k || Object, typeof (_l = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ApplicationRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ApplicationRef"]) === "function" && _l || Object, typeof (_m = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_6__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_6__["I18n"]) === "function" && _m || Object])
     ], Table);
@@ -23895,8 +24043,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _carbon_icons_angular_lib_add_20__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @carbon/icons-angular/lib/add/20 */ "./node_modules/@carbon/icons-angular/lib/add/20.js");
 /* harmony import */ var _stories__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./stories */ "./src/table/stories/index.ts");
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { PaginationModule } from './../pagination/pagination.module';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, number, text } from '@storybook/addon-knobs/angular';\n\nimport {\n  Table,\n  TableModule,\n  TableModel,\n  TableItem,\n  TableHeaderItem,\n  NFormsModule,\n  DialogModule,\n  SearchModule,\n  ButtonModule,\n  DocumentationModule,\n} from '../';\n\nimport { Settings16Module } from '@carbon/icons-angular/lib/settings/16';\nimport { Delete16Module } from '@carbon/icons-angular/lib/delete/16';\nimport { Save16Module } from '@carbon/icons-angular/lib/save/16';\nimport { Download16Module } from '@carbon/icons-angular/lib/download/16';\nimport { Add20Module } from '@carbon/icons-angular/lib/add/20';\n\nimport {\n  TableStory,\n  DynamicTableStory,\n  ExpansionTableStory,\n  OverflowTableStory,\n  PaginationTableStory,\n  SkeletonTableStory,\n  TableNoDataStory,\n} from './stories';\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n  [new TableItem({ data: 'Name 1' }), new TableItem({ data: 'qwer' })],\n  [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer' })],\n  [new TableItem({ data: 'Name 2' }), new TableItem({ data: 'swer' })],\n  [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n];\nsimpleModel.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'hwer' })];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n  new TableHeaderItem({ data: 'Name' }),\n  new TableHeaderItem({ data: 'hwer', style: { width: 'auto' } }),\n];\n\nconst getProps = (more = {}) => {\n  return Object.assign(\n    {},\n    {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', ''),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      skeleton: boolean('skeleton', false),\n      isDataGrid: boolean('Data grid keyboard interactions', true),\n    },\n    more\n  );\n};\n\nstoriesOf('Components|Table', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        NFormsModule,\n        TableModule,\n        DialogModule,\n        PaginationModule,\n        SearchModule,\n        ButtonModule,\n        Settings16Module,\n        Delete16Module,\n        Save16Module,\n        Download16Module,\n        Add20Module,\n        DocumentationModule,\n      ],\n      declarations: [\n        TableStory,\n        DynamicTableStory,\n        ExpansionTableStory,\n        OverflowTableStory,\n        PaginationTableStory,\n        SkeletonTableStory,\n        TableNoDataStory,\n      ],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps(),\n  }))\n  .add('With no data', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-no-data-table>\n\t\t</ibm-table-container>\n\t\t`,\n    styles: [\n      `\n\t\t\t.no-data {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 150px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n    ],\n    props: getProps({\n      model: emptyModel,\n      description: text('Description', 'With no data'),\n    }),\n  }))\n  .add('With toolbar', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps({\n      description: text('Description', 'With toolbar'),\n    }),\n  }))\n  .add('With toolbar without toolbar action', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps({\n      description: text('Description', 'With toolbar'),\n    }),\n  }))\n  .add('With expansion', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With expansion'),\n    }),\n  }))\n  .add('With dynamic content', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With dynamic content'),\n    }),\n  }))\n  .add('With overflow menu', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With overflow menu'),\n    }),\n  }))\n  .add('With pagination', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      totalDataLength: number('totalDataLength', 105),\n      description: text('Description', 'With pagination'),\n    }),\n  }))\n  .add('From components', () => ({\n    template: `\n\t\t\t<table ibmTable [sortable]=\"false\" style=\"width: 650px;\">\n\t\t\t\t<thead ibmTableHead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tibmTableHeadCell\n\t\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody ibmTableBody>\n\t\t\t\t\t<tr\n\t\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\t\tibmTableRow\n\t\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\t\tibmTableData\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t`,\n    props: getProps(),\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-skeleton-table\n\t\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t</app-skeleton-table>\n\t`,\n    props: getProps(),\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "components-table--documentation": { "startLoc": { "col": 7, "line": 349 }, "endLoc": { "col": 4, "line": 353 } }, "components-table--skeleton": { "startLoc": { "col": 7, "line": 339 }, "endLoc": { "col": 4, "line": 348 } }, "components-table--from-components": { "startLoc": { "col": 7, "line": 309 }, "endLoc": { "col": 4, "line": 338 } }, "components-table--with-pagination": { "startLoc": { "col": 7, "line": 290 }, "endLoc": { "col": 4, "line": 308 } }, "components-table--with-overflow-menu": { "startLoc": { "col": 7, "line": 270 }, "endLoc": { "col": 4, "line": 289 } }, "components-table--with-dynamic-content": { "startLoc": { "col": 7, "line": 250 }, "endLoc": { "col": 4, "line": 269 } }, "components-table--with-expansion": { "startLoc": { "col": 7, "line": 230 }, "endLoc": { "col": 4, "line": 249 } }, "components-table--with-toolbar-without-toolbar-action": { "startLoc": { "col": 7, "line": 195 }, "endLoc": { "col": 4, "line": 229 } }, "components-table--with-toolbar": { "startLoc": { "col": 7, "line": 147 }, "endLoc": { "col": 4, "line": 194 } }, "components-table--with-no-data": { "startLoc": { "col": 7, "line": 116 }, "endLoc": { "col": 4, "line": 146 } }, "components-table--basic": { "startLoc": { "col": 7, "line": 96 }, "endLoc": { "col": 4, "line": 115 } } };
+var __STORY__ = "import { PaginationModule } from './../pagination/pagination.module';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, number, text } from '@storybook/addon-knobs/angular';\n\nimport {\n  Table,\n  TableModule,\n  TableModel,\n  TableItem,\n  TableHeaderItem,\n  NFormsModule,\n  DialogModule,\n  SearchModule,\n  ButtonModule,\n  DocumentationModule,\n} from '../';\n\nimport { Settings16Module } from '@carbon/icons-angular/lib/settings/16';\nimport { Delete16Module } from '@carbon/icons-angular/lib/delete/16';\nimport { Save16Module } from '@carbon/icons-angular/lib/save/16';\nimport { Download16Module } from '@carbon/icons-angular/lib/download/16';\nimport { Add20Module } from '@carbon/icons-angular/lib/add/20';\n\nimport {\n  TableStory,\n  DynamicTableStory,\n  ExpansionTableStory,\n  OverflowTableStory,\n  PaginationTableStory,\n  SkeletonTableStory,\n  TableNoDataStory,\n} from './stories';\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n  [new TableItem({ data: 'Name 1' }), new TableItem({ data: 'qwer' })],\n  [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer' })],\n  [new TableItem({ data: 'Name 2' }), new TableItem({ data: 'swer' })],\n  [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n];\nsimpleModel.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'hwer' })];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n  new TableHeaderItem({ data: 'Name' }),\n  new TableHeaderItem({ data: 'hwer', style: { width: 'auto' } }),\n];\n\nconst getProps = (more = {}) => {\n  return Object.assign(\n    {},\n    {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Short: 'sh', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', ''),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      isDataGrid: boolean('Data grid keyboard interactions', true),\n      stickyHeader: boolean('stickyHeader', false),\n      skeleton: boolean('skeleton', false),\n    },\n    more\n  );\n};\n\nstoriesOf('Components|Table', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        NFormsModule,\n        TableModule,\n        DialogModule,\n        PaginationModule,\n        SearchModule,\n        ButtonModule,\n        Settings16Module,\n        Delete16Module,\n        Save16Module,\n        Download16Module,\n        Add20Module,\n        DocumentationModule,\n      ],\n      declarations: [\n        TableStory,\n        DynamicTableStory,\n        ExpansionTableStory,\n        OverflowTableStory,\n        PaginationTableStory,\n        SkeletonTableStory,\n        TableNoDataStory,\n      ],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps(),\n  }))\n  .add('With no data', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-no-data-table>\n\t\t</ibm-table-container>\n\t\t`,\n    styles: [\n      `\n\t\t\t.no-data {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 150px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n    ],\n    props: getProps({\n      model: emptyModel,\n      description: text('Description', 'With no data'),\n    }),\n  }))\n  .add('With toolbar', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps({\n      description: text('Description', 'With toolbar'),\n    }),\n  }))\n  .add('With toolbar without toolbar action', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps({\n      description: text('Description', 'With toolbar'),\n    }),\n  }))\n  .add('With toolbar without toolbar action', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: getProps({\n      description: text('Description', 'With toolbar'),\n    }),\n  }))\n  .add('With expansion', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With expansion'),\n    }),\n  }))\n  .add('With dynamic content', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With dynamic content'),\n    }),\n  }))\n  .add('With overflow menu', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      description: text('Description', 'With overflow menu'),\n    }),\n  }))\n  .add('With pagination', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: getProps({\n      totalDataLength: number('totalDataLength', 105),\n      description: text('Description', 'With pagination'),\n    }),\n  }))\n  .add('From components', () => ({\n    template: `\n\t\t\t<table ibmTable [sortable]=\"false\" style=\"width: 650px;\">\n\t\t\t\t<thead ibmTableHead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tibmTableHeadCell\n\t\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody ibmTableBody>\n\t\t\t\t\t<tr\n\t\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\t\tibmTableRow\n\t\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\t\tibmTableData\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t`,\n    props: getProps(),\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-skeleton-table\n\t\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t</app-skeleton-table>\n\t`,\n    props: getProps(),\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "components-table--documentation": { "startLoc": { "col": 7, "line": 394 }, "endLoc": { "col": 4, "line": 398 } }, "components-table--skeleton": { "startLoc": { "col": 7, "line": 384 }, "endLoc": { "col": 4, "line": 393 } }, "components-table--from-components": { "startLoc": { "col": 7, "line": 354 }, "endLoc": { "col": 4, "line": 383 } }, "components-table--with-pagination": { "startLoc": { "col": 7, "line": 333 }, "endLoc": { "col": 4, "line": 353 } }, "components-table--with-overflow-menu": { "startLoc": { "col": 7, "line": 312 }, "endLoc": { "col": 4, "line": 332 } }, "components-table--with-dynamic-content": { "startLoc": { "col": 7, "line": 291 }, "endLoc": { "col": 4, "line": 311 } }, "components-table--with-expansion": { "startLoc": { "col": 7, "line": 270 }, "endLoc": { "col": 4, "line": 290 } }, "components-table--with-toolbar-without-toolbar-action": { "startLoc": { "col": 7, "line": 199 }, "endLoc": { "col": 4, "line": 234 } }, "components-table--with-toolbar": { "startLoc": { "col": 7, "line": 149 }, "endLoc": { "col": 4, "line": 198 } }, "components-table--with-no-data": { "startLoc": { "col": 7, "line": 118 }, "endLoc": { "col": 4, "line": 148 } }, "components-table--basic": { "startLoc": { "col": 7, "line": 97 }, "endLoc": { "col": 4, "line": 117 } } };
 
 
 
@@ -23931,8 +24079,9 @@ var getProps = function (more) {
         showSelectionColumn: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("showSelectionColumn", true),
         striped: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("striped", false),
         sortable: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("sortable", true),
-        skeleton: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("skeleton", false),
-        isDataGrid: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Data grid keyboard interactions", true)
+        isDataGrid: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Data grid keyboard interactions", true),
+        stickyHeader: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("stickyHeader", false),
+        skeleton: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("skeleton", false)
     }, more);
 };
 Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("Components|Table", module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).addDecorator(Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["moduleMetadata"])({
@@ -23962,7 +24111,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("Components
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t",
     props: getProps()
 }); })
     .add("With no data", function () { return ({
@@ -23974,7 +24123,13 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("Components
     })
 }); })
     .add("With toolbar", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t",
+    props: getProps({
+        description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With toolbar")
+    })
+}); })
+    .add("With toolbar without toolbar action", function () { return ({
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar>\n\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t",
     props: getProps({
         description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With toolbar")
     })
@@ -23986,25 +24141,25 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_1__["storiesOf"])("Components
     })
 }); })
     .add("With expansion", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t",
     props: getProps({
         description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With expansion")
     })
 }); })
     .add("With dynamic content", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t",
     props: getProps({
         description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With dynamic content")
     })
 }); })
     .add("With overflow menu", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t",
     props: getProps({
         description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With overflow menu")
     })
 }); })
     .add("With pagination", function () { return ({
-    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t",
+    template: "\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t",
     props: getProps({
         totalDataLength: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("totalDataLength", 105),
         description: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Description", "With pagination")
@@ -28549,6 +28704,45 @@ function clone(obj) {
 }
 
 
+/***/ }),
+
+/***/ "./src/utils/window-tools.ts":
+/*!***********************************!*\
+  !*** ./src/utils/window-tools.ts ***!
+  \***********************************/
+/*! exports provided: getScrollbarWidth */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getScrollbarWidth", function() { return getScrollbarWidth; });
+var _scrollbarWidth = -1;
+function getScrollbarWidth() {
+    // lets not recreate this whole thing every time
+    if (_scrollbarWidth >= 0) {
+        return _scrollbarWidth;
+    }
+    // do the calculations the first time
+    var outer = document.createElement("div");
+    outer.style.visibility = "hidden";
+    outer.style.width = "100px";
+    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
+    document.body.appendChild(outer);
+    var widthNoScroll = outer.offsetWidth;
+    // force scrollbars
+    outer.style.overflow = "scroll";
+    // add innerdiv
+    var inner = document.createElement("div");
+    inner.style.width = "100%";
+    outer.appendChild(inner);
+    var widthWithScroll = inner.offsetWidth;
+    // remove divs
+    outer.parentNode.removeChild(outer);
+    _scrollbarWidth = widthNoScroll - widthWithScroll;
+    return _scrollbarWidth;
+}
+
+
 /***/ }),
 
 /***/ 0:
@@ -28577,4 +28771,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.2960150400d7b060c26a.bundle.js.map
+//# sourceMappingURL=main.976bd14fa9d2408462dd.bundle.js.map