843.9068b7a09843085f.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[843],{843:(Y,d,o)=>{o.r(d),o.d(d,{CdkVirtualScrollAppendOnlyExample:()=>D,CdkVirtualScrollContextExample:()=>M,CdkVirtualScrollCustomStrategyExample:()=>$,CdkVirtualScrollDataSourceExample:()=>R,CdkVirtualScrollDlExample:()=>T,CdkVirtualScrollFixedBufferExample:()=>j,CdkVirtualScrollHorizontalExample:()=>N,CdkVirtualScrollOverviewExample:()=>b,CdkVirtualScrollParentScrollingExample:()=>I,CdkVirtualScrollTemplateCacheExample:()=>A,CdkVirtualScrollWindowScrollingExample:()=>z});var e=o(4438),l=o(5478),m=o(5024),u=o(9928),h=o(4337);function f(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function v(t,n){if(1&t&&(e.j41(0,"div")(1,"div",2),e.EFF(2),e.k0s(),e.j41(3,"div",2),e.EFF(4),e.k0s(),e.j41(5,"div",2),e.EFF(6),e.k0s(),e.j41(7,"div",2),e.EFF(8),e.k0s(),e.j41(9,"div",2),e.EFF(10),e.k0s(),e.j41(11,"div",2),e.EFF(12),e.k0s(),e.j41(13,"div",2),e.EFF(14),e.k0s()()),2&t){const i=n.$implicit,a=n.index,r=n.count,s=n.first,B=n.last,U=n.even,p=n.odd;e.AVh("example-alternate",p),e.R7$(2),e.SpI("Item: ",i,""),e.R7$(2),e.SpI("Index: ",a,""),e.R7$(2),e.SpI("Count: ",r,""),e.R7$(2),e.SpI("First: ",s?"Yes":"No",""),e.R7$(2),e.SpI("Last: ",B?"Yes":"No",""),e.R7$(2),e.SpI("Even: ",U?"Yes":"No",""),e.R7$(2),e.SpI("Odd: ",p?"Yes":"No","")}}function x(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}const c=".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 k(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i||"Loading...")}}function g(t,n){if(1&t&&(e.qex(0),e.j41(1,"dt",3),e.EFF(2),e.k0s(),e.j41(3,"dd",4),e.EFF(4),e.k0s(),e.bVm()),2&t){const i=n.$implicit;e.R7$(2),e.JRh(i.name),e.R7$(2),e.JRh(i.capital)}}function _(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function E(t,n){if(1&t&&(e.j41(0,"div",3),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function F(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function C(t,n){if(1&t&&(e.j41(0,"div",5),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function S(t,n){if(1&t&&(e.j41(0,"div",2),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function V(t,n){if(1&t&&(e.j41(0,"div",4),e.EFF(1),e.k0s()),2&t){const i=n.$implicit;e.R7$(),e.JRh(i)}}function y(t,n){if(1&t&&(e.j41(0,"div",0),e.EFF(1,"Content before"),e.k0s(),e.j41(2,"cdk-virtual-scroll-viewport",1),e.DNE(3,V,2,1,"div",2),e.k0s(),e.j41(4,"div",3),e.EFF(5,"Content after"),e.k0s()),2&t){const i=e.XpG();e.R7$(3),e.Y8G("cdkVirtualForOf",i.items)}}function w(t,n){1&t&&(e.j41(0,"div"),e.EFF(1,"Please open on StackBlitz to see result"),e.k0s())}let D=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-append-only-example"]],standalone:!0,features:[e.aNF],decls:2,vars:1,consts:[["appendOnly","","itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,f,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6],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})}return t})(),M=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-context-example"]],standalone:!0,features:[e.aNF],decls:2,vars:2,consts:[[1,"example-viewport",3,"itemSize"],[3,"example-alternate",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item-detail"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,v,15,9,"div",1),e.k0s()),2&a&&(e.Y8G("itemSize",126),e.R7$(),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6],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})}return t})();class O extends l.lv{constructor(){super(50,250,500)}}let $=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-custom-strategy-example"]],standalone:!0,features:[e.Jv_([{provide:l.Mr,useClass:O}]),e.aNF],decls:2,vars:1,consts:[[1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,x,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.E$,l.d6],styles:[c],changeDetection:0})}return t})(),R=(()=>{class t{constructor(){this.ds=new P}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-data-source-example"]],standalone:!0,features:[e.aNF],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,k,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.ds))},dependencies:[l.E9,l.yg,l.E$,l.d6],styles:[c],changeDetection:0})}return t})();class P extends m.qS{constructor(){super(...arguments),this._length=1e5,this._pageSize=100,this._cachedData=Array.from({length:this._length}),this._fetchedPages=new Set,this._dataStream=new u.t(this._cachedData),this._subscription=new h.y}connect(n){return this._subscription.add(n.viewChange.subscribe(i=>{const a=this._getPageForIndex(i.start),r=this._getPageForIndex(i.end-1);for(let s=a;s<=r;s++)this._fetchPage(s)})),this._dataStream}disconnect(){this._subscription.unsubscribe()}_getPageForIndex(n){return Math.floor(n/this._pageSize)}_fetchPage(n){this._fetchedPages.has(n)||(this._fetchedPages.add(n),setTimeout(()=>{this._cachedData.splice(n*this._pageSize,this._pageSize,...Array.from({length:this._pageSize}).map((i,a)=>`Item #${n*this._pageSize+a}`)),this._dataStream.next(this._cachedData)},1e3*Math.random()+200))}}let T=(()=>{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"}]}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-dl-example"]],standalone:!0,features:[e.aNF],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,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0)(1,"dl",1),e.DNE(2,g,5,2,"ng-container",2),e.k0s()()),2&a&&(e.R7$(2),e.Y8G("cdkVirtualForOf",r.states))},dependencies:[l.E9,l.yg,l.E$,l.d6],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})}return t})(),j=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-fixed-buffer-example"]],standalone:!0,features:[e.aNF],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,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,_,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6],styles:[c],changeDetection:0})}return t})(),N=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-horizontal-example"]],standalone:!0,features:[e.aNF],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,r){1&a&&(e.j41(0,"div",0)(1,"cdk-virtual-scroll-viewport",1),e.DNE(2,E,2,1,"div",2),e.k0s()()),2&a&&(e.R7$(2),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6],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})}return t})(),b=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-overview-example"]],standalone:!0,features:[e.aNF],decls:2,vars:1,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-item"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,F,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6],styles:[c],changeDetection:0})}return t})(),I=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-parent-scrolling-example"]],standalone:!0,features:[e.aNF],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,r){1&a&&(e.j41(0,"div",0)(1,"div",1),e.EFF(2,"Content before"),e.k0s(),e.j41(3,"cdk-virtual-scroll-viewport",2),e.DNE(4,C,2,1,"div",3),e.k0s(),e.j41(5,"div",4),e.EFF(6,"Content after"),e.k0s()()),2&a&&(e.R7$(4),e.Y8G("cdkVirtualForOf",r.items))},dependencies:[l.E9,l.yg,l.E$,l.d6,l.fZ],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%], \n.example-footer[_ngcontent-%COMP%] {\n  height: 100px;\n  background: lightgray;\n}"],changeDetection:0})}return t})(),A=(()=>{class t{constructor(){this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-template-cache-example"]],standalone:!0,features:[e.aNF],decls:2,vars:2,consts:[["itemSize","50",1,"example-viewport"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf","cdkVirtualForTemplateCacheSize"],[1,"example-item"]],template:function(a,r){1&a&&(e.j41(0,"cdk-virtual-scroll-viewport",0),e.DNE(1,S,2,1,"div",1),e.k0s()),2&a&&(e.R7$(),e.Y8G("cdkVirtualForOf",r.items)("cdkVirtualForTemplateCacheSize",0))},dependencies:[l.E9,l.yg,l.E$,l.d6],styles:[c],changeDetection:0})}return t})(),z=(()=>{class t{constructor(){this.shouldRun=/(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host),this.items=Array.from({length:1e5}).map((i,a)=>`Item #${a}`)}static#e=this.\u0275fac=function(a){return new(a||t)};static#t=this.\u0275cmp=e.VBU({type:t,selectors:[["cdk-virtual-scroll-window-scrolling-example"]],inputs:{shouldRun:"shouldRun"},standalone:!0,features:[e.aNF],decls:2,vars:2,consts:[[1,"example-header"],["scrollWindow","","itemSize","50"],["class","example-item",4,"cdkVirtualFor","cdkVirtualForOf"],[1,"example-footer"],[1,"example-item"]],template:function(a,r){1&a&&e.DNE(0,y,6,1)(1,w,2,0,"div"),2&a&&(e.vxM(r.shouldRun?0:-1),e.R7$(),e.vxM(r.shouldRun?-1:1))},dependencies:[l.E9,l.yg,l.E$,l.d6,l.Zr],styles:[".example-item[_ngcontent-%COMP%] {\n  height: 50px;\n}\n\n.example-header[_ngcontent-%COMP%], \n.example-footer[_ngcontent-%COMP%] {\n  height: 100px;\n  background: lightgray;\n}"],changeDetection:0})}return t})()}}]);