carbon-components-angular/docs/storybook/table-table-stories.c19aca64.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[933],{"./node_modules/@carbon/icons/es/filter/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"}}],name:"filter",size:16}},"./src/table/table.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Filtering:()=>Filtering,FilteringOverriding:()=>FilteringOverriding,FromComponents:()=>FromComponents,Skeleton:()=>Skeleton,WithDisabledRows:()=>WithDisabledRows,WithDynamicContent:()=>WithDynamicContent,WithExpansion:()=>WithExpansion,WithOverflowMenu:()=>WithOverflowMenu,WithPagination:()=>WithPagination,WithToolbar:()=>WithToolbar,WithToolbarWithoutToolbarAction:()=>WithToolbarWithoutToolbarAction,WithoutData:()=>WithoutData,__namedExportsOrder:()=>__namedExportsOrder,default:()=>table_stories});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),src_forms=__webpack_require__("./src/forms/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),search=__webpack_require__("./src/search/index.ts"),pagination=__webpack_require__("./src/pagination/index.ts"),dialog=__webpack_require__("./src/dialog/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),table_model_class=__webpack_require__("./src/table/table-model.class.ts"),table_item_class=__webpack_require__("./src/table/table-item.class.ts"),table_header_item_class=__webpack_require__("./src/table/table-header-item.class.ts"),utils=__webpack_require__("./src/utils/index.ts");class CustomHeaderItem extends table_header_item_class.j{compare(one,two){const stringOne=(one.data.name||one.data.surname||one.data).toLowerCase(),stringTwo=(two.data.name||two.data.surname||two.data).toLowerCase();return stringOne>stringTwo?1:stringOne<stringTwo?-1:0}}let DynamicTableStory=class DynamicTableStory{constructor(){this.model=new table_model_class.G,this.size="md",this.showSelectionColumn=!0,this.striped=!0,this.isDataGrid=!1,this.sortable=!0,this.stickyHeader=!1,this.skeleton=!1}ngAfterViewInit(){this.model.data=[[new table_item_class.r({data:"Name 1"}),new table_item_class.r({data:{name:"Lessy",link:"#"},template:this.customTableItemTemplate})],[new table_item_class.r({data:"Name 3"}),new table_item_class.r({data:"swer"})],[new table_item_class.r({data:"Name 2"}),new table_item_class.r({data:{name:"Alice",surname:"Bob"},template:this.customTableItemTemplate})],[new table_item_class.r({data:"Name 4"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 5"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 6"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 7"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 8"}),new table_item_class.r({data:"twer"})]],this.model.header=[new table_header_item_class.j({data:"Very long title indeed"}),new CustomHeaderItem({data:{name:"Custom header",link:"#"},template:this.customHeaderTemplate,ariaSortLabel:"Custom header"})]}customSort(index){this.sort(this.model,index)}sort(model,index){model.header[index].sorted&&(model.header[index].ascending=model.header[index].descending),model.sort(index)}addRow(){const lastRowCopy=(0,utils.d9)(this.model.row(this.model.data.length-1));this.model.addRow(lastRowCopy)}addColumn(){let column=Array(this.model.data.length).fill(null).map((()=>new table_item_class.r({data:`Column ${this.model.row(0).length}`})));this.model.addColumn(column)}onRowClick(index){console.log("Row item selected:",index)}};DynamicTableStory.propDecorators={model:[{type:core.Input}],size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],striped:[{type:core.Input}],isDataGrid:[{type:core.Input}],sortable:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}],customHeaderTemplate:[{type:core.ViewChild,args:["customHeaderTemplate"]}],customTableItemTemplate:[{type:core.ViewChild,args:["customTableItemTemplate"]}]},DynamicTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-custom-table",template:'\n\t\t<cds-table-toolbar [model]="model">\n\t\t\t<button cdsButton="primary" (click)="addRow()">Add row</button>\n\t\t\t<button cdsButton="primary" (click)="addColumn()">Add column</button>\n\t\t</cds-table-toolbar>\n\n\t\t<ng-template #customTableItemTemplate let-data="data">\n\t\t\t<a [attr.href]="data.link">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data="data">\n\t\t\t<i cdsTableHeadCellLabel><a [attr.href]="data.link">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[sortable]="sortable"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[striped]="striped"\n\t\t\t[isDataGrid]="isDataGrid"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t(sort)="customSort($event)">\n\t\t</cds-table>\n\t'})],DynamicTableStory);class app_expansion_table_component_CustomHeaderItem extends table_header_item_class.j{compare(one,two){const stringOne=(one.data.name||one.data.surname||one.data).toLowerCase(),stringTwo=(two.data.name||two.data.surname||two.data).toLowerCase();return stringOne>stringTwo?1:stringOne<stringTwo?-1:0}}let ExpansionTableStory=class ExpansionTableStory{constructor(){this.model=new table_model_class.G,this.size="md",this.showSelectionColumn=!0,this.striped=!0,this.isDataGrid=!1,this.sortable=!0,this.stickyHeader=!1,this.skeleton=!1}ngAfterViewInit(){this.model.data=[[new table_item_class.r({data:"Name 1",expandedData:"No template"}),new table_item_class.r({data:{name:"Lessy",link:"#"},template:this.customTableItemTemplate})],[new table_item_class.r({data:"Name 3",expandedData:{name:"In",surname:"Template"},expandedTemplate:this.customTableItemTemplate}),new table_item_class.r({data:"swer"})],[new table_item_class.r({data:"Name 3.1",expandedData:[[new table_item_class.r({data:"More names",expandedData:"No template"}),new table_item_class.r({data:{name:"Morey",link:"#"},template:this.customTableItemTemplate})],[new table_item_class.r({data:"Core names",expandedData:"No template"}),new table_item_class.r({data:{name:"Corey",link:"#"},template:this.customTableItemTemplate})]],expandAsTable:!0}),new table_item_class.r({data:"swer"})],[new table_item_class.r({data:"Name 2"}),new table_item_class.r({data:{name:"Alice",surname:"Bob"},template:this.customTableItemTemplate})],[new table_item_class.r({data:"Name 4"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 5"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 6"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 7"}),new table_item_class.r({data:"twer"})]],this.model.header=[new table_header_item_class.j({data:"Very long title indeed"}),new app_expansion_table_component_CustomHeaderItem({data:{name:"Custom header",link:"#"},template:this.customHeaderTemplate})]}customSort(index){this.sort(this.model,index)}onRowClick(index){console.log("Row item selected:",index)}sort(model,index){model.header[index].sorted&&(model.header[index].ascending=model.header[index].descending),model.sort(index)}};ExpansionTableStory.propDecorators={model:[{type:core.Input}],size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],striped:[{type:core.Input}],isDataGrid:[{type:core.Input}],sortable:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}],customHeaderTemplate:[{type:core.ViewChild,args:["customHeaderTemplate"]}],customTableItemTemplate:[{type:core.ViewChild,args:["customTableItemTemplate"]}]},ExpansionTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-expansion-table",template:'\n\t\t<ng-template #customTableItemTemplate let-data="data">\n\t\t\t<a [attr.href]="data.link">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data="data">\n\t\t\t<i><a [attr.href]="data.link">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[sortable]="sortable"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[striped]="striped"\n\t\t\t(sort)="customSort($event)"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t[isDataGrid]="isDataGrid">\n\t\t</cds-table>\n\t'})],ExpansionTableStory);var icon_service=__webpack_require__("./src/icon/icon.service.ts"),_16=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),filter_16=__webpack_require__("./node_modules/@carbon/icons/es/filter/16.js");let FilterWithModelStory=class FilterWithModelStory{constructor(iconService){this.iconService=iconService,this.size="md",this.showSelectionColumn=!0,this.enableSingleSelect=!1,this.striped=!0,this.isDataGrid=!1,this.noData=!1,this.stickyHeader=!1,this.skeleton=!1,this.model=new table_model_class.G,this.displayedCountries=["US","France","Argentina","Japan"],this.dataset=[[new table_item_class.r({data:"800"}),new table_item_class.r({data:"East Sadye"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})],[new table_item_class.r({data:"500"}),new table_item_class.r({data:"Lueilwitzview"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})],[new table_item_class.r({data:"120"}),new table_item_class.r({data:"East Arcelyside"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"France"})],[new table_item_class.r({data:"119"}),new table_item_class.r({data:"West Dylan"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Argentina"})],[new table_item_class.r({data:"54"}),new table_item_class.r({data:"Brandynberg"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Japan"})],[new table_item_class.r({data:"15"}),new table_item_class.r({data:"Stoltenbergport"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Canada"})],[new table_item_class.r({data:"12"}),new table_item_class.r({data:"Rheabury"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})]],this.overflowOnClick=event=>{event.stopPropagation()},this.iconService.registerAll([_16.Z,filter_16.Z])}filterNodeNames(searchString){this.model.data=this.dataset.filter((row=>row[1].data.toLowerCase().includes(searchString.toLowerCase())))}filterCountries(countryName,checked){checked?this.displayedCountries.push(countryName):this.displayedCountries.splice(this.displayedCountries.indexOf(countryName),1),this.model.data=this.dataset.filter((row=>this.displayedCountries.includes(row[3].data)))}ngOnInit(){this.model.header=[new table_header_item_class.j({data:"Node ID"}),new table_header_item_class.j({data:"Node name"}),new table_header_item_class.j({data:"Node type"}),new table_header_item_class.j({data:"Country"})],this.model.data=this.dataset}};FilterWithModelStory.ctorParameters=()=>[{type:icon_service.C6}],FilterWithModelStory.propDecorators={size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],striped:[{type:core.Input}],isDataGrid:[{type:core.Input}],noData:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}]},FilterWithModelStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-model-filter-table",template:'\n\t<cds-table-container>\n\t\t<cds-table-header>\n\t\t\t<h4 cdsTableHeaderTitle>Filter table</h4>\n\t\t\t<p cdsTableHeaderDescription>\n\t\t\t\tUse the toolbar\'s search functionality to filter node names\n\t\t\t\tor click the filter icon to filter country names\n\t\t\t</p>\n\t\t</cds-table-header>\n\t\t<cds-table-toolbar>\n\t\t\t<cds-table-toolbar-content>\n\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t[expandable]="true"\n\t\t\t\t\t(valueChange)="filterNodeNames($event)"\n\t\t\t\t\t(clear)="filterNodeNames(\'\')">\n\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\tclass="toolbar-action"\n\t\t\t\t\t[cdsOverflowMenu]="templateRef"\n\t\t\t\t\tplacement="bottom"\n\t\t\t\t\t[flip]="true"\n\t\t\t\t\t[offset]="{ x: 3, y: 0 }">\n\t\t\t\t\t<svg cdsIcon="filter" size="16" class="cds--toolbar-action__icon"></svg>\n\t\t\t\t</button>\n\t\t\t\t<button cdsButton="primary" size="sm">\n\t\t\t\t\tPrimary Button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\t\t\t</cds-table-toolbar-content>\n\t\t</cds-table-toolbar>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[sortable]="false"\n\t\t\t[size]="size"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[striped]="striped"\n\t\t\t[isDataGrid]="isDataGrid">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-table>\n\t</cds-table-container>\n\n\t<ng-template #templateRef>\n\t\t<div style="padding: 0 1rem;" (click)="overflowOnClick($event)">\n\t\t\t<div style="padding-top: 0.5rem; color: grey;">Countries shown</div>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'US\')"\n\t\t\t\t(checkedChange)="filterCountries(\'US\', $event)">\n\t\t\t\tUS\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'France\')"\n\t\t\t\t(checkedChange)="filterCountries(\'France\', $event)">\n\t\t\t\tFrance\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'Argentina\')"\n\t\t\t\t(checkedChange)="filterCountries(\'Argentina\', $event)">\n\t\t\t\tArgentina\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'Japan\')"\n\t\t\t\t(checkedChange)="filterCountries(\'Japan\', $event)">\n\t\t\t\tJapan\n\t\t\t</cds-checkbox>\n\t\t</div>\n\t</ng-template>\n\t'})],FilterWithModelStory);let OverflowTableStory=class OverflowTableStory{constructor(){this.model=new table_model_class.G,this.size="md",this.showSelectionColumn=!0,this.striped=!0,this.isDataGrid=!1,this.sortable=!0,this.stickyHeader=!1,this.skeleton=!1}ngAfterViewInit(){this.model.data=[[new table_item_class.r({data:"Name 1"}),new table_item_class.r({data:{id:"1"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 2"}),new table_item_class.r({data:{id:"2"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 3"}),new table_item_class.r({data:{id:"3"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 4"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 5"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 6"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 7"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 8"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})],[new table_item_class.r({data:"Name 9"}),new table_item_class.r({data:{id:"4"},template:this.overflowMenuItemTemplate})]],this.model.header=[new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Actions"})]}onRowClick(index){console.log("Row item selected:",index)}};OverflowTableStory.propDecorators={model:[{type:core.Input}],size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],striped:[{type:core.Input}],isDataGrid:[{type:core.Input}],sortable:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}],overflowMenuItemTemplate:[{type:core.ViewChild,args:["overflowMenuItemTemplate",{static:!1}]}]},OverflowTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-overflow-table",template:'\n\t\t<ng-template #overflowMenuItemTemplate let-data="data">\n\t\t\t<cds-overflow-menu>\n\t\t\t\t<cds-overflow-menu-option>\n\t\t\t\t\tFirst Option\n\t\t\t\t</cds-overflow-menu-option>\n\t\t\t\t<cds-overflow-menu-option>\n\t\t\t\t\tSecond Option\n\t\t\t\t</cds-overflow-menu-option>\n\t\t\t\t<cds-overflow-menu-option>\n\t\t\t\t\tThird Option\n\t\t\t\t</cds-overflow-menu-option>\n\t\t\t</cds-overflow-menu>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[sortable]="sortable"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[isDataGrid]="isDataGrid"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t[striped]="striped">\n\t\t</cds-table>\n\t'})],OverflowTableStory);let PaginationTableStory=class PaginationTableStory{constructor(){this.model=new table_model_class.G,this.sortable=!0,this.skeleton=!1,this.showSelectionColumn=!0,this.stickyHeader=!1}get totalDataLength(){return this.model.totalDataLength}set totalDataLength(value){this.model.totalDataLength=value}ngOnInit(){this.model.data=[[]],this.model.header=[new table_header_item_class.j({data:"Very long title indeed"}),new table_header_item_class.j({data:"Very long title indeed"})],this.model.pageLength=10,this.model.totalDataLength=105,this.selectPage(1)}customSort(index){this.sort(this.model,index)}sort(model,index){model.header[index].sorted&&(model.header[index].ascending=model.header[index].descending),model.sort(index)}getPage(page){const line=line=>[`Item ${line}:1!`,{name:"Item",surname:`${line}:2`}],fullPage=[];for(let i=(page-1)*this.model.pageLength;i<page*this.model.pageLength&&i<this.model.totalDataLength;i++)fullPage.push(line(i+1));return new Promise((resolve=>{setTimeout((()=>resolve(fullPage)),150)}))}selectPage(page){this.getPage(page).then((data=>{this.model.data=this.prepareData(data),this.model.currentPage=page}))}onRowClick(index){console.log("Row item selected:",index)}prepareData(data){let newData=[];return data.forEach((dataRow=>{let row=[];dataRow.forEach((dataElement=>{row.push(new table_item_class.r({data:dataElement,template:"string"==typeof dataElement?void 0:this.paginationTableItemTemplate}))})),newData.push(row)})),newData}};PaginationTableStory.propDecorators={model:[{type:core.Input}],sortable:[{type:core.Input}],skeleton:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],totalDataLength:[{type:core.Input}],stickyHeader:[{type:core.Input}],filter:[{type:core.ViewChild,args:["filter"]}],filterableHeaderTemplate:[{type:core.ViewChild,args:["filterableHeaderTemplate"]}],paginationTableItemTemplate:[{type:core.ViewChild,args:["paginationTableItemTemplate"]}]},PaginationTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-pagination-table",template:'\n\t\t<ng-template #paginationTableItemTemplate let-data="data">\n\t\t\t<a [attr.href]="data.link">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #filterableHeaderTemplate let-data="data">\n\t\t\t<i><a [attr.href]="data.link">{{data.name}}</a></i>\n\t\t</ng-template>\n\t\t<ng-template #filter let-popover="popover" let-filter="data">\n\t\t\t<cds-label class="first-label">\n\t\t\t\tValue\n\t\t\t\t<input type="text" [(ngModel)]="filter1" class="input-field">\n\t\t\t\t<button class="btn--primary" (click)="filter.data = filter1; popover.doClose()">Apply</button>\n\t\t\t\t<button class="btn--secondary" (click)="popover.doClose()">Cancel</button>\n\t\t\t</cds-label>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[sortable]="sortable"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[model]="model"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t(sort)="paginationSort($event)"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[skeleton]="skeleton">\n\t\t</cds-table>\n\t\t<cds-pagination [model]="model" (selectPage)="selectPage($event)"></cds-pagination>\n\t'})],PaginationTableStory);var table=__webpack_require__("./src/table/index.ts");let SkeletonTableStory=class SkeletonTableStory{constructor(){this.size="md",this.striped=!1,this.skeleton=!0,this.skeletonModel=new table_model_class.G}ngOnInit(){this.skeletonModel=table.iA.skeletonModel(5,5)}};SkeletonTableStory.propDecorators={size:[{type:core.Input}],striped:[{type:core.Input}],skeleton:[{type:core.Input}],skeletonModel:[{type:core.Input}]},SkeletonTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-skeleton-table",template:'\n\t\t<cds-table\n\t\t\tstyle="display: block; width: 800px;"\n\t\t\t[model]="skeletonModel"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[size]="size"\n\t\t\t[striped]="striped">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-table>\n\t'})],SkeletonTableStory);let FilterByFunctionOverrideStory=class FilterByFunctionOverrideStory{constructor(iconService){this.iconService=iconService,this.size="md",this.showSelectionColumn=!0,this.enableSingleSelect=!1,this.striped=!0,this.isDataGrid=!1,this.noData=!1,this.stickyHeader=!1,this.skeleton=!1,this.model=new table_model_class.G,this.displayedCountries=["US","France","Argentina","Japan"],this.searchValue="",this.dataset=[[new table_item_class.r({data:"800"}),new table_item_class.r({data:"East Sadye"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})],[new table_item_class.r({data:"500"}),new table_item_class.r({data:"Lueilwitzview"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})],[new table_item_class.r({data:"120"}),new table_item_class.r({data:"East Arcelyside"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"France"})],[new table_item_class.r({data:"119"}),new table_item_class.r({data:"West Dylan"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Argentina"})],[new table_item_class.r({data:"54"}),new table_item_class.r({data:"Brandynberg"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Japan"})],[new table_item_class.r({data:"15"}),new table_item_class.r({data:"Stoltenbergport"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"Canada"})],[new table_item_class.r({data:"12"}),new table_item_class.r({data:"Rheabury"}),new table_item_class.r({data:"Store"}),new table_item_class.r({data:"US"})]],this.overflowOnClick=event=>{event.stopPropagation()},this.iconService.registerAll([_16.Z,filter_16.Z])}filterNodeNames(searchString){this.searchValue=searchString}filterCountries(countryName,checked){checked?this.displayedCountries.push(countryName):this.displayedCountries.splice(this.displayedCountries.indexOf(countryName),1)}ngOnInit(){this.model.header=[new table_header_item_class.j({data:"Node ID"}),new table_header_item_class.j({data:"Node name"}),new table_header_item_class.j({data:"Node type"}),new table_header_item_class.j({data:"Country"})],this.model.data=this.dataset,this.model.isRowFiltered=index=>{const nodeName=this.model.row(index)[1].data,countryName=this.model.row(index)[3].data;return!nodeName.toLowerCase().includes(this.searchValue.toLowerCase())||!this.displayedCountries.includes(countryName)}}};FilterByFunctionOverrideStory.ctorParameters=()=>[{type:icon_service.C6}],FilterByFunctionOverrideStory.propDecorators={size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],striped:[{type:core.Input}],isDataGrid:[{type:core.Input}],noData:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}]},FilterByFunctionOverrideStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-function-override-filter-table",template:'\n\t<cds-table-container>\n\t\t<cds-table-header>\n\t\t\t<h4 cdsTableHeaderTitle>Filter table</h4>\n\t\t\t<p cdsTableHeaderDescription>\n\t\t\t\tUse the toolbar\'s search functionality to filter node names\n\t\t\t\tor click the filter icon to filter country names\n\t\t\t</p>\n\t\t</cds-table-header>\n\t\t<cds-table-toolbar>\n\t\t\t<cds-table-toolbar-content>\n\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t[expandable]="true"\n\t\t\t\t\t(valueChange)="filterNodeNames($event)"\n\t\t\t\t\t(clear)="searchValue = \'\'">\n\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\tclass="toolbar-action"\n\t\t\t\t\t[cdsOverflowMenu]="templateRef"\n\t\t\t\t\tplacement="bottom"\n\t\t\t\t\t[flip]="true"\n\t\t\t\t\t[offset]="{ x: 3, y: 0 }">\n\t\t\t\t\t<svg cdsIcon="filter" size="16" class="cds--toolbar-action__icon"></svg>\n\t\t\t\t</button>\n\t\t\t\t<button cdsButton="primary" size="sm">\n\t\t\t\t\tPrimary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\t\t\t</cds-table-toolbar-content>\n\t\t</cds-table-toolbar>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[sortable]="false"\n\t\t\t[size]="size"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[striped]="striped"\n\t\t\t[isDataGrid]="isDataGrid">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-table>\n\t</cds-table-container>\n\n\t<ng-template #templateRef>\n\t\t<div style="padding: 0 1rem;" (click)="overflowOnClick($event)">\n\t\t\t<div style="padding-top: 0.5rem; color: grey;">Countries shown</div>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'US\')"\n\t\t\t\t(checkedChange)="filterCountries(\'US\', $event)">\n\t\t\t\tUS\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'France\')"\n\t\t\t\t(checkedChange)="filterCountries(\'France\', $event)">\n\t\t\t\tFrance\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'Argentina\')"\n\t\t\t\t(checkedChange)="filterCountries(\'Argentina\', $event)">\n\t\t\t\tArgentina\n\t\t\t</cds-checkbox>\n\t\t\t<cds-checkbox\n\t\t\t\t[checked]="displayedCountries.includes(\'Japan\')"\n\t\t\t\t(checkedChange)="filterCountries(\'Japan\', $event)">\n\t\t\t\tJapan\n\t\t\t</cds-checkbox>\n\t\t</div>\n\t</ng-template>\n\t'})],FilterByFunctionOverrideStory);let TableStory=class TableStory{constructor(){this.model=new table_model_class.G,this.size="md",this.showSelectionColumn=!0,this.enableSingleSelect=!1,this.striped=!0,this.sortable=!0,this.isDataGrid=!1,this.noData=!1,this.stickyHeader=!1,this.skeleton=!1}ngOnInit(){this.model.header=[new table_header_item_class.j({data:"Name",title:"Table header title"}),new table_header_item_class.j({data:"hwer",className:"my-class"})],this.model.rowsSelectedChange.subscribe((event=>console.log(event))),this.model.selectAllChange.subscribe((event=>console.log(event?"All rows selected!":"All rows deselected!"))),this.noData||this.skeleton||(this.model.data=[[new table_item_class.r({data:"Name 1",title:"Table item title"}),new table_item_class.r({data:"qwer"})],[new table_item_class.r({data:"Name 3"}),new table_item_class.r({data:"zwer"})],[new table_item_class.r({data:"Name 2"}),new table_item_class.r({data:"swer"})],[new table_item_class.r({data:"Name 4"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 5"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 6"}),new table_item_class.r({data:"twer"})],[new table_item_class.r({data:"Name 7"}),new table_item_class.r({data:"twer"})]])}ngOnChanges(changes){if(changes.sortable)for(let column of this.model.header)column.sortable=changes.sortable.currentValue}onRowClick(index){console.log("Row item selected:",index)}};TableStory.propDecorators={model:[{type:core.Input}],size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],striped:[{type:core.Input}],sortable:[{type:core.Input}],isDataGrid:[{type:core.Input}],noData:[{type:core.Input}],stickyHeader:[{type:core.Input}],skeleton:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],ariaDescribedby:[{type:core.Input}]},TableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table",template:'\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t[sortable]="sortable"\n\t\t\t[stickyHeader]="stickyHeader"\n\t\t\t[striped]="striped"\n\t\t\t[isDataGrid]="isDataGrid"\n\t\t\t[ariaLabelledby]="ariaLabelledby"\n\t\t\t[ariaDescribedby]="ariaDescribedby">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-table>\n\t'})],TableStory);let TableNoDataStory=class TableNoDataStory{constructor(){this.model=new table_model_class.G,this.size="md",this.showSelectionColumn=!0,this.striped=!0,this.sortable=!0,this.isDataGrid=!1,this.skeleton=!1}ngOnInit(){this.model.header=[new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"hwer",className:"my-class"})]}ngOnChanges(changes){if(changes.sortable)for(let column of this.model.header)column.sortable=changes.sortable.currentValue}};TableNoDataStory.propDecorators={model:[{type:core.Input}],size:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],striped:[{type:core.Input}],sortable:[{type:core.Input}],isDataGrid:[{type:core.Input}],skeleton:[{type:core.Input}]},TableNoDataStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-no-data-table",template:'\n\t\t<cds-table\n\t\t\t[skeleton]="skeleton"\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[striped]="striped"\n\t\t\t[isDataGrid]="isDataGrid">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-table>\n\t'})],TableNoDataStory);const simpleModel=new table.G0;simpleModel.data=[[new table.r8({data:"Name 1"}),new table.r8({data:"qwer"})],[new table.r8({data:"Name 3"}),new table.r8({data:"zwer"})],[new table.r8({data:"Name 2"}),new table.r8({data:"swer"})],[new table.r8({data:"Name 4"}),new table.r8({data:"twer"})]],simpleModel.header=[new table.jr({data:"Name"}),new table.jr({data:"hwer"})];const emptyModel=new table.G0;emptyModel.header=[new table.jr({data:"Name"}),new table.jr({data:"hwer",style:{width:"auto"}})];const getProps=(more={},type)=>({..."args"===type?{model:simpleModel,title:"Table title",description:"",size:"md",showSelectionColumn:!0,striped:!1,sortable:!0,isDataGrid:!0,stickyHeader:!1,skeleton:!1}:{size:{options:["xs","sm","md","lg","xl"],control:"select"}},...more});const table_stories={title:"Components/Table",decorators:[(0,dist.moduleMetadata)({imports:[src_forms.s,fesm2020_forms.u5,table.U$,pagination.u3,dialog.Su,search.t,icon_module.QX,src_button.hJ],declarations:[TableStory,DynamicTableStory,ExpansionTableStory,FilterByFunctionOverrideStory,FilterWithModelStory,OverflowTableStory,PaginationTableStory,SkeletonTableStory,TableNoDataStory]})],argTypes:{model:{control:!1,disabled:!0}}},Basic=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [stickyHeader]="stickyHeader"\n                [size]="size"\n                [skeleton]="skeleton"\n                [enableSingleSelect]="enableSingleSelect"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n        </cds-table-container>\n    '})).bind({});Basic.args={...getProps({enableSingleSelect:!1},"args")},Basic.argTypes={...getProps({},"argTypes")};const WithoutData=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="size"\n                [skeleton]="skeleton"\n                [showSelectionColumn]="showSelectionColumn"\n                [striped]="striped"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n                <tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>\n            </app-no-data-table>\n        </cds-table-container>\n    ',styles:["\n        .no-data {\n            width: 100%;\n            height: 150px;\n            text-align: center;\n        }\n    "]})).bind({});WithoutData.args={...getProps({model:emptyModel},"args")};const WithToolbar=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar\n                [model]="model"\n                [batchText]="batchText"\n                [size]="size"\n                (cancel)="cancelMethod()"\n                #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Delete\n                        <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" [tabindex]="toolbar.selected ? 0 : -1">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search\n                        ngDefaultControl\n                        [expandable]="searchExpandable"\n                        [(ngModel)]="searchModel">\n                    </cds-table-toolbar-search>\n                    <cds-overflow-menu\n                        triggerClass="cds--toolbar-action"\n                        [customTrigger]="customTrigger"\n                        placement="bottom"\n                        [offset]="size === \'sm\' ? null : offset">\n                        <cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n                        <cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n                        <cds-overflow-menu-option disabled="true">Disabled</cds-overflow-menu-option>\n                        <cds-overflow-menu-option type="danger">Danger option</cds-overflow-menu-option>\n                    </cds-overflow-menu>\n                    <button cdsButton="primary" size="sm" [tabindex]="toolbar.selected ? -1 : 0">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [striped]="striped"\n                [sortable]="sortable"\n                [skeleton]="skeleton"\n                [stickyHeader]="stickyHeader"\n                [isDataGrid]="isDataGrid">\n            </app-table>\n            <ng-template #customTrigger><svg cdsIcon="settings" size="16"></svg></ng-template>\n        </cds-table-container>\n    '})).bind({});WithToolbar.args={...getProps({description:"With toolbar",searchModel:"Initial search value",searchExpandable:!0,enableSingleSelect:!1,batchText:{SINGLE:"1 item selected",MULTIPLE:"{{count}} items selected"},offset:{x:-9,y:0}},"args")},WithToolbar.argTypes={...getProps({canelMethod:{type:"function",control:!1,defaultValue:()=>{console.log("Custom cancel method")}}},"argTypes")};const WithDisabledRows=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar [model]="model" [batchText]="batchText" #toolbar>\n                <cds-table-toolbar-actions>\n                    <button cdsButton="primary">\n                        Delete\n                        <svg cdsIcon="delete" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Save\n                        <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                    <button cdsButton="primary">\n                        Download\n                        <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-actions>\n                <cds-table-toolbar-content *ngIf="!toolbar.selected">\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n            --\x3e\n            <app-no-data-table\n                [model]="model"\n                [size]="lg"\n                [showSelectionColumn]="true"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid">\n            </app-no-data-table>\n        </cds-table-container>\n    '})).bind({});WithDisabledRows.storyName="With toolbar and disabled rows",WithDisabledRows.args={...getProps({model:function getModelWithDisabledRows(){const disabledModel=new table.G0,row1=new table.SC(new table.r8({data:"Name 1"}),new table.r8({data:"Disabled 1"}));row1.disabled=!0;const row2=new table.SC(new table.r8({data:"Name 3"}),new table.r8({data:"Disabled 2"}));row2.disabled=!0;const row3=new table.SC(new table.r8({data:"Name 2"}),new table.r8({data:"Enabled 1"})),row4=new table.SC(new table.r8({data:"Name 4"}),new table.r8({data:"Enabled 2"}));return disabledModel.data=[row1,row2,row3,row4],disabledModel}(),size:"md",title:"Table title",description:"With toolbar & disabled rows",striped:!1,sortable:!0,isDataGrid:!0,batchText:{SINGLE:"1 item selected",MULTIPLE:"{{count}} items selected"}},"args")},WithDisabledRows.argTypes={size:{options:["xs","sm","md","lg","xl"],control:"select"}};const WithToolbarWithoutToolbarAction=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle id="table-header">{{title}}</h4>\n                <p cdsTableHeaderDescription id="table-description">{{description}}</p>\n            </cds-table-header>\n            <cds-table-toolbar>\n                <cds-table-toolbar-content>\n                    <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n                    <button cdsButton="ghost" class="toolbar-action">\n                        <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n                    </button>\n                    <button cdsButton="primary" size="sm">\n                        Primary button<svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n                    </button>\n                </cds-table-toolbar-content>\n            </cds-table-toolbar>\n\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n            --\x3e\n            <app-table\n                [model]="model"\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [enableSingleSelect]="enableSingleSelect"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [sortable]="sortable"\n                [isDataGrid]="isDataGrid"\n                ariaLabelledby="table-header"\n                ariaDescribedby="table-description">\n            </app-table>\n        </cds-table-container>\n    '})).bind({});WithToolbarWithoutToolbarAction.args={...getProps({description:"With toolbar",enableSingleSeelct:!1},"args")};const FilteringOverriding=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n        --\x3e\n        <app-function-override-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-function-override-filter-table>\n    '})).bind({});FilteringOverriding.storyName="Filtering by overriding isRowFiltered [Recommended]",FilteringOverriding.args={...getProps({},"args")};const Filtering=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n        --\x3e\n        <app-model-filter-table\n            [stickyHeader]="stickyHeader"\n            [size]="size"\n            [skeleton]="skeleton"\n            [showSelectionColumn]="showSelectionColumn"\n            [striped]="striped"\n            [isDataGrid]="isDataGrid">\n        </app-model-filter-table>\n    '})).bind({});Filtering.storyName="Filtering by alteration of model data",Filtering.args={...getProps({description:"With toolbar",enableSingleSeelct:!1},"args")};const WithExpansion=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n            --\x3e\n            <app-expansion-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-expansion-table>\n        </cds-table-container>\n    '})).bind({});WithExpansion.args={...getProps({description:"With expansion"},"args")};const WithDynamicContent=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n            --\x3e\n            <app-custom-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-custom-table>\n        </cds-table-container>\n    '})).bind({});WithDynamicContent.args={...getProps({description:"With dynamic content"},"args")};const WithOverflowMenu=(args=>({props:{...getProps({description:"With overflow menu"},"args")},template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n            --\x3e\n            <app-overflow-table\n                [size]="size"\n                [showSelectionColumn]="showSelectionColumn"\n                [sortable]="sortable"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [striped]="striped"\n                [isDataGrid]="isDataGrid">\n            </app-overflow-table>\n        </cds-table-container>\n    '})).bind({}),WithPagination=(args=>({props:args,template:'\n        <cds-table-container>\n            <cds-table-header>\n                <h4 cdsTableHeaderTitle>{{title}}</h4>\n                <p cdsTableHeaderDescription>{{description}}</p>\n            </cds-table-header>\n            \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source found at:\n            https://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n            --\x3e\n            <app-pagination-table\n                [skeleton]="skeleton"\n                [sortable]="sortable"\n                [totalDataLength]="totalDataLength"\n                [showSelectionColumn]="showSelectionColumn"\n                [stickyHeader]="stickyHeader"\n                [skeleton]="skeleton"\n                [model]="model">\n            </app-pagination-table>\n        </cds-table-container>\n    '})).bind({});WithPagination.args={...getProps({totalDataLength:105,description:"With pagination"},"args")};const FromComponents=(args=>({props:args,template:'\n        <table cdsTable [sortable]="false">\n            <thead cdsTableHead>\n                <tr>\n                    <th\n                        scope="col"\n                        cdsTableHeadCell\n                        *ngFor="let column of model.header"\n                        [column]="column">\n                    </th>\n                </tr>\n            </thead>\n            <tbody cdsTableBody>\n                <tr\n                    *ngFor="let row of model.data"\n                    cdsTableRow\n                    [row]="row">\n                    <td\n                        *ngFor="let item of row; let j = index"\n                        cdsTableData\n                        [item]="item"\n                        [class]="model.header[j].className"\n                        [ngStyle]="model.header[j].style">\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    '})).bind({});FromComponents.args={...getProps({},"args")};const Skeleton=(args=>({props:args,template:'\n        \x3c!