sp-grid/sp-grid.metadata.json

<div align="center"> <h1>sp-grid</h1>

{"__symbolic":"module","version":4,"metadata":{"SpGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":23,"character":4},{"__symbolic":"reference","module":"ng-click-outside","name":"ClickOutsideModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":28,"character":4}],"providers":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":31,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ColumnDefinition":{"__symbolic":"class","members":{}},"SettingsVM":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-sp-grid","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":13,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":14,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":14,"character":25},"arguments":[{"height":"0px","minHeight":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":15,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":15,"character":24},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":16,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":16,"character":43},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}],"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      <!-- Perc Template -->\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      <!-- Currency template -->\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      <!-- Expand template -->\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      <!-- Template custom -->\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  <!-- Expanded details -->\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              <!-- Perc Template -->\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              <!-- Currency template -->\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              <!-- Template custom -->\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","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}"]}]}],"members":{"percTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":3},"arguments":["percTemplate",{"static":true}]}]}],"currencyTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["currencyTemplate",{"static":true}]}]}],"expandTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"arguments":["expandTemplate",{"static":true}]}]}],"inputTextTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":3},"arguments":["inputTextTemplate",{"static":true}]}]}],"selectTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":3},"arguments":["selectTemplate",{"static":true}]}]}],"datePickerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":["datePickerTemplate",{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":30,"character":13},{"static":true}]}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":31,"character":13},{"static":true}]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"colDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dataExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"colDefExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"rowClickEmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"updatedRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"getDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"sortEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"pageEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"sortData":[{"__symbolic":"method"}],"expandClick":[{"__symbolic":"method"}],"clickCol":[{"__symbolic":"method"}],"setDate":[{"__symbolic":"method"}],"removeEditing":[{"__symbolic":"method"}],"saveEditing":[{"__symbolic":"method"}],"page":[{"__symbolic":"method"}],"_setColor":[{"__symbolic":"method"}]}}},"origins":{"SpGridModule":"./src/app/modules/sp-grid/sp-grid.module","ColumnDefinition":"./src/app/modules/sp-grid/models/ColumnDefinitionVM","SettingsVM":"./src/app/modules/sp-grid/models/SettingsVM","ɵa":"./src/app/modules/sp-grid/sp-grid.component"},"importAs":"sp-grid"}