6257.3dfe99cc8a6cabde.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[6257],{6257:(W,d,r)=>{r.r(d),r.d(d,{CdkVirtualScrollAppendOnlyExample:()=>T,CdkVirtualScrollContextExample:()=>Z,CdkVirtualScrollCustomStrategyExample:()=>A,CdkVirtualScrollDataSourceExample:()=>F,CdkVirtualScrollDlExample:()=>z,CdkVirtualScrollFixedBufferExample:()=>q,CdkVirtualScrollHorizontalExample:()=>N,CdkVirtualScrollOverviewExample:()=>b,CdkVirtualScrollParentScrollingExample:()=>U,CdkVirtualScrollTemplateCacheExample:()=>I,CdkVirtualScrollWindowScrollingExample:()=>j});var e=r(5879),i=r(6672),m=r(8337),u=r(5125),x=r(7902),f=r(6814);function g(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,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,n=l.index,p=l.count,c=l.first,B=l.last,$=l.even,s=l.odd;e.ekj("example-alternate",s),e.xp6(2),e.hij("Item: ",a,""),e.xp6(2),e.hij("Index: ",n,""),e.xp6(2),e.hij("Count: ",p,""),e.xp6(2),e.hij("First: ",c?"Yes":"No",""),e.xp6(2),e.hij("Last: ",B?"Yes":"No",""),e.xp6(2),e.hij("Even: ",$?"Yes":"No",""),e.xp6(2),e.hij("Odd: ",s?"Yes":"No","")}}function v(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 h(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 k(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 C(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 S(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 V(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 y(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 E(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 O(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 w(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,O,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 D(t,l){1&t&&(e.TgZ(0,"div"),e._uU(1,"Please open on StackBlitz to see result"),e.qZA())}let T=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-append-only-example"]],standalone:!0,features:[e.jDz],decls:2,vars:1,consts:[["appendOnly","","itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,g,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.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})(),Z=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-context-example"]],standalone:!0,features:[e.jDz],decls:2,vars:2,consts:[[1,"example-viewport",3,"itemSize"],[3,"example-alternate",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item-detail"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,_,15,9,"div",1),e.qZA()),2&a&&(e.Q6J("itemSize",126),e.xp6(1),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.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 M extends i.Ee{constructor(){super(50,250,500)}}let A=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-custom-strategy-example"]],standalone:!0,features:[e._Bn([{provide:i.yU,useClass:M}]),e.jDz],decls:2,vars:1,consts:[[1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,v,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.x0,i.N7],styles:[o],changeDetection:0}),t})(),F=(()=>{class t{constructor(){this.ds=new P}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-data-source-example"]],standalone:!0,features:[e.jDz],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,h,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.ds))},dependencies:[i.Cl,i.xd,i.x0,i.N7],styles:[o],changeDetection:0}),t})();class P extends m.o2{constructor(){super(...arguments),this._length=1e5,this._pageSize=100,this._cachedData=Array.from({length:this._length}),this._fetchedPages=new Set,this._dataStream=new u.X(this._cachedData),this._subscription=new x.w}connect(l){return this._subscription.add(l.viewChange.subscribe(a=>{const n=this._getPageForIndex(a.start),p=this._getPageForIndex(a.end-1);for(let c=n;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,n)=>`Item #${l*this._pageSize+n}`)),this._dataStream.next(this._cachedData)},1e3*Math.random()+200))}}let z=(()=>{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"]],standalone:!0,features:[e.jDz],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,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0)(1,"dl",1),e.YNc(2,k,5,2,"ng-container",2),e.qZA()()),2&a&&(e.xp6(2),e.Q6J("cdkVirtualForOf",n.states))},dependencies:[i.Cl,i.xd,i.x0,i.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})(),q=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-fixed-buffer-example"]],standalone:!0,features:[e.jDz],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,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,C,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.N7],styles:[o],changeDetection:0}),t})(),N=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-horizontal-example"]],standalone:!0,features:[e.jDz],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,n){1&a&&(e.TgZ(0,"div",0)(1,"cdk-virtual-scroll-viewport",1),e.YNc(2,S,2,1,"div",2),e.qZA()()),2&a&&(e.xp6(2),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.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})(),b=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-overview-example"]],standalone:!0,features:[e.jDz],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,V,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.N7],styles:[o],changeDetection:0}),t})(),U=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-parent-scrolling-example"]],standalone:!0,features:[e.jDz],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,n){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,y,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",n.items))},dependencies:[i.Cl,i.xd,i.x0,i.N7,i.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})(),I=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}return t.\u0275fac=function(a){return new(a||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-virtual-scroll-template-cache-example"]],standalone:!0,features:[e.jDz],decls:2,vars:2,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf","cdkVirtualForTemplateCacheSize"],[1,"example-item"]],template:function(a,n){1&a&&(e.TgZ(0,"cdk-virtual-scroll-viewport",0),e.YNc(1,E,2,1,"div",1),e.qZA()),2&a&&(e.xp6(1),e.Q6J("cdkVirtualForOf",n.items)("cdkVirtualForTemplateCacheSize",0))},dependencies:[i.Cl,i.xd,i.x0,i.N7],styles:[o],changeDetection:0}),t})(),j=(()=>{class t{constructor(){this.shouldRun=/(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host),this.items=Array.from({length:1e5}).map((a,n)=>`Item #${n}`)}}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"},standalone:!0,features:[e.jDz],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,n){1&a&&(e.YNc(0,w,7,1,"ng-container",0),e.YNc(1,D,2,0,"div",0)),2&a&&(e.Q6J("ngIf",n.shouldRun),e.xp6(1),e.Q6J("ngIf",!n.shouldRun))},dependencies:[f.O5,i.Cl,i.xd,i.x0,i.N7,i.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})()}}]);