npm - carbon-components-angular - Versions diffs - 5.63.0 → 5.64.1 - Mend

carbon-components-angular 5.63.0 → 5.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/docs/documentation.json CHANGED Viewed

@@ -11645,12 +11645,12 @@
         },
         {
             "name": "ColumnDirective",
-            "id": "directive-ColumnDirective-16fe516e9b51bd48ec634b2af4811ab3d25003cf401d48dd723538b3d00d673c939688b9109e099ab2fc8c0271c9b5acdae62fb614c2d1eab7c24d65341dde38",
+            "id": "directive-ColumnDirective-90851bddf3f3cd7fe0640185c575f22cdd7ea0d8ac808cf112fec94941155c05e9610b805ddde8454defcd2ecb88e3d02d38b9ba98876ef63079d519fe58f434",
             "file": "src/grid/column.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOptional\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { GridService } from \"./grid.service\";\n\n@Directive({\n\tselector: \"[cdsCol], [ibmCol]\"\n})\nexport class ColumnDirective implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"class\")\n\tget columnClasses(): string {\n\t\treturn this._columnClasses.join(\" \");\n\t}\n\tset columnClasses(classes: string) {\n\t\tthis._columnClasses = classes.split(\" \");\n\t}\n\n\t@Input() class = \"\";\n\n\t/**\n\t * Defines columns width for specified breakpoint\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t * - {[breakpoint]: \"auto\"} - css only\n\t * - {[breakpoint]: {[start|end]: number}} - css only\n\t *\n\t * Example:\n\t * <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>\n\t */\n\t@Input() columnNumbers = {};\n\n\t/**\n\t * Defines columns offset, which increases the left margin of the column.\n\t * This field will only work with flexbox grid.\n\t *\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t *\n\t * Example:\n\t * <div cdsCol [offsets]={md: 3, lg: 4}></div>\n\t */\n\t@Input() offsets = {};\n\n\t/**\n\t * Set to `true` to use css grid column hang class\n\t * This will only work when `isCss` property is set to true\n\t *\n\t * Useful when trying to align content across css grid/subgrid\n\t */\n\t@Input() columnHang = false;\n\n\tprotected _columnClasses: string[] = [];\n\n\tprivate isCssGrid = false;\n\tprivate subscription = new Subscription();\n\n\tconstructor(@Optional() private gridService: GridService) {}\n\n\tngOnInit() {\n\t\tif (this.gridService) {\n\t\t\tthis.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {\n\t\t\t\tthis.isCssGrid = isCssGrid;\n\t\t\t\tthis.updateColumnClasses();\n\t\t\t});\n\t\t} else {\n\t\t\tthis.updateColumnClasses();\n\t\t}\n\t}\n\n\tngOnChanges() {\n\t\tthis.updateColumnClasses();\n\t}\n\n\t/**\n\t * Unsubscribe from subscription\n\t */\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate updateColumnClasses() {\n\t\ttry {\n\t\t\tthis._columnClasses = [];\n\t\t\tconst columnKeys = Object.keys(this.columnNumbers);\n\n\t\t\t// Assign classes based on the type of grid used.\n\t\t\tif (this.isCssGrid) {\n\t\t\t\t// Default css grid class\n\t\t\t\tthis._columnClasses.push(\"cds--css-grid-column\");\n\t\t\t\tif (this.columnHang) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--grid-column-hang\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Passing in `auto` to a breakpoint as such: {'md': 'auto'}\n\t\t\t\t\t * will assign the element which will automatically determine the width of the column\n\t\t\t\t\t * for the breakpoint passed\n\t\t\t\t\t */\n\t\t\t\t\tif (this.columnNumbers[key] === \"auto\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-auto`);\n\t\t\t\t\t} else if (typeof this.columnNumbers[key] === \"object\") {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * In css grid, objects can be passed to the keys in the following format:\n\t\t\t\t\t\t * {'md': {'start': 3}}\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * These objects are used to position the column\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (this.columnNumbers[key][\"start\"]) {\n\t\t\t\t\t\t\t// col-start is simular equivalent of flex offset\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"end\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"span\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start${this.offsets[key] + 1}`);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Set column classes for flex grid\n\t\t\t\tif (columnKeys.length <= 0) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--col\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\tif (this.columnNumbers[key] === \"nobreak\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}`);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(`Malformed \\`offsets\\` or \\`columnNumbers\\`: ${err}`);\n\t\t}\n\n\t\t/**\n\t\t * Append the classes passed so they aren't overriden when we set the column classes\n\t\t * from host binding\n\t\t */\n\t\tif (this.class) {\n\t\t\tthis._columnClasses.push(this.class);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOptional\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { GridService } from \"./grid.service\";\n\n@Directive({\n\tselector: \"[cdsCol], [ibmCol]\"\n})\nexport class ColumnDirective implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"class\")\n\tget columnClasses(): string {\n\t\treturn this._columnClasses.join(\" \");\n\t}\n\tset columnClasses(classes: string) {\n\t\tthis._columnClasses = classes.split(\" \");\n\t}\n\n\t@Input() class = \"\";\n\n\t/**\n\t * Defines columns width for specified breakpoint\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t * - {[breakpoint]: \"auto\"} - css only\n\t * - {[breakpoint]: {[start|end]: number}} - css only\n\t *\n\t * Example:\n\t * <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>\n\t */\n\t@Input() columnNumbers = {};\n\n\t/**\n\t * Defines columns offset, which increases the left margin of the column.\n\t * This field will only work with flexbox grid.\n\t *\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t *\n\t * Example:\n\t * <div cdsCol [offsets]={md: 3, lg: 4}></div>\n\t */\n\t@Input() offsets = {};\n\n\t/**\n\t * Set to `true` to use css grid column hang class\n\t * This will only work when `isCss` property is set to true\n\t *\n\t * Useful when trying to align content across css grid/subgrid\n\t */\n\t@Input() columnHang = false;\n\n\tprotected _columnClasses: string[] = [];\n\n\tprivate isCssGrid = false;\n\tprivate subscription = new Subscription();\n\n\tconstructor(@Optional() private gridService: GridService) {}\n\n\tngOnInit() {\n\t\tif (this.gridService) {\n\t\t\tthis.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {\n\t\t\t\tthis.isCssGrid = isCssGrid;\n\t\t\t\tthis.updateColumnClasses();\n\t\t\t});\n\t\t} else {\n\t\t\tthis.updateColumnClasses();\n\t\t}\n\t}\n\n\tngOnChanges() {\n\t\tthis.updateColumnClasses();\n\t}\n\n\t/**\n\t * Unsubscribe from subscription\n\t */\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate updateColumnClasses() {\n\t\ttry {\n\t\t\tthis._columnClasses = [];\n\t\t\tconst columnKeys = Object.keys(this.columnNumbers);\n\n\t\t\t// Assign classes based on the type of grid used.\n\t\t\tif (this.isCssGrid) {\n\t\t\t\t// Default css grid class\n\t\t\t\tthis._columnClasses.push(\"cds--css-grid-column\");\n\t\t\t\tif (this.columnHang) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--grid-column-hang\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Passing in `auto` to a breakpoint as such: {'md': 'auto'}\n\t\t\t\t\t * will assign the element which will automatically determine the width of the column\n\t\t\t\t\t * for the breakpoint passed\n\t\t\t\t\t */\n\t\t\t\t\tif (this.columnNumbers[key] === \"auto\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-auto`);\n\t\t\t\t\t} else if (typeof this.columnNumbers[key] === \"object\") {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * In css grid, objects can be passed to the keys in the following format:\n\t\t\t\t\t\t * {'md': {'start': 3}}\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * These objects are used to position the column\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (this.columnNumbers[key][\"start\"]) {\n\t\t\t\t\t\t\t// col-start is simular equivalent of flex offset\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"end\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"span\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Set column classes for flex grid\n\t\t\t\tif (columnKeys.length <= 0) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--col\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\tif (this.columnNumbers[key] === \"nobreak\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}`);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(`Malformed \\`offsets\\` or \\`columnNumbers\\`: ${err}`);\n\t\t}\n\n\t\t/**\n\t\t * Append the classes passed so they aren't overriden when we set the column classes\n\t\t * from host binding\n\t\t */\n\t\tif (this.class) {\n\t\t\tthis._columnClasses.push(this.class);\n\t\t}\n\t}\n}\n",
             "selector": "[cdsCol], [ibmCol]",
             "providers": [],
             "hostDirectives": [],
@@ -75918,7 +75918,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75928,7 +75928,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75938,7 +75938,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78210,7 +78210,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78220,7 +78220,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78330,21 +78330,21 @@
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
@@ -78830,31 +78830,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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</cds-table-container>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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</cds-table-container>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -84323,480 +84323,480 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [condensed]=\"condensed\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t`\n})"
                 }
             ],
-            "src/tabs/tabs.stories.ts": [
+            "src/table/table.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "BeforeAndAfter",
+                    "name": "DisabledRowsTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar [model]=\"model\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"delete\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"lg\"\n\t\t\t\t[showSelectionColumn]=\"true\"\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-no-data-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "BeforeAndAfterTemplate",
+                    "name": "DyanmicContentTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "emptyModel",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
+                    "defaultValue": "new TableModel()"
                 },
                 {
-                    "name": "SkeletonTemplate",
+                    "name": "ExpansionTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\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\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "TabheaderGroup",
+                    "name": "Filtering",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
+                    "defaultValue": "FilteringTemplate.bind({})"
                 },
                 {
-                    "name": "TabHeaderGroupTemplate",
+                    "name": "FilteringOverriding",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
+                    "defaultValue": "FilteringOverridingTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "FilteringOverridingTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n\t\t-->\n\t\t<app-function-override-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\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</app-function-override-filter-table>\n\t`\n})"
                 },
                 {
-                    "name": "With",
+                    "name": "FilteringTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n\t\t-->\n\t\t<app-model-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\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</app-model-filter-table>\n\t`\n})"
                 },
                 {
-                    "name": "WithTemplate",
+                    "name": "FromComponents",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
-                }
-            ],
-            "src/tag/tag.stories.ts": [
+                    "defaultValue": "FromComponentsTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "FromComponentsTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<table cdsTable [sortable]=\"false\">\n\t\t\t<thead cdsTableHead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody cdsTableBody>\n\t\t\t\t<tr\n\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t<td\n\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\tcdsTableData\n\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t`\n})"
                 },
                 {
-                    "name": "Filter",
+                    "name": "getProps",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteredTemplate.bind({})"
+                    "defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}"
                 },
                 {
-                    "name": "FilteredTemplate",
+                    "name": "NoDataTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n\t\t\t-->\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\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\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</cds-table-container>\n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})"
                 },
                 {
-                    "name": "OperationalTag",
+                    "name": "OverflowMenuTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "OperationalTagTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "OperationalTagTemplate",
+                    "name": "PaginationTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "SelectedTag",
+                    "name": "simpleModel",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SelectedTagTemplate.bind({})"
+                    "defaultValue": "new TableModel()"
                 },
                 {
-                    "name": "SelectedTagTemplate",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
+                    "defaultValue": "SkeletonTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "SkeletonTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
-                }
-            ],
-            "src/table/table.stories.ts": [
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "DisabledRowsTemplate",
+                    "name": "ToolbarTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar [model]=\"model\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"delete\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"lg\"\n\t\t\t\t[showSelectionColumn]=\"true\"\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-no-data-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[batchText]=\"batchText\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t(cancel)=\"cancelMethod()\"\n\t\t\t\t#toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t\tngDefaultControl\n\t\t\t\t\t\t[expandable]=\"searchExpandable\"\n\t\t\t\t\t\t[(ngModel)]=\"searchModel\">\n\t\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t\ttriggerClass=\"cds--toolbar-action\"\n\t\t\t\t\t\t[customTrigger]=\"customTrigger\"\n\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t[offset]=\"size === 'sm' ? null : offset\">\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option disabled=\"true\">Disabled</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option type=\"danger\">Danger option</cds-overflow-menu-option>\n\t\t\t\t\t</cds-overflow-menu>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\" [tabindex]=\"toolbar.selected ? -1 : 0\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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\t<ng-template #customTrigger><svg cdsIcon=\"settings\" size=\"16\"></svg></ng-template>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "DyanmicContentTemplate",
+                    "name": "WithDisabledRows",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
+                    "defaultValue": "DisabledRowsTemplate.bind({})"
                 },
                 {
-                    "name": "emptyModel",
+                    "name": "WithDynamicContent",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new TableModel()"
+                    "defaultValue": "DyanmicContentTemplate.bind({})"
                 },
                 {
-                    "name": "ExpansionTemplate",
+                    "name": "WithExpansion",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\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\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "ExpansionTemplate.bind({})"
                 },
                 {
-                    "name": "Filtering",
+                    "name": "WithoutActionTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteringTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar>\n\t\t\t\t<cds-table-toolbar-content>\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "FilteringOverriding",
+                    "name": "WithoutData",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteringOverridingTemplate.bind({})"
+                    "defaultValue": "NoDataTemplate.bind({})"
                 },
                 {
-                    "name": "FilteringOverridingTemplate",
+                    "name": "WithOverflowMenu",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n\t\t-->\n\t\t<app-function-override-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\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</app-function-override-filter-table>\n\t`\n})"
+                    "defaultValue": "OverflowMenuTemplate.bind({})"
                 },
                 {
-                    "name": "FilteringTemplate",
+                    "name": "WithPagination",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n\t\t-->\n\t\t<app-model-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\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</app-model-filter-table>\n\t`\n})"
+                    "defaultValue": "PaginationTemplate.bind({})"
                 },
                 {
-                    "name": "FromComponents",
+                    "name": "WithToolbar",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FromComponentsTemplate.bind({})"
+                    "defaultValue": "ToolbarTemplate.bind({})"
                 },
                 {
-                    "name": "FromComponentsTemplate",
+                    "name": "WithToolbarWithoutToolbarAction",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<table cdsTable [sortable]=\"false\">\n\t\t\t<thead cdsTableHead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody cdsTableBody>\n\t\t\t\t<tr\n\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t<td\n\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\tcdsTableData\n\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t`\n})"
-                },
+                    "defaultValue": "WithoutActionTemplate.bind({})"
+                }
+            ],
+            "src/tabs/tabs.stories.ts": [
                 {
-                    "name": "getProps",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "NoDataTemplate",
+                    "name": "BeforeAndAfter",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n\t\t\t-->\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\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\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</cds-table-container>\n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})"
+                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
                 },
                 {
-                    "name": "OverflowMenuTemplate",
+                    "name": "BeforeAndAfterTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
                 },
                 {
-                    "name": "PaginationTemplate",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n\t\t\t-->\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</cds-table-container>\n\t`\n})"
+                    "defaultValue": "SkeletonTemplate.bind({})"
                 },
                 {
-                    "name": "simpleModel",
+                    "name": "SkeletonTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new TableModel()"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "TabheaderGroup",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
+                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
                 },
                 {
-                    "name": "SkeletonTemplate",
+                    "name": "TabHeaderGroupTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
                 },
                 {
-                    "name": "ToolbarTemplate",
+                    "name": "With",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[batchText]=\"batchText\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t(cancel)=\"cancelMethod()\"\n\t\t\t\t#toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t\tngDefaultControl\n\t\t\t\t\t\t[expandable]=\"searchExpandable\"\n\t\t\t\t\t\t[(ngModel)]=\"searchModel\">\n\t\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t\ttriggerClass=\"cds--toolbar-action\"\n\t\t\t\t\t\t[customTrigger]=\"customTrigger\"\n\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t[offset]=\"size === 'sm' ? null : offset\">\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option disabled=\"true\">Disabled</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option type=\"danger\">Danger option</cds-overflow-menu-option>\n\t\t\t\t\t</cds-overflow-menu>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\" [tabindex]=\"toolbar.selected ? -1 : 0\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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\t<ng-template #customTrigger><svg cdsIcon=\"settings\" size=\"16\"></svg></ng-template>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "WithTemplate.bind({})"
                 },
                 {
-                    "name": "WithDisabledRows",
+                    "name": "WithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "DisabledRowsTemplate.bind({})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
+                }
+            ],
+            "src/tag/tag.stories.ts": [
                 {
-                    "name": "WithDynamicContent",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "DyanmicContentTemplate.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "WithExpansion",
+                    "name": "Filter",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ExpansionTemplate.bind({})"
+                    "defaultValue": "FilteredTemplate.bind({})"
                 },
                 {
-                    "name": "WithoutActionTemplate",
+                    "name": "FilteredTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar>\n\t\t\t\t<cds-table-toolbar-content>\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\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[enableSingleSelect]=\"enableSingleSelect\"\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\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
                 },
                 {
-                    "name": "WithoutData",
+                    "name": "OperationalTag",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "NoDataTemplate.bind({})"
+                    "defaultValue": "OperationalTagTemplate.bind({})"
                 },
                 {
-                    "name": "WithOverflowMenu",
+                    "name": "OperationalTagTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "OverflowMenuTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
                 },
                 {
-                    "name": "WithPagination",
+                    "name": "SelectedTag",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "PaginationTemplate.bind({})"
+                    "defaultValue": "SelectedTagTemplate.bind({})"
                 },
                 {
-                    "name": "WithToolbar",
+                    "name": "SelectedTagTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ToolbarTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
                 },
                 {
-                    "name": "WithToolbarWithoutToolbarAction",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithoutActionTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
                 }
             ],
             "src/theme/theme.stories.ts": [