carbon-components-angular/docs/storybook/patterns-loading-progressive-loading-stories.717ad729.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[7840],{"./src/grid/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{iK:()=>ColumnDirective,lj:()=>GridDirective,zE:()=>GridModule,vZ:()=>RowDirective});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),BehaviorSubject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/BehaviorSubject.js");let GridService=class GridService{constructor(){this.gridSubject=new BehaviorSubject.X(!1),this.cssGridEnabled=!1,this.gridObservable=this.gridSubject.asObservable()}updateGridType(enableCssGrid){this.cssGridEnabled!==enableCssGrid&&(this.cssGridEnabled=!0,this.gridSubject.next(enableCssGrid))}};GridService.ctorParameters=()=>[],GridService=(0,tslib_es6.gn)([(0,core.Injectable)()],GridService);let ColumnDirective=class ColumnDirective{constructor(gridService){this.gridService=gridService,this.class="",this.columnNumbers={},this.offsets={},this.columnHang=!1,this._columnClasses=[],this.isCssGrid=!1,this.subscription=new Subscription.w0}get columnClasses(){return this._columnClasses.join(" ")}set columnClasses(classes){this._columnClasses=classes.split(" ")}ngOnInit(){this.gridService?this.subscription=this.gridService.gridObservable.subscribe((isCssGrid=>{this.isCssGrid=isCssGrid,this.updateColumnClasses()})):this.updateColumnClasses()}ngOnChanges(){this.updateColumnClasses()}ngOnDestroy(){this.subscription.unsubscribe()}updateColumnClasses(){try{this._columnClasses=[];const columnKeys=Object.keys(this.columnNumbers);this.isCssGrid?(this._columnClasses.push("cds--css-grid-column"),this.columnHang&&this._columnClasses.push("cds--grid-column-hang"),columnKeys.forEach((key=>{"auto"===this.columnNumbers[key]?this._columnClasses.push(`cds--${key}:col-span-auto`):"object"==typeof this.columnNumbers[key]?(this.columnNumbers[key].start&&this._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`),this.columnNumbers[key].end&&this._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`),this.columnNumbers[key].span&&this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`)):this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`)})),Object.keys(this.offsets).forEach((key=>{this._columnClasses.push(`cds--${key}:col-start${this.offsets[key]+1}`)}))):(columnKeys.length<=0&&this._columnClasses.push("cds--col"),columnKeys.forEach((key=>{"nobreak"===this.columnNumbers[key]?this._columnClasses.push(`cds--col-${key}`):this._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`)})),Object.keys(this.offsets).forEach((key=>{this._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`)})))}catch(err){console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`)}this.class&&this._columnClasses.push(this.class)}};ColumnDirective.ctorParameters=()=>[{type:GridService,decorators:[{type:core.Optional}]}],ColumnDirective.propDecorators={columnClasses:[{type:core.HostBinding,args:["class"]}],class:[{type:core.Input}],columnNumbers:[{type:core.Input}],offsets:[{type:core.Input}],columnHang:[{type:core.Input}]},ColumnDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsCol], [ibmCol]"})],ColumnDirective);let RowDirective=class RowDirective{constructor(){this.baseClass=!0,this.condensed=!1,this.narrow=!1}};RowDirective.propDecorators={baseClass:[{type:core.HostBinding,args:["class.cds--row"]}],condensed:[{type:core.HostBinding,args:["class.cds--row--condensed"]},{type:core.Input}],narrow:[{type:core.HostBinding,args:["class.cds--row--narrow"]},{type:core.Input}]},RowDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsRow], [ibmRow]"})],RowDirective);let GridDirective=class GridDirective{constructor(gridService){this.gridService=gridService,this.condensed=!1,this.narrow=!1,this.fullWidth=!1,this.cssGridEnabled=!1,this.isSubgrid=!1,this.subscription=new Subscription.w0}set useCssGrid(enable){this.cssGridEnabled=enable,this.gridService.updateGridType(enable)}get flexGrid(){return!this.cssGridEnabled}get flexCondensed(){return!this.cssGridEnabled&&this.condensed}get flexNarrow(){return!this.cssGridEnabled&&this.narrow}get flexFullWidth(){return!this.cssGridEnabled&&this.fullWidth}get ccsGrid(){return this.cssGridEnabled&&!this.isSubgrid}get ccsCondensed(){return this.cssGridEnabled&&!this.isSubgrid&&this.condensed}get ccsNarrow(){return this.cssGridEnabled&&!this.isSubgrid&&this.narrow}get ccsFullWidth(){return this.cssGridEnabled&&!this.isSubgrid&&this.fullWidth}get subGrid(){return this.cssGridEnabled&&this.isSubgrid}get subCondensed(){return this.cssGridEnabled&&this.isSubgrid&&this.condensed}get subNarrow(){return this.cssGridEnabled&&this.isSubgrid&&this.narrow}get subFullWidth(){return this.cssGridEnabled&&this.isSubgrid&&this.fullWidth}ngOnInit(){this.subscription=this.gridService.gridObservable.subscribe((isCssGrid=>{this.cssGridEnabled=isCssGrid}))}set cssGridChildren(list){this.cssGridEnabled&&list.forEach((grid=>{grid!==this&&(grid.isSubgrid=!0)}))}ngOnDestroy(){this.subscription.unsubscribe()}};GridDirective.ctorParameters=()=>[{type:GridService}],GridDirective.propDecorators={condensed:[{type:core.Input}],narrow:[{type:core.Input}],fullWidth:[{type:core.Input}],useCssGrid:[{type:core.Input}],flexGrid:[{type:core.HostBinding,args:["class.cds--grid"]}],flexCondensed:[{type:core.HostBinding,args:["class.cds--grid--condensed"]}],flexNarrow:[{type:core.HostBinding,args:["class.cds--grid--narrow"]}],flexFullWidth:[{type:core.HostBinding,args:["class.cds--grid--full-width"]}],ccsGrid:[{type:core.HostBinding,args:["class.cds--css-grid"]}],ccsCondensed:[{type:core.HostBinding,args:["class.cds--css-grid--condensed"]}],ccsNarrow:[{type:core.HostBinding,args:["class.cds--css-grid--narrow"]}],ccsFullWidth:[{type:core.HostBinding,args:["class.cds--css-grid--full-width"]}],subGrid:[{type:core.HostBinding,args:["class.cds--subgrid"]}],subCondensed:[{type:core.HostBinding,args:["class.cds--subgrid--condensed"]}],subNarrow:[{type:core.HostBinding,args:["class.cds--subgrid--narrow"]}],subFullWidth:[{type:core.HostBinding,args:["class.cds--subgrid--wide"]}],cssGridChildren:[{type:core.ContentChildren,args:[GridDirective,{descendants:!0}]}]},GridDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsGrid], [ibmGrid]",providers:[{provide:GridService,deps:[[new core.Optional,new core.SkipSelf,GridService]],useFactory:parentService=>parentService||new GridService}]})],GridDirective);let GridModule=class GridModule{};GridModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ColumnDirective,GridDirective,RowDirective],exports:[ColumnDirective,GridDirective,RowDirective],providers:[GridService],imports:[common.CommonModule]})],GridModule)},"./src/patterns/loading/progressive-loading.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ProgressiveLoading:()=>ProgressiveLoading,__namedExportsOrder:()=>__namedExportsOrder,default:()=>progressive_loading_stories});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js");var core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),table=__webpack_require__("./src/table/index.ts"),dropdown=__webpack_require__("./src/dropdown/index.ts"),grid=__webpack_require__("./src/grid/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),ui_shell=__webpack_require__("./src/ui-shell/index.ts");let SampleProgressiveLoading=class SampleProgressiveLoading{constructor(){this.model=new table.G0,this.skeletonStateTable=!0,this.skeletonStateDropdown=!0,this.placeholder=null,this.dataset=[{name:"Apple",type:"Fruit"},{name:"Grape",type:"Fruit"},{name:"Eggplant",type:"Fruit"},{name:"Lettuce",type:"Vegetable"},{name:"Daikon Radish",type:"Vegetable"},{name:"Beef",type:"Meat"}],this.items=[{content:"Vegetable"},{content:"Fruit"},{content:"Meat"}]}uninitializeData(){this.skeletonStateTable=!0,this.skeletonStateDropdown=!0,this.placeholder=null}loadScreen(){this.model.data=this.dataset.map((datapoint=>[new table.r8({}),new table.r8({})])),this.model.header=[new table.jr({data:""}),new table.jr({data:""})],setTimeout((()=>{this.skeletonStateDropdown=!1,this.placeholder="Type"}),2e3),setTimeout((()=>{this.skeletonStateTable=!1}),4e3),setTimeout((()=>{this.model.header=[new table.jr({data:"Name"}),new table.jr({data:"Description"})],this.model.data=this.dataset.map((datapoint=>[new table.r8({data:datapoint.name}),new table.r8({data:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."})]))}),4e3)}ngOnInit(){document.querySelector(".sb-show-main")?.classList.add("full-page"),this.loadScreen()}ngOnDestroy(){document.querySelector(".sb-show-main")?.classList.remove("full-page")}};SampleProgressiveLoading=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-sample-progressive-loading",template:'\n    <div cdsGrid>\n        <div cdsRow class="header">\n            <cds-header name="Patterns">\n                <cds-hamburger></cds-hamburger>\n            </cds-header>\n        </div>\n        <div cdsRow class="actions">\n            <div cdsCol [columnNumbers]="{\'lg\': 3, \'md\': 2, \'sm\': 1}">\n                <cds-dropdown\n                    label="Example 1"\n                    [skeleton]="skeletonStateDropdown"\n                    type="multi"\n                    [placeholder]="placeholder"\n                    inline="true">\n                    <cds-dropdown-list [items]="items"></cds-dropdown-list>\n                </cds-dropdown>\n            </div>\n\n            <div cdsCol [columnNumbers]="{\'lg\': 3, \'md\': 2, \'sm\': 1}">\n                <cds-dropdown\n                    label="Example 2"\n                    [skeleton]="skeletonStateDropdown"\n                    type="multi"\n                    [placeholder]="placeholder"\n                    inline="true">\n                    <cds-dropdown-list [items]="items"></cds-dropdown-list>\n                </cds-dropdown>\n            </div>\n\n            <div cdsCol [columnNumbers]="{\'lg\': 3, \'md\': 2, \'sm\': 1}">\n                <cds-dropdown\n                    label="Example 3"\n                    [skeleton]="skeletonStateDropdown"\n                    type="multi"\n                    [placeholder]="placeholder"\n                    inline="true">\n                    <cds-dropdown-list [items]="items"></cds-dropdown-list>\n                </cds-dropdown>\n            </div>\n\n            <div cdsCol [columnNumbers]="{\'lg\': 3, \'md\': 2, \'sm\': 1}">\n                <button cdsButton (click)="loadScreen(); uninitializeData()">Show Loading</button>\n            </div>\n        </div>\n        <div cdsRow>\n            <div cdsCol [columnNumbers]="{\'lg\': 12, \'md\': 12, \'sm\': 12}">\n                <cds-table-container>\n                    <cds-table\n                        class="data-table"\n                        [skeleton]="skeletonStateTable"\n                        [model]="model"\n                        size="lg"\n                        [showSelectionColumn]="false">\n                        <ng-content></ng-content>\n                    </cds-table>\n                </cds-table-container>\n            </div>\n        </div>\n    </div>\n    ',styles:["\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.actions {\n\t\t\tmargin-bottom: 40px;\n\t\t}\n\t\t"]})],SampleProgressiveLoading);const progressive_loading_stories={title:"Pattern/Loading",decorators:[(0,dist.moduleMetadata)({declarations:[SampleProgressiveLoading],imports:[table.U$,dropdown.kW,grid.zE,src_button.hJ,ui_shell.p5]})]},ProgressiveLoading=(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 as an example.\n        --\x3e\n        <app-sample-progressive-loading></app-sample-progressive-loading>\n    "})).bind({});ProgressiveLoading.parameters={...ProgressiveLoading.parameters,docs:{...ProgressiveLoading.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        \x3c!--\n            app-* components are for demo purposes only.\n            You can create your own implementation by using the component source as an example.\n        --\x3e\n        <app-sample-progressive-loading></app-sample-progressive-loading>\n    `\n})",...ProgressiveLoading.parameters?.docs?.source}}};const __namedExportsOrder=["ProgressiveLoading"]}}]);