sp-grid
Version:
<div align="center"> <h1>sp-grid</h1>
16 lines (14 loc) • 20.5 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material/sort"),require("@angular/animations"),require("@angular/material/paginator"),require("@angular/material/table"),require("@angular/common"),require("@angular/material/checkbox"),require("ng-click-outside"),require("@angular/material/button"),require("@angular/forms"),require("@angular/material/datepicker"),require("@angular/material/core")):"function"==typeof define&&define.amd?define("sp-grid",["exports","@angular/core","@angular/material/sort","@angular/animations","@angular/material/paginator","@angular/material/table","@angular/common","@angular/material/checkbox","ng-click-outside","@angular/material/button","@angular/forms","@angular/material/datepicker","@angular/material/core"],t):t((e=e||self)["sp-grid"]={},e.ng.core,e.ng.material.sort,e.ng.animations,e.ng.material.paginator,e.ng.material.table,e.ng.common,e.ng.material.checkbox,e.ngClickOutside,e.ng.material.button,e.ng.forms,e.ng.material.datepicker,e.ng.material.core)}(this,(function(e,t,n,a,o,r,l,i,d,c,p,m,s){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function u(e,t,n,a){var o,r=arguments.length,l=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,n):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,a);else for(var i=e.length-1;i>=0;i--)(o=e[i])&&(l=(r<3?o(l):r>3?o(t,n,l):o(t,n))||l);return r>3&&l&&Object.defineProperty(t,n,l),l}var g=function(){this.expandable=!1,this.paginable=!1,this.pageSize=5,this.pageSizeOptions=[5,10,20,50],this.theme="default"},y=function(){function e(){this.settings=new g,this.rowClickEmit=new t.EventEmitter,this.updatedRow=new t.EventEmitter,this.getDetails=new t.EventEmitter,this.sortEvent=new t.EventEmitter,this.pageEvent=new t.EventEmitter,this.clickedCol=!1}return e.prototype.ngOnInit=function(){},e.prototype.ngOnChanges=function(e){e&&e.settings&&this._setColor(),e&&e.colDef&&this.settings.expandable&&this.colDef.splice(0,0,{key:"expand",label:"",sortable:!1,template:this.expandTemplate}),e&&e.data&&(this.displayedColumns=this.colDef.map((function(e){return e.key})),this.dataSource=new r.MatTableDataSource(this.data),this.dataSource.sort=this.sort,this.dataSource.paginator=this.paginator),e&&e.dataExpanded&&(this.dataExpanded&&this.dataExpanded.length>0&&(this.displayedColumnsExpanded=this.colDefExpanded.map((function(e){return e.key}))),this.dataSourceExpanded=this.dataExpanded,this.expandedElement=this.clickedElement)},e.prototype.sortData=function(e){this.data.slice();e.active&&""!==e.direction&&this.sortEvent.emit(e)},e.prototype.expandClick=function(e){this.dataSourceExpanded=[],this.expandedElement==e?this.expandedElement="":(this.clickedElement=e,this.getDetails.emit(e))},e.prototype.clickCol=function(e,t){if(this.clickedCol=!0,this.dataSource.data.forEach((function(e){e.isEditingCol=""})),e.editable)switch(t.isEditingCol=e.key,t.editValue=t[e.key],e.inputType){case"text":this.editingTemplate=this.inputTextTemplate;break;case"select":this.editingTemplate=this.selectTemplate;break;case"date":this.editingTemplate=this.datePickerTemplate}},e.prototype.setDate=function(e,t){e.editValue=t.value},e.prototype.removeEditing=function(e){e.isEditingCol=""},e.prototype.saveEditing=function(e,t){e[t]=e.editValue,this.updatedRow.emit(e),e.isEditingCol=""},e.prototype.page=function(e){this.pageEvent.emit(e)},e.prototype._setColor=function(){if(this.settings.theme)switch(this.settings.theme){case"green":document.documentElement.style.setProperty("--accent-color","#009500"),document.documentElement.style.setProperty("--border-color","#B4BFCC"),document.documentElement.style.setProperty("--title-color","white"),document.documentElement.style.setProperty("--title-background","#00C300"),document.documentElement.style.setProperty("--light-background","rgb(237, 237, 237)"),document.documentElement.style.setProperty("--hover-color","#B4BFCC");break;case"dark":document.documentElement.style.setProperty("--accent-color","#88629A"),document.documentElement.style.setProperty("--border-color","#B4BFCC"),document.documentElement.style.setProperty("--title-color","white"),document.documentElement.style.setProperty("--title-background","#222423"),document.documentElement.style.setProperty("--light-background","rgb(237, 237, 237)"),document.documentElement.style.setProperty("--hover-color","#B4BFCC");break;case"gray":document.documentElement.style.setProperty("--accent-color","#5E3C4C"),document.documentElement.style.setProperty("--border-color","#B4BFCC"),document.documentElement.style.setProperty("--title-color","white"),document.documentElement.style.setProperty("--title-background","#C9C7B0"),document.documentElement.style.setProperty("--light-background","rgb(237, 237, 237)"),document.documentElement.style.setProperty("--hover-color","#B4BFCC");break;default:document.documentElement.style.setProperty("--accent-color","#22406d"),document.documentElement.style.setProperty("--border-color","#B4BFCC"),document.documentElement.style.setProperty("--title-color","white"),document.documentElement.style.setProperty("--title-background","#47618E"),document.documentElement.style.setProperty("--light-background","rgb(237, 237, 237)"),document.documentElement.style.setProperty("--hover-color","#B4BFCC")}this.settings.colorTitleBackground&&document.documentElement.style.setProperty("--title-background",this.settings.colorTitleBackground),this.settings.colorLightBackground&&document.documentElement.style.setProperty("--light-background",this.settings.colorLightBackground),this.settings.colorAccent&&document.documentElement.style.setProperty("--accent-color",this.settings.colorAccent),this.settings.colorBorder&&document.documentElement.style.setProperty("--border-color",this.settings.colorBorder),this.settings.colorHover&&document.documentElement.style.setProperty("--hover-color",this.settings.colorHover),this.settings.colorTitle&&document.documentElement.style.setProperty("--title-color",this.settings.colorTitle)},u([t.ViewChild("percTemplate",{static:!0})],e.prototype,"percTemplate",void 0),u([t.ViewChild("currencyTemplate",{static:!0})],e.prototype,"currencyTemplate",void 0),u([t.ViewChild("expandTemplate",{static:!0})],e.prototype,"expandTemplate",void 0),u([t.ViewChild("inputTextTemplate",{static:!0})],e.prototype,"inputTextTemplate",void 0),u([t.ViewChild("selectTemplate",{static:!0})],e.prototype,"selectTemplate",void 0),u([t.ViewChild("datePickerTemplate",{static:!0})],e.prototype,"datePickerTemplate",void 0),u([t.ViewChild(o.MatPaginator,{static:!0})],e.prototype,"paginator",void 0),u([t.ViewChild(n.MatSort,{static:!0})],e.prototype,"sort",void 0),u([t.Input()],e.prototype,"data",void 0),u([t.Input()],e.prototype,"colDef",void 0),u([t.Input()],e.prototype,"dataExpanded",void 0),u([t.Input()],e.prototype,"colDefExpanded",void 0),u([t.Input()],e.prototype,"settings",void 0),u([t.Output()],e.prototype,"rowClickEmit",void 0),u([t.Output()],e.prototype,"updatedRow",void 0),u([t.Output()],e.prototype,"getDetails",void 0),u([t.Output()],e.prototype,"sortEvent",void 0),u([t.Output()],e.prototype,"pageEvent",void 0),e=u([t.Component({selector:"app-sp-grid",template:'<table multiTemplateDataRows mat-table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)"\r\n class="data-table-custom">\r\n\r\n <ng-container [matColumnDef]="col?.key" *ngFor="let col of colDef; let i = index">\r\n\r\n\r\n <th [ngStyle]="{\'width\': col?.width ? col.width : \'auto\'}" class="fade-in" mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!col?.sortable">{{col?.label}}</th>\r\n <td mat-cell *matCellDef="let element" [ngClass]="{\'editable-cell\': col?.editable}">\r\n <div class="edit-icon" *ngIf="element.isEditingCol!==col.key" (click)="clickCol(col,element)"> <i class="material-icons">edit</i> </div>\r\n\r\n <div *ngIf="!col?.template && !col?.defaultTemplate">\r\n <span [hidden]="element.isEditingCol==col.key" (click)="clickCol(col,element)">\r\n <span *ngIf="col?.type==\'date\'">{{element[col?.key] | date: col?.formatDate}}</span>\r\n <span *ngIf="col?.type==\'number\'">{{element[col?.key] | number: col?.formatNumber}}</span>\r\n <span *ngIf="col?.type!==\'date\' && col?.type!==\'number\'">{{element[col?.key]}}</span>\r\n </span>\r\n <div *ngIf="element.isEditingCol==col.key">\r\n <ng-container\r\n *ngTemplateOutlet="editingTemplate;context:{$implicit: element, col: col.key, options: col?.optionsSelect}">\r\n </ng-container>\r\n </div>\r\n </div>\r\n \x3c!-- Perc Template --\x3e\r\n <div *ngIf=" col?.defaultTemplate==\'percTemplate\'">\r\n <ng-container *ngTemplateOutlet=" percTemplate;context:{$implicit: element[col?.key]}">\r\n </ng-container>\r\n </div>\r\n \x3c!-- Currency template --\x3e\r\n <div *ngIf="col?.defaultTemplate==\'currencyTemplate\'">\r\n <ng-container\r\n *ngTemplateOutlet="currencyTemplate;context:{$implicit: element[col?.key], symbol: col?.currency}">\r\n </ng-container>\r\n </div>\r\n \x3c!-- Expand template --\x3e\r\n <div *ngIf="col?.template && col?.template==expandTemplate">\r\n <ng-container *ngTemplateOutlet="col?.template;context:{$implicit: element}">\r\n </ng-container>\r\n </div>\r\n \x3c!-- Template custom --\x3e\r\n <div *ngIf="col?.template && col?.template!==expandTemplate">\r\n <ng-container\r\n *ngTemplateOutlet="col?.template;context:{$implicit: element[col?.key], secondVal: element[col?.secondVal], thirdVal: element[col?.thirdVal]}">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n \x3c!-- Expanded details --\x3e\r\n <ng-container matColumnDef="expandedDetail">\r\n <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">\r\n <div class="example-element-detail" [@detailExpand]="element == expandedElement ? \'expanded\' : \'collapsed\'">\r\n <table mat-table [dataSource]="dataSourceExpanded" class="data-table-custom inner-after-open-table">\r\n <ng-container [matColumnDef]="colExpanded?.key"\r\n *ngFor="let colExpanded of colDefExpanded; let iExpanded = index">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{colExpanded?.label}}</th>\r\n <td mat-cell class="cell-expanded" *matCellDef="let element">\r\n <div *ngIf="!colExpanded?.template && !colExpanded?.defaultTemplate">\r\n <span [hidden]="element.isEditingCol==colExpanded.key" (click)="clickCol(colExpanded,element)">\r\n <span\r\n *ngIf="colExpanded?.type==\'date\'">{{element[colExpanded?.key] | date: colExpanded?.formatDate}}</span>\r\n <span *ngIf="colExpanded?.type!==\'date\'">{{element[colExpanded?.key]}}</span>\r\n </span>\r\n <div *ngIf="element.isEditingCol==colExpanded.key">\r\n <ng-container\r\n *ngTemplateOutlet="editingTemplate;context:{$implicit: element, col: colExpanded.key, options: colExpanded?.optionsSelect}">\r\n </ng-container>\r\n </div>\r\n </div>\r\n \x3c!-- Perc Template --\x3e\r\n <div *ngIf=" colExpanded?.defaultTemplate==\'percTemplate\'">\r\n <ng-container *ngTemplateOutlet=" percTemplate;context:{$implicit: element[colExpanded?.key]}">\r\n </ng-container>\r\n </div>\r\n \x3c!-- Currency template --\x3e\r\n <div *ngIf="colExpanded?.defaultTemplate==\'currencyTemplate\'">\r\n <ng-container\r\n *ngTemplateOutlet="currencyTemplate;context:{$implicit: element[colExpanded?.key], symbol: colExpanded?.currency}">\r\n </ng-container>\r\n </div>\r\n \x3c!-- Template custom --\x3e\r\n <div *ngIf="colExpanded?.template">\r\n <ng-container\r\n *ngTemplateOutlet="colExpanded?.template;context:{$implicit: element[colExpanded?.key], secondVal: element[colExpanded?.secondVal], thirdVal: element[colExpanded?.thirdVal]}">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef="displayedColumnsExpanded"></tr>\r\n <tr mat-row *matRowDef="let row; columns: displayedColumnsExpanded;"></tr>\r\n </table>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>\r\n <tr mat-row *matRowDef="let element; columns: displayedColumns;"\r\n [ngClass]="{\'expandable-row\': settings.expandable}" [class.example-expanded-row]="expandedElement === element"></tr>\r\n <tr mat-row *matRowDef="let row; columns: [\'expandedDetail\']" class="example-detail-row"></tr>\r\n</table>\r\n<div [hidden]="!settings.paginable">\r\n <mat-paginator (page)="page($event)" [pageSizeOptions]="settings.pageSizeOptions" [pageSize]="settings.pageSize">\r\n </mat-paginator>\r\n</div>\r\n\r\n<ng-template #percTemplate let-value>\r\n {{value | number}} %\r\n</ng-template>\r\n\r\n<ng-template #numberTemplate let-value>\r\n {{value | number}}\r\n</ng-template>\r\n\r\n<ng-template #currencyTemplate let-value let-symbol="symbol">\r\n {{value | number}} {{symbol}}\r\n</ng-template>\r\n\r\n<ng-template #expandTemplate let-value>\r\n <div class="master-detail-button">\r\n <div (click)="expandClick(value)">+</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #inputTextTemplate let-value let-key="col">\r\n <div class="wrap-editor fade-in">\r\n <div><input class="custom-editing-item" type="text" [(ngModel)]="value.editValue"></div>\r\n <div><button class="save-button" mat-button (click)="saveEditing(value,key)">Save</button></div>\r\n <div> <button class="save-button" mat-button (click)="removeEditing(value)">Undo</button> </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #selectTemplate let-value let-key="col" let-optionsList="options">\r\n <div class="wrap-editor fade-in">\r\n <select [(ngModel)]="value.editValue" class="custom-editing-item">\r\n <option *ngFor="let opt of optionsList" [value]="opt">{{opt}}</option>\r\n </select><br>\r\n <button class="save-button" mat-button (click)="saveEditing(value,key)">Save</button>\r\n <button class="save-button" mat-button (click)="removeEditing(value)">Undo</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #datePickerTemplate let-value let-key="col">\r\n <div class="wrap-editor fade-in">\r\n\r\n <input class="custom-editing-item" matInput [matDatepicker]="picker" placeholder="Date"\r\n (dateChange)="setDate(value, $event)">\r\n <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <br>\r\n <button class="save-button" mat-button (click)="saveEditing(value,key)">Save</button>\r\n <button class="save-button" mat-button (click)="removeEditing(value)">Undo</button>\r\n </div>\r\n</ng-template>\r\n',animations:[a.trigger("detailExpand",[a.state("collapsed",a.style({height:"0px",minHeight:"0"})),a.state("expanded",a.style({height:"*"})),a.transition("expanded <=> collapsed",a.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)"))])],styles:['@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);@import url(https://fonts.googleapis.com/icon?family=Material+Icons);.fade-in{animation:1s fadein;-moz-animation:1s fadein;-webkit-animation:1s fadein;-o-animation:1s fadein}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}input,select,td,tr{transition:.3s}.data-table-custom{width:100%;font-family:"Source Sans Pro",sans-serif}.data-table-custom tr.mat-header-row,.data-table-custom tr.mat-row{padding:0}.wrap-editor input,.wrap-editor select{font-family:"Source Sans Pro",sans-serif;margin-right:10px;outline:0!important;margin-top:0!important;border:0;line-height:25px;background:rgba(0,0,0,.1);padding:0 10px;border-radius:40px}.wrap-editor input:focus,.wrap-editor select:focus{outline:0;background:rgba(0,0,0,.2)}tr.example-detail-row{height:0}.example-element-detail{overflow:hidden;display:flex}.example-element-detail .mat-tab-group{width:100%}.example-element-detail ::ng-deep .mat-tab-body-content{height:auto}.example-element-diagram{min-width:80px;border:2px solid #000;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.ng-trigger{margin-top:0!important}.mat-column-expandedDetail{padding:0!important}.expandable-row{cursor:pointer}.example-expanded-row{background-color:var(--accent-color);box-shadow:0 3px 3px rgba(0,0,0,.3);mix-blend-mode:multiply}.example-expanded-row .mat-cell{color:#fff;border-left:none;border-bottom:0!important;cursor:default}.example-detail-row .mat-cell{border-bottom:0}.example-detail-row .cell-expanded{border-bottom:1px solid var(--border-color)}.inner-after-open-table{padding:12px;background:var(--light-background);box-shadow:none!important}.inner-after-open-table td:last-child{border-right:1px solid rgba(0,0,0,.12)!important;border-bottom:1px solid var(--border-color)}.inner-after-open-table .table-title{padding:0;text-align:center}.inner-after-open-table tr{background:#fff}.inner-after-open-table tr:hover{background:var(--hover-color)}.first-layer-row{box-shadow:2px 2px 2px #000}.mat-column-arrow{padding:10px 16px!important;text-align:center}.mat-column-arrow::after{font-family:"Font Awesome 5 Free";font-weight:900;content:"";font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased}th.mat-column-arrow::after{display:none}.example-expanded-row .mat-column-arrow::after{font-family:"Font Awesome 5 Free";font-weight:900;content:"";font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased}td.mat-cell{border-bottom:.5px solid var(--border-color);border-bottom-width:.5px}td.mat-cell:last-of-type.mat-column-expand{border-bottom:1px solid var(--border-color)}th.mat-header-cell{border-bottom-color:var(--border-color);background-color:var(--title-background);text-transform:uppercase;color:var(--title-color);letter-spacing:1px}::ng-deep button.mat-sort-header-button{color:var(--title-color);letter-spacing:1px;text-transform:uppercase;font-weight:700}.custom-editing-item{float:left}.save-button{background-color:var(--title-background);line-height:25px;border-radius:40px;margin-right:5px;font-size:10px;font-weight:500;text-transform:uppercase;float:left;color:var(--title-color)}.wrap-editor{display:flex;align-items:center}.edit-icon{display:none;float:left;padding:2px}.edit-icon i{font-size:14px;line-height:1;color:var(--title-background)}.editable-cell{cursor:pointer}.editable-cell .edit-icon{display:flex!important}']})],e)}(),x=function(){function e(){}return e=u([t.NgModule({declarations:[y],imports:[l.CommonModule,r.MatTableModule,n.MatSortModule,i.MatCheckboxModule,c.MatButtonModule,d.ClickOutsideModule,p.FormsModule,m.MatDatepickerModule,s.MatNativeDateModule,o.MatPaginatorModule],providers:[m.MatDatepickerModule],exports:[y]})],e)}(),f=function(){};e.ColumnDefinition=f,e.SettingsVM=g,e.SpGridModule=x,e.ɵa=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sp-grid.umd.min.js.map