3050.8ea86ca8547722d1.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[3050],{3050:(B,f,a)=>{a.r(f),a.d(f,{GridListDynamicExample:()=>Z,GridListHarnessExample:()=>R,GridListOverviewExample:()=>F});var i=a(5879),T=a(6814),d=a(3680),c=a(2495),v=a(9388);const _=["*"],M=[[["","mat-grid-avatar",""],["","matGridAvatar",""]],[["","mat-line",""],["","matLine",""]],"*"],S=["[mat-grid-avatar], [matGridAvatar]","[mat-line], [matLine]","*"];class H{constructor(){this.columnIndex=0,this.rowIndex=0}get rowCount(){return this.rowIndex+1}get rowspan(){const e=Math.max(...this.tracker);return e>1?this.rowCount+e-1:this.rowCount}update(e,t){this.columnIndex=0,this.rowIndex=0,this.tracker=new Array(e),this.tracker.fill(0,0,this.tracker.length),this.positions=t.map(s=>this._trackTile(s))}_trackTile(e){const t=this._findMatchingGap(e.colspan);return this._markTilePosition(t,e),this.columnIndex=t+e.colspan,new D(this.rowIndex,t)}_findMatchingGap(e){let t=-1,s=-1;do{this.columnIndex+e>this.tracker.length?(this._nextRow(),t=this.tracker.indexOf(0,this.columnIndex),s=this._findGapEndIndex(t)):(t=this.tracker.indexOf(0,this.columnIndex),-1!=t?(s=this._findGapEndIndex(t),this.columnIndex=t+1):(this._nextRow(),t=this.tracker.indexOf(0,this.columnIndex),s=this._findGapEndIndex(t)))}while(s-t<e||0==s);return Math.max(t,0)}_nextRow(){this.columnIndex=0,this.rowIndex++;for(let e=0;e<this.tracker.length;e++)this.tracker[e]=Math.max(0,this.tracker[e]-1)}_findGapEndIndex(e){for(let t=e+1;t<this.tracker.length;t++)if(0!=this.tracker[t])return t;return this.tracker.length}_markTilePosition(e,t){for(let s=0;s<t.colspan;s++)this.tracker[e+s]=t.rowspan}}class D{constructor(e,t){this.row=e,this.col=t}}const y=new i.OlP("MAT_GRID_LIST");let g=(()=>{class r{constructor(t,s){this._element=t,this._gridList=s,this._rowspan=1,this._colspan=1}get rowspan(){return this._rowspan}set rowspan(t){this._rowspan=Math.round((0,c.su)(t))}get colspan(){return this._colspan}set colspan(t){this._colspan=Math.round((0,c.su)(t))}_setStyle(t,s){this._element.nativeElement.style[t]=s}}return r.\u0275fac=function(t){return new(t||r)(i.Y36(i.SBq),i.Y36(y,8))},r.\u0275cmp=i.Xpm({type:r,selectors:[["mat-grid-tile"]],hostAttrs:[1,"mat-grid-tile"],hostVars:2,hostBindings:function(t,s){2&t&&i.uIk("rowspan",s.rowspan)("colspan",s.colspan)},inputs:{rowspan:"rowspan",colspan:"colspan"},exportAs:["matGridTile"],ngContentSelectors:_,decls:2,vars:0,consts:[[1,"mat-grid-tile-content"]],template:function(t,s){1&t&&(i.F$t(),i.TgZ(0,"div",0),i.Hsn(1),i.qZA())},styles:[".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}"],encapsulation:2,changeDetection:0}),r})(),C=(()=>{class r{constructor(t){this._element=t}ngAfterContentInit(){(0,d.E0)(this._lines,this._element)}}return r.\u0275fac=function(t){return new(t||r)(i.Y36(i.SBq))},r.\u0275cmp=i.Xpm({type:r,selectors:[["mat-grid-tile-header"],["mat-grid-tile-footer"]],contentQueries:function(t,s,o){if(1&t&&i.Suo(o,d.X2,5),2&t){let n;i.iGM(n=i.CRH())&&(s._lines=n)}},ngContentSelectors:S,decls:4,vars:0,consts:[[1,"mat-grid-list-text"]],template:function(t,s){1&t&&(i.F$t(M),i.Hsn(0),i.TgZ(1,"div",0),i.Hsn(2,1),i.qZA(),i.Hsn(3,2))},encapsulation:2,changeDetection:0}),r})(),A=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275dir=i.lG2({type:r,selectors:[["mat-grid-tile-header"]],hostAttrs:[1,"mat-grid-tile-header"]}),r})(),k=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275dir=i.lG2({type:r,selectors:[["mat-grid-tile-footer"]],hostAttrs:[1,"mat-grid-tile-footer"]}),r})();const L=/^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;class h{constructor(){this._rows=0,this._rowspan=0}init(e,t,s,o){this._gutterSize=x(e),this._rows=t.rowCount,this._rowspan=t.rowspan,this._cols=s,this._direction=o}getBaseTileSize(e,t){return`(${e}% - (${this._gutterSize} * ${t}))`}getTilePosition(e,t){return 0===t?"0":l(`(${e} + ${this._gutterSize}) * ${t}`)}getTileSize(e,t){return`(${e} * ${t}) + (${t-1} * ${this._gutterSize})`}setStyle(e,t,s){let o=100/this._cols,n=(this._cols-1)/this._cols;this.setColStyles(e,s,o,n),this.setRowStyles(e,t,o,n)}setColStyles(e,t,s,o){let n=this.getBaseTileSize(s,o);e._setStyle("rtl"===this._direction?"right":"left",this.getTilePosition(n,t)),e._setStyle("width",l(this.getTileSize(n,e.colspan)))}getGutterSpan(){return`${this._gutterSize} * (${this._rowspan} - 1)`}getTileSpan(e){return`${this._rowspan} * ${this.getTileSize(e,1)}`}getComputedHeight(){return null}}class E extends h{constructor(e){super(),this.fixedRowHeight=e}init(e,t,s,o){super.init(e,t,s,o),this.fixedRowHeight=x(this.fixedRowHeight),L.test(this.fixedRowHeight)}setRowStyles(e,t){e._setStyle("top",this.getTilePosition(this.fixedRowHeight,t)),e._setStyle("height",l(this.getTileSize(this.fixedRowHeight,e.rowspan)))}getComputedHeight(){return["height",l(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)]}reset(e){e._setListStyle(["height",null]),e._tiles&&e._tiles.forEach(t=>{t._setStyle("top",null),t._setStyle("height",null)})}}class b extends h{constructor(e){super(),this._parseRatio(e)}setRowStyles(e,t,s,o){this.baseTileHeight=this.getBaseTileSize(s/this.rowHeightRatio,o),e._setStyle("marginTop",this.getTilePosition(this.baseTileHeight,t)),e._setStyle("paddingTop",l(this.getTileSize(this.baseTileHeight,e.rowspan)))}getComputedHeight(){return["paddingBottom",l(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)]}reset(e){e._setListStyle(["paddingBottom",null]),e._tiles.forEach(t=>{t._setStyle("marginTop",null),t._setStyle("paddingTop",null)})}_parseRatio(e){const t=e.split(":");this.rowHeightRatio=parseFloat(t[0])/parseFloat(t[1])}}class $ extends h{setRowStyles(e,t){let n=this.getBaseTileSize(100/this._rowspan,(this._rows-1)/this._rows);e._setStyle("top",this.getTilePosition(n,t)),e._setStyle("height",l(this.getTileSize(n,e.rowspan)))}reset(e){e._tiles&&e._tiles.forEach(t=>{t._setStyle("top",null),t._setStyle("height",null)})}}function l(r){return`calc(${r})`}function x(r){return r.match(/([A-Za-z%]+)$/)?r:`${r}px`}let m=(()=>{class r{constructor(t,s){this._element=t,this._dir=s,this._gutter="1px"}get cols(){return this._cols}set cols(t){this._cols=Math.max(1,Math.round((0,c.su)(t)))}get gutterSize(){return this._gutter}set gutterSize(t){this._gutter=`${t??""}`}get rowHeight(){return this._rowHeight}set rowHeight(t){const s=`${t??""}`;s!==this._rowHeight&&(this._rowHeight=s,this._setTileStyler(this._rowHeight))}ngOnInit(){this._checkCols(),this._checkRowHeight()}ngAfterContentChecked(){this._layoutTiles()}_checkCols(){}_checkRowHeight(){this._rowHeight||this._setTileStyler("1:1")}_setTileStyler(t){this._tileStyler&&this._tileStyler.reset(this),this._tileStyler="fit"===t?new $:t&&t.indexOf(":")>-1?new b(t):new E(t)}_layoutTiles(){this._tileCoordinator||(this._tileCoordinator=new H);const t=this._tileCoordinator,s=this._tiles.filter(n=>!n._gridList||n._gridList===this),o=this._dir?this._dir.value:"ltr";this._tileCoordinator.update(this.cols,s),this._tileStyler.init(this.gutterSize,t,this.cols,o),s.forEach((n,u)=>{const w=t.positions[u];this._tileStyler.setStyle(n,w.row,w.col)}),this._setListStyle(this._tileStyler.getComputedHeight())}_setListStyle(t){t&&(this._element.nativeElement.style[t[0]]=t[1])}}return r.\u0275fac=function(t){return new(t||r)(i.Y36(i.SBq),i.Y36(v.Is,8))},r.\u0275cmp=i.Xpm({type:r,selectors:[["mat-grid-list"]],contentQueries:function(t,s,o){if(1&t&&i.Suo(o,g,5),2&t){let n;i.iGM(n=i.CRH())&&(s._tiles=n)}},hostAttrs:[1,"mat-grid-list"],hostVars:1,hostBindings:function(t,s){2&t&&i.uIk("cols",s.cols)},inputs:{cols:"cols",gutterSize:"gutterSize",rowHeight:"rowHeight"},exportAs:["matGridList"],features:[i._Bn([{provide:y,useExisting:r}])],ngContentSelectors:_,decls:2,vars:0,template:function(t,s){1&t&&(i.F$t(),i.TgZ(0,"div"),i.Hsn(1),i.qZA())},styles:[".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}"],encapsulation:2,changeDetection:0}),r})(),p=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275mod=i.oAB({type:r}),r.\u0275inj=i.cJS({imports:[d.uc,d.BQ,d.uc,d.BQ]}),r})();function I(r,e){if(1&r&&(i.TgZ(0,"mat-grid-tile",2),i._uU(1),i.qZA()),2&r){const t=e.$implicit;i.Udp("background",t.color),i.Q6J("colspan",t.cols)("rowspan",t.rows),i.xp6(1),i.hij(" ",t.text," ")}}let Z=(()=>{class r{constructor(){this.tiles=[{text:"One",cols:3,rows:1,color:"lightblue"},{text:"Two",cols:1,rows:2,color:"lightgreen"},{text:"Three",cols:1,rows:1,color:"lightpink"},{text:"Four",cols:2,rows:1,color:"#DDBDF1"}]}}return r.\u0275fac=function(t){return new(t||r)},r.\u0275cmp=i.Xpm({type:r,selectors:[["grid-list-dynamic-example"]],standalone:!0,features:[i.jDz],decls:2,vars:1,consts:[["cols","4","rowHeight","100px"],[3,"colspan","rowspan","background",4,"ngFor","ngForOf"],[3,"colspan","rowspan"]],template:function(t,s){1&t&&(i.TgZ(0,"mat-grid-list",0),i.YNc(1,I,2,5,"mat-grid-tile",1),i.qZA()),2&t&&(i.xp6(1),i.Q6J("ngForOf",s.tiles))},dependencies:[p,m,g,T.ax],encapsulation:2}),r})(),F=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275cmp=i.Xpm({type:r,selectors:[["grid-list-overview-example"]],standalone:!0,features:[i.jDz],decls:9,vars:0,consts:[["cols","2","rowHeight","2:1"]],template:function(t,s){1&t&&(i.TgZ(0,"mat-grid-list",0)(1,"mat-grid-tile"),i._uU(2,"1"),i.qZA(),i.TgZ(3,"mat-grid-tile"),i._uU(4,"2"),i.qZA(),i.TgZ(5,"mat-grid-tile"),i._uU(6,"3"),i.qZA(),i.TgZ(7,"mat-grid-tile"),i._uU(8,"4"),i.qZA()())},dependencies:[p,m,g],styles:["mat-grid-tile[_ngcontent-%COMP%] {\n  background: lightblue;\n}"]}),r})(),R=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275cmp=i.Xpm({type:r,selectors:[["grid-list-harness-example"]],standalone:!0,features:[i.jDz],decls:14,vars:0,consts:[["cols","2","rowHeight","100px"],["colspan","2"]],template:function(t,s){1&t&&(i.TgZ(0,"mat-grid-list",0)(1,"mat-grid-tile"),i._uU(2,"Tile 1 (no header, no footer)"),i.qZA(),i.TgZ(3,"mat-grid-tile")(4,"mat-grid-tile-header"),i._uU(5,"Tile 2"),i.qZA()(),i.TgZ(6,"mat-grid-tile",1)(7,"mat-grid-tile-header"),i._uU(8,"Tile 3"),i.qZA(),i.TgZ(9,"mat-grid-tile-footer"),i._uU(10,"Tile 3 footer"),i.qZA()(),i.TgZ(11,"mat-grid-tile")(12,"mat-grid-tile-header"),i._uU(13,"Tile 4"),i.qZA()()())},dependencies:[p,m,g,C,A,k],encapsulation:2}),r})()}}]);