carbon-components-angular 3.54.2 → 3.55.0

package/docs/storybook/iframe.html

@@ -125,11 +125,11 @@
     
     
     
-      <script src="runtime~main.1ccde517361f3d1a057c.bundle.js"></script>
+      <script src="runtime~main.cc0c83480554325866b2.bundle.js"></script>
     
-      <script src="vendors~main.1ccde517361f3d1a057c.bundle.js"></script>
+      <script src="vendors~main.cc0c83480554325866b2.bundle.js"></script>
     
-      <script src="main.1ccde517361f3d1a057c.bundle.js"></script>
+      <script src="main.cc0c83480554325866b2.bundle.js"></script>
     
   </body>
 </html>

package/docs/storybook/{main.1ccde517361f3d1a057c.bundle.js → main.cc0c83480554325866b2.bundle.js}

@@ -4083,6 +4083,10 @@ var DatePicker = /** @class */ (function () {
          * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts
          */
         this.language = "en";
+        /**
+         * Aria label added to datepicker's calendar container.
+         */
+        this.ariaLabel = "calendar container";
         this.placeholder = "mm/dd/yyyy";
         this.pattern = "^\\d{1,2}/\\d{1,2}/\\d{4}$";
         this.id = "datepicker-" + DatePicker_1.datePickerCount++;
@@ -4102,6 +4106,7 @@ var DatePicker = /** @class */ (function () {
             plugins: this.plugins,
             onOpen: function () {
                 _this.updateClassNames();
+                _this.updateAttributes();
                 _this.updateCalendarListeners();
             },
             value: this.value
@@ -4338,6 +4343,14 @@ var DatePicker = /** @class */ (function () {
             }
         });
     };
+    DatePicker.prototype.updateAttributes = function () {
+        var _this = this;
+        var calendarContainer = document.querySelectorAll(".flatpickr-calendar");
+        Array.from(calendarContainer).forEach(function (calendar) {
+            calendar.setAttribute("role", "region");
+            calendar.setAttribute("aria-label", _this.ariaLabel);
+        });
+    };
     /**
      * Applies the given date value array to both the flatpickr instance and the `input`(s)
      * @param dates the date values to apply
@@ -4407,6 +4420,10 @@ var DatePicker = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], DatePicker.prototype, "language", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], DatePicker.prototype, "ariaLabel", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -19075,7 +19092,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<div\n\tclass=\"bx--search\"\n\t[ngClass]=\"{\n\t\t'bx--search--sm': size === 'sm',\n\t\t'bx--search--xl': size === 'xl',\n\t\t'bx--search--light': theme === 'light',\n\t\t'bx--skeleton': skeleton,\n\t\t'bx--toolbar-search': toolbar,\n\t\t'bx--toolbar-search--active': toolbar && active\n\t}\"\n\trole=\"search\">\n\t<label class=\"bx--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"bx--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\t*ngIf=\"!toolbar || active || value !== ''\"\n\t\t\tclass=\"bx--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(keyup.enter)=\"onEnter()\"\n\t\t\t(input)=\"onSearch($event.target.value)\"/>\n\t\t<button *ngIf=\"!tableSearch && toolbar\" class=\"bx--toolbar-search__btn\" (click)=\"openSearch()\">\n\t\t\t<ibm-icon-search16 class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t\t</button>\n\t\t<ibm-icon-search16 *ngIf=\"tableSearch || !toolbar\" (click)=\"openSearch()\" class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"bx--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t[attr.aria-label]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<ibm-icon-close16></ibm-icon-close16>\n\t</button>\n</div>\n"
+module.exports = "<div\n\tclass=\"bx--search\"\n\t[ngClass]=\"{\n\t\t'bx--search--sm': size === 'sm',\n\t\t'bx--search--xl': size === 'xl',\n\t\t'bx--search--light': theme === 'light',\n\t\t'bx--skeleton': skeleton,\n\t\t'bx--toolbar-search': toolbar,\n\t\t'bx--toolbar-search--active': toolbar && active\n\t}\"\n\trole=\"search\">\n\t<label class=\"bx--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"bx--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\t*ngIf=\"!toolbar || active || value !== ''\"\n\t\t\tclass=\"bx--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(keyup.enter)=\"onEnter()\"\n\t\t\t(input)=\"onSearch($event.target.value)\"/>\n\t\t<button *ngIf=\"!tableSearch && toolbar\" class=\"bx--toolbar-search__btn\" (click)=\"openSearch()\">\n\t\t\t<ibm-icon-search16 class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t\t</button>\n\t\t<ibm-icon-search16\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"bx--search-magnifier\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t(click)=\"openSearch()\">\n\t\t</ibm-icon-search16>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"bx--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t[attr.aria-label]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<ibm-icon-close16></ibm-icon-close16>\n\t</button>\n</div>\n"
 
 /***/ }),
 
@@ -26142,6 +26159,11 @@ var Table = /** @class */ (function () {
             }
             var previousElement = tableAdapter.getCell(previousRow, previousColumn);
             Table_1.setTabIndex(previousElement, -1);
+            // Make the previous cell unfocusable (if it's not the current)
+            if (previousRow !== currentRow || previousColumn !== currentColumn) {
+                var previousElement_1 = tableAdapter.getCell(previousRow, previousColumn);
+                Table_1.setTabIndex(previousElement_1, -1);
+            }
             Table_1.focus(currentElement);
         });
         // call this after assigning `this.interactionModel` since it depends on it
@@ -26825,7 +26847,7 @@ var addSourceDecorator = __webpack_require__(/*! @storybook/source-loader/previe
 // @ts-ignore
 var __SOURCE_PREFIX__ = "/home/travis/build/IBM/carbon-components-angular/src/table";
 // @ts-ignore
-var __STORY__ = "import { PaginationModule } from \"./../pagination/pagination.module\";\nimport { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport {\n\twithKnobs,\n\tboolean,\n\tselect,\n\tnumber,\n\tobject,\n\ttext\n} from \"@storybook/addon-knobs/angular\";\n\nimport {\n\tTable,\n\tTableModule,\n\tTableModel,\n\tTableItem,\n\tTableHeaderItem,\n\tNFormsModule,\n\tDialogModule,\n\tSearchModule,\n\tButtonModule,\n\tDocumentationModule\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\tTableStory,\n\tDynamicTableStory,\n\tExpansionTableStory,\n\tOverflowTableStory,\n\tPaginationTableStory,\n\tSkeletonTableStory,\n\tTableNoDataStory\n} from \"./stories\";\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n\t[new TableItem({data: \"Name 1\"}), new TableItem({data: \"qwer\"})],\n\t[new TableItem({data: \"Name 3\"}), new TableItem({data: \"zwer\"})],\n\t[new TableItem({data: \"Name 2\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"Name 4\"}), new TableItem({data: \"twer\"})]\n];\nsimpleModel.header = [\n\tnew TableHeaderItem({data: \"Name\"}), new TableHeaderItem({data: \"hwer\" })\n];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n\tnew TableHeaderItem({data: \"Name\"}), new TableHeaderItem({data: \"hwer\", style: {\"width\": \"auto\"} })\n];\n\nconst getProps = (more = {}) => {\n\treturn Object.assign({}, {\n\t\tmodel: simpleModel,\n\t\tsize: select(\"size\", { Small: \"sm\", Short: \"sh\", Normal: \"md\", Large: \"lg\" }, \"md\"),\n\t\ttitle: text(\"Title\", \"Table title\"),\n\t\tdescription: text(\"Description\", \"\"),\n\t\tshowSelectionColumn: boolean(\"showSelectionColumn\", true),\n\t\tstriped: boolean(\"striped\", false),\n\t\tsortable: boolean(\"sortable\", true),\n\t\tisDataGrid: boolean(\"Data grid keyboard interactions\", true),\n\t\tstickyHeader: boolean(\"stickyHeader\", false),\n\t\tskeleton: boolean(\"skeleton\", false)\n\t}, more);\n};\n\nstoriesOf(\"Components|Table\", module).addDecorator(\n\t\tmoduleMetadata({\n\t\t\timports: [\n\t\t\t\tNFormsModule,\n\t\t\t\tTableModule,\n\t\t\t\tDialogModule,\n\t\t\t\tPaginationModule,\n\t\t\t\tSearchModule,\n\t\t\t\tButtonModule,\n\t\t\t\tSettings16Module,\n\t\t\t\tDelete16Module,\n\t\t\t\tSave16Module,\n\t\t\t\tDownload16Module,\n\t\t\t\tAdd20Module,\n\t\t\t\tDocumentationModule\n\t\t\t],\n\t\t\tdeclarations: [\n\t\t\t\tTableStory,\n\t\t\t\tDynamicTableStory,\n\t\t\t\tExpansionTableStory,\n\t\t\t\tOverflowTableStory,\n\t\t\t\tPaginationTableStory,\n\t\t\t\tSkeletonTableStory,\n\t\t\t\tTableNoDataStory\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"With no data\", () => ({\n\t\ttemplate: `\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\t\tstyles: [`\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\t\tprops: getProps({\n\t\t\tmodel: emptyModel,\n\t\t\tdescription: text(\"Description\", \"With no data\")\n\t\t})\n\t}))\n\t.add(\"With toolbar\", () => ({\n\t\ttemplate: `\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\" [batchText]=\"batchText\">\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With toolbar\"),\n\t\t\tbatchText: object(\"Toolbar batch text\", {\n\t\t\t\tSINGLE: \"1 item selected\",\n\t\t\t\tMULTIPLE: \"{{count}} items selected\"\n\t\t\t})\n\t\t})\n\t}))\n\t.add(\"With toolbar without toolbar action\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With toolbar\")\n\t\t})\n\t}))\n\t.add(\"With expansion\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With expansion\")\n\t\t})\n\t}))\n\t.add(\"With dynamic content\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With dynamic content\")\n\t\t})\n\t}))\n\t.add(\"With overflow menu\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With overflow menu\")\n\t\t})\n\t}))\n\t.add(\"With pagination\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\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[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n\t\tprops: getProps({\n\t\t\ttotalDataLength: number(\"totalDataLength\", 105),\n\t\t\tdescription: text(\"Description\", \"With pagination\")\n\t\t})\n\t}))\n\t.add(\"From components\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"Skeleton\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
+var __STORY__ = "import { PaginationModule } from \"./../pagination/pagination.module\";\nimport { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport {\n\twithKnobs,\n\tboolean,\n\tselect,\n\tnumber,\n\tobject,\n\ttext\n} from \"@storybook/addon-knobs/angular\";\n\nimport {\n\tTable,\n\tTableModule,\n\tTableModel,\n\tTableItem,\n\tTableHeaderItem,\n\tNFormsModule,\n\tDialogModule,\n\tSearchModule,\n\tButtonModule,\n\tDocumentationModule\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\tTableStory,\n\tDynamicTableStory,\n\tExpansionTableStory,\n\tOverflowTableStory,\n\tPaginationTableStory,\n\tSkeletonTableStory,\n\tTableNoDataStory\n} from \"./stories\";\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n\t[new TableItem({data: \"Name 1\"}), new TableItem({data: \"qwer\"})],\n\t[new TableItem({data: \"Name 3\"}), new TableItem({data: \"zwer\"})],\n\t[new TableItem({data: \"Name 2\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"Name 4\"}), new TableItem({data: \"twer\"})]\n];\nsimpleModel.header = [\n\tnew TableHeaderItem({data: \"Name\"}), new TableHeaderItem({data: \"hwer\" })\n];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n\tnew TableHeaderItem({data: \"Name\"}), new TableHeaderItem({data: \"hwer\", style: {\"width\": \"auto\"} })\n];\n\nconst getProps = (more = {}) => {\n\treturn Object.assign({}, {\n\t\tmodel: simpleModel,\n\t\tsize: select(\"size\", { Small: \"sm\", Short: \"sh\", Normal: \"md\", Large: \"lg\" }, \"md\"),\n\t\ttitle: text(\"Title\", \"Table title\"),\n\t\tdescription: text(\"Description\", \"\"),\n\t\tshowSelectionColumn: boolean(\"showSelectionColumn\", true),\n\t\tstriped: boolean(\"striped\", false),\n\t\tsortable: boolean(\"sortable\", true),\n\t\tisDataGrid: boolean(\"Data grid keyboard interactions\", true),\n\t\tstickyHeader: boolean(\"stickyHeader\", false),\n\t\tskeleton: boolean(\"skeleton\", false)\n\t}, more);\n};\n\nstoriesOf(\"Components|Table\", module).addDecorator(\n\t\tmoduleMetadata({\n\t\t\timports: [\n\t\t\t\tNFormsModule,\n\t\t\t\tTableModule,\n\t\t\t\tDialogModule,\n\t\t\t\tPaginationModule,\n\t\t\t\tSearchModule,\n\t\t\t\tButtonModule,\n\t\t\t\tSettings16Module,\n\t\t\t\tDelete16Module,\n\t\t\t\tSave16Module,\n\t\t\t\tDownload16Module,\n\t\t\t\tAdd20Module,\n\t\t\t\tDocumentationModule\n\t\t\t],\n\t\t\tdeclarations: [\n\t\t\t\tTableStory,\n\t\t\t\tDynamicTableStory,\n\t\t\t\tExpansionTableStory,\n\t\t\t\tOverflowTableStory,\n\t\t\t\tPaginationTableStory,\n\t\t\t\tSkeletonTableStory,\n\t\t\t\tTableNoDataStory\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"With no data\", () => ({\n\t\ttemplate: `\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\t\tstyles: [`\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\t\tprops: getProps({\n\t\t\tmodel: emptyModel,\n\t\t\tdescription: text(\"Description\", \"With no data\")\n\t\t})\n\t}))\n\t.add(\"With toolbar\", () => ({\n\t\ttemplate: `\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\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? -1 : 0\">\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\" [tabindex]=\"toolbar.selected ? -1 : 0\">\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With toolbar\"),\n\t\t\tbatchText: object(\"Toolbar batch text\", {\n\t\t\t\tSINGLE: \"1 item selected\",\n\t\t\t\tMULTIPLE: \"{{count}} items selected\"\n\t\t\t})\n\t\t})\n\t}))\n\t.add(\"With toolbar without toolbar action\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With toolbar\")\n\t\t})\n\t}))\n\t.add(\"With expansion\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With expansion\")\n\t\t})\n\t}))\n\t.add(\"With dynamic content\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With dynamic content\")\n\t\t})\n\t}))\n\t.add(\"With overflow menu\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\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\t\tprops: getProps({\n\t\t\tdescription: text(\"Description\", \"With overflow menu\")\n\t\t})\n\t}))\n\t.add(\"With pagination\", () => ({\n\t\ttemplate: `\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[sortable]=\"sortable\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\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[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n\t\tprops: getProps({\n\t\t\ttotalDataLength: number(\"totalDataLength\", 105),\n\t\t\tdescription: text(\"Description\", \"With pagination\")\n\t\t})\n\t}))\n\t.add(\"From components\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"Skeleton\", () => ({\n\t\ttemplate: `\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\t\tprops: getProps()\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
 // @ts-ignore
 var __ADDS_MAP__ = { "components-table--documentation": { "startLoc": { "col": 6, "line": 369 }, "endLoc": { "col": 3, "line": 373 }, "startBody": { "col": 23, "line": 369 }, "endBody": { "col": 3, "line": 373 } }, "components-table--skeleton": { "startLoc": { "col": 6, "line": 359 }, "endLoc": { "col": 3, "line": 368 }, "startBody": { "col": 18, "line": 359 }, "endBody": { "col": 3, "line": 368 } }, "components-table--from-components": { "startLoc": { "col": 6, "line": 329 }, "endLoc": { "col": 3, "line": 358 }, "startBody": { "col": 25, "line": 329 }, "endBody": { "col": 3, "line": 358 } }, "components-table--with-pagination": { "startLoc": { "col": 6, "line": 306 }, "endLoc": { "col": 3, "line": 328 }, "startBody": { "col": 25, "line": 306 }, "endBody": { "col": 3, "line": 328 } }, "components-table--with-overflow-menu": { "startLoc": { "col": 6, "line": 284 }, "endLoc": { "col": 3, "line": 305 }, "startBody": { "col": 28, "line": 284 }, "endBody": { "col": 3, "line": 305 } }, "components-table--with-dynamic-content": { "startLoc": { "col": 6, "line": 262 }, "endLoc": { "col": 3, "line": 283 }, "startBody": { "col": 30, "line": 262 }, "endBody": { "col": 3, "line": 283 } }, "components-table--with-expansion": { "startLoc": { "col": 6, "line": 240 }, "endLoc": { "col": 3, "line": 261 }, "startBody": { "col": 24, "line": 240 }, "endBody": { "col": 3, "line": 261 } }, "components-table--with-toolbar-without-toolbar-action": { "startLoc": { "col": 6, "line": 204 }, "endLoc": { "col": 3, "line": 239 }, "startBody": { "col": 45, "line": 204 }, "endBody": { "col": 3, "line": 239 } }, "components-table--with-toolbar": { "startLoc": { "col": 6, "line": 150 }, "endLoc": { "col": 3, "line": 203 }, "startBody": { "col": 22, "line": 150 }, "endBody": { "col": 3, "line": 203 } }, "components-table--with-no-data": { "startLoc": { "col": 6, "line": 121 }, "endLoc": { "col": 3, "line": 149 }, "startBody": { "col": 22, "line": 121 }, "endBody": { "col": 3, "line": 149 } }, "components-table--basic": { "startLoc": { "col": 6, "line": 100 }, "endLoc": { "col": 3, "line": 120 }, "startBody": { "col": 15, "line": 100 }, "endBody": { "col": 3, "line": 120 } } };
 // @ts-ignore
@@ -26914,7 +26936,7 @@ 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\" [batchText]=\"batchText\">\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",
+    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\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? 0 : -1\">\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\" [tabindex]=\"toolbar.selected ? -1 : 0\">\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\" [tabindex]=\"toolbar.selected ? -1 : 0\">\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"),
         batchText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["object"])("Toolbar batch text", {
@@ -27272,7 +27294,7 @@ var TableToolbar = /** @class */ (function () {
     TableToolbar = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Component"])({
             selector: "ibm-table-toolbar",
-            template: "\n\t<section class=\"bx--table-toolbar\">\n\t\t<div\n\t\t\t*ngIf=\"model\"\n\t\t\tclass=\"bx--batch-actions\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--batch-actions--active': selected\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t\t\t<div class=\"bx--action-list\">\n\t\t\t\t<ng-content select=\"ibm-table-toolbar-actions\"></ng-content>\n\t\t\t\t<button ibmButton=\"primary\" class=\"bx--batch-summary__cancel\" (click)=\"onCancel()\">{{_cancelText.subject | async}}</button>\n\t\t\t</div>\n\t\t\t<div class=\"bx--batch-summary\">\n\t\t\t\t<p class=\"bx--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</section>\n\t"
+            template: "\n\t<section class=\"bx--table-toolbar\">\n\t\t<div\n\t\t\t*ngIf=\"model\"\n\t\t\tclass=\"bx--batch-actions\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--batch-actions--active': selected\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"actionBarLabel.subject | async\">\n\t\t\t<div class=\"bx--action-list\">\n\t\t\t\t<ng-content select=\"ibm-table-toolbar-actions\"></ng-content>\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"primary\"\n\t\t\t\t\tclass=\"bx--batch-summary__cancel\"\n\t\t\t\t\t[tabindex]=\"selected ? 0 : -1\"\n\t\t\t\t\t(click)=\"onCancel()\">\n\t\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class=\"bx--batch-summary\">\n\t\t\t\t<p class=\"bx--batch-summary__para\" *ngIf=\"count as n\">\n\t\t\t\t\t<ng-container *ngIf=\"_batchTextLegacy.subject | async as legacyText; else batchTextBlock\">\n\t\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t\t<span *ngIf=\"n === 1\">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t\t<span *ngIf=\"n !== 1\">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</section>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"]) === "function" && _b || Object])
     ], TableToolbar);
@@ -33034,4 +33056,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.1ccde517361f3d1a057c.bundle.js.map
+//# sourceMappingURL=main.cc0c83480554325866b2.bundle.js.map