4209.9f8e460972c1eb2a.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[4209],{4209:(Y,d,r)=>{r.r(d),r.d(d,{CdkScrollingExamplesModule:()=>$,CdkVirtualScrollAppendOnlyExample:()=>s,CdkVirtualScrollContextExample:()=>u,CdkVirtualScrollCustomStrategyExample:()=>x,CdkVirtualScrollDataSourceExample:()=>g,CdkVirtualScrollDlExample:()=>f,CdkVirtualScrollFixedBufferExample:()=>_,CdkVirtualScrollHorizontalExample:()=>v,CdkVirtualScrollOverviewExample:()=>h,CdkVirtualScrollParentScrollingExample:()=>k,CdkVirtualScrollTemplateCacheExample:()=>C,CdkVirtualScrollWindowScrollingExample:()=>S});var n=r(7376),e=r(4650),E=r(5017),y=r(591),O=r(2654),m=r(6895);function w(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function T(t,l){if(1&t&&(e.TgZ(0,"div")(1,"div",2),e._uU(2),e.qZA(),e.TgZ(3,"div",2),e._uU(4),e.qZA(),e.TgZ(5,"div",2),e._uU(6),e.qZA(),e.TgZ(7,"div",2),e._uU(8),e.qZA(),e.TgZ(9,"div",2),e._uU(10),e.qZA(),e.TgZ(11,"div",2),e._uU(12),e.qZA(),e.TgZ(13,"div",2),e._uU(14),e.qZA()()),2&t){const a=l.$implicit,i=l.index,p=l.count,c=l.first,J=l.last,W=l.even,V=l.odd;e.ekj("example-alternate",V),e.xp6(2),e.hij("Item: ",a,""),e.xp6(2),e.hij("Index: ",i,""),e.xp6(2),e.hij("Count: ",p,""),e.xp6(2),e.hij("First: ",c?"Yes":"No",""),e.xp6(2),e.hij("Last: ",J?"Yes":"No",""),e.xp6(2),e.hij("Even: ",W?"Yes":"No",""),e.xp6(2),e.hij("Odd: ",V?"Yes":"No","")}}function M(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}const o=".example-viewport[_ngcontent-%COMP%] {\n  height: 200px;\n  width: 200px;\n  border: 1px solid black;\n}\n\n.example-item[_ngcontent-%COMP%] {\n  height: 50px;\n}";function D(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a||"Loading...")}}function A(t,l){if(1&t&&(e.ynx(0),e.TgZ(1,"dt",3),e._uU(2),e.qZA(),e.TgZ(3,"dd",4),e._uU(4),e.qZA(),e.BQk()),2&t){const a=l.$implicit;e.xp6(2),e.Oqu(a.name),e.xp6(2),e.Oqu(a.capital)}}function Z(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function F(t,l){if(1&t&&(e.TgZ(0,"div",3),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function P(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function q(t,l){if(1&t&&(e.TgZ(0,"div",5),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function N(t,l){if(1&t&&(e.TgZ(0,"div",2),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function b(t,l){if(1&t&&(e.TgZ(0,"div",5),e._uU(1),e.qZA()),2&t){const a=l.$implicit;e.xp6(1),e.Oqu(a)}}function z(t,l){if(1&t&&(e.ynx(0),e.TgZ(1,"div",1),e._uU(2,"Content before"),e.qZA(),e.TgZ(3,"cdk-virtual-scroll-viewport",2),e.YNc(4,b,2,1,"div",3),e.qZA(),e.TgZ(5,"div",4),e._uU(6,"Content after"),e.qZA(),e.BQk()),2&t){const a=e.oxw();e.xp6(4),e.Q6J("cdkVirtualForOf",a.items)}}function U(t,l){1&t&&(e.TgZ(0,"div"),e._uU(1,"Please open on StackBlitz to see result"),e.qZA())}let s=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-append-only-example"]],decls:2,vars:1,consts:[["appendOnly","","itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,w,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7],styles:[".example-viewport[_ngcontent-%COMP%] {\n  height: 200px;\n  width: 200px;\n  border: 1px solid black;\n}\n\n.example-item[_ngcontent-%COMP%] {\n  height: 50px;\n}"],changeDetection:0}),t})(),u=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-context-example"]],decls:2,vars:2,consts:[[1,"example-viewport",3,"itemSize"],[3,"example-alternate",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item-detail"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,T,15,9,"div",1),e.qZA()),2&a&&(e.Q6J("itemSize",126),e.xp6(1),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7],styles:[".example-viewport[_ngcontent-%COMP%] {\n  height: 200px;\n  width: 200px;\n  border: 1px solid black;\n}\n\n.example-item-detail[_ngcontent-%COMP%] {\n  height: 18px;\n}\n\n.example-alternate[_ngcontent-%COMP%] {\n  background: rgba(127, 127, 127, 0.3);\n}"],changeDetection:0}),t})();class I extends n.Ee{constructor(){super(50,250,500)}}let x=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-custom-strategy-example"]],features:[e._Bn([{provide:n.yU,useClass:I}])],decls:2,vars:1,consts:[[1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,M,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.x0,n.N7],styles:[o],changeDetection:0}),t})(),g=(()=>{class t{constructor(){this.ds=new B}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-data-source-example"]],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,D,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.ds))},dependencies:[n.xd,n.x0,n.N7],styles:[o],changeDetection:0}),t})();class B extends E.o2{constructor(){super(...arguments),this._length=1e5,this._pageSize=100,this._cachedData=Array.from({length:this._length}),this._fetchedPages=new Set,this._dataStream=new y.X(this._cachedData),this._subscription=new O.w}connect(l){return this._subscription.add(l.viewChange.subscribe(a=>{const i=this._getPageForIndex(a.start),p=this._getPageForIndex(a.end-1);for(let c=i;c<=p;c++)this._fetchPage(c)})),this._dataStream}disconnect(){this._subscription.unsubscribe()}_getPageForIndex(l){return Math.floor(l/this._pageSize)}_fetchPage(l){this._fetchedPages.has(l)||(this._fetchedPages.add(l),setTimeout(()=>{this._cachedData.splice(l*this._pageSize,this._pageSize,...Array.from({length:this._pageSize}).map((a,i)=>`Item #${l*this._pageSize+i}`)),this._dataStream.next(this._cachedData)},1e3*Math.random()+200))}}let f=(()=>{class t{constructor(){this.states=[{name:"Alabama",capital:"Montgomery"},{name:"Alaska",capital:"Juneau"},{name:"Arizona",capital:"Phoenix"},{name:"Arkansas",capital:"Little Rock"},{name:"California",capital:"Sacramento"},{name:"Colorado",capital:"Denver"},{name:"Connecticut",capital:"Hartford"},{name:"Delaware",capital:"Dover"},{name:"Florida",capital:"Tallahassee"},{name:"Georgia",capital:"Atlanta"},{name:"Hawaii",capital:"Honolulu"},{name:"Idaho",capital:"Boise"},{name:"Illinois",capital:"Springfield"},{name:"Indiana",capital:"Indianapolis"},{name:"Iowa",capital:"Des Moines"},{name:"Kansas",capital:"Topeka"},{name:"Kentucky",capital:"Frankfort"},{name:"Louisiana",capital:"Baton Rouge"},{name:"Maine",capital:"Augusta"},{name:"Maryland",capital:"Annapolis"},{name:"Massachusetts",capital:"Boston"},{name:"Michigan",capital:"Lansing"},{name:"Minnesota",capital:"St. Paul"},{name:"Mississippi",capital:"Jackson"},{name:"Missouri",capital:"Jefferson City"},{name:"Montana",capital:"Helena"},{name:"Nebraska",capital:"Lincoln"},{name:"Nevada",capital:"Carson City"},{name:"New Hampshire",capital:"Concord"},{name:"New Jersey",capital:"Trenton"},{name:"New Mexico",capital:"Santa Fe"},{name:"New York",capital:"Albany"},{name:"North Carolina",capital:"Raleigh"},{name:"North Dakota",capital:"Bismarck"},{name:"Ohio",capital:"Columbus"},{name:"Oklahoma",capital:"Oklahoma City"},{name:"Oregon",capital:"Salem"},{name:"Pennsylvania",capital:"Harrisburg"},{name:"Rhode Island",capital:"Providence"},{name:"South Carolina",capital:"Columbia"},{name:"South Dakota",capital:"Pierre"},{name:"Tennessee",capital:"Nashville"},{name:"Texas",capital:"Austin"},{name:"Utah",capital:"Salt Lake City"},{name:"Vermont",capital:"Montpelier"},{name:"Virginia",capital:"Richmond"},{name:"Washington",capital:"Olympia"},{name:"West Virginia",capital:"Charleston"},{name:"Wisconsin",capital:"Madison"},{name:"Wyoming",capital:"Cheyenne"}]}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-dl-example"]],decls:3,vars:1,consts:[["itemSize","60",1,"example-viewport"],[1,"example-dl"],[4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-dt"],[1,"example-dd"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0)(1,"dl",1),e.YNc(2,A,5,2,"ng-container",2),e.qZA()()),2&a&&(e.xp6(2),e.Q6J("cdkVirtualForOf",i.states))},dependencies:[n.xd,n.x0,n.N7],styles:[".example-viewport[_ngcontent-%COMP%] {\n  height: 200px;\n  width: 200px;\n  border: 1px solid black;\n}\n\n.example-dt[_ngcontent-%COMP%] {\n  height: 30px;\n  font-weight: bold;\n}\n\n.example-dd[_ngcontent-%COMP%] {\n  height: 30px;\n}"],changeDetection:0}),t})(),_=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-fixed-buffer-example"]],decls:2,vars:1,consts:[["itemSize","50","minBufferPx","200","maxBufferPx","400",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,Z,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7],styles:[o],changeDetection:0}),t})(),v=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-horizontal-example"]],decls:3,vars:1,consts:[[1,"cdk-virtual-scroll-data-source-example"],["orientation","horizontal","itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"div",0)(1,"cdk-virtual-scroll-viewport",1),e.YNc(2,F,2,1,"div",2),e.qZA()()),2&a&&(e.xp6(2),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7],styles:[".cdk-virtual-scroll-data-source-example .example-viewport {\n  height: 200px;\n  width: 200px;\n  border: 1px solid black;\n}\n\n.cdk-virtual-scroll-data-source-example .example-viewport .cdk-virtual-scroll-content-wrapper {\n  display: flex;\n  flex-direction: row;\n}\n\n.cdk-virtual-scroll-data-source-example .example-item {\n  width: 50px;\n  height: 100%;\n  writing-mode: vertical-lr;\n}\n"],encapsulation:2,changeDetection:0}),t})(),h=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-overview-example"]],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,P,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7],styles:[o],changeDetection:0}),t})(),k=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-parent-scrolling-example"]],decls:7,vars:1,consts:[["cdkVirtualScrollingElement","",1,"example-viewport"],[1,"example-header"],["itemSize","50"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-footer"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"div",0)(1,"div",1),e._uU(2,"Content before"),e.qZA(),e.TgZ(3,"cdk-virtual-scroll-viewport",2),e.YNc(4,q,2,1,"div",3),e.qZA(),e.TgZ(5,"div",4),e._uU(6,"Content after"),e.qZA()()),2&a&&(e.xp6(4),e.Q6J("cdkVirtualForOf",i.items))},dependencies:[n.xd,n.x0,n.N7,n.j8],styles:[".example-viewport[_ngcontent-%COMP%] {\n  flex: 1;\n  width: 200px;\n  min-height: 200px;\n  border: 1px solid black;\n}\n\n.example-item[_ngcontent-%COMP%] {\n  height: 50px;\n}\n\n.example-header[_ngcontent-%COMP%], .example-footer[_ngcontent-%COMP%] {\n  height: 100px;\n  background: lightgray;\n}"],changeDetection:0}),t})(),C=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-template-cache-example"]],decls:2,vars:2,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf","cdkVirtualForTemplateCacheSize"],[1,"example-item"]],template:function(a,i){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,N,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",i.items)("cdkVirtualForTemplateCacheSize",0))},dependencies:[n.xd,n.x0,n.N7],styles:[o],changeDetection:0}),t})(),S=(()=>{class t{constructor(){this.shouldRun=/(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host),this.items=Array.from({length:1e5}).map((a,i)=>`Item #${i}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-window-scrolling-example"]],inputs:{shouldRun:"shouldRun"},decls:2,vars:2,consts:[[4,"ngIf"],[1,"example-header"],["scrollWindow","","itemSize","50"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-footer"],[1,"example-item"]],template:function(a,i){1&a&&(e.YNc(0,z,7,1,"ng-container",0),e.YNc(1,U,2,0,"div",0)),2&a&&(e.Q6J("ngIf",i.shouldRun),e.xp6(1),e.Q6J("ngIf",!i.shouldRun))},dependencies:[m.O5,n.xd,n.x0,n.N7,n.LO],styles:[".example-item[_ngcontent-%COMP%] {\n  height: 50px;\n}\n\n.example-header[_ngcontent-%COMP%], .example-footer[_ngcontent-%COMP%] {\n  height: 100px;\n  background: lightgray;\n}"],changeDetection:0}),t})(),$=(()=>{class t{}return t.\u0275fac=function(a){return new(a||t)},t.\u0275mod=e.oAB({type:t}),t.\u0275inj=e.cJS({imports:[m.ez,n.Cl]}),t})()}}]);