carbon-components-angular/docs/storybook/patterns-loading-large-loading-stories.699b1e1b.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[972],{"./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/loading/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{g:()=>Loading,I:()=>LoadingModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Loading=class Loading{constructor(i18n){this.i18n=i18n,this.title=this.i18n.get().LOADING.TITLE,this.isActive=!0,this.size="normal",this.overlay=!1}};Loading.ctorParameters=()=>[{type:i18n.oc}],Loading.propDecorators={title:[{type:core.Input}],isActive:[{type:core.Input}],size:[{type:core.Input}],overlay:[{type:core.Input},{type:core.HostBinding,args:["class.cds--loading-overlay"]}]},Loading=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-loading, ibm-loading",template:'\n\t\t<div\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--loading--small\': size === \'sm\',\n\t\t\t\t\'cds--loading--stop\': !isActive && !overlay,\n\t\t\t\t\'cds--loading-overlay--stop\': !isActive && overlay\n\t\t\t}"\n\t\t\tclass="cds--loading">\n\t\t\t<svg class="cds--loading__svg" viewBox="0 0 100 100">\n\t\t\t\t<title>{{title}}</title>\n\t\t\t\t<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />\n\t\t\t</svg>\n\t\t</div>\n\t'})],Loading);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LoadingModule=class LoadingModule{};LoadingModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Loading],exports:[Loading],imports:[common.CommonModule,i18n.LU]})],LoadingModule)},"./src/placeholder/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Qq:()=>PlaceholderModule,Q_:()=>PlaceholderService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let PlaceholderService=class PlaceholderService{constructor(){this.viewContainerRef=null,this.viewContainerMap=new Map}registerViewContainerRef(vcRef,id){id?this.viewContainerMap.set(id,vcRef):this.viewContainerRef=vcRef}createComponent(component,injector,id){return id?this.viewContainerMap.has(id)?this.viewContainerMap.get(id).createComponent(component,{index:this.viewContainerMap.size,injector}):void console.error(`No view container with id ${id} found`):this.viewContainerRef?this.viewContainerRef.createComponent(component,{index:this.viewContainerRef.length,injector}):void console.error("No view container defined! Likely due to a missing `cds-placeholder`")}destroyComponent(component){component.destroy()}hasComponentRef(component,id){return id?!(this.viewContainerMap.get(id).indexOf(component.hostView)<0):!(this.viewContainerRef.indexOf(component.hostView)<0)}hasPlaceholderRef(id){return id?this.viewContainerMap.has(id):!!this.viewContainerRef}appendElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.appendChild(element):this.viewContainerRef.element.nativeElement.appendChild(element)}removeElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.removeChild(element):this.viewContainerRef.element.nativeElement.removeChild(element)}hasElement(element,id){return id?this.viewContainerMap.get(id).element.nativeElement.contains(element):this.viewContainerRef.element.nativeElement.contains(element)}};PlaceholderService=(0,tslib_es6.gn)([(0,core.Injectable)()],PlaceholderService);let Placeholder=class Placeholder{constructor(placeholderService){this.placeholderService=placeholderService}ngOnInit(){this.placeholderService.registerViewContainerRef(this.viewContainerRef)}};Placeholder.ctorParameters=()=>[{type:PlaceholderService}],Placeholder.propDecorators={id:[{type:core.Input}],viewContainerRef:[{type:core.ViewChild,args:["placeholder",{read:core.ViewContainerRef,static:!0}]}]},Placeholder=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-placeholder, ibm-placeholder",template:"<div #placeholder></div>"})],Placeholder);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");const PLACEHOLDER_SERVICE_PROVIDER={provide:PlaceholderService,deps:[[new core.Optional,new core.SkipSelf,PlaceholderService]],useFactory:function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new PlaceholderService}};let PlaceholderModule=class PlaceholderModule{};PlaceholderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Placeholder],exports:[Placeholder],providers:[PLACEHOLDER_SERVICE_PROVIDER],imports:[common.CommonModule]})],PlaceholderModule)},"./src/progress-indicator/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y:()=>ProgressIndicator,_:()=>ProgressIndicatorModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let ProgressIndicator=class ProgressIndicator{constructor(i18n){this.i18n=i18n,this.stepSelected=new core.EventEmitter,this.translations=this.i18n.get().PROGRESS_INDICATOR,this.orientation="horizontal",this.skeleton=!1,this.spacing="default",this.statusIcons={current:"incomplete",complete:"checkmark--outline",invalid:"warning",incomplete:"circle-dash"}}get current(){return this._current}set current(current){this._current=current,this.setProgressIndicatorStates()}static skeletonSteps(stepCount){const steps=[];for(let i=0;i<stepCount;i++)steps.push({complete:!1});return steps}onClick(index){index!==this.current&&"function"==typeof this.steps[index].onClick&&this.steps[index].onClick(),this.stepSelected.emit({step:this.steps[index],index})}getCurrentState(index){return index===this.current?"current":this.steps[index].invalid?"invalid":this.steps[index].complete?"complete":"incomplete"}setProgressIndicatorStates(){void 0!==this.steps&&this.steps.forEach(((step,index)=>{index<this.current?step.complete=!0:step.complete=!1}))}};ProgressIndicator.ctorParameters=()=>[{type:i18n.oc}],ProgressIndicator.propDecorators={current:[{type:core.Input}],steps:[{type:core.Input}],stepSelected:[{type:core.Output}],translations:[{type:core.Input}],orientation:[{type:core.Input}],skeleton:[{type:core.Input}],spacing:[{type:core.Input}]},ProgressIndicator=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-progress-indicator, ibm-progress-indicator",template:'\n\t<ul\n\t\tdata-progress\n\t\tdata-progress-current\n\t\tclass="cds--progress"\n\t\t[ngClass]="{\n\t\t\t\'cds--skeleton\': skeleton,\n\t\t\t\'cds--progress--vertical\': (orientation === \'vertical\'),\n\t\t\t\'cds--progress--space-equal\': spacing === \'equal\' && orientation !== \'vertical\'\n\t\t}">\n\t\t<li\n\t\t\tclass="cds--progress-step"\n\t\t\t*ngFor="let step of steps; let i = index"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--progress-step--disabled\' : step.disabled,\n\t\t\t\t\'cds--progress-step--complete\' : step.complete,\n\t\t\t\t\'cds--progress-step--incomplete\' : !step.complete && i !== current,\n\t\t\t\t\'cds--progress-step--current\': i === current\n\t\t\t}">\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--progress-step-button"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--progress-step-button--unclickable\': !step.onClick || current === i\n\t\t\t\t}"\n\t\t\t\t[disabled]="step.disabled"\n\t\t\t\t[attr.aria-disabled]="step.disabled"\n\t\t\t\t[tabindex]="(current !== i && step.onClick && !step.disabled) ? 0 : -1"\n\t\t\t\t[title]="step.label"\n\t\t\t\t(click)="onClick(i)">\n\t\t\t\t<span class="cds--assistive-text">\n\t\t\t\t\t{{this.translations[getCurrentState(i)?.toUpperCase()]}}\n\t\t\t\t</span>\n\t\t\t\t<svg\n\t\t\t\t\t[cdsIcon]="statusIcons[getCurrentState(i)]"\n\t\t\t\t\tsize="16"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--progress__warning\': step.invalid && i !== current\n\t\t\t\t\t}">\n\t\t\t\t\t<title *ngIf="step.description">{{step.description}}</title>\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--progress-text">\n\t\t\t\t\t<p class="cds--progress-label">{{step.label}}</p>\n\t\t\t\t\t<p *ngIf="step.secondaryLabel" class="cds--progress-optional">{{step.secondaryLabel}}</p>\n\t\t\t\t</div>\n\t\t\t\t<span class="cds--progress-line"></span>\n\t\t\t</button>\n\t\t</li>\n\t</ul>\n\t'})],ProgressIndicator);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ProgressIndicatorModule=class ProgressIndicatorModule{};ProgressIndicatorModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ProgressIndicator],exports:[ProgressIndicator],imports:[common.CommonModule,icon.QX,i18n.LU]})],ProgressIndicatorModule)},"./src/patterns/loading/large-loading.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{LargeLoading:()=>LargeLoading,__namedExportsOrder:()=>__namedExportsOrder,default:()=>large_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"),grid=__webpack_require__("./src/grid/index.ts"),ui_shell=__webpack_require__("./src/ui-shell/index.ts"),progress_indicator=__webpack_require__("./src/progress-indicator/index.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),input=__webpack_require__("./src/input/index.ts"),dropdown=__webpack_require__("./src/dropdown/index.ts"),loading=__webpack_require__("./src/loading/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let SampleLargeLoading=class SampleLargeLoading{constructor(){this.isLoading=!1,this.overlay=!1,this.formGroup=new fesm2020_forms.cw({input:new fesm2020_forms.NI("",[fesm2020_forms.kI.required]),textArea:new fesm2020_forms.NI("",[fesm2020_forms.kI.required]),dropdown:new fesm2020_forms.NI("",[fesm2020_forms.kI.required])}),this.steps=[{text:"First step",state:["complete"]},{text:"Second step",state:["complete"],tooltip:{content:"Overflow tooltip content.",trigger:"click",placement:"bottom"}},{text:"Third step",state:["current"],tooltip:{content:"Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n                    Animi consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste\n                    blanditiis cumque maxime tenetur veniam est illo deserunt sint quae pariatur.\n                    Laboriosam, consequatur.",trigger:"click",placement:"bottom"}},{text:"Fourth step",state:["incomplete"]},{text:"Fifth step",state:["incomplete"]}],this.items=[{content:"Option 1"},{content:"Option 2"},{content:"Option 3"},{content:"Option 4"},{content:"Option 5"}]}onSubmit(){if(this.isLoading=!0,this.overlay=!0,setTimeout((()=>{this.isLoading=!1,this.overlay=!1}),2e3),this.formGroup.invalid){[].slice.call(document.getElementsByClassName("ng-invalid"))[1].focus()}}isInvalid(controlName){const control=this.formGroup.get(controlName);return control&&control.invalid&&(control.dirty||control.touched)}};SampleLargeLoading=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-sample-large-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="progress-indicator-wrapper">\n            <cds-progress-indicator [steps]="steps"></cds-progress-indicator>\n        </div>\n        <div cdsRow class="form">\n            <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">\n                <div class="cds--form-item">\n                    <cds-label\n                        helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"\n                        [invalid]="isInvalid(\'input\')"\n                        invalidText="Please enter a response">\n                        Text input label\n                        <input\n                            cdsText\n                            formControlName="input"\n                            placeholder="Optional placeholder text">\n                    </cds-label>\n                </div>\n                <div class="cds--form-item">\n                    <cds-label\n                        helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"\n                        [invalid]="isInvalid(\'textArea\')"\n                        invalidText="Please enter a response">\n                        Text input label\n                        <textarea\n                            cdsTextArea\n                            formControlName="textArea"\n                            placeholder="Optional placeholder text">\n                        </textarea>\n                    </cds-label>\n                </div>\n                <div class="cds--form-item">\n                    <div class="dropdown-wrapper">\n                        <cds-dropdown\n                            label="Choose one option"\n                            [invalid]="isInvalid(\'dropdown\')"\n                            invalidText="Please choose an option"\n                            placeholder="Select an option"\n                            formControlName="dropdown">\n                            <cds-dropdown-list [items]="items"></cds-dropdown-list>\n                        </cds-dropdown>\n                    </div>\n                </div>\n                <div class="cds--form-item">\n                    <button\n                        class="form-button"\n                        cdsButton\n                        type="submit">\n                        Show Loading\n                    </button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <cds-loading\n        *ngIf="isLoading"\n        [isActive]="isLoading"\n        size="normal"\n        [overlay]="overlay">\n    </cds-loading>\n    ',styles:["\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.progress-indicator-wrapper {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\n\t\t.dropdown-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\t"]})],SampleLargeLoading);const large_loading_stories={title:"Pattern/Loading",decorators:[(0,dist.moduleMetadata)({declarations:[SampleLargeLoading],imports:[dropdown.kW,grid.zE,ui_shell.p5,progress_indicator._,placeholder.Qq,input.gP,loading.I,fesm2020_forms.u5,fesm2020_forms.UX,src_button.hJ]})]},LargeLoading=(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-large-loading></app-sample-large-loading>\n    "})).bind({});LargeLoading.parameters={...LargeLoading.parameters,docs:{...LargeLoading.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-large-loading></app-sample-large-loading>\n    `\n})",...LargeLoading.parameters?.docs?.source}}};const __namedExportsOrder=["LargeLoading"]}}]);