text: (window.webpackJsonp=window.webpackJsonp||[]).push([[21],{"8jj9":function(l,n,e){"use strict";e.r(n);var u=e("8Y7J");class t{constructor(){}ngOnInit(){}}class a{constructor(){}ngOnInit(){}}class o{constructor(){}ngOnInit(){}}class d{constructor(){this.sampleTextShellData=""}ngOnInit(){}}var i=e("l5mm"),s=e("PqYM"),r=e("1G5W"),c=e("nYR2"),p=e("IzEk"),h=e("5e4S");class g{constructor(l){this.showcaseService=l,this.simpleFetchButtonDisabled=!0,this.simpleFetchCountdown=0}ngOnInit(){this.showcaseShellSimpleFetch(10)}showcaseShellSimpleFetch(l){this.simpleFetchData=null,this.simpleFetchButtonDisabled=!0,this.simpleFetchCountdown=l,this.simpleFetchInterval=Object(i.a)(1e3);const n=Object(s.a)(1e3*l);this.simpleFetchInterval.pipe(Object(r.a)(n),Object(c.a)(()=>this.simpleFetchButtonDisabled=!1)).subscribe({next:()=>{this.simpleFetchCountdown--},complete:()=>{this.simpleFetchCountdown=0,this.showcaseService.getSimpleDataSource().pipe(Object(p.a)(1)).subscribe(l=>{console.log("Fetching shell data using the HttpClient",l),this.simpleFetchData=l})}})}}var m=e("wwno"),f=e("f/Ol");class b{constructor(l){this.showcaseService=l,this.dataStoreButtonDisabled=!0}ngOnInit(){this.showcaseDataStore()}showcaseDataStore(){this.dataStoreButtonDisabled=!0;const l=this.showcaseService.getSimpleDataSource(),n=new m.e,e=new f.a(n);e.load(l),e.state.pipe(Object(p.a)(2),Object(c.a)(()=>this.dataStoreButtonDisabled=!1)).subscribe(l=>{this.dataStoreData=l})}}class v{constructor(l){this.showcaseService=l}get isShell(){return!(!this.data||!this.data.isShell)}ngOnInit(){const l=this.showcaseService.getListDataSource(),n=[new m.f,new m.f,new m.f];this.dataStore=new f.a(n),this.dataStore.load(l),this.dataStore.state.subscribe(l=>{this.data=l})}}class x{constructor(l){this.showcaseService=l}ngOnInit(){const l=this.showcaseService.getUserSubsetData(2),n=new m.c;this.companyDataStore=new f.a(n),this.companyDataStore.load(l),this.companyDataStore.state.subscribe(l=>{this.company=l})}}class w{constructor(l){this.showcaseService=l}ngOnInit(){const l=this.showcaseService.getCombinedTasksUserDataSource(),n=[new m.a,new m.a,new m.a,new m.a];this.tasksCombinedDataStore=new f.a(n),this.tasksCombinedDataStore.load(l),this.tasksCombinedDataStore.state.subscribe(l=>{this.tasks=l})}}var y=e("nfFl"),C=e("8zxt");class k{constructor(l){this.showcaseService=l}ngOnInit(){const l=this.showcaseService.getMultipleDataSourceA(),n=this.showcaseService.getMultipleDataSourceB(),e=new C.a;this.dataStoreA=new f.a(e),this.dataStoreA.load(l),this.dataStoreA.state.subscribe(l=>{this.dataA=l});const u=new y.a;this.dataStoreB=new f.a(u),this.dataStoreB.load(n),this.dataStoreB.state.subscribe(l=>{this.dataB=l})}}var R=e("XNiG"),D=e("VRyK"),O=e("eIep");class P{constructor(l){this.showcaseService=l,this.loadMorePages=!0,this.currentPage=0,this.triggerNewPageLoading=new R.a,this.newPageTriggerObservable=this.triggerNewPageLoading.asObservable()}ngOnInit(){const l=this.showcaseService.getPaginationDataSource(1);if(!this.remoteApiDataStore){const n=[new m.f,new m.f];this.remoteApiDataStore=new f.a(n),this.remoteApiDataStore.load(l)}const n=this.newPageTriggerObservable.pipe(Object(O.a)(l=>{const n=this.showcaseService.getPaginationDataSource(l),e=[new m.f,new m.f,new m.f];return f.a.AppendShell(n,e,400)}));Object(D.a)(this.remoteApiDataStore.state,n).subscribe(l=>{console.log("result",l),!l.isShell&&l.length>0&&this.currentPage++,this.loadMorePages&&(this.pagedUsers=l),4===this.currentPage&&(this.loadMorePages=!1)})}getNextPageUsers(){this.triggerNewPageLoading.next(this.currentPage+1)}}var E=e("LRne");class L{constructor(l){this.showcaseService=l,this.stackedUsers=[],this.shellUsers=[],this.triggerNewItemsLoading=new R.a,this.newItemsTriggerObservable=this.triggerNewItemsLoading.asObservable()}ngOnInit(){const l=this.showcaseService.getOpenDataStream();if(!this.openDataStore){const n=[new m.f,new m.f,new m.f,new m.f];this.openDataStore=new f.a(n),this.openDataStore.load(l)}const n=this.newItemsTriggerObservable.pipe(Object(O.a)(()=>{const l=this.showcaseService.getStackedValuesDataSource(),n=[new m.f,new m.f];return f.a.AppendShell(l,n,400)}));Object(D.a)(this.openDataStore.state,n).subscribe(l=>{if(console.log("data",l),l.isShell){const n=[...l].map(l=>Object(E.a)(l));this.shellUsers=n}else{this.shellUsers=[];const n=[...l].map(l=>f.a.AppendShell(Object(E.a)(l),new m.f,400));this.stackedUsers.push(...n)}})}loadStackedResults(){this.triggerNewItemsLoading.next()}pushValuesToOpenStream(){this.showcaseService.pushValuesToOpenStream()}}class M{constructor(l){this.showcaseService=l}ngOnInit(){const l=this.showcaseService.getDependantDataSourcePost(),n=new m.d;this.postDataStore=new f.a(n),this.postDataStore.load(l),this.postDataStore.state.subscribe(l=>{this.post=l});const e=[new m.b,new m.b,new m.b],u=this.showcaseService.getDependantDataSourcePostComments(this.postDataStore.state);this.commentsDataStore=new f.a(e),this.commentsDataStore.load(u),this.commentsDataStore.state.subscribe(l=>{this.comments=l})}}class N{}var S=e("pMnS"),_=e("MKJQ"),F=e("sZkV"),I=e("iInd"),T=e("SVse"),Z=e("6LEC"),z=e("2gss"),H=e("M4wD"),A=e("B7gC"),B=e("TAV1"),j=e("zK/y"),$=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function Y(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,10,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,8,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,3,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,1,"ion-menu-button",[],null,null,null,_.pb,_.w)),u["\u0275did"](7,49152,null,0,F.R,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](8,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](9,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" App Shell "])),(l()(),u["\u0275eld"](11,0,null,null,197,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](12,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](13,0,null,0,13,"section",[["class","showcase-section"],["style","margin-bottom: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](14,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" After analyzing multiple use cases, we realized most UIs can be deconstructed into two data bindable element primitives: "])),(l()(),u["\u0275eld"](16,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["text"])),(l()(),u["\u0275ted"](-1,null,[" and "])),(l()(),u["\u0275eld"](19,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["images"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](22,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" These "])),(l()(),u["\u0275eld"](24,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Shell Elements"])),(l()(),u["\u0275ted"](-1,null,[" are the building blocks to display loading states. "])),(l()(),u["\u0275eld"](27,0,null,0,4,"ion-item-divider",[["sticky","true"]],null,null,null,_.jb,_.q)),u["\u0275did"](28,49152,null,0,F.I,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{sticky:[0,"sticky"]},null),(l()(),u["\u0275eld"](29,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](30,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Shell Elements"])),(l()(),u["\u0275eld"](32,0,null,0,25,"ion-list",[],null,null,null,_.ob,_.t)),u["\u0275did"](33,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](34,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,36).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,38).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](35,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](36,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](37,1),u["\u0275did"](38,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](39,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](40,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Aspect Ratio"])),(l()(),u["\u0275eld"](42,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,44).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,46).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](43,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](44,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](45,1),u["\u0275did"](46,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](47,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](48,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Image Shell"])),(l()(),u["\u0275eld"](50,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,52).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,54).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](51,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](52,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](53,1),u["\u0275did"](54,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](55,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](56,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Text Shell"])),(l()(),u["\u0275eld"](58,0,null,0,28,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](59,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can combine the different shell elements in multiple ways to fit your needs "])),(l()(),u["\u0275eld"](61,0,null,null,25,"ion-row",[["style","background-color: #FFF; padding: 10px; margin: 20px;"]],null,null,null,_.wb,_.C)),u["\u0275did"](62,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](63,0,null,0,8,"ion-col",[["size","12"]],null,null,null,_.ab,_.g)),u["\u0275did"](64,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](65,0,null,0,6,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](66,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"]},null),(l()(),u["\u0275eld"](67,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](68,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](69,{w:0,h:1}),(l()(),u["\u0275eld"](70,0,null,0,1,"h4",[["style","margin: 10px; text-align: center;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Text on top of a background-image container"])),(l()(),u["\u0275eld"](72,0,null,0,6,"ion-col",[["size","4"]],null,null,null,_.ab,_.g)),u["\u0275did"](73,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](74,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](75,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](76,{w:0,h:1}),(l()(),u["\u0275eld"](77,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](78,49152,null,0,z.a,[u.PLATFORM_ID],{alt:[0,"alt"]},null),(l()(),u["\u0275eld"](79,0,null,0,7,"ion-col",[["size","8"]],null,null,null,_.ab,_.g)),u["\u0275did"](80,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](81,0,null,0,2,"h3",[["style","margin-top: 0px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](82,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](83,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](84,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](85,0,null,null,1,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](86,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](87,0,null,0,12,"section",[["class","showcase-section"],["style","margin-bottom: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](88,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" By following the reactive programming paradigm to handle asynchronous data streams, we can use "])),(l()(),u["\u0275eld"](90,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Observables"])),(l()(),u["\u0275ted"](-1,null,[" to manage the different states (loading / loaded) of the data binded to our shell elements. "])),(l()(),u["\u0275eld"](93,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](94,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" If you are new to reactive programming in Javascript, I strongly recommend you to read "])),(l()(),u["\u0275eld"](97,0,null,null,1,"a",[["href","https://dev.to/sagar/reactive-programming-in-javascript-with-rxjs-4jom"],["target","_blank"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["this guide"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](100,0,null,0,4,"ion-item-divider",[["sticky","true"]],null,null,null,_.jb,_.q)),u["\u0275did"](101,49152,null,0,F.I,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{sticky:[0,"sticky"]},null),(l()(),u["\u0275eld"](102,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](103,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Simple Data Binding"])),(l()(),u["\u0275eld"](105,0,null,0,9,"ion-list",[],null,null,null,_.ob,_.t)),u["\u0275did"](106,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](107,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,109).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,111).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](108,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](109,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](110,1),u["\u0275did"](111,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](112,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](113,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Data Binding using plain Observables"])),(l()(),u["\u0275eld"](115,0,null,0,16,"section",[["class","showcase-section"],["style","margin-bottom: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](116,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can go a step further and use our "])),(l()(),u["\u0275eld"](118,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["DataStore"])),(l()(),u["\u0275ted"](-1,null,[" class which provides extra functionalities to plain Observables. "])),(l()(),u["\u0275eld"](121,0,null,null,10,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The main responsability of the "])),(l()(),u["\u0275eld"](123,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["DataStore"])),(l()(),u["\u0275ted"](-1,null,[" is to store the data stream in a "])),(l()(),u["\u0275eld"](126,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["timeline"])),(l()(),u["\u0275ted"](-1,null,[" property and append shell values to the Observable data sources through the "])),(l()(),u["\u0275eld"](129,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["AppendShell"])),(l()(),u["\u0275ted"](-1,null,[" static method. "])),(l()(),u["\u0275eld"](132,0,null,0,4,"ion-item-divider",[["sticky","true"]],null,null,null,_.jb,_.q)),u["\u0275did"](133,49152,null,0,F.I,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{sticky:[0,"sticky"]},null),(l()(),u["\u0275eld"](134,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](135,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Data Binding with DataStore"])),(l()(),u["\u0275eld"](137,0,null,0,65,"ion-list",[],null,null,null,_.ob,_.t)),u["\u0275did"](138,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](139,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,141).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,143).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](140,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](141,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](142,1),u["\u0275did"](143,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](144,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](145,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Basic"])),(l()(),u["\u0275eld"](147,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,149).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,151).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](148,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](149,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](150,1),u["\u0275did"](151,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](152,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](153,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["List"])),(l()(),u["\u0275eld"](155,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,157).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,159).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](156,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](157,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](158,1),u["\u0275did"](159,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](160,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](161,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Filtered Data Source"])),(l()(),u["\u0275eld"](163,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,165).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,167).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](164,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](165,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](166,1),u["\u0275did"](167,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](168,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](169,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Combined Data Sources"])),(l()(),u["\u0275eld"](171,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,173).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,175).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](172,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](173,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](174,1),u["\u0275did"](175,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](176,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](177,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Multiple Data Stores"])),(l()(),u["\u0275eld"](179,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,181).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,183).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](180,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](181,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](182,1),u["\u0275did"](183,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](184,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](185,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Dependant Data Sources"])),(l()(),u["\u0275eld"](187,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,189).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,191).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](188,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](189,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](190,1),u["\u0275did"](191,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](192,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](193,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Pagination"])),(l()(),u["\u0275eld"](195,0,null,0,7,"ion-item",[["detail","true"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,197).onClick()&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,199).onClick(e)&&t),t}),_.lb,_.p)),u["\u0275did"](196,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{detail:[0,"detail"]},null),u["\u0275did"](197,16384,null,0,I.n,[I.m,I.a,[8,null],u.Renderer2,u.ElementRef],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](198,1),u["\u0275did"](199,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),(l()(),u["\u0275eld"](200,0,null,0,2,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](201,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Stacked Shells"])),(l()(),u["\u0275eld"](203,0,null,0,5,"section",[["class","showcase-section"],["style","margin-bottom: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](204,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We double down on adding as many examples as possible on how to use the "])),(l()(),u["\u0275eld"](206,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["App Shell"])),(l()(),u["\u0275ted"](-1,null,[". However, if you have a use case that doesn't fall under the examples list, please let us know so we can keep improving the product. "]))],(function(l,n){l(n,3,0,"primary"),l(n,28,0,"true"),l(n,35,0,"true");var e=l(n,37,0,"/showcase/app-shell/aspect-ratio");l(n,36,0,e),l(n,38,0),l(n,43,0,"true");var u=l(n,45,0,"/showcase/app-shell/image-shell");l(n,44,0,u),l(n,46,0),l(n,51,0,"true");var t=l(n,53,0,"/showcase/app-shell/text-shell");l(n,52,0,t),l(n,54,0),l(n,64,0,"12"),l(n,66,0,"cover");var a=l(n,69,0,2,1);l(n,68,0,a),l(n,73,0,"4");var o=l(n,76,0,1,1);l(n,75,0,o),l(n,78,0,"Sample Image"),l(n,80,0,"8"),l(n,101,0,"true"),l(n,108,0,"true");var d=l(n,110,0,"/showcase/app-shell/simple-data-binding");l(n,109,0,d),l(n,111,0),l(n,133,0,"true"),l(n,140,0,"true");var i=l(n,142,0,"/showcase/app-shell/data-store-basic");l(n,141,0,i),l(n,143,0),l(n,148,0,"true");var s=l(n,150,0,"/showcase/app-shell/data-store-list");l(n,149,0,s),l(n,151,0),l(n,156,0,"true");var r=l(n,158,0,"/showcase/app-shell/data-store-subset");l(n,157,0,r),l(n,159,0),l(n,164,0,"true");var c=l(n,166,0,"/showcase/app-shell/data-store-combined");l(n,165,0,c),l(n,167,0),l(n,172,0,"true");var p=l(n,174,0,"/showcase/app-shell/data-store-multiple");l(n,173,0,p),l(n,175,0),l(n,180,0,"true");var h=l(n,182,0,"/showcase/app-shell/data-store-dependant");l(n,181,0,h),l(n,183,0),l(n,188,0,"true");var g=l(n,190,0,"/showcase/app-shell/data-store-pagination");l(n,189,0,g),l(n,191,0),l(n,196,0,"true");var m=l(n,198,0,"/showcase/app-shell/data-store-stacked");l(n,197,0,m),l(n,199,0)}),(function(l,n){l(n,65,0,u["\u0275nov"](n,66).imageLoaded,u["\u0275nov"](n,66).backgroundImage,u["\u0275nov"](n,66).display),l(n,67,0,u["\u0275nov"](n,68).ratioPadding),l(n,74,0,u["\u0275nov"](n,75).ratioPadding),l(n,77,0,u["\u0275nov"](n,78).imageLoaded,u["\u0275nov"](n,78).backgroundImage,u["\u0275nov"](n,78).display),l(n,82,0,u["\u0275nov"](n,83).textLoaded),l(n,85,0,u["\u0275nov"](n,86).textLoaded)}))}function V(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-showcase-shell",[],null,null,null,Y,$)),u["\u0275did"](1,114688,null,0,t,[],null,null)],(function(l,n){l(n,1,0)}),null)}var G=u["\u0275ccf"]("app-showcase-shell",t,V,{},{},[]),J=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function W(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" Aspect Ratio "])),(l()(),u["\u0275eld"](12,0,null,null,37,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,35,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The "])),(l()(),u["\u0275eld"](17,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,[" is a simple component that ensures a block will maintain the specified aspect ratio. "])),(l()(),u["\u0275eld"](20,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" It uses an "])),(l()(),u["\u0275eld"](22,0,null,null,1,"a",[["href","http://stackoverflow.com/a/10441480/1116959"],["target","_blank"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["old CSS technique"])),(l()(),u["\u0275ted"](-1,null,[" to adjust the height of the element based on its width (using padding-bottom). "])),(l()(),u["\u0275eld"](25,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This is a very handy component to prevent content from jumping around while the page is loading. "])),(l()(),u["\u0275eld"](27,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](28,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" The "])),(l()(),u["\u0275eld"](31,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,[" component must be surrounded by a container element with a defined width, as this component will fill the parent width. "])),(l()(),u["\u0275eld"](34,0,null,null,6,"pre",[],null,null,null,null,null)),(l()(),u["\u0275eld"](35,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<div style="width:80%; margin: 0px auto;">'])),(l()(),u["\u0275ted"](-1,null,['\n  <app-aspect-ratio [ratio]="{w:2, h:1}">\n    <span>This container will always have a 2:1 aspect ratio</span>\n  </app-aspect-ratio>\n'])),(l()(),u["\u0275eld"](38,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["</div>"])),(l()(),u["\u0275ted"](-1,null,["\n"])),(l()(),u["\u0275eld"](41,0,null,null,8,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](42,0,null,null,7,"app-aspect-ratio",[["style","background-color: #00AFFF;"]],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](43,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](44,{w:0,h:1}),(l()(),u["\u0275eld"](45,0,null,0,4,"span",[["style","margin: 10px; display: block;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["This container will always have a "])),(l()(),u["\u0275eld"](47,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["2:1"])),(l()(),u["\u0275ted"](-1,null,[" aspect ratio"]))],(function(l,n){l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell");var e=l(n,44,0,2,1);l(n,43,0,e)}),(function(l,n){l(n,42,0,u["\u0275nov"](n,43).ratioPadding)}))}function q(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-aspect-ratio-page",[],null,null,null,W,J)),u["\u0275did"](1,114688,null,0,a,[],null,null)],(function(l,n){l(n,1,0)}),null)}var K=u["\u0275ccf"]("app-aspect-ratio-page",a,q,{},{},[]),U=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function X(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" Image Shell "])),(l()(),u["\u0275eld"](12,0,null,null,350,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,2,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This component enables to preload an image with an elegant shell. "])),(l()(),u["\u0275eld"](17,0,null,0,49,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](18,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Set different animation options"])),(l()(),u["\u0275eld"](20,0,null,null,10,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can choose between "])),(l()(),u["\u0275eld"](22,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["no animation"])),(l()(),u["\u0275ted"](-1,null,[" (default), "])),(l()(),u["\u0275eld"](25,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["spinner animation"])),(l()(),u["\u0275ted"](-1,null,[", and "])),(l()(),u["\u0275eld"](28,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["gradient background"])),(l()(),u["\u0275ted"](-1,null,[" animation "])),(l()(),u["\u0275eld"](31,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["No animation (default)"])),(l()(),u["\u0275eld"](33,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-image-shell [src]="" [alt]=""></app-image-shell>\n'])),(l()(),u["\u0275eld"](35,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](36,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](37,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](38,{w:0,h:1}),(l()(),u["\u0275eld"](39,0,null,0,1,"app-image-shell",[],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](40,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](41,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Spinner animation"])),(l()(),u["\u0275eld"](43,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-image-shell "])),(l()(),u["\u0275eld"](45,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="spinner"'])),(l()(),u["\u0275ted"](-1,null,[' [src]="" [alt]=""></app-image-shell>\n'])),(l()(),u["\u0275eld"](48,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](49,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](50,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](51,{w:0,h:1}),(l()(),u["\u0275eld"](52,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](53,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](54,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Gradient animation"])),(l()(),u["\u0275eld"](56,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-image-shell "])),(l()(),u["\u0275eld"](58,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="gradient"'])),(l()(),u["\u0275ted"](-1,null,[' [src]="" [alt]=""></app-image-shell>\n'])),(l()(),u["\u0275eld"](61,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](62,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](63,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](64,{w:0,h:1}),(l()(),u["\u0275eld"](65,0,null,0,1,"app-image-shell",[["animation","gradient"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](66,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](67,0,null,0,20,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](68,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can add/remove the following "])),(l()(),u["\u0275eld"](70,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Classes"])),(l()(),u["\u0275ted"](-1,null,[" to adjust the shell element behavior: "])),(l()(),u["\u0275eld"](73,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Overlay"])),(l()(),u["\u0275eld"](75,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This class adds a background overlay after the image has loaded. "])),(l()(),u["\u0275eld"](77,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-image-shell animation="spinner" '])),(l()(),u["\u0275eld"](79,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['class="add-overlay"'])),(l()(),u["\u0275ted"](-1,null,[" [src]=\"''./assets/sample-images/travel/Travel2-64.47.png''\" [alt]=\"\"></app-image-shell>\n"])),(l()(),u["\u0275eld"](82,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](83,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](84,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](85,{w:0,h:1}),(l()(),u["\u0275eld"](86,0,null,0,1,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](87,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"]},null),(l()(),u["\u0275eld"](88,0,null,0,74,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](89,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can also override these "])),(l()(),u["\u0275eld"](91,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["CSS 4 variables"])),(l()(),u["\u0275ted"](-1,null,[" to adjust the shell element style "])),(l()(),u["\u0275eld"](94,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Background"])),(l()(),u["\u0275eld"](96,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-image-shell {\n  --image-shell-loading-background: rgba(233, 30, 99, .25);\n}\n"])),(l()(),u["\u0275eld"](98,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](99,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](100,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](101,{w:0,h:1}),(l()(),u["\u0275eld"](102,0,null,0,1,"app-image-shell",[["style","--image-shell-loading-background: rgba(233, 30, 99, .25);"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](103,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](104,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Overlay"])),(l()(),u["\u0275eld"](106,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-image-shell {\n  --image-shell-overlay-background: rgba(103, 58, 183, .40);\n}\n"])),(l()(),u["\u0275eld"](108,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](109,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](110,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](111,{w:0,h:1}),(l()(),u["\u0275eld"](112,0,null,0,1,"app-image-shell",[["animation","spinner"],["class","add-overlay"],["style","--image-shell-overlay-background: rgba(103, 58, 183, .40);"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](113,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"]},null),(l()(),u["\u0275eld"](114,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Spinner"])),(l()(),u["\u0275eld"](116,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-image-shell {\n  --image-shell-spinner-size: 40px;\n  --image-shell-spinner-color: #000000;\n}\n"])),(l()(),u["\u0275eld"](118,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](119,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](120,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](121,{w:0,h:1}),(l()(),u["\u0275eld"](122,0,null,0,1,"app-image-shell",[["animation","spinner"],["style","--image-shell-spinner-size: 40px; --image-shell-spinner-color: #000000;"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](123,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](124,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Background Animation"])),(l()(),u["\u0275eld"](126,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](127,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" These properties are only applied when using "])),(l()(),u["\u0275eld"](130,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="gradient"'])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](133,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-image-shell {\n  --image-shell-loading-background: rgba(255, 3, 109, 0.6);\n  --image-shell-animation-color: rgba(156, 4, 68, 0.7);\n}\n"])),(l()(),u["\u0275eld"](135,0,null,null,5,"div",[["style","width:30%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](136,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](137,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](138,{w:0,h:1}),(l()(),u["\u0275eld"](139,0,null,0,1,"app-image-shell",[["animation","gradient"],["style","\n          --image-shell-loading-background: rgba(255, 3, 109, 0.6);\n          --image-shell-animation-color: rgba(156, 4, 68, 0.7);\n        "]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](140,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](141,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Border Radius"])),(l()(),u["\u0275eld"](143,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-image-shell {\n  --image-shell-border-radius: 10px;\n}\n"])),(l()(),u["\u0275eld"](145,0,null,null,17,"ion-row",[],null,null,null,_.wb,_.C)),u["\u0275did"](146,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](147,0,null,0,7,"ion-col",[],null,null,null,_.ab,_.g)),u["\u0275did"](148,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](149,0,null,0,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](150,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](151,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](152,{w:0,h:1}),(l()(),u["\u0275eld"](153,0,null,0,1,"app-image-shell",[["animation","spinner"],["style","--image-shell-border-radius: 10px;"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](154,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](155,0,null,0,7,"ion-col",[],null,null,null,_.ab,_.g)),u["\u0275did"](156,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](157,0,null,0,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](158,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](159,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](160,{w:0,h:1}),(l()(),u["\u0275eld"](161,0,null,0,1,"app-image-shell",[["animation","gradient"],["style","--image-shell-border-radius: 10px;"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](162,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](163,0,null,0,26,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](164,0,null,null,1,"h2",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Cover Image Display"])),(l()(),u["\u0275eld"](166,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" In addition to the default "])),(l()(),u["\u0275eld"](168,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-image-shell>"])),(l()(),u["\u0275ted"](-1,null,[", you can specify a "])),(l()(),u["\u0275eld"](171,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["cover"])),(l()(),u["\u0275ted"](-1,null,[" display if you want to display your image as a background-image. "])),(l()(),u["\u0275eld"](174,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This is different from the default display, because (although it's not mandatory) cover display is designed to contain content (for example some text) "])),(l()(),u["\u0275eld"](176,0,null,null,6,"pre",[],null,null,null,null,null)),(l()(),u["\u0275eld"](177,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-image-shell [display]="\'cover\'" animation="spinner" class="add-overlay" [src]="">'])),(l()(),u["\u0275ted"](-1,null,['\n  <app-aspect-ratio [ratio]="{w:3, h:2}">\n    Some Text\n  </app-aspect-ratio>\n'])),(l()(),u["\u0275eld"](180,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["</app-image-shell>"])),(l()(),u["\u0275ted"](-1,null,["\n"])),(l()(),u["\u0275eld"](183,0,null,null,6,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](184,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"]},null),(l()(),u["\u0275eld"](185,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](186,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](187,{w:0,h:1}),(l()(),u["\u0275eld"](188,0,null,0,1,"h4",[["style","margin: 10px;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Some Text on top of a background-image container"])),(l()(),u["\u0275eld"](190,0,null,0,111,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](191,0,null,null,1,"h2",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Usage"])),(l()(),u["\u0275eld"](193,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Let me explain you the differences between "])),(l()(),u["\u0275eld"](195,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["default"])),(l()(),u["\u0275ted"](-1,null,[" and "])),(l()(),u["\u0275eld"](198,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["cover"])),(l()(),u["\u0275ted"](-1,null,[" display and when you should use each one. "])),(l()(),u["\u0275eld"](201,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Default Mode Usage"])),(l()(),u["\u0275eld"](203,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You should use the "])),(l()(),u["\u0275eld"](205,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["default display"])),(l()(),u["\u0275ted"](-1,null,[" when you are 100% confident on the aspect ratio of an image. "])),(l()(),u["\u0275eld"](208,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" If the image ratio does not match the specified aspect ratio, the image will be stretched. "])),(l()(),u["\u0275eld"](210,0,null,null,15,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](211,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Expected behavior:"])),(l()(),u["\u0275eld"](213,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The image "])),(l()(),u["\u0275eld"](215,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["WILL"])),(l()(),u["\u0275ted"](-1,null,[" be stretched. "])),(l()(),u["\u0275eld"](218,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We define an aspect ratio of "])),(l()(),u["\u0275eld"](220,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["2:1"])),(l()(),u["\u0275ted"](-1,null,[" but the image has an aspect ratio of "])),(l()(),u["\u0275eld"](223,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["1:1"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](226,0,null,null,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](227,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](228,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](229,{w:0,h:1}),(l()(),u["\u0275eld"](230,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](231,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"]},null),(l()(),u["\u0275eld"](232,0,null,null,15,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](233,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Expected behavior:"])),(l()(),u["\u0275eld"](235,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The image "])),(l()(),u["\u0275eld"](237,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["WON'T"])),(l()(),u["\u0275ted"](-1,null,[" be stretched. "])),(l()(),u["\u0275eld"](240,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We define an aspect ratio of "])),(l()(),u["\u0275eld"](242,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["1:1"])),(l()(),u["\u0275ted"](-1,null,[" that matches the image ratio of "])),(l()(),u["\u0275eld"](245,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["1:1"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](248,0,null,null,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](249,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](250,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](251,{w:0,h:1}),(l()(),u["\u0275eld"](252,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](253,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"]},null),(l()(),u["\u0275eld"](254,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Cover Mode Usage"])),(l()(),u["\u0275eld"](256,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You should use the "])),(l()(),u["\u0275eld"](258,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["cover display"])),(l()(),u["\u0275ted"](-1,null,[" when you want to fill a container with an image and you don't care if the image is shown completly or a portion of it. "])),(l()(),u["\u0275eld"](261,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" If the image ratio does not match the specified aspect ratio, the image will be cropped to fit the available space without stretching the image. "])),(l()(),u["\u0275eld"](263,0,null,null,12,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](264,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Expected behavior:"])),(l()(),u["\u0275eld"](266,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The image will be cropped to fill the available space. "])),(l()(),u["\u0275eld"](268,0,null,null,0,"br",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We define an aspect ratio of "])),(l()(),u["\u0275eld"](270,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["2:1"])),(l()(),u["\u0275ted"](-1,null,[" but the image has an aspect ratio of "])),(l()(),u["\u0275eld"](273,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["1:1"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](276,0,null,null,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](277,0,null,null,4,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](278,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"]},null),(l()(),u["\u0275eld"](279,0,null,0,2,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](280,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](281,{w:0,h:1}),(l()(),u["\u0275eld"](282,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can also change the "])),(l()(),u["\u0275eld"](284,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["background-position"])),(l()(),u["\u0275ted"](-1,null,[" property to adjust how the image is placed inside the container. "])),(l()(),u["\u0275eld"](287,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](288,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Notice:"])),(l()(),u["\u0275ted"](-1,null,[" This only applies to "])),(l()(),u["\u0275eld"](291,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["cover"])),(l()(),u["\u0275ted"](-1,null,[" display. "])),(l()(),u["\u0275eld"](294,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['app-image-shell[display="cover"] {\n  background-position: bottom right;\n}\n'])),(l()(),u["\u0275eld"](296,0,null,null,5,"div",[["style","width:80%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](297,0,null,null,4,"app-image-shell",[["animation","spinner"],["style","background-position: bottom right;"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](298,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"]},null),(l()(),u["\u0275eld"](299,0,null,0,2,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](300,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](301,{w:0,h:1}),(l()(),u["\u0275eld"](302,0,null,0,60,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](303,0,null,null,1,"h2",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Maintain Aspect Ratio"])),(l()(),u["\u0275eld"](305,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We use the handy "])),(l()(),u["\u0275eld"](307,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,[" to ensure the image shell mantains a specified aspect ratio. "])),(l()(),u["\u0275eld"](310,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" By doing so, we prevent content from jumping around the page while assets (images) are loading. "])),(l()(),u["\u0275eld"](312,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Default display"])),(l()(),u["\u0275eld"](314,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Just surround the "])),(l()(),u["\u0275eld"](316,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-image-shell>"])),(l()(),u["\u0275ted"](-1,null,[" with an "])),(l()(),u["\u0275eld"](319,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,[" element "])),(l()(),u["\u0275eld"](322,0,null,null,6,"pre",[],null,null,null,null,null)),(l()(),u["\u0275eld"](323,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-aspect-ratio [ratio]="{w:3, h:2}">'])),(l()(),u["\u0275ted"](-1,null,['\n  <app-image-shell animation="spinner" [src]="" [alt]=""></app-image-shell>\n'])),(l()(),u["\u0275eld"](326,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["</app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,["\n"])),(l()(),u["\u0275eld"](329,0,null,null,5,"div",[["style","width:60%; margin: 0px auto;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](330,0,null,null,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](331,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](332,{w:0,h:1}),(l()(),u["\u0275eld"](333,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](334,49152,null,0,z.a,[u.PLATFORM_ID],null,null),(l()(),u["\u0275eld"](335,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Cover display"])),(l()(),u["\u0275eld"](337,0,null,null,10,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" When using the "])),(l()(),u["\u0275eld"](339,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["cover"])),(l()(),u["\u0275ted"](-1,null,[" display we need to include the "])),(l()(),u["\u0275eld"](342,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,[" inside the "])),(l()(),u["\u0275eld"](345,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-image-shell>"])),(l()(),u["\u0275ted"](-1,null,[" element instead of surrounding it. "])),(l()(),u["\u0275eld"](348,0,null,null,7,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-image-shell [display]="\'cover\'" animation="spinner" class="add-overlay" [src]="">\n  '])),(l()(),u["\u0275eld"](350,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-aspect-ratio [ratio]="{w:3, h:2}">'])),(l()(),u["\u0275ted"](-1,null,["\n    Some Text\n  "])),(l()(),u["\u0275eld"](353,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["</app-aspect-ratio>"])),(l()(),u["\u0275ted"](-1,null,["\n</app-image-shell>\n"])),(l()(),u["\u0275eld"](356,0,null,null,6,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](357,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"]},null),(l()(),u["\u0275eld"](358,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](359,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](360,{w:0,h:1}),(l()(),u["\u0275eld"](361,0,null,0,1,"h4",[["style","margin: 10px;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Some Text on top of a background-image container"]))],(function(l,n){l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell");var e=l(n,38,0,1,1);l(n,37,0,e);var u=l(n,51,0,1,1);l(n,50,0,u);var t=l(n,64,0,1,1);l(n,63,0,t);var a=l(n,85,0,1,1);l(n,84,0,a),l(n,87,0,"./assets/sample-images/travel/Travel2-64.47.png");var o=l(n,101,0,1,1);l(n,100,0,o);var d=l(n,111,0,1,1);l(n,110,0,d),l(n,113,0,"./assets/sample-images/travel/Travel2-64.47.png");var i=l(n,121,0,1,1);l(n,120,0,i);var s=l(n,138,0,1,1);l(n,137,0,s);var r=l(n,152,0,1,1);l(n,151,0,r);var c=l(n,160,0,1,1);l(n,159,0,c),l(n,184,0,"cover");var p=l(n,187,0,3,2);l(n,186,0,p);var h=l(n,229,0,2,1);l(n,228,0,h),l(n,231,0,"./assets/sample-images/getting-started/category2-1.1.png");var g=l(n,251,0,1,1);l(n,250,0,g),l(n,253,0,"./assets/sample-images/getting-started/category2-1.1.png"),l(n,278,0,"cover","./assets/sample-images/getting-started/category2-1.1.png");var m=l(n,281,0,2,1);l(n,280,0,m),l(n,298,0,"cover","./assets/sample-images/getting-started/category2-1.1.png");var f=l(n,301,0,2,1);l(n,300,0,f);var b=l(n,332,0,3,2);l(n,331,0,b),l(n,357,0,"cover");var v=l(n,360,0,3,2);l(n,359,0,v)}),(function(l,n){l(n,36,0,u["\u0275nov"](n,37).ratioPadding),l(n,39,0,u["\u0275nov"](n,40).imageLoaded,u["\u0275nov"](n,40).backgroundImage,u["\u0275nov"](n,40).display),l(n,49,0,u["\u0275nov"](n,50).ratioPadding),l(n,52,0,u["\u0275nov"](n,53).imageLoaded,u["\u0275nov"](n,53).backgroundImage,u["\u0275nov"](n,53).display),l(n,62,0,u["\u0275nov"](n,63).ratioPadding),l(n,65,0,u["\u0275nov"](n,66).imageLoaded,u["\u0275nov"](n,66).backgroundImage,u["\u0275nov"](n,66).display),l(n,83,0,u["\u0275nov"](n,84).ratioPadding),l(n,86,0,u["\u0275nov"](n,87).imageLoaded,u["\u0275nov"](n,87).backgroundImage,u["\u0275nov"](n,87).display),l(n,99,0,u["\u0275nov"](n,100).ratioPadding),l(n,102,0,u["\u0275nov"](n,103).imageLoaded,u["\u0275nov"](n,103).backgroundImage,u["\u0275nov"](n,103).display),l(n,109,0,u["\u0275nov"](n,110).ratioPadding),l(n,112,0,u["\u0275nov"](n,113).imageLoaded,u["\u0275nov"](n,113).backgroundImage,u["\u0275nov"](n,113).display),l(n,119,0,u["\u0275nov"](n,120).ratioPadding),l(n,122,0,u["\u0275nov"](n,123).imageLoaded,u["\u0275nov"](n,123).backgroundImage,u["\u0275nov"](n,123).display),l(n,136,0,u["\u0275nov"](n,137).ratioPadding),l(n,139,0,u["\u0275nov"](n,140).imageLoaded,u["\u0275nov"](n,140).backgroundImage,u["\u0275nov"](n,140).display),l(n,150,0,u["\u0275nov"](n,151).ratioPadding),l(n,153,0,u["\u0275nov"](n,154).imageLoaded,u["\u0275nov"](n,154).backgroundImage,u["\u0275nov"](n,154).display),l(n,158,0,u["\u0275nov"](n,159).ratioPadding),l(n,161,0,u["\u0275nov"](n,162).imageLoaded,u["\u0275nov"](n,162).backgroundImage,u["\u0275nov"](n,162).display),l(n,183,0,u["\u0275nov"](n,184).imageLoaded,u["\u0275nov"](n,184).backgroundImage,u["\u0275nov"](n,184).display),l(n,185,0,u["\u0275nov"](n,186).ratioPadding),l(n,227,0,u["\u0275nov"](n,228).ratioPadding),l(n,230,0,u["\u0275nov"](n,231).imageLoaded,u["\u0275nov"](n,231).backgroundImage,u["\u0275nov"](n,231).display),l(n,249,0,u["\u0275nov"](n,250).ratioPadding),l(n,252,0,u["\u0275nov"](n,253).imageLoaded,u["\u0275nov"](n,253).backgroundImage,u["\u0275nov"](n,253).display),l(n,277,0,u["\u0275nov"](n,278).imageLoaded,u["\u0275nov"](n,278).backgroundImage,u["\u0275nov"](n,278).display),l(n,279,0,u["\u0275nov"](n,280).ratioPadding),l(n,297,0,u["\u0275nov"](n,298).imageLoaded,u["\u0275nov"](n,298).backgroundImage,u["\u0275nov"](n,298).display),l(n,299,0,u["\u0275nov"](n,300).ratioPadding),l(n,330,0,u["\u0275nov"](n,331).ratioPadding),l(n,333,0,u["\u0275nov"](n,334).imageLoaded,u["\u0275nov"](n,334).backgroundImage,u["\u0275nov"](n,334).display),l(n,356,0,u["\u0275nov"](n,357).imageLoaded,u["\u0275nov"](n,357).backgroundImage,u["\u0275nov"](n,357).display),l(n,358,0,u["\u0275nov"](n,359).ratioPadding)}))}function Q(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-image-shell-page",[],null,null,null,X,U)),u["\u0275did"](1,114688,null,0,o,[],null,null)],(function(l,n){l(n,1,0)}),null)}var ll=u["\u0275ccf"]("app-image-shell-page",o,Q,{},{},[]),nl=e("s7LF"),el=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.loading-state-demo[_ngcontent-%COMP%]{background-color:#ececec;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.38'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");padding:0 0 20px}.sticky-section[_ngcontent-%COMP%]{position:-webkit-sticky;position:sticky;top:0;background:#ececec;padding:20px;margin:0 0 60px!important;z-index:10}.sample-text-max-width[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{max-width:50%}.sample-text-max-width[_ngcontent-%COMP%] > app-text-shell.text-loaded[_ngcontent-%COMP%]{max-width:unset}.sample-text-min-width[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{min-width:80px}.sample-text-min-width[_ngcontent-%COMP%] > app-text-shell.text-loaded[_ngcontent-%COMP%]{min-width:0}"]],data:{}});function ul(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" Text Shell "])),(l()(),u["\u0275eld"](12,0,null,null,345,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,11,"section",[["class","showcase-section"],["style","margin-bottom: 40px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This component is useful when you want to show a loading indicator while fetching text data from the server. "])),(l()(),u["\u0275eld"](17,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The "])),(l()(),u["\u0275eld"](19,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" basically works by wrapping the text node with a loading indicator while you are fetching data. "])),(l()(),u["\u0275eld"](22,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" While there are empty values the component adds some 'loading' styles and animations. Whereas while there are non empty values, the loading state is removed. "])),(l()(),u["\u0275eld"](24,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Try toggling the loading state of the text shells below by changing the value of this textarea. "])),(l()(),u["\u0275eld"](26,0,null,0,120,"div",[["class","loading-state-demo"]],null,null,null,null,null)),(l()(),u["\u0275eld"](27,0,null,null,9,"section",[["class","showcase-section sticky-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](28,0,null,null,6,"ion-textarea",[["clearOnEdit","true"],["placeholder","When this text is empty the text-shell will show the loading state."],["style","--background: #FFF;"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"ionBlur"],[null,"ionChange"]],(function(l,n,e){var t=!0,a=l.component;return"ionBlur"===n&&(t=!1!==u["\u0275nov"](l,29)._handleBlurEvent(e.target)&&t),"ionChange"===n&&(t=!1!==u["\u0275nov"](l,29)._handleInputEvent(e.target)&&t),"ngModelChange"===n&&(t=!1!==(a.sampleTextShellData=e)&&t),t}),_.Jb,_.P)),u["\u0275did"](29,16384,null,0,F.Lb,[u.ElementRef],null,null),u["\u0275prd"](1024,null,nl.l,(function(l){return[l]}),[F.Lb]),u["\u0275did"](31,671744,null,0,nl.p,[[8,null],[8,null],[8,null],[6,nl.l]],{model:[0,"model"]},{update:"ngModelChange"}),u["\u0275prd"](2048,null,nl.m,null,[nl.p]),u["\u0275did"](33,16384,null,0,nl.n,[[4,nl.m]],null,null),u["\u0275did"](34,49152,null,0,F.vb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{clearOnEdit:[0,"clearOnEdit"],placeholder:[1,"placeholder"]},null),(l()(),u["\u0275eld"](35,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can reset the 'loading' state by clearing the textarea value. "])),(l()(),u["\u0275eld"](37,0,null,null,24,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](38,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["No animation (default)"])),(l()(),u["\u0275eld"](40,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Single line example "])),(l()(),u["\u0275eld"](42,0,null,null,2,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](43,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](44,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](45,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Multi-line example "])),(l()(),u["\u0275eld"](47,0,null,null,3,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](48,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](49,0,null,null,1,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](50,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](51,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" On top of another element (with transparent background) "])),(l()(),u["\u0275eld"](53,0,null,null,8,"div",[["style","background-color: #FFF; padding: 20px; color: #FFF; font-weight: 500;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](54,0,null,null,7,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](55,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"]},null),(l()(),u["\u0275eld"](56,0,null,0,5,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](57,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](58,{w:0,h:1}),(l()(),u["\u0275eld"](59,0,null,0,2,"p",[["style","margin: 20px 40px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](60,0,null,null,1,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](61,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](62,0,null,null,28,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](63,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Bouncing animation"])),(l()(),u["\u0275eld"](65,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Single line example "])),(l()(),u["\u0275eld"](67,0,null,null,2,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](68,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](69,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](70,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Multi-line example "])),(l()(),u["\u0275eld"](72,0,null,null,3,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](73,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](74,0,null,null,1,"app-text-shell",[["animation","bouncing"],["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](75,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](76,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" On top of another element (with transparent background) "])),(l()(),u["\u0275eld"](78,0,null,null,8,"div",[["style","background-color: #FFF; padding: 20px; color: #FFF; font-weight: 500;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](79,0,null,null,7,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](80,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"]},null),(l()(),u["\u0275eld"](81,0,null,0,5,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](82,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](83,{w:0,h:1}),(l()(),u["\u0275eld"](84,0,null,0,2,"p",[["style","margin: 20px 40px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](85,0,null,null,1,"app-text-shell",[["animation","bouncing"],["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](86,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](87,0,null,null,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](88,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" As we don\u2019t use masks, this approach works well with use cases that require transparent backgrounds. "])),(l()(),u["\u0275eld"](91,0,null,null,31,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](92,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Gradient animation"])),(l()(),u["\u0275eld"](94,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Single line example "])),(l()(),u["\u0275eld"](96,0,null,null,2,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](97,0,null,null,1,"app-text-shell",[["animation","gradient"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](98,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](99,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Multi-line example "])),(l()(),u["\u0275eld"](101,0,null,null,3,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](102,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](103,0,null,null,1,"app-text-shell",[["animation","gradient"],["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](104,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](105,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" On top of another element (with transparent background) "])),(l()(),u["\u0275eld"](107,0,null,null,8,"div",[["style","background-color: #FFF; padding: 20px; color: #FFF; font-weight: 500;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](108,0,null,null,7,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](109,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"]},null),(l()(),u["\u0275eld"](110,0,null,0,5,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](111,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](112,{w:0,h:1}),(l()(),u["\u0275eld"](113,0,null,0,2,"p",[["style","margin: 20px 40px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](114,0,null,null,1,"app-text-shell",[["animation","gradient"],["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](115,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](116,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](117,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Side effect:"])),(l()(),u["\u0275ted"](-1,null,[" This solution doesn\u2019t play well if you require the "])),(l()(),u["\u0275eld"](120,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" to have a transparent background as the masks need a solid color to work properly. "])),(l()(),u["\u0275eld"](123,0,null,null,23,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](124,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Prepend and Append text to the data binded"])),(l()(),u["\u0275eld"](126,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" There are cases where we need to add some text before or after the value binded to the "])),(l()(),u["\u0275eld"](128,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[". For example if we are loading a price value and we want to put the '$' before the price. "])),(l()(),u["\u0275eld"](131,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['  <app-text-shell [data]="'])),(l()(),u["\u0275eld"](133,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["(sampleTextShellData) ? '$'.concat(' ', sampleTextShellData) : null"])),(l()(),u["\u0275ted"](-1,null,['"></app-text-shell>\n  '])),(l()(),u["\u0275eld"](136,0,null,null,2,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](137,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](138,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](139,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<app-text-shell [data]="'])),(l()(),u["\u0275eld"](141,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["(sampleTextShellData) ? sampleTextShellData.concat(' years old') : null"])),(l()(),u["\u0275ted"](-1,null,['"></app-text-shell>\n'])),(l()(),u["\u0275eld"](144,0,null,null,2,"div",[["style","background-color: #FFF; padding: 20px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](145,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](146,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](147,0,null,0,45,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](148,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Other use cases"])),(l()(),u["\u0275eld"](150,0,null,null,16,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The "])),(l()(),u["\u0275eld"](152,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" element can be used alone or wrapped with a text tag ("])),(l()(),u["\u0275eld"](155,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["h1"])),(l()(),u["\u0275ted"](-1,null,[", "])),(l()(),u["\u0275eld"](158,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["h2"])),(l()(),u["\u0275ted"](-1,null,[", "])),(l()(),u["\u0275eld"](161,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["h3"])),(l()(),u["\u0275ted"](-1,null,[", "])),(l()(),u["\u0275eld"](164,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["p"])),(l()(),u["\u0275ted"](-1,null,[", etc). "])),(l()(),u["\u0275eld"](167,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" In case you wrap it with a heading element, we included basic styles ("])),(l()(),u["\u0275eld"](169,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["src/theme/shell-defaults.scss"])),(l()(),u["\u0275ted"](-1,null,[") to match the different heading styles (mainly line-height associated to each heading). "])),(l()(),u["\u0275eld"](172,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[":root {\n  h1 > app-text-shell {\n    --text-shell-line-height: 32px;\n    --text-shell-line-color: #CCC;\n  }\n}\n"])),(l()(),u["\u0275eld"](174,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" By matching the line-height of the text-shell with the line-height of the wrapper element, we avoid page height bumps after the data gets loaded into the shells. "])),(l()(),u["\u0275eld"](176,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<h1>\n  <app-text-shell [data]=""></app-text-shell>\n</h1>\n\n<h2>\n  <app-text-shell [data]=""></app-text-shell>\n</h2>\n\n<h3>\n  <app-text-shell [data]=""></app-text-shell>\n</h3>\n\n<h4>\n  <app-text-shell [data]=""></app-text-shell>\n</h4>\n\n<h5>\n  <app-text-shell [data]=""></app-text-shell>\n</h5>\n'])),(l()(),u["\u0275eld"](178,0,null,null,2,"h1",[],null,null,null,null,null)),(l()(),u["\u0275eld"](179,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](180,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](181,0,null,null,2,"h2",[],null,null,null,null,null)),(l()(),u["\u0275eld"](182,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](183,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](184,0,null,null,2,"h3",[],null,null,null,null,null)),(l()(),u["\u0275eld"](185,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](186,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](187,0,null,null,2,"h4",[],null,null,null,null,null)),(l()(),u["\u0275eld"](188,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](189,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](190,0,null,null,2,"h5",[],null,null,null,null,null)),(l()(),u["\u0275eld"](191,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](192,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](193,0,null,0,59,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](194,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can add/remove the following "])),(l()(),u["\u0275eld"](196,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Attributes"])),(l()(),u["\u0275ted"](-1,null,[" to adjust the shell element behavior "])),(l()(),u["\u0275eld"](199,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Multi-line support"])),(l()(),u["\u0275eld"](201,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can set up-to 6 lines "])),(l()(),u["\u0275eld"](203,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<p>\n  <app-text-shell "])),(l()(),u["\u0275eld"](205,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['lines="6"'])),(l()(),u["\u0275ted"](-1,null,[' [data]=""></app-text-shell>\n</p>\n'])),(l()(),u["\u0275eld"](208,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](209,0,null,null,1,"app-text-shell",[["lines","6"],["style","--text-shell-line-color: #DDD;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](210,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](211,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Set different animation options"])),(l()(),u["\u0275eld"](213,0,null,null,9,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can choose between "])),(l()(),u["\u0275eld"](215,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["no animation"])),(l()(),u["\u0275ted"](-1,null,[" (default), "])),(l()(),u["\u0275eld"](218,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["bouncing animation"])),(l()(),u["\u0275ted"](-1,null,[", and "])),(l()(),u["\u0275eld"](221,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["gradient background with line masks on top"])),(l()(),u["\u0275eld"](223,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<p>\n  <app-text-shell "])),(l()(),u["\u0275eld"](225,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="bouncing"'])),(l()(),u["\u0275ted"](-1,null,[' lines="2" [data]=""></app-text-shell>\n</p>\n'])),(l()(),u["\u0275eld"](228,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](229,0,null,null,1,"app-text-shell",[["animation","bouncing"],["lines","2"],["style","--text-shell-line-color: #DDD;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](230,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](231,0,null,null,4,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<p>\n  <app-text-shell "])),(l()(),u["\u0275eld"](233,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="gradient"'])),(l()(),u["\u0275ted"](-1,null,[' lines="2" [data]=""></app-text-shell>\n</p>\n'])),(l()(),u["\u0275eld"](236,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-background: #FFF;\n  --text-shell-line-color: transparent;\n}\n"])),(l()(),u["\u0275eld"](238,0,null,null,2,"p",[["style","padding: 5px; background: #FFF;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](239,0,null,null,1,"app-text-shell",[["animation","gradient"],["lines","2"],["style","--text-shell-line-color: transparent; --text-shell-background: #FFF;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](240,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](241,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" In this mode, the "])),(l()(),u["\u0275eld"](243,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["--text-shell-background"])),(l()(),u["\u0275ted"](-1,null,[" property refers to the masks colors. "])),(l()(),u["\u0275eld"](246,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](247,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" When using a "])),(l()(),u["\u0275eld"](250,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["gradient"])),(l()(),u["\u0275ted"](-1,null,[" animation, make sure you set the line-color to transparent so the background animation that's beneath the masks can be seen. "])),(l()(),u["\u0275eld"](253,0,null,0,52,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](254,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" You can also override these "])),(l()(),u["\u0275eld"](256,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["CSS 4 variables"])),(l()(),u["\u0275ted"](-1,null,[" to adjust the shell element style "])),(l()(),u["\u0275eld"](259,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Line color"])),(l()(),u["\u0275eld"](261,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-line-color: rgba(233, 30, 99, .25);\n}\n"])),(l()(),u["\u0275eld"](263,0,null,null,2,"h3",[],null,null,null,null,null)),(l()(),u["\u0275eld"](264,0,null,null,1,"app-text-shell",[["style","--text-shell-line-color: rgba(233, 30, 99, .25);"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](265,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](266,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Background"])),(l()(),u["\u0275eld"](268,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Background by default is set to "])),(l()(),u["\u0275eld"](270,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["transparent"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](273,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-line-color: #FFFFFF;\n  --text-shell-background: #000000;\n}\n"])),(l()(),u["\u0275eld"](275,0,null,null,2,"p",[["style","padding: 5px; background: #000000;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](276,0,null,null,1,"app-text-shell",[["lines","3"],["style","--text-shell-line-color: #FFFFFF; --text-shell-background: #000000;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](277,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](278,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Background Animation"])),(l()(),u["\u0275eld"](280,0,null,null,6,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](281,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" These properties are only applied when using "])),(l()(),u["\u0275eld"](284,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['animation="gradient"'])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](287,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-line-color: transparent;\n  --text-shell-background: #000000;\n  --text-shell-animation-background: rgba(255, 3, 109, 0.6);\n  --text-shell-animation-color: rgba(156, 4, 68, 0.7);\n}\n"])),(l()(),u["\u0275eld"](289,0,null,null,2,"p",[["style","padding: 5px; background: #000000;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](290,0,null,null,1,"app-text-shell",[["animation","gradient"],["lines","3"],["style","\n        --text-shell-line-color: transparent;\n        --text-shell-background: #000000;\n        --text-shell-animation-background: rgba(255, 3, 109, 0.6);\n        --text-shell-animation-color: rgba(156, 4, 68, 0.7);\n      "]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](291,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](292,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Line height"])),(l()(),u["\u0275eld"](294,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-line-height: 40px;\n}\n"])),(l()(),u["\u0275eld"](296,0,null,null,2,"h3",[],null,null,null,null,null)),(l()(),u["\u0275eld"](297,0,null,null,1,"app-text-shell",[["style","--text-shell-line-height: 40px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](298,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](299,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Line gutter"])),(l()(),u["\u0275eld"](301,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["app-text-shell {\n  --text-shell-line-gutter: 10px;\n}\n"])),(l()(),u["\u0275eld"](303,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](304,0,null,null,1,"app-text-shell",[["lines","4"],["style","--text-shell-line-gutter: 10px; --text-shell-line-color: #CCC;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](305,49152,null,0,j.a,[],null,null),(l()(),u["\u0275eld"](306,0,null,0,51,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](307,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Max-width"])),(l()(),u["\u0275eld"](309,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" By default, the "])),(l()(),u["\u0275eld"](311,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" element will fill it's container width. You can adjust this by setting a temporary "])),(l()(),u["\u0275eld"](314,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["max-width"])),(l()(),u["\u0275ted"](-1,null,[" while the shell loading state is present. "])),(l()(),u["\u0275eld"](317,0,null,null,7,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[".sample-text-max-width > app-text-shell {\n  "])),(l()(),u["\u0275eld"](319,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["max-width: 50%;"])),(l()(),u["\u0275ted"](-1,null,["\n\n  &.text-loaded {\n    "])),(l()(),u["\u0275eld"](322,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["max-width: unset;"])),(l()(),u["\u0275ted"](-1,null,["\n  }\n}\n"])),(l()(),u["\u0275eld"](325,0,null,null,2,"div",[["class","sample-text-max-width"]],null,null,null,null,null)),(l()(),u["\u0275eld"](326,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](327,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](328,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Min-width"])),(l()(),u["\u0275eld"](330,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" When the "])),(l()(),u["\u0275eld"](332,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" parent container doesn't have a width defined, it may happen that the "])),(l()(),u["\u0275eld"](335,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["<app-text-shell>"])),(l()(),u["\u0275ted"](-1,null,[" inherits an undefined width and thus it's not shown. "])),(l()(),u["\u0275eld"](338,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["In these cases setting a temporary "])),(l()(),u["\u0275eld"](340,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["min-width"])),(l()(),u["\u0275ted"](-1,null,[" fixes the issue."])),(l()(),u["\u0275eld"](343,0,null,null,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](344,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" If the parent doesn't have a defined width, it will fail to set a min-width based on a percentage of it's parents width. You will have to use absolute units (px, ch, etc). "])),(l()(),u["\u0275eld"](347,0,null,null,7,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[".sample-text-min-width > app-text-shell {\n  "])),(l()(),u["\u0275eld"](349,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["min-width: 80px;"])),(l()(),u["\u0275ted"](-1,null,["\n\n  &.text-loaded {\n    "])),(l()(),u["\u0275eld"](352,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["min-width: 0px;"])),(l()(),u["\u0275ted"](-1,null,["\n  }\n}\n"])),(l()(),u["\u0275eld"](355,0,null,null,2,"span",[["class","sample-text-min-width"],["style","display: inline-block;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](356,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](357,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,31,0,e.sampleTextShellData),l(n,34,0,"true","When this text is empty the text-shell will show the loading state."),l(n,44,0,e.sampleTextShellData),l(n,50,0,e.sampleTextShellData),l(n,55,0,"cover","./assets/sample-images/getting-started/category5-1.1.png");var u=l(n,58,0,2,1);l(n,57,0,u),l(n,61,0,e.sampleTextShellData),l(n,69,0,e.sampleTextShellData),l(n,75,0,e.sampleTextShellData),l(n,80,0,"cover","./assets/sample-images/getting-started/category5-1.1.png");var t=l(n,83,0,2,1);l(n,82,0,t),l(n,86,0,e.sampleTextShellData),l(n,98,0,e.sampleTextShellData),l(n,104,0,e.sampleTextShellData),l(n,109,0,"cover","./assets/sample-images/getting-started/category5-1.1.png");var a=l(n,112,0,2,1);l(n,111,0,a),l(n,115,0,e.sampleTextShellData),l(n,138,0,e.sampleTextShellData?"$".concat(" ",e.sampleTextShellData):null),l(n,146,0,e.sampleTextShellData?e.sampleTextShellData.concat(" years old"):null),l(n,327,0,e.sampleTextShellData),l(n,357,0,e.sampleTextShellData)}),(function(l,n){l(n,28,0,u["\u0275nov"](n,33).ngClassUntouched,u["\u0275nov"](n,33).ngClassTouched,u["\u0275nov"](n,33).ngClassPristine,u["\u0275nov"](n,33).ngClassDirty,u["\u0275nov"](n,33).ngClassValid,u["\u0275nov"](n,33).ngClassInvalid,u["\u0275nov"](n,33).ngClassPending),l(n,43,0,u["\u0275nov"](n,44).textLoaded),l(n,49,0,u["\u0275nov"](n,50).textLoaded),l(n,54,0,u["\u0275nov"](n,55).imageLoaded,u["\u0275nov"](n,55).backgroundImage,u["\u0275nov"](n,55).display),l(n,56,0,u["\u0275nov"](n,57).ratioPadding),l(n,60,0,u["\u0275nov"](n,61).textLoaded),l(n,68,0,u["\u0275nov"](n,69).textLoaded),l(n,74,0,u["\u0275nov"](n,75).textLoaded),l(n,79,0,u["\u0275nov"](n,80).imageLoaded,u["\u0275nov"](n,80).backgroundImage,u["\u0275nov"](n,80).display),l(n,81,0,u["\u0275nov"](n,82).ratioPadding),l(n,85,0,u["\u0275nov"](n,86).textLoaded),l(n,97,0,u["\u0275nov"](n,98).textLoaded),l(n,103,0,u["\u0275nov"](n,104).textLoaded),l(n,108,0,u["\u0275nov"](n,109).imageLoaded,u["\u0275nov"](n,109).backgroundImage,u["\u0275nov"](n,109).display),l(n,110,0,u["\u0275nov"](n,111).ratioPadding),l(n,114,0,u["\u0275nov"](n,115).textLoaded),l(n,137,0,u["\u0275nov"](n,138).textLoaded),l(n,145,0,u["\u0275nov"](n,146).textLoaded),l(n,179,0,u["\u0275nov"](n,180).textLoaded),l(n,182,0,u["\u0275nov"](n,183).textLoaded),l(n,185,0,u["\u0275nov"](n,186).textLoaded),l(n,188,0,u["\u0275nov"](n,189).textLoaded),l(n,191,0,u["\u0275nov"](n,192).textLoaded),l(n,209,0,u["\u0275nov"](n,210).textLoaded),l(n,229,0,u["\u0275nov"](n,230).textLoaded),l(n,239,0,u["\u0275nov"](n,240).textLoaded),l(n,264,0,u["\u0275nov"](n,265).textLoaded),l(n,276,0,u["\u0275nov"](n,277).textLoaded),l(n,290,0,u["\u0275nov"](n,291).textLoaded),l(n,297,0,u["\u0275nov"](n,298).textLoaded),l(n,304,0,u["\u0275nov"](n,305).textLoaded),l(n,326,0,u["\u0275nov"](n,327).textLoaded),l(n,356,0,u["\u0275nov"](n,357).textLoaded)}))}function tl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-text-shell-page",[],null,null,null,ul,el)),u["\u0275did"](1,114688,null,0,d,[],null,null)],(function(l,n){l(n,1,0)}),null)}var al=u["\u0275ccf"]("app-text-shell-page",d,tl,{},{},[]),ol=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function dl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" Simple Data Binding "])),(l()(),u["\u0275eld"](12,0,null,null,43,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,41,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Back to basics ..."])),(l()(),u["\u0275eld"](17,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" We can tweak our data stream with some RxJs operators and achieve an app shell loading interaction "])),(l()(),u["\u0275eld"](19,0,null,null,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Let's set a timeout and fetch data using the "])),(l()(),u["\u0275eld"](21,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["HttpClient"])),(l()(),u["\u0275eld"](23,0,null,null,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Data coming in "])),(l()(),u["\u0275eld"](25,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](26,null,[""," seconds"])),(l()(),u["\u0275eld"](27,0,null,null,25,"ion-row",[["style","background-color: #FFF; padding: 10px; margin: 20px;"]],null,null,null,_.wb,_.C)),u["\u0275did"](28,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](29,0,null,0,8,"ion-col",[["size","12"]],null,null,null,_.ab,_.g)),u["\u0275did"](30,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](31,0,null,0,6,"app-image-shell",[["animation","gradient"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](32,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"],alt:[2,"alt"]},null),(l()(),u["\u0275eld"](33,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](34,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](35,{w:0,h:1}),(l()(),u["\u0275eld"](36,0,null,0,1,"h4",[["style","margin: 10px; text-align: center; color: #FFF;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Heading on top of a cover image"])),(l()(),u["\u0275eld"](38,0,null,0,6,"ion-col",[["size","4"]],null,null,null,_.ab,_.g)),u["\u0275did"](39,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](40,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](41,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](42,{w:0,h:1}),(l()(),u["\u0275eld"](43,0,null,0,1,"app-image-shell",[["animation","gradient"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](44,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](45,0,null,0,7,"ion-col",[["size","8"]],null,null,null,_.ab,_.g)),u["\u0275did"](46,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](47,0,null,0,2,"h3",[["style","margin-top: 0px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](48,0,null,null,1,"app-text-shell",[["animation","gradient"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](49,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](50,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](51,0,null,null,1,"app-text-shell",[["animation","gradient"],["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](52,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](53,0,null,null,2,"ion-button",[],null,[[null,"click"]],(function(l,n,e){var u=!0;return"click"===n&&(u=!1!==l.component.showcaseShellSimpleFetch(3)&&u),u}),_.X,_.d)),u["\u0275did"](54,49152,null,0,F.k,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{disabled:[0,"disabled"]},null),(l()(),u["\u0275ted"](-1,0,["Fetch more Data"]))],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,30,0,"12"),l(n,32,0,"cover",null==e.simpleFetchData?null:e.simpleFetchData.cover,"Sample Image Cover");var u=l(n,35,0,2,1);l(n,34,0,u),l(n,39,0,"4");var t=l(n,42,0,1,1);l(n,41,0,t),l(n,44,0,null==e.simpleFetchData?null:e.simpleFetchData.image,"Sample Image"),l(n,46,0,"8"),l(n,49,0,null==e.simpleFetchData?null:e.simpleFetchData.title),l(n,52,0,null==e.simpleFetchData?null:e.simpleFetchData.description),l(n,54,0,e.simpleFetchButtonDisabled)}),(function(l,n){l(n,26,0,n.component.simpleFetchCountdown),l(n,31,0,u["\u0275nov"](n,32).imageLoaded,u["\u0275nov"](n,32).backgroundImage,u["\u0275nov"](n,32).display),l(n,33,0,u["\u0275nov"](n,34).ratioPadding),l(n,40,0,u["\u0275nov"](n,41).ratioPadding),l(n,43,0,u["\u0275nov"](n,44).imageLoaded,u["\u0275nov"](n,44).backgroundImage,u["\u0275nov"](n,44).display),l(n,48,0,u["\u0275nov"](n,49).textLoaded),l(n,51,0,u["\u0275nov"](n,52).textLoaded)}))}function il(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-simple-data-binding",[],null,null,null,dl,ol)),u["\u0275did"](1,114688,null,0,g,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var sl=u["\u0275ccf"]("app-simple-data-binding",g,il,{},{},[]),rl=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function cl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Basic example "])),(l()(),u["\u0275eld"](12,0,null,null,38,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,36,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Using the "])),(l()(),u["\u0275eld"](17,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["DataStore"])),(l()(),u["\u0275ted"](-1,null,[" utility you can keep track and append shell values to the data stream. "])),(l()(),u["\u0275eld"](20,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This drastically reduces the boilerplate needed to add app shell loading interactions to your app. "])),(l()(),u["\u0275eld"](22,0,null,null,25,"ion-row",[["style","background-color: #FFF; padding: 10px; margin: 20px;"]],null,null,null,_.wb,_.C)),u["\u0275did"](23,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](24,0,null,0,8,"ion-col",[["size","12"]],null,null,null,_.ab,_.g)),u["\u0275did"](25,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](26,0,null,0,6,"app-image-shell",[["animation","spinner"],["class","add-overlay"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](27,49152,null,0,z.a,[u.PLATFORM_ID],{display:[0,"display"],src:[1,"src"],alt:[2,"alt"]},null),(l()(),u["\u0275eld"](28,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](29,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](30,{w:0,h:1}),(l()(),u["\u0275eld"](31,0,null,0,1,"h4",[["style","margin: 10px; text-align: center; color: #FFF;"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Heading on top of a cover image"])),(l()(),u["\u0275eld"](33,0,null,0,6,"ion-col",[["size","4"]],null,null,null,_.ab,_.g)),u["\u0275did"](34,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](35,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](36,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](37,{w:0,h:1}),(l()(),u["\u0275eld"](38,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](39,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](40,0,null,0,7,"ion-col",[["size","8"]],null,null,null,_.ab,_.g)),u["\u0275did"](41,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](42,0,null,0,2,"h3",[["style","margin-top: 0px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](43,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](44,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](45,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](46,0,null,null,1,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](47,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](48,0,null,null,2,"ion-button",[],null,[[null,"click"]],(function(l,n,e){var u=!0;return"click"===n&&(u=!1!==l.component.showcaseDataStore()&&u),u}),_.X,_.d)),u["\u0275did"](49,49152,null,0,F.k,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{disabled:[0,"disabled"]},null),(l()(),u["\u0275ted"](-1,0,["Fetch more Data"]))],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,25,0,"12"),l(n,27,0,"cover",null==e.dataStoreData?null:e.dataStoreData.cover,"Sample Image Cover");var u=l(n,30,0,2,1);l(n,29,0,u),l(n,34,0,"4");var t=l(n,37,0,1,1);l(n,36,0,t),l(n,39,0,null==e.dataStoreData?null:e.dataStoreData.image,"Sample Image"),l(n,41,0,"8"),l(n,44,0,null==e.dataStoreData?null:e.dataStoreData.title),l(n,47,0,null==e.dataStoreData?null:e.dataStoreData.description),l(n,49,0,e.dataStoreButtonDisabled)}),(function(l,n){l(n,26,0,u["\u0275nov"](n,27).imageLoaded,u["\u0275nov"](n,27).backgroundImage,u["\u0275nov"](n,27).display),l(n,28,0,u["\u0275nov"](n,29).ratioPadding),l(n,35,0,u["\u0275nov"](n,36).ratioPadding),l(n,38,0,u["\u0275nov"](n,39).imageLoaded,u["\u0275nov"](n,39).backgroundImage,u["\u0275nov"](n,39).display),l(n,43,0,u["\u0275nov"](n,44).textLoaded),l(n,46,0,u["\u0275nov"](n,47).textLoaded)}))}function pl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-basic",[],null,null,null,cl,rl)),u["\u0275did"](1,114688,null,0,b,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var hl=u["\u0275ccf"]("app-data-store-basic",b,pl,{},{},[]),gl=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.users-list[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]{--padding-start:0px}.user-name[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{--text-shell-line-height:17px;max-width:120px}.user-name[_ngcontent-%COMP%] > app-text-shell.text-loaded[_ngcontent-%COMP%]{max-width:inherit}.user-lastname[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{--text-shell-line-height:14px;max-width:120px}.user-lastname[_ngcontent-%COMP%] > app-text-shell.text-loaded[_ngcontent-%COMP%]{max-width:inherit}"]],data:{}});function ml(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,16,"ion-item",[],null,null,null,_.lb,_.p)),u["\u0275did"](1,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,6,"ion-thumbnail",[["slot","start"]],null,null,null,_.Kb,_.Q)),u["\u0275did"](3,49152,null,0,F.wb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](4,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](5,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](6,{w:0,h:1}),(l()(),u["\u0275eld"](7,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](8,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](9,0,null,0,7,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](10,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](11,0,null,0,2,"h2",[["class","user-name"]],null,null,null,null,null)),(l()(),u["\u0275eld"](12,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](13,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](14,0,null,0,2,"h3",[["class","user-lastname"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](16,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){var e=l(n,6,0,1,1);l(n,5,0,e),l(n,8,0,null==n.context.$implicit?null:n.context.$implicit.avatar,"Sample Image"),l(n,13,0,null==n.context.$implicit?null:n.context.$implicit.first_name),l(n,16,0,null==n.context.$implicit?null:n.context.$implicit.last_name)}),(function(l,n){l(n,4,0,u["\u0275nov"](n,5).ratioPadding),l(n,7,0,u["\u0275nov"](n,8).imageLoaded,u["\u0275nov"](n,8).backgroundImage,u["\u0275nov"](n,8).display),l(n,12,0,u["\u0275nov"](n,13).textLoaded),l(n,15,0,u["\u0275nov"](n,16).textLoaded)}))}function fl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - List example "])),(l()(),u["\u0275eld"](12,0,null,null,39,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,37,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" When you fetch data from a remote API, sometimes you request a list of items. If that\u2019s the case you would end up having an "])),(l()(),u["\u0275eld"](17,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Observable"])),(l()(),u["\u0275ted"](-1,null,[" of type "])),(l()(),u["\u0275eld"](20,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Observable<Array<YourModel>>"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](23,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The "])),(l()(),u["\u0275eld"](25,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["DataStore"])),(l()(),u["\u0275ted"](-1,null,[" class works by assigning a shell property to any object. "])),(l()(),u["\u0275eld"](28,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["const myObj = new YourModel();\nObject.assign(myObj, {isShell: false});\n\nObject.assign([1, 2, 3], {isShell: false});\n"])),(l()(),u["\u0275eld"](30,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" In Javascript, everything is an object (including Arrays). That\u2019s why you can assign properties to Arrays independently of their values. "])),(l()(),u["\u0275eld"](32,0,null,null,3,"ion-list",[["class","users-list"],["lines","full"]],null,null,null,_.ob,_.t)),u["\u0275did"](33,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{lines:[0,"lines"]},null),(l()(),u["\u0275and"](16777216,null,0,1,null,ml)),u["\u0275did"](35,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),(l()(),u["\u0275eld"](36,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" In this example we keep track of the current state of the data stream in a local "])),(l()(),u["\u0275eld"](38,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["data"])),(l()(),u["\u0275ted"](-1,null,[" property. "])),(l()(),u["\u0275eld"](41,0,null,null,10,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Note how we define its type using "])),(l()(),u["\u0275eld"](43,0,null,null,1,"a",[["href","https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types"],["target","_blank"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Typescript intersection typing"])),(l()(),u["\u0275ted"](-1,null,[" like this "])),(l()(),u["\u0275eld"](46,0,null,null,1,"code",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["data: Array<YourModel> & ShellModel;"])),(l()(),u["\u0275ted"](-1,null,[" to indicate it's an array that has a shell model appended (by the "])),(l()(),u["\u0275eld"](49,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["DataStore"])),(l()(),u["\u0275ted"](-1,null,["). "]))],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,33,0,"full"),l(n,35,0,e.data)}),null)}function bl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-list",[],[[2,"is-shell",null]],null,null,fl,gl)),u["\u0275did"](1,114688,null,0,v,[h.a],null,null)],(function(l,n){l(n,1,0)}),(function(l,n){l(n,0,0,u["\u0275nov"](n,1).isShell)}))}var vl=u["\u0275ccf"]("app-data-store-list",v,bl,{},{},[]),xl=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.company[_ngcontent-%COMP%]{background-color:#ececec;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.38'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");padding:20px}"]],data:{}});function wl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Subset example "])),(l()(),u["\u0275eld"](12,0,null,null,35,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,21,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Sometimes the data coming from the remote API does not match 100% the model you defined for your view. "])),(l()(),u["\u0275eld"](17,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["export class YourModel extends ShellModel {\n  cover: string;\n  image: string;\n  title: string;\n  description: string;\n}\n\n// Data coming from the remote API with the following format\nconst jsonResponse = {\n  name: 'extra-data',\n  fields: {\n    cover: 'some-image';\n    image: 'some-other-image';\n    title: 'a-title';\n    description: 'a-description';\n  }\n};\n"])),(l()(),u["\u0275eld"](19,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Hopefully, we can use some "])),(l()(),u["\u0275eld"](21,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["RxJs operators"])),(l()(),u["\u0275ted"](-1,null,[" to mold the data and fit our needs. "])),(l()(),u["\u0275eld"](24,0,null,null,9,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" If that\u2019s not enough, you can use the handy "])),(l()(),u["\u0275eld"](26,0,null,null,6,"a",[["href","https://dev.to/napoleon039/how-to-use-the-spread-and-rest-operator-4jbb"],["target","_blank"]],null,null,null,null,null)),(l()(),u["\u0275eld"](27,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["spread"])),(l()(),u["\u0275ted"](-1,null,[" and "])),(l()(),u["\u0275eld"](30,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["rest"])),(l()(),u["\u0275ted"](-1,null,[" operators"])),(l()(),u["\u0275ted"](-1,null,[" to mold your data even deeper. "])),(l()(),u["\u0275eld"](34,0,null,null,1,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["public getListDataSource(): Observable<YourModel> {\n  const dataObservable = this.http.get('https://reqres.in/api/users');\n\n  return dataObservable.pipe(\n    map((jsonResponse) => {\n      const filteredData: YourModel = {\n        ...data.fields\n      };\n      return filteredData;\n    })\n  );\n}\n"])),(l()(),u["\u0275eld"](36,0,null,0,11,"div",[["class","company"]],null,null,null,null,null)),(l()(),u["\u0275eld"](37,0,null,null,1,"h4",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Company"])),(l()(),u["\u0275eld"](39,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](40,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-color: #FFF"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](41,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](42,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](43,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-color: #FFF"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](44,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](45,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](46,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-color: #FFF"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](47,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,41,0,e.company.name),l(n,44,0,e.company.catchPhrase),l(n,47,0,e.company.bs)}),(function(l,n){l(n,40,0,u["\u0275nov"](n,41).textLoaded),l(n,43,0,u["\u0275nov"](n,44).textLoaded),l(n,46,0,u["\u0275nov"](n,47).textLoaded)}))}function yl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-subset",[],null,null,null,wl,xl)),u["\u0275did"](1,114688,null,0,x,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var Cl=u["\u0275ccf"]("app-data-store-subset",x,yl,{},{},[]),kl=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.tasks[_ngcontent-%COMP%]{background-color:#ececec;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.38'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");padding:20px}"]],data:{}});function Rl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,25,"ion-item",[["class","task"]],null,null,null,_.lb,_.p)),u["\u0275did"](1,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,23,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](3,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](4,0,null,0,2,"h2",[],null,null,null,null,null)),(l()(),u["\u0275eld"](5,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-height: 16px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](6,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](7,0,null,0,6,"div",[["style","display: flex;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](8,0,null,null,2,"span",[["style","margin-right: 10px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](9,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Status:"])),(l()(),u["\u0275eld"](11,0,null,null,2,"h3",[["style","min-width: 100px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](12,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-height: 14px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](13,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](14,0,null,0,2,"span",[],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Owner:"])),(l()(),u["\u0275eld"](17,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](18,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](19,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](20,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](21,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](22,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](23,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](24,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](25,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){l(n,6,0,null==n.context.$implicit?null:n.context.$implicit.title),l(n,13,0,n.context.$implicit.completed?"Completed":"In Progress"),l(n,19,0,null==n.context.$implicit.user?null:n.context.$implicit.user.name),l(n,22,0,null!=n.context.$implicit&&n.context.$implicit.user?"@".concat("",n.context.$implicit.user.username):null),l(n,25,0,null==n.context.$implicit.user?null:n.context.$implicit.user.email)}),(function(l,n){l(n,5,0,u["\u0275nov"](n,6).textLoaded),l(n,12,0,u["\u0275nov"](n,13).textLoaded),l(n,18,0,u["\u0275nov"](n,19).textLoaded),l(n,21,0,u["\u0275nov"](n,22).textLoaded),l(n,24,0,u["\u0275nov"](n,25).textLoaded)}))}function Dl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Combined Data Sources "])),(l()(),u["\u0275eld"](12,0,null,null,40,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,30,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,10,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Some modern "])),(l()(),u["\u0275eld"](17,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["no-sql"])),(l()(),u["\u0275ted"](-1,null,[" solutions like "])),(l()(),u["\u0275eld"](20,0,null,null,1,"u",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["MongoDB"])),(l()(),u["\u0275ted"](-1,null,[" or "])),(l()(),u["\u0275eld"](23,0,null,null,1,"u",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Firebase Firestore"])),(l()(),u["\u0275ted"](-1,null,[" do not support multi-collection queries (left join, inner join). "])),(l()(),u["\u0275eld"](26,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" That's why you may end up using some "])),(l()(),u["\u0275eld"](28,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["RxJs"])),(l()(),u["\u0275ted"](-1,null,[" operators to manage and combine queries independently. "])),(l()(),u["\u0275eld"](31,0,null,null,9,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](32,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" These techniques are "])),(l()(),u["\u0275eld"](35,0,null,null,1,"i",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["intermediate / advanced"])),(l()(),u["\u0275ted"](-1,null,[" and require some patience to fully grasp some reactive programming concepts before you can master RxJs operators. I strongly recommend you to read this guide on "])),(l()(),u["\u0275eld"](38,0,null,null,1,"a",[["href","https://blog.angularindepth.com/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams-20fce8e6511"],["target","_blank"]],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["learning to combine RxJs sequences"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](41,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Below you can see how we combine two data sources (one depending on the other) into one Observable. "])),(l()(),u["\u0275eld"](43,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Let's do an example of Tasks and their Owners. Imagine a case where we need to have the list of tasks and the details of the 'owner' user combined in the same data source. Let's see how to do it. "])),(l()(),u["\u0275eld"](45,0,null,0,7,"div",[["class","tasks"]],null,null,null,null,null)),(l()(),u["\u0275eld"](46,0,null,null,1,"h6",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Tasks"])),(l()(),u["\u0275eld"](48,0,null,null,4,"ion-list",[["lines","full"],["style","--background: transparent"]],null,null,null,_.ob,_.t)),u["\u0275did"](49,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{lines:[0,"lines"]},null),(l()(),u["\u0275and"](16777216,null,0,2,null,Rl)),u["\u0275did"](51,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),u["\u0275pid"](0,T.SlicePipe,[])],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,49,0,"full"),l(n,51,0,u["\u0275unv"](n,51,0,u["\u0275nov"](n,52).transform(e.tasks,0,40)))}),null)}function Ol(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-combined",[],null,null,null,Dl,kl)),u["\u0275did"](1,114688,null,0,w,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var Pl=u["\u0275ccf"]("app-data-store-combined",w,Ol,{},{},[]),El=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.item-name[_ngcontent-%COMP%]{font-weight:500}.item-name[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{--text-shell-line-height:16px}.item-price[_ngcontent-%COMP%] > app-text-shell[_ngcontent-%COMP%]{--text-shell-line-height:14px;max-width:80px}.item-price[_ngcontent-%COMP%] > app-text-shell.text-loaded[_ngcontent-%COMP%]{max-width:inherit}"]],data:{}});function Ll(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,19,"ion-item",[],null,null,null,_.lb,_.p)),u["\u0275did"](1,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,6,"ion-thumbnail",[["slot","start"]],null,null,null,_.Kb,_.Q)),u["\u0275did"](3,49152,null,0,F.wb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](4,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](5,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](6,{w:0,h:1}),(l()(),u["\u0275eld"](7,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](8,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](9,0,null,0,10,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](10,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](11,0,null,0,2,"h2",[["class","item-name"]],null,null,null,null,null)),(l()(),u["\u0275eld"](12,0,null,null,1,"app-text-shell",[["animation","gradient"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](13,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](14,0,null,0,2,"h4",[],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"app-text-shell",[["animation","gradient"],["style","--text-shell-line-height:14px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](16,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](17,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](18,0,null,null,1,"app-text-shell",[["animation","gradient"],["style","--text-shell-line-height:14px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](19,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){var e=l(n,6,0,1,1);l(n,5,0,e),l(n,8,0,null==n.context.$implicit?null:n.context.$implicit.image,"Sample Image"),l(n,13,0,null==n.context.$implicit?null:n.context.$implicit.name),l(n,16,0,null==n.context.$implicit?null:n.context.$implicit.category),l(n,19,0,null==n.context.$implicit?null:n.context.$implicit.address)}),(function(l,n){l(n,4,0,u["\u0275nov"](n,5).ratioPadding),l(n,7,0,u["\u0275nov"](n,8).imageLoaded,u["\u0275nov"](n,8).backgroundImage,u["\u0275nov"](n,8).display),l(n,12,0,u["\u0275nov"](n,13).textLoaded),l(n,15,0,u["\u0275nov"](n,16).textLoaded),l(n,18,0,u["\u0275nov"](n,19).textLoaded)}))}function Ml(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,16,"ion-item",[],null,null,null,_.lb,_.p)),u["\u0275did"](1,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,6,"ion-thumbnail",[["slot","start"]],null,null,null,_.Kb,_.Q)),u["\u0275did"](3,49152,null,0,F.wb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](4,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](5,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](6,{w:0,h:1}),(l()(),u["\u0275eld"](7,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](8,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](9,0,null,0,7,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](10,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](11,0,null,0,2,"h2",[["class","item-name"]],null,null,null,null,null)),(l()(),u["\u0275eld"](12,0,null,null,1,"app-text-shell",[["animation","gradient"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](13,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](14,0,null,0,2,"p",[["class","item-price"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"app-text-shell",[["animation","gradient"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](16,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){var e=l(n,6,0,1,1);l(n,5,0,e),l(n,8,0,null==n.context.$implicit?null:n.context.$implicit.image,"Sample Image"),l(n,13,0,null==n.context.$implicit?null:n.context.$implicit.name),l(n,16,0,null!=n.context.$implicit&&n.context.$implicit.salePrice?"$".concat("",n.context.$implicit.salePrice):null)}),(function(l,n){l(n,4,0,u["\u0275nov"](n,5).ratioPadding),l(n,7,0,u["\u0275nov"](n,8).imageLoaded,u["\u0275nov"](n,8).backgroundImage,u["\u0275nov"](n,8).display),l(n,12,0,u["\u0275nov"](n,13).textLoaded),l(n,15,0,u["\u0275nov"](n,16).textLoaded)}))}function Nl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Multiple DataStores example "])),(l()(),u["\u0275eld"](12,0,null,null,34,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,32,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Sometimes your view displays different types of data, each of them with a different model and data source. "])),(l()(),u["\u0275eld"](17,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" If this is your use case, then you can use multiple data stores to fetch each data stream. "])),(l()(),u["\u0275eld"](19,0,null,null,9,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](20,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" This use case is different from the "])),(l()(),u["\u0275eld"](23,0,null,null,4,"a",[],[[1,"target",0],[8,"href",4]],[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,24).onClick(e)&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,25).onClick(e.button,e.ctrlKey,e.metaKey,e.shiftKey)&&t),t}),null,null)),u["\u0275did"](24,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),u["\u0275did"](25,671744,null,0,I.o,[I.m,I.a,T.LocationStrategy],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](26,1),(l()(),u["\u0275ted"](-1,null,["Combined Data Sources"])),(l()(),u["\u0275ted"](-1,null,[" because in this case you have two data streams that will change independently one from the other updating different parts of the view without causing a full view 're-loading'. "])),(l()(),u["\u0275eld"](29,0,null,null,1,"h6",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Data Source A"])),(l()(),u["\u0275eld"](31,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["What to do nearby"])),(l()(),u["\u0275eld"](33,0,null,null,4,"ion-list",[["lines","full"]],null,null,null,_.ob,_.t)),u["\u0275did"](34,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{lines:[0,"lines"]},null),(l()(),u["\u0275and"](16777216,null,0,2,null,Ll)),u["\u0275did"](36,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),u["\u0275pid"](0,T.SlicePipe,[]),(l()(),u["\u0275eld"](38,0,null,null,1,"h6",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Data Source B"])),(l()(),u["\u0275eld"](40,0,null,null,1,"h5",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Shop what's trending"])),(l()(),u["\u0275eld"](42,0,null,null,4,"ion-list",[["lines","full"]],null,null,null,_.ob,_.t)),u["\u0275did"](43,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{lines:[0,"lines"]},null),(l()(),u["\u0275and"](16777216,null,0,2,null,Ml)),u["\u0275did"](45,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),u["\u0275pid"](0,T.SlicePipe,[])],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,24,0);var t=l(n,26,0,"/showcase/app-shell/data-store-combined");l(n,25,0,t),l(n,34,0,"full"),l(n,36,0,u["\u0275unv"](n,36,0,u["\u0275nov"](n,37).transform(null==e.dataA?null:e.dataA.items,0,3))),l(n,43,0,"full"),l(n,45,0,u["\u0275unv"](n,45,0,u["\u0275nov"](n,46).transform(null==e.dataB?null:e.dataB.items,0,5)))}),(function(l,n){l(n,23,0,u["\u0275nov"](n,25).target,u["\u0275nov"](n,25).href)}))}function Sl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-multiple",[],null,null,null,Nl,El)),u["\u0275did"](1,114688,null,0,k,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var _l=u["\u0275ccf"]("app-data-store-multiple",k,Sl,{},{},[]),Fl=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}"]],data:{}});function Il(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,2,"span",[["style","margin-inline-start: 10px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](1,0,null,null,1,"small",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["(No more pages available)"]))],null,null)}function Tl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,16,"ion-row",[["style","background-color: #FFF; padding: 10px;"]],null,null,null,_.wb,_.C)),u["\u0275did"](1,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,6,"ion-col",[["size","4"]],null,null,null,_.ab,_.g)),u["\u0275did"](3,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](5,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](6,{w:0,h:1}),(l()(),u["\u0275eld"](7,0,null,0,1,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](8,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),(l()(),u["\u0275eld"](9,0,null,0,7,"ion-col",[["size","8"]],null,null,null,_.ab,_.g)),u["\u0275did"](10,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](11,0,null,0,2,"h3",[["style","margin-top: 0px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](12,0,null,null,1,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](13,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](14,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,1,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](16,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){l(n,3,0,"4");var e=l(n,6,0,1,1);l(n,5,0,e),l(n,8,0,null==n.context.$implicit?null:n.context.$implicit.avatar,"Sample Image"),l(n,10,0,"8"),l(n,13,0,null==n.context.$implicit?null:n.context.$implicit.first_name),l(n,16,0,null==n.context.$implicit?null:n.context.$implicit.last_name)}),(function(l,n){l(n,4,0,u["\u0275nov"](n,5).ratioPadding),l(n,7,0,u["\u0275nov"](n,8).imageLoaded,u["\u0275nov"](n,8).backgroundImage,u["\u0275nov"](n,8).display),l(n,12,0,u["\u0275nov"](n,13).textLoaded),l(n,15,0,u["\u0275nov"](n,16).textLoaded)}))}function Zl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Pagination example "])),(l()(),u["\u0275eld"](12,0,null,null,27,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,25,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This example is useful for use cases that require the data stream to be updated based on user actions. "])),(l()(),u["\u0275eld"](17,0,null,null,1,"i",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Pagination"])),(l()(),u["\u0275ted"](-1,null,[" and "])),(l()(),u["\u0275eld"](20,0,null,null,1,"i",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["filtering"])),(l()(),u["\u0275ted"](-1,null,[" are the clear use cases that come to my mind. "])),(l()(),u["\u0275eld"](23,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" For these use cases you get the initial data stream and then, upon user interaction, you request an update for that stream. For example requesting your remote API for the next page of results or a filtered set of results. "])),(l()(),u["\u0275eld"](25,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This example shows you how to merge the initial data stream with future data streams that may arise from user interaction. "])),(l()(),u["\u0275eld"](27,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](28,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](29,null,["Current page: ",""])),(l()(),u["\u0275and"](16777216,null,null,1,null,Il)),u["\u0275did"](31,16384,null,0,T.NgIf,[u.ViewContainerRef,u.TemplateRef],{ngIf:[0,"ngIf"]},null),(l()(),u["\u0275eld"](32,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](33,0,null,null,1,"small",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Each time you click the button we fetch users from the next page."])),(l()(),u["\u0275and"](16777216,null,null,1,null,Tl)),u["\u0275did"](36,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),(l()(),u["\u0275eld"](37,0,null,null,2,"ion-button",[],null,[[null,"click"]],(function(l,n,e){var u=!0;return"click"===n&&(u=!1!==l.component.getNextPageUsers()&&u),u}),_.X,_.d)),u["\u0275did"](38,49152,null,0,F.k,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{disabled:[0,"disabled"]},null),(l()(),u["\u0275ted"](-1,0,["Fetch next page"]))],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,31,0,!e.loadMorePages),l(n,36,0,e.pagedUsers),l(n,38,0,!e.loadMorePages||e.pagedUsers.isShell)}),(function(l,n){l(n,29,0,n.component.currentPage)}))}function zl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-pagination",[],null,null,null,Zl,Fl)),u["\u0275did"](1,114688,null,0,P,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var Hl=u["\u0275ccf"]("app-data-store-pagination",P,zl,{},{},[]),Al=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.stacked-items-demo[_ngcontent-%COMP%]{background-color:#ececec;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.38'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");padding:0 0 20px}.sticky-section[_ngcontent-%COMP%]{position:-webkit-sticky;position:sticky;top:0;background:#ececec;padding:20px;margin:0 0 60px!important;z-index:10}"]],data:{}});function Bl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,19,"ion-row",[["style","background-color: #FFF; padding: 10px;"]],null,null,null,_.wb,_.C)),u["\u0275did"](1,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,7,"ion-col",[["size","4"]],null,null,null,_.ab,_.g)),u["\u0275did"](3,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](4,0,null,0,5,"app-aspect-ratio",[],[[4,"padding",null]],null,null,H.b,H.a)),u["\u0275did"](5,49152,null,0,A.a,[],{ratio:[0,"ratio"]},null),u["\u0275pod"](6,{w:0,h:1}),(l()(),u["\u0275eld"](7,0,null,0,2,"app-image-shell",[["animation","spinner"]],[[2,"img-loaded",null],[4,"backgroundImage",null],[1,"display",0]],null,null,Z.b,Z.a)),u["\u0275did"](8,49152,null,0,z.a,[u.PLATFORM_ID],{src:[0,"src"],alt:[1,"alt"]},null),u["\u0275pid"](131072,T.AsyncPipe,[u.ChangeDetectorRef]),(l()(),u["\u0275eld"](10,0,null,0,9,"ion-col",[["size","8"]],null,null,null,_.ab,_.g)),u["\u0275did"](11,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](12,0,null,0,3,"h3",[["style","margin-top: 0px;"]],null,null,null,null,null)),(l()(),u["\u0275eld"](13,0,null,null,2,"app-text-shell",[],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](14,49152,null,0,j.a,[],{data:[0,"data"]},null),u["\u0275pid"](131072,T.AsyncPipe,[u.ChangeDetectorRef]),(l()(),u["\u0275eld"](16,0,null,0,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](17,0,null,null,2,"app-text-shell",[["lines","3"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](18,49152,null,0,j.a,[],{data:[0,"data"]},null),u["\u0275pid"](131072,T.AsyncPipe,[u.ChangeDetectorRef])],(function(l,n){l(n,3,0,"4");var e,t,a,o=l(n,6,0,1,1);l(n,5,0,o),l(n,8,0,null==(e=u["\u0275unv"](n,8,0,u["\u0275nov"](n,9).transform(n.context.user)))?null:e.avatar,"Sample Image"),l(n,11,0,"8"),l(n,14,0,null==(t=u["\u0275unv"](n,14,0,u["\u0275nov"](n,15).transform(n.context.user)))?null:t.first_name),l(n,18,0,null==(a=u["\u0275unv"](n,18,0,u["\u0275nov"](n,19).transform(n.context.user)))?null:a.last_name)}),(function(l,n){l(n,4,0,u["\u0275nov"](n,5).ratioPadding),l(n,7,0,u["\u0275nov"](n,8).imageLoaded,u["\u0275nov"](n,8).backgroundImage,u["\u0275nov"](n,8).display),l(n,13,0,u["\u0275nov"](n,14).textLoaded),l(n,17,0,u["\u0275nov"](n,18).textLoaded)}))}function jl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,0,null,null,null,null,null,null,null))],null,null)}function $l(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,3,"div",[],null,null,null,null,null)),(l()(),u["\u0275and"](16777216,null,null,2,null,jl)),u["\u0275did"](2,540672,null,0,T.NgTemplateOutlet,[u.ViewContainerRef],{ngTemplateOutletContext:[0,"ngTemplateOutletContext"],ngTemplateOutlet:[1,"ngTemplateOutlet"]},null),u["\u0275pod"](3,{user:0})],(function(l,n){var e=l(n,3,0,n.context.$implicit);l(n,2,0,e,u["\u0275nov"](n.parent,44))}),null)}function Yl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,0,null,null,null,null,null,null,null))],null,null)}function Vl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,3,"div",[],null,null,null,null,null)),(l()(),u["\u0275and"](16777216,null,null,2,null,Yl)),u["\u0275did"](2,540672,null,0,T.NgTemplateOutlet,[u.ViewContainerRef],{ngTemplateOutletContext:[0,"ngTemplateOutletContext"],ngTemplateOutlet:[1,"ngTemplateOutlet"]},null),u["\u0275pod"](3,{user:0})],(function(l,n){var e=l(n,3,0,n.context.$implicit);l(n,2,0,e,u["\u0275nov"](n.parent,44))}),null)}function Gl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Stacked shells example "])),(l()(),u["\u0275eld"](12,0,null,null,51,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,29,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Once you have values coming from the initial data stream, the shell animation would be off. If its an "])),(l()(),u["\u0275eld"](17,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["open stream"])),(l()(),u["\u0275ted"](-1,null,[", then each time a new value arrives, it will be added to the view state without the shell animation. "])),(l()(),u["\u0275eld"](20,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This example is handy If you want to change the default functionality and apply independent shell animations to each value coming from the "])),(l()(),u["\u0275eld"](22,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["open data stream"])),(l()(),u["\u0275ted"](-1,null,[". "])),(l()(),u["\u0275eld"](25,0,null,null,4,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" It's also a good example if you want to implement an "])),(l()(),u["\u0275eld"](27,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["inifini scroll"])),(l()(),u["\u0275ted"](-1,null,[" feature. "])),(l()(),u["\u0275eld"](30,0,null,null,3,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](31,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Note:"])),(l()(),u["\u0275ted"](-1,null,[" For this to work we will be transforming plain values into Observables, thus the need to update our markup and specify the binded model as async. "])),(l()(),u["\u0275eld"](34,0,null,null,7,"pre",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,['<h3>\n  <app-text-shell [data]="'])),(l()(),u["\u0275eld"](36,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["(user | async)?"])),(l()(),u["\u0275ted"](-1,null,['.first_name"></app-text-shell>\n</h3>\n<p>\n  <app-text-shell [data]="'])),(l()(),u["\u0275eld"](39,0,null,null,1,"b",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["(user | async)?"])),(l()(),u["\u0275ted"](-1,null,['.last_name" lines="3"></app-text-shell>\n</p>\n'])),(l()(),u["\u0275eld"](42,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" Also as we are dealing with a mix of shell models and real values that get stacked one after the other, we need to have two seperate lists. One to show the shell values and another to contain the stacked values. "])),(l()(),u["\u0275and"](0,[["userTemplate",2]],0,0,null,Bl)),(l()(),u["\u0275eld"](45,0,null,0,18,"div",[["class","stacked-items-demo"]],null,null,null,null,null)),(l()(),u["\u0275eld"](46,0,null,null,12,"section",[["class","showcase-section sticky-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](47,0,null,null,11,"ion-row",[],null,null,null,_.wb,_.C)),u["\u0275did"](48,49152,null,0,F.gb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](49,0,null,0,4,"ion-col",[["size","12"]],null,null,null,_.ab,_.g)),u["\u0275did"](50,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](51,0,null,0,2,"ion-button",[],null,[[null,"click"]],(function(l,n,e){var u=!0;return"click"===n&&(u=!1!==l.component.pushValuesToOpenStream()&&u),u}),_.X,_.d)),u["\u0275did"](52,49152,null,0,F.k,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Push values to open stream"])),(l()(),u["\u0275eld"](54,0,null,0,4,"ion-col",[["size","12"]],null,null,null,_.ab,_.g)),u["\u0275did"](55,49152,null,0,F.t,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{size:[0,"size"]},null),(l()(),u["\u0275eld"](56,0,null,0,2,"ion-button",[],null,[[null,"click"]],(function(l,n,e){var u=!0;return"click"===n&&(u=!1!==l.component.loadStackedResults()&&u),u}),_.X,_.d)),u["\u0275did"](57,49152,null,0,F.k,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,["Load New Values"])),(l()(),u["\u0275eld"](59,0,null,null,4,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275and"](16777216,null,null,1,null,$l)),u["\u0275did"](61,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),(l()(),u["\u0275and"](16777216,null,null,1,null,Vl)),u["\u0275did"](63,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null)],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,50,0,"12"),l(n,55,0,"12"),l(n,61,0,e.stackedUsers),l(n,63,0,e.shellUsers)}),null)}function Jl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-stacked",[],null,null,null,Gl,Al)),u["\u0275did"](1,114688,null,0,L,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var Wl=u["\u0275ccf"]("app-data-store-stacked",L,Jl,{},{},[]),ql=u["\u0275crt"]({encapsulation:0,styles:[[".showcase-content[_ngcontent-%COMP%]{--background:var(--app-background)}.showcase-content[_ngcontent-%COMP%]   ion-item-divider[_ngcontent-%COMP%]{--background:var(--ion-color-secondary);--color:var(--ion-color-lightest);text-transform:uppercase;font-weight:500;letter-spacing:1px}.showcase-content[_ngcontent-%COMP%]   .showcase-section[_ngcontent-%COMP%]{margin:20px 20px 60px}.showcase-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]{font-size:14px;background:#ccc;padding:10px}.showcase-content[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]{color:#f92672;font-weight:500}.post[_ngcontent-%COMP%]{background-color:#ececec;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.38'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");padding:20px}"]],data:{}});function Kl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,9,"ion-item",[],null,null,null,_.lb,_.p)),u["\u0275did"](1,49152,null,0,F.H,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,7,"ion-label",[],null,null,null,_.mb,_.s)),u["\u0275did"](3,49152,null,0,F.N,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](4,0,null,0,2,"h2",[],null,null,null,null,null)),(l()(),u["\u0275eld"](5,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-height: 16px;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](6,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](7,0,null,0,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](8,0,null,null,1,"app-text-shell",[["animation","bouncing"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](9,49152,null,0,j.a,[],{data:[0,"data"]},null)],(function(l,n){l(n,6,0,null==n.context.$implicit?null:n.context.$implicit.name),l(n,9,0,null==n.context.$implicit?null:n.context.$implicit.body)}),(function(l,n){l(n,5,0,u["\u0275nov"](n,6).textLoaded),l(n,8,0,u["\u0275nov"](n,9).textLoaded)}))}function Ul(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,11,"ion-header",[],null,null,null,_.gb,_.m)),u["\u0275did"](1,49152,null,0,F.B,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](2,0,null,0,9,"ion-toolbar",[["color","primary"]],null,null,null,_.Nb,_.T)),u["\u0275did"](3,49152,null,0,F.zb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{color:[0,"color"]},null),(l()(),u["\u0275eld"](4,0,null,0,4,"ion-buttons",[["slot","start"]],null,null,null,_.Y,_.e)),u["\u0275did"](5,49152,null,0,F.l,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](6,0,null,0,2,"ion-back-button",[["defaultHref","showcase/app-shell"]],null,[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,8).onClick(e)&&t),t}),_.V,_.b)),u["\u0275did"](7,49152,null,0,F.g,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{defaultHref:[0,"defaultHref"]},null),u["\u0275did"](8,16384,null,0,F.h,[[2,F.fb],F.Gb],{defaultHref:[0,"defaultHref"]},null),(l()(),u["\u0275eld"](9,0,null,0,2,"ion-title",[],null,null,null,_.Lb,_.R)),u["\u0275did"](10,49152,null,0,F.xb,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275ted"](-1,0,[" DataStore - Dependant Data Sources "])),(l()(),u["\u0275eld"](12,0,null,null,42,"ion-content",[["class","showcase-content"]],null,null,null,_.bb,_.h)),u["\u0275did"](13,49152,null,0,F.u,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],null,null),(l()(),u["\u0275eld"](14,0,null,0,26,"section",[["class","showcase-section"]],null,null,null,null,null)),(l()(),u["\u0275eld"](15,0,null,null,13,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This example kinda mixes the two previous examples ("])),(l()(),u["\u0275eld"](17,0,null,null,4,"a",[],[[1,"target",0],[8,"href",4]],[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,18).onClick(e)&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,19).onClick(e.button,e.ctrlKey,e.metaKey,e.shiftKey)&&t),t}),null,null)),u["\u0275did"](18,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),u["\u0275did"](19,671744,null,0,I.o,[I.m,I.a,T.LocationStrategy],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](20,1),(l()(),u["\u0275ted"](-1,null,["multiple data stores"])),(l()(),u["\u0275ted"](-1,null,[", "])),(l()(),u["\u0275eld"](23,0,null,null,4,"a",[],[[1,"target",0],[8,"href",4]],[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,24).onClick(e)&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,25).onClick(e.button,e.ctrlKey,e.metaKey,e.shiftKey)&&t),t}),null,null)),u["\u0275did"](24,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),u["\u0275did"](25,671744,null,0,I.o,[I.m,I.a,T.LocationStrategy],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](26,1),(l()(),u["\u0275ted"](-1,null,["one depending on the other"])),(l()(),u["\u0275ted"](-1,null,["). "])),(l()(),u["\u0275eld"](29,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" The uses cases in which to use this approach would be if you have different data sources that depend on each other, but you want the different sections of the view to 're-load' independently one from the other. "])),(l()(),u["\u0275eld"](31,0,null,null,7,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" This contrasts the use case of the "])),(l()(),u["\u0275eld"](33,0,null,null,4,"a",[],[[1,"target",0],[8,"href",4]],[[null,"click"]],(function(l,n,e){var t=!0;return"click"===n&&(t=!1!==u["\u0275nov"](l,34).onClick(e)&&t),"click"===n&&(t=!1!==u["\u0275nov"](l,35).onClick(e.button,e.ctrlKey,e.metaKey,e.shiftKey)&&t),t}),null,null)),u["\u0275did"](34,737280,null,0,F.Jb,[T.LocationStrategy,F.Gb,u.ElementRef,I.m,[2,I.n]],null,null),u["\u0275did"](35,671744,null,0,I.o,[I.m,I.a,T.LocationStrategy],{routerLink:[0,"routerLink"]},null),u["\u0275pad"](36,1),(l()(),u["\u0275ted"](-1,null,["Combined Data Source"])),(l()(),u["\u0275ted"](-1,null,[" where you transform multiple data sources into one, causing the hole view to be 're-loaded' as it's binded to just one combined Observable. "])),(l()(),u["\u0275eld"](39,0,null,null,1,"p",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,[" A good example can be a post and its comments. The comments depend on the post but you want them to 're-load' independently from the post. "])),(l()(),u["\u0275eld"](41,0,null,0,13,"div",[["class","post"]],null,null,null,null,null)),(l()(),u["\u0275eld"](42,0,null,null,2,"h4",[],null,null,null,null,null)),(l()(),u["\u0275eld"](43,0,null,null,1,"app-text-shell",[["animation","bouncing"],["style","--text-shell-line-color: #FFF;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](44,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](45,0,null,null,2,"p",[],null,null,null,null,null)),(l()(),u["\u0275eld"](46,0,null,null,1,"app-text-shell",[["animation","bouncing"],["lines","3"],["style","--text-shell-line-color: #fffdfd;"]],[[2,"text-loaded",null]],null,null,B.b,B.a)),u["\u0275did"](47,49152,null,0,j.a,[],{data:[0,"data"]},null),(l()(),u["\u0275eld"](48,0,null,null,1,"h6",[],null,null,null,null,null)),(l()(),u["\u0275ted"](-1,null,["Comments"])),(l()(),u["\u0275eld"](50,0,null,null,4,"ion-list",[["lines","full"],["style","--background: transparent"]],null,null,null,_.ob,_.t)),u["\u0275did"](51,49152,null,0,F.O,[u.ChangeDetectorRef,u.ElementRef,u.NgZone],{lines:[0,"lines"]},null),(l()(),u["\u0275and"](16777216,null,0,2,null,Kl)),u["\u0275did"](53,278528,null,0,T.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),u["\u0275pid"](0,T.SlicePipe,[])],(function(l,n){var e=n.component;l(n,3,0,"primary"),l(n,7,0,"showcase/app-shell"),l(n,8,0,"showcase/app-shell"),l(n,18,0);var t=l(n,20,0,"/showcase/app-shell/data-store-multiple");l(n,19,0,t),l(n,24,0);var a=l(n,26,0,"/showcase/app-shell/data-store-combined");l(n,25,0,a),l(n,34,0);var o=l(n,36,0,"/showcase/app-shell/data-store-combined");l(n,35,0,o),l(n,44,0,null==e.post?null:e.post.title),l(n,47,0,null==e.post?null:e.post.body),l(n,51,0,"full"),l(n,53,0,u["\u0275unv"](n,53,0,u["\u0275nov"](n,54).transform(e.comments,0,5)))}),(function(l,n){l(n,17,0,u["\u0275nov"](n,19).target,u["\u0275nov"](n,19).href),l(n,23,0,u["\u0275nov"](n,25).target,u["\u0275nov"](n,25).href),l(n,33,0,u["\u0275nov"](n,35).target,u["\u0275nov"](n,35).href),l(n,43,0,u["\u0275nov"](n,44).textLoaded),l(n,46,0,u["\u0275nov"](n,47).textLoaded)}))}function Xl(l){return u["\u0275vid"](0,[(l()(),u["\u0275eld"](0,0,null,null,1,"app-data-store-dependant",[],null,null,null,Ul,ql)),u["\u0275did"](1,114688,null,0,M,[h.a],null,null)],(function(l,n){l(n,1,0)}),null)}var Ql=u["\u0275ccf"]("app-data-store-dependant",M,Xl,{},{},[]),ln=e("IheW"),nn=e("ZpN7"),en=e("Kt/9"),un=e("j1ZV");e.d(n,"AppShellModuleNgFactory",(function(){return tn}));var tn=u["\u0275cmf"](N,[],(function(l){return u["\u0275mod"]([u["\u0275mpd"](512,u.ComponentFactoryResolver,u["\u0275CodegenComponentFactoryResolver"],[[8,[S.a,G,K,ll,al,sl,hl,vl,Cl,Pl,_l,Hl,Wl,Ql]],[3,u.ComponentFactoryResolver],u.NgModuleRef]),u["\u0275mpd"](4608,T.NgLocalization,T.NgLocaleLocalization,[u.LOCALE_ID,[2,T["\u0275angular_packages_common_common_a"]]]),u["\u0275mpd"](4608,nl.u,nl.u,[]),u["\u0275mpd"](4608,F.b,F.b,[u.NgZone,u.ApplicationRef]),u["\u0275mpd"](4608,F.Fb,F.Fb,[F.b,u.ComponentFactoryResolver,u.Injector]),u["\u0275mpd"](4608,F.Hb,F.Hb,[F.b,u.ComponentFactoryResolver,u.Injector]),u["\u0275mpd"](4608,ln.h,ln.n,[T.DOCUMENT,u.PLATFORM_ID,ln.l]),u["\u0275mpd"](4608,ln.o,ln.o,[ln.h,ln.m]),u["\u0275mpd"](5120,ln.a,(function(l){return[l]}),[ln.o]),u["\u0275mpd"](4608,ln.k,ln.k,[]),u["\u0275mpd"](6144,ln.i,null,[ln.k]),u["\u0275mpd"](4608,ln.g,ln.g,[ln.i]),u["\u0275mpd"](6144,ln.b,null,[ln.g]),u["\u0275mpd"](4608,ln.f,ln.j,[ln.b,u.Injector]),u["\u0275mpd"](4608,ln.c,ln.c,[ln.f]),u["\u0275mpd"](5120,u.APP_INITIALIZER,(function(l){return[nn.b(l)]}),[en.a]),u["\u0275mpd"](4608,h.a,h.a,[ln.c]),u["\u0275mpd"](1073742336,T.CommonModule,T.CommonModule,[]),u["\u0275mpd"](1073742336,nl.t,nl.t,[]),u["\u0275mpd"](1073742336,nl.j,nl.j,[]),u["\u0275mpd"](1073742336,F.Bb,F.Bb,[]),u["\u0275mpd"](1073742336,I.p,I.p,[[2,I.u],[2,I.m]]),u["\u0275mpd"](1073742336,ln.e,ln.e,[]),u["\u0275mpd"](1073742336,ln.d,ln.d,[]),u["\u0275mpd"](1073742336,nn.a,nn.a,[]),u["\u0275mpd"](1073742336,un.a,un.a,[]),u["\u0275mpd"](1073742336,N,N,[]),u["\u0275mpd"](256,ln.l,"XSRF-TOKEN",[]),u["\u0275mpd"](256,ln.m,"X-XSRF-TOKEN",[]),u["\u0275mpd"](1024,I.k,(function(){return[[{path:"",component:t},{path:"aspect-ratio",component:a},{path:"image-shell",component:o},{path:"text-shell",component:d},{path:"simple-data-binding",component:g},{path:"data-store-basic",component:b},{path:"data-store-list",component:v},{path:"data-store-subset",component:x},{path:"data-store-combined",component:w},{path:"data-store-multiple",component:k},{path:"data-store-pagination",component:P},{path:"data-store-stacked",component:L},{path:"data-store-dependant",component:M}]]}),[])])}))},"f/Ol":function(l,n,e){"use strict";e.d(n,"b",(function(){return r})),e.d(n,"a",(function(){return c}));var u=e("jtHE"),t=e("LRne"),a=e("itXk"),o=e("3E0/"),d=e("lJxs"),i=e("JX91"),s=e("Kt/9");class r{constructor(){this.isShell=!1}}class c{constructor(l){this.shellModel=l,this.networkDelay=s.a.settings&&s.a.settings.networkDelay?s.a.settings.networkDelay:0,this.timeline=new u.a(1)}static AppendShell(l,n,e=400){const u=Object(t.a)(!0).pipe(Object(o.a)(e));return Object(a.a)([u,l]).pipe(Object(d.a)(([l,n])=>Object.assign(n,{isShell:!1})),Object(i.a)(Object.assign(n,{isShell:!0})))}load(l){c.AppendShell(l,this.shellModel,this.networkDelay).subscribe(l=>{this.timeline.next(l)})}get state(){return this.timeline.asObservable()}}},jtHE:function(l,n,e){"use strict";e.d(n,"a",(function(){return s}));var u=e("XNiG"),t=e("qgXg"),a=e("quSY"),o=e("pxpQ"),d=e("9ppp"),i=e("Ylt2");class s extends u.a{constructor(l=Number.POSITIVE_INFINITY,n=Number.POSITIVE_INFINITY,e){super(),this.scheduler=e,this._events=[],this._infiniteTimeWindow=!1,this._bufferSize=l<1?1:l,this._windowTime=n<1?1:n,n===Number.POSITIVE_INFINITY?(this._infiniteTimeWindow=!0,this.next=this.nextInfiniteTimeWindow):this.next=this.nextTimeWindow}nextInfiniteTimeWindow(l){const n=this._events;n.push(l),n.length>this._bufferSize&&n.shift(),super.next(l)}nextTimeWindow(l){this._events.push(new r(this._getNow(),l)),this._trimBufferThenGetEvents(),super.next(l)}_subscribe(l){const n=this._infiniteTimeWindow,e=n?this._events:this._trimBufferThenGetEvents(),u=this.scheduler,t=e.length;let s;if(this.closed)throw new d.a;if(this.isStopped||this.hasError?s=a.a.EMPTY:(this.observers.push(l),s=new i.a(this,l)),u&&l.add(l=new o.a(l,u)),n)for(let a=0;a<t&&!l.closed;a++)l.next(e[a]);else for(let a=0;a<t&&!l.closed;a++)l.next(e[a].value);return this.hasError?l.error(this.thrownError):this.isStopped&&l.complete(),s}_getNow(){return(this.scheduler||t.a).now()}_trimBufferThenGetEvents(){const l=this._getNow(),n=this._bufferSize,e=this._windowTime,u=this._events,t=u.length;let a=0;for(;a<t&&!(l-u[a].time<e);)a++;return t>n&&(a=Math.max(a,t-n)),a>0&&u.splice(0,a),u}}class r{constructor(l,n){this.time=l,this.value=n}}},pxpQ:function(l,n,e){"use strict";e.d(n,"b",(function(){return a})),e.d(n,"a",(function(){return d}));var u=e("7o/Q"),t=e("WMd4");function a(l,n=0){return function(e){return e.lift(new o(l,n))}}class o{constructor(l,n=0){this.scheduler=l,this.delay=n}call(l,n){return n.subscribe(new d(l,this.scheduler,this.delay))}}class d extends u.a{constructor(l,n,e=0){super(l),this.scheduler=n,this.delay=e}static dispatch(l){const{notification:n,destination:e}=l;n.observe(e),this.unsubscribe()}scheduleMessage(l){this.destination.add(this.scheduler.schedule(d.dispatch,this.delay,new i(l,this.destination)))}_next(l){this.scheduleMessage(t.a.createNext(l))}_error(l){this.scheduleMessage(t.a.createError(l)),this.unsubscribe()}_complete(){this.scheduleMessage(t.a.createComplete()),this.unsubscribe()}}class i{constructor(l,n){this.notification=l,this.destination=n}}},qgXg:function(l,n,e){"use strict";var u=e("3N8a");class t extends u.a{constructor(l,n){super(l,n),this.scheduler=l,this.work=n}schedule(l,n=0){return n>0?super.schedule(l,n):(this.delay=n,this.state=l,this.scheduler.flush(this),this)}execute(l,n){return n>0||this.closed?super.execute(l,n):this._execute(l,n)}requestAsyncId(l,n,e=0){return null!==e&&e>0||null===e&&this.delay>0?super.requestAsyncId(l,n,e):l.flush(this)}}var a=e("IjjT");class o extends a.a{}e.d(n,"a",(function(){return d}));const d=new o(t)}}]);