carbon-components-angular/docs/storybook/341.a982d50b.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[341],{"./node_modules/@carbon/icons/es/filter/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16_default});var _16_default={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/stories/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{eC:()=>DynamicTableStory,Wu:()=>ExpansionTableStory,jx:()=>FilterByFunctionOverrideStory,OD:()=>FilterWithModelStory,pr:()=>OverflowTableStory,v8:()=>PaginationTableStory,uX:()=>SkeletonTableStory,U3:()=>TableAiLabelColumnExpansionStory,NA:()=>TableAiLabelColumnSortStory,OO:()=>TableAiLabelExpansionOnlyStory,aH:()=>TableAiLabelFullTableStory,DH:()=>TableAiLabelRadioSelectionStory,Gu:()=>TableAiLabelSelectionExpansionStory,I2:()=>TableAiLabelWithSelectionStory,OR:()=>TableNoDataStory,bj:()=>TableStory});var 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,this.showExpandAllToggle=!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}],showExpandAllToggle:[{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\t[showExpandAllToggle]="showExpandAllToggle">\n\t\t</cds-table>\n\n\t\t<br>\n\n\t\t<button cdsButton="primary" size="sm" (click)="model.expandAllRows(true)">Expand all rows</button>\n\n\t\t<button cdsButton="secondary" size="sm" (click)="model.expandAllRows(false)">Collapse all rows</button>\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);var ai_label_story_shared=__webpack_require__("./src/storybook/ai-label-story-shared.ts");const DEMO_ROWS=[["Load Balancer 3","HTTP","3000","Round robin","Kevin's VM Groups","Disabled"],["Load Balancer 1","HTTP","443","Round robin","Maureen's VM Groups","Starting"],["Load Balancer 2","HTTP","80","DNS delegation","Andrew's VM Groups","Active"],["Load Balancer 6","HTTP","3000","Round robin","Marc's VM Groups","Disabled"],["Load Balancer 4","HTTP","443","Round robin","Mel's VM Groups","Starting"],["Load Balancer 5","HTTP","80","DNS delegation","Ronja's VM Groups","Active"]];function showSlugForRowIndex(i){return 1===i||3===i||4===i}let TableAiLabelWithSelectionStory=class TableAiLabelWithSelectionStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"",sortable:!1}),new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:"Attached groups"}),new table_header_item_class.j({data:"Status"})],this.model.data=DEMO_ROWS.map(((cells,rowIndex)=>{const show=showSlugForRowIndex(rowIndex);return[new table_item_class.r({data:{show},template:this.rowSlugTpl,hasAILabelDecorator:show,cellClassName:show?"cds--table-column-decorator cds--table-column-decorator--active":"cds--table-column-decorator"}),...cells.map((c=>new table_item_class.r({data:c})))]}))}};TableAiLabelWithSelectionStory.propDecorators={rowSlugTpl:[{type:core.ViewChild,args:["rowSlugTpl"]}]},TableAiLabelWithSelectionStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-selection",template:'\n\t\t<ng-template #rowSlugTpl let-data="data">\n\t\t\t<ng-container *ngIf="data?.show">\n\t\t\t\t<cds-ai-label\n\t\t\t\t\tclass="ai-label-container"\n\t\t\t\t\tkind="default"\n\t\t\t\t\tsize="mini"\n\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\taiText="AI"\n\t\t\t\t\tariaLabel="Show information">\n\t\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t\t</cds-ai-label>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="true"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true"\n\t\t\t[withRowAILabels]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelWithSelectionStory);let TableAiLabelRadioSelectionStory=class TableAiLabelRadioSelectionStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"",sortable:!1}),new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:"Attached groups"}),new table_header_item_class.j({data:"Status"})],this.model.data=DEMO_ROWS.map(((cells,rowIndex)=>{const show=showSlugForRowIndex(rowIndex);return[new table_item_class.r({data:{show},template:this.rowSlugTpl,hasAILabelDecorator:show,cellClassName:show?"cds--table-column-decorator cds--table-column-decorator--active":"cds--table-column-decorator"}),...cells.map((c=>new table_item_class.r({data:c})))]}))}};TableAiLabelRadioSelectionStory.propDecorators={rowSlugTpl:[{type:core.ViewChild,args:["rowSlugTpl"]}]},TableAiLabelRadioSelectionStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-radio",template:'\n\t\t<ng-template #rowSlugTpl let-data="data">\n\t\t\t<ng-container *ngIf="data?.show">\n\t\t\t\t<cds-ai-label\n\t\t\t\t\tclass="ai-label-container"\n\t\t\t\t\tkind="default"\n\t\t\t\t\tsize="mini"\n\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\taiText="AI"\n\t\t\t\t\tariaLabel="Show information">\n\t\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t\t</cds-ai-label>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="true"\n\t\t\t[enableSingleSelect]="true"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true"\n\t\t\t[withRowAILabels]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelRadioSelectionStory);let TableAiLabelSelectionExpansionStory=class TableAiLabelSelectionExpansionStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"",sortable:!1}),new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:"Attached groups"}),new table_header_item_class.j({data:"Status"})];this.model.data=DEMO_ROWS.map(((cells,rowIndex)=>{const show=showSlugForRowIndex(rowIndex);return[new table_item_class.r({data:{show},template:this.rowSlugTpl,expandedData:"<h6>Expandable row content</h6><div>Description here</div>",hasAILabelDecorator:show,cellClassName:show?"cds--table-column-decorator cds--table-column-decorator--active":"cds--table-column-decorator"}),...cells.map((c=>new table_item_class.r({data:c})))]}))}};TableAiLabelSelectionExpansionStory.propDecorators={rowSlugTpl:[{type:core.ViewChild,args:["rowSlugTpl"]}]},TableAiLabelSelectionExpansionStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-selection-expansion",template:'\n\t\t<ng-template #rowSlugTpl let-data="data">\n\t\t\t<ng-container *ngIf="data?.show">\n\t\t\t\t<cds-ai-label\n\t\t\t\t\tclass="ai-label-container"\n\t\t\t\t\tkind="default"\n\t\t\t\t\tsize="mini"\n\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\taiText="AI"\n\t\t\t\t\tariaLabel="Show information">\n\t\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t\t</cds-ai-label>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="true"\n\t\t\t[showExpandAllToggle]="true"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true"\n\t\t\t[withRowAILabels]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelSelectionExpansionStory);let TableAiLabelExpansionOnlyStory=class TableAiLabelExpansionOnlyStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"",sortable:!1}),new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:"Attached groups"}),new table_header_item_class.j({data:"Status"})];this.model.data=DEMO_ROWS.map(((cells,rowIndex)=>{const show=showSlugForRowIndex(rowIndex);return[new table_item_class.r({data:{show},template:this.rowSlugTpl,expandedData:"<h6>Expandable row content</h6><div>Description here</div>",hasAILabelDecorator:show,cellClassName:show?"cds--table-column-decorator cds--table-column-decorator--active":"cds--table-column-decorator"}),...cells.map((c=>new table_item_class.r({data:c})))]}))}};TableAiLabelExpansionOnlyStory.propDecorators={rowSlugTpl:[{type:core.ViewChild,args:["rowSlugTpl"]}]},TableAiLabelExpansionOnlyStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-expansion-only",template:'\n\t\t<ng-template #rowSlugTpl let-data="data">\n\t\t\t<ng-container *ngIf="data?.show">\n\t\t\t\t<cds-ai-label\n\t\t\t\t\tclass="ai-label-container"\n\t\t\t\t\tkind="default"\n\t\t\t\t\tsize="mini"\n\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\taiText="AI"\n\t\t\t\t\tariaLabel="Show information">\n\t\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t\t</cds-ai-label>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="false"\n\t\t\t[showExpandAllToggle]="true"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true"\n\t\t\t[withRowAILabels]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelExpansionOnlyStory);let TableAiLabelColumnExpansionStory=class TableAiLabelColumnExpansionStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:{label:"Attached groups"},template:this.attachedGroupsHeaderTpl,sortable:!1,hasAILabelHeader:!0}),new table_header_item_class.j({data:"Status"})],this.model.data=DEMO_ROWS.map((cells=>[new table_item_class.r({data:cells[0],expandedData:"<h6>Expandable row content</h6><div>Description here</div>"}),new table_item_class.r({data:cells[1]}),new table_item_class.r({data:cells[2]}),new table_item_class.r({data:cells[3]}),new table_item_class.r({data:cells[4]}),new table_item_class.r({data:cells[5]})]))}};TableAiLabelColumnExpansionStory.propDecorators={attachedGroupsHeaderTpl:[{type:core.ViewChild,args:["attachedGroupsHeaderTpl"]}]},TableAiLabelColumnExpansionStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-column-expansion",template:'\n\t\t<ng-template #attachedGroupsHeaderTpl let-data="data">\n\t\t\t<cds-ai-label\n\t\t\t\tclass="ai-label-container"\n\t\t\t\tkind="default"\n\t\t\t\tsize="mini"\n\t\t\t\t[autoAlign]="true"\n\t\t\t\talign="bottom-end"\n\t\t\t\taiText="AI"\n\t\t\t\tariaLabel="Show information">\n\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t</cds-ai-label>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="true"\n\t\t\t[showExpandAllToggle]="true"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelColumnExpansionStory);let TableAiLabelColumnSortStory=class TableAiLabelColumnSortStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:{label:"Attached groups"},template:this.attachedGroupsHeaderTpl,hasAILabelHeader:!0}),new table_header_item_class.j({data:"Status"})],this.model.data=DEMO_ROWS.map((cells=>cells.map((c=>new table_item_class.r({data:c})))))}};TableAiLabelColumnSortStory.propDecorators={attachedGroupsHeaderTpl:[{type:core.ViewChild,args:["attachedGroupsHeaderTpl"]}]},TableAiLabelColumnSortStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-column-sort",template:'\n\t\t<ng-template #attachedGroupsHeaderTpl let-data="data">\n\t\t\t<cds-ai-label\n\t\t\t\tclass="ai-label-container"\n\t\t\t\tkind="default"\n\t\t\t\tsize="mini"\n\t\t\t\t[autoAlign]="true"\n\t\t\t\talign="bottom-end"\n\t\t\t\taiText="AI"\n\t\t\t\tariaLabel="Show information">\n\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t</cds-ai-label>\n\t\t</ng-template>\n\t\t<cds-table\n\t\t\t[model]="model"\n\t\t\tsize="md"\n\t\t\t[showSelectionColumn]="false"\n\t\t\t[striped]="true"\n\t\t\t[sortable]="true"\n\t\t\t[isDataGrid]="true">\n\t\t</cds-table>\n\t'})],TableAiLabelColumnSortStory);let TableAiLabelFullTableStory=class TableAiLabelFullTableStory{constructor(){this.model=new table_model_class.G}ngAfterViewInit(){this.model.header=[new table_header_item_class.j({data:"Name"}),new table_header_item_class.j({data:"Protocol"}),new table_header_item_class.j({data:"Port"}),new table_header_item_class.j({data:"Rule"}),new table_header_item_class.j({data:"Attached groups"}),new table_header_item_class.j({data:"Status"})],this.model.data=DEMO_ROWS.map((cells=>cells.map((c=>new table_item_class.r({data:c})))))}};TableAiLabelFullTableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-table-ai-label-full-table",template:'\n\t\t<cds-table-container class="ai-label-column-table" [aiEnabled]="true">\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>DataTable</h4>\n\t\t\t\t<p cdsTableHeaderDescription>AI, full table</p>\n\t\t\t\t<cds-table-header-decorator>\n\t\t\t\t\t<cds-ai-label\n\t\t\t\t\t\tclass="ai-label-container"\n\t\t\t\t\t\tkind="default"\n\t\t\t\t\t\tsize="xs"\n\t\t\t\t\t\t[autoAlign]="true"\n\t\t\t\t\t\taiText="AI"\n\t\t\t\t\t\tariaLabel="Show information">\n\t\t\t\t\t\t'+ai_label_story_shared.Ag+'\n\t\t\t\t\t</cds-ai-label>\n\t\t\t\t</cds-table-header-decorator>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table\n\t\t\t\t[model]="model"\n\t\t\t\tsize="md"\n\t\t\t\t[showSelectionColumn]="false"\n\t\t\t\t[striped]="true"\n\t\t\t\t[sortable]="true"\n\t\t\t\t[isDataGrid]="true">\n\t\t\t</cds-table>\n\t\t</cds-table-container>\n\t'})],TableAiLabelFullTableStory);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)}}]);