3139.0430e65ce84b28a8.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[3139],{3139:(B,u,d)=>{d.r(u),d.d(u,{GridListDynamicExample:()=>I,GridListHarnessExample:()=>L,GridListOverviewExample:()=>A});var e=d(4438),h=d(6600),c=d(4085),v=d(8203);const _=["*"],S=[[["","mat-grid-avatar",""],["","matGridAvatar",""]],[["","mat-line",""],["","matLine",""]],"*"],T=["[mat-grid-avatar], [matGridAvatar]","[mat-line], [matLine]","*"];class k{constructor(){this.columnIndex=0,this.rowIndex=0}get rowCount(){return this.rowIndex+1}get rowspan(){const r=Math.max(...this.tracker);return r>1?this.rowCount+r-1:this.rowCount}update(r,t){this.columnIndex=0,this.rowIndex=0,this.tracker=new Array(r),this.tracker.fill(0,0,this.tracker.length),this.positions=t.map(i=>this._trackTile(i))}_trackTile(r){const t=this._findMatchingGap(r.colspan);return this._markTilePosition(t,r),this.columnIndex=t+r.colspan,new G(this.rowIndex,t)}_findMatchingGap(r){let t=-1,i=-1;do{this.columnIndex+r>this.tracker.length?(this._nextRow(),t=this.tracker.indexOf(0,this.columnIndex),i=this._findGapEndIndex(t)):(t=this.tracker.indexOf(0,this.columnIndex),-1!=t?(i=this._findGapEndIndex(t),this.columnIndex=t+1):(this._nextRow(),t=this.tracker.indexOf(0,this.columnIndex),i=this._findGapEndIndex(t)))}while(i-t<r||0==i);return Math.max(t,0)}_nextRow(){this.columnIndex=0,this.rowIndex++;for(let r=0;r<this.tracker.length;r++)this.tracker[r]=Math.max(0,this.tracker[r]-1)}_findGapEndIndex(r){for(let t=r+1;t<this.tracker.length;t++)if(0!=this.tracker[t])return t;return this.tracker.length}_markTilePosition(r,t){for(let i=0;i<t.colspan;i++)this.tracker[r+i]=t.rowspan}}class G{constructor(r,t){this.row=r,this.col=t}}const w=new e.nKC("MAT_GRID_LIST");let g=(()=>{class s{constructor(t,i){this._element=t,this._gridList=i,this._rowspan=1,this._colspan=1}get rowspan(){return this._rowspan}set rowspan(t){this._rowspan=Math.round((0,c.OE)(t))}get colspan(){return this._colspan}set colspan(t){this._colspan=Math.round((0,c.OE)(t))}_setStyle(t,i){this._element.nativeElement.style[t]=i}static#t=this.\u0275fac=function(i){return new(i||s)(e.rXU(e.aKT),e.rXU(w,8))};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["mat-grid-tile"]],hostAttrs:[1,"mat-grid-tile"],hostVars:2,hostBindings:function(i,a){2&i&&e.BMQ("rowspan",a.rowspan)("colspan",a.colspan)},inputs:{rowspan:"rowspan",colspan:"colspan"},exportAs:["matGridTile"],standalone:!0,features:[e.aNF],ngContentSelectors:_,decls:2,vars:0,consts:[[1,"mat-grid-tile-content"]],template:function(i,a){1&i&&(e.NAR(),e.j41(0,"div",0),e.SdG(1),e.k0s())},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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size)}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size)}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size)}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size)}.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})}return s})(),b=(()=>{class s{constructor(t){this._element=t}ngAfterContentInit(){(0,h.IK)(this._lines,this._element)}static#t=this.\u0275fac=function(i){return new(i||s)(e.rXU(e.aKT))};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["mat-grid-tile-header"],["mat-grid-tile-footer"]],contentQueries:function(i,a,o){if(1&i&&e.wni(o,h.vu,5),2&i){let n;e.mGM(n=e.lsd())&&(a._lines=n)}},standalone:!0,features:[e.aNF],ngContentSelectors:T,decls:4,vars:0,consts:[[1,"mat-grid-list-text"]],template:function(i,a){1&i&&(e.NAR(S),e.SdG(0),e.j41(1,"div",0),e.SdG(2,1),e.k0s(),e.SdG(3,2))},encapsulation:2,changeDetection:0})}return s})(),z=(()=>{class s{static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275dir=e.FsC({type:s,selectors:[["mat-grid-tile-header"]],hostAttrs:[1,"mat-grid-tile-header"],standalone:!0})}return s})(),F=(()=>{class s{static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275dir=e.FsC({type:s,selectors:[["mat-grid-tile-footer"]],hostAttrs:[1,"mat-grid-tile-footer"],standalone:!0})}return s})();const D=/^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;class m{constructor(){this._rows=0,this._rowspan=0}init(r,t,i,a){this._gutterSize=x(r),this._rows=t.rowCount,this._rowspan=t.rowspan,this._cols=i,this._direction=a}getBaseTileSize(r,t){return`(${r}% - (${this._gutterSize} * ${t}))`}getTilePosition(r,t){return 0===t?"0":l(`(${r} + ${this._gutterSize}) * ${t}`)}getTileSize(r,t){return`(${r} * ${t}) + (${t-1} * ${this._gutterSize})`}setStyle(r,t,i){let a=100/this._cols,o=(this._cols-1)/this._cols;this.setColStyles(r,i,a,o),this.setRowStyles(r,t,a,o)}setColStyles(r,t,i,a){let o=this.getBaseTileSize(i,a);r._setStyle("rtl"===this._direction?"right":"left",this.getTilePosition(o,t)),r._setStyle("width",l(this.getTileSize(o,r.colspan)))}getGutterSpan(){return`${this._gutterSize} * (${this._rowspan} - 1)`}getTileSpan(r){return`${this._rowspan} * ${this.getTileSize(r,1)}`}getComputedHeight(){return null}}class E extends m{constructor(r){super(),this.fixedRowHeight=r}init(r,t,i,a){super.init(r,t,i,a),this.fixedRowHeight=x(this.fixedRowHeight),D.test(this.fixedRowHeight)}setRowStyles(r,t){r._setStyle("top",this.getTilePosition(this.fixedRowHeight,t)),r._setStyle("height",l(this.getTileSize(this.fixedRowHeight,r.rowspan)))}getComputedHeight(){return["height",l(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)]}reset(r){r._setListStyle(["height",null]),r._tiles&&r._tiles.forEach(t=>{t._setStyle("top",null),t._setStyle("height",null)})}}class C extends m{constructor(r){super(),this._parseRatio(r)}setRowStyles(r,t,i,a){this.baseTileHeight=this.getBaseTileSize(i/this.rowHeightRatio,a),r._setStyle("marginTop",this.getTilePosition(this.baseTileHeight,t)),r._setStyle("paddingTop",l(this.getTileSize(this.baseTileHeight,r.rowspan)))}getComputedHeight(){return["paddingBottom",l(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)]}reset(r){r._setListStyle(["paddingBottom",null]),r._tiles.forEach(t=>{t._setStyle("marginTop",null),t._setStyle("paddingTop",null)})}_parseRatio(r){const t=r.split(":");this.rowHeightRatio=parseFloat(t[0])/parseFloat(t[1])}}class H extends m{setRowStyles(r,t){let o=this.getBaseTileSize(100/this._rowspan,(this._rows-1)/this._rows);r._setStyle("top",this.getTilePosition(o,t)),r._setStyle("height",l(this.getTileSize(o,r.rowspan)))}reset(r){r._tiles&&r._tiles.forEach(t=>{t._setStyle("top",null),t._setStyle("height",null)})}}function l(s){return`calc(${s})`}function x(s){return s.match(/([A-Za-z%]+)$/)?s:`${s}px`}let p=(()=>{class s{constructor(t,i){this._element=t,this._dir=i,this._gutter="1px"}get cols(){return this._cols}set cols(t){this._cols=Math.max(1,Math.round((0,c.OE)(t)))}get gutterSize(){return this._gutter}set gutterSize(t){this._gutter=`${t??""}`}get rowHeight(){return this._rowHeight}set rowHeight(t){const i=`${t??""}`;i!==this._rowHeight&&(this._rowHeight=i,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 H:t&&t.indexOf(":")>-1?new C(t):new E(t)}_layoutTiles(){this._tileCoordinator||(this._tileCoordinator=new k);const t=this._tileCoordinator,i=this._tiles.filter(o=>!o._gridList||o._gridList===this),a=this._dir?this._dir.value:"ltr";this._tileCoordinator.update(this.cols,i),this._tileStyler.init(this.gutterSize,t,this.cols,a),i.forEach((o,n)=>{const y=t.positions[n];this._tileStyler.setStyle(o,y.row,y.col)}),this._setListStyle(this._tileStyler.getComputedHeight())}_setListStyle(t){t&&(this._element.nativeElement.style[t[0]]=t[1])}static#t=this.\u0275fac=function(i){return new(i||s)(e.rXU(e.aKT),e.rXU(v.dS,8))};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["mat-grid-list"]],contentQueries:function(i,a,o){if(1&i&&e.wni(o,g,5),2&i){let n;e.mGM(n=e.lsd())&&(a._tiles=n)}},hostAttrs:[1,"mat-grid-list"],hostVars:1,hostBindings:function(i,a){2&i&&e.BMQ("cols",a.cols)},inputs:{cols:"cols",gutterSize:"gutterSize",rowHeight:"rowHeight"},exportAs:["matGridList"],standalone:!0,features:[e.Jv_([{provide:w,useExisting:s}]),e.aNF],ngContentSelectors:_,decls:2,vars:0,template:function(i,a){1&i&&(e.NAR(),e.j41(0,"div"),e.SdG(1),e.k0s())},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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size)}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size)}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size)}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size)}.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})}return s})(),f=(()=>{class s{static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275mod=e.$C({type:s});static#i=this.\u0275inj=e.G2t({imports:[h.Np,h.yE,h.Np,h.yE]})}return s})();function R(s,r){if(1&s&&(e.j41(0,"mat-grid-tile",2),e.EFF(1),e.k0s()),2&s){const t=r.$implicit;e.xc7("background",t.color),e.Y8G("colspan",t.cols)("rowspan",t.rows),e.R7$(),e.JRh(t.text)}}let I=(()=>{class s{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"}]}static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["grid-list-dynamic-example"]],standalone:!0,features:[e.aNF],decls:3,vars:0,consts:[["cols","4","rowHeight","100px"],[3,"colspan","rowspan","background"],[3,"colspan","rowspan"]],template:function(i,a){1&i&&(e.j41(0,"mat-grid-list",0),e.Z7z(1,R,2,5,"mat-grid-tile",1,e.fX1),e.k0s()),2&i&&(e.R7$(),e.Dyx(a.tiles))},dependencies:[f,p,g],encapsulation:2})}return s})(),A=(()=>{class s{static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["grid-list-overview-example"]],standalone:!0,features:[e.aNF],decls:9,vars:0,consts:[["cols","2","rowHeight","2:1"]],template:function(i,a){1&i&&(e.j41(0,"mat-grid-list",0)(1,"mat-grid-tile"),e.EFF(2,"1"),e.k0s(),e.j41(3,"mat-grid-tile"),e.EFF(4,"2"),e.k0s(),e.j41(5,"mat-grid-tile"),e.EFF(6,"3"),e.k0s(),e.j41(7,"mat-grid-tile"),e.EFF(8,"4"),e.k0s()())},dependencies:[f,p,g],styles:["mat-grid-tile[_ngcontent-%COMP%] {\n  background: lightblue;\n}"]})}return s})(),L=(()=>{class s{static#t=this.\u0275fac=function(i){return new(i||s)};static#e=this.\u0275cmp=e.VBU({type:s,selectors:[["grid-list-harness-example"]],standalone:!0,features:[e.aNF],decls:14,vars:0,consts:[["cols","2","rowHeight","100px"],["colspan","2"]],template:function(i,a){1&i&&(e.j41(0,"mat-grid-list",0)(1,"mat-grid-tile"),e.EFF(2,"Tile 1 (no header, no footer)"),e.k0s(),e.j41(3,"mat-grid-tile")(4,"mat-grid-tile-header"),e.EFF(5,"Tile 2"),e.k0s()(),e.j41(6,"mat-grid-tile",1)(7,"mat-grid-tile-header"),e.EFF(8,"Tile 3"),e.k0s(),e.j41(9,"mat-grid-tile-footer"),e.EFF(10,"Tile 3 footer"),e.k0s()(),e.j41(11,"mat-grid-tile")(12,"mat-grid-tile-header"),e.EFF(13,"Tile 4"),e.k0s()()())},dependencies:[f,p,g,b,z,F],encapsulation:2})}return s})()}}]);