@neoprospecta/angular-data-box/dist/bundles/angular-data-box.umd.min.js

Data table with REST implementation.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material"),require("@neoprospecta/angular-custom-pipes"),require("@neoprospecta/angular-datetimepicker")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms","@angular/material","@neoprospecta/angular-custom-pipes","@neoprospecta/angular-datetimepicker"],e):e((t.ng=t.ng||{},t.ng["angular-data-box"]=t.ng["angular-data-box"]||{}),t.ng.core,t.ng.common,t.ng.forms,t.ng.material,t.ng["angular-custom-pipes"],t.ng["angular-datetimepicker"])}(this,function(t,e,n,o,a,i,c){"use strict";var r=function(){function t(){this.pageChanged=new e.EventEmitter}return t.prototype.ngDoCheck=function(){this.totalOfPagesRoundedUp=Math.ceil(this.totalItems/this.amountPerPage),this.totalOfPagesRoundedDown=Math.floor(this.totalItems/this.amountPerPage)},t.prototype.emitPageChange=function(t){this.pageChanged.emit({event:t})},t.prototype.getCurrentPages=function(){return 0===this.totalItems?"0":this.getFirstPageIndex()+" - "+this.getLastPageIndex()},t.prototype.getFirstPageIndex=function(){return(this.currentPage-1)*this.amountPerPage+1},t.prototype.getLastPageIndex=function(){return this.currentPage===this.totalOfPagesRoundedUp&&this.totalOfPagesRoundedDown<this.totalOfPagesRoundedUp?this.totalItems:this.currentPage*this.amountPerPage},t.decorators=[{type:e.Component,args:[{selector:"np-paginator",styles:[".pagination{float:right} "],template:'<div class="pagination"> <span>{{getCurrentPages()}} de {{totalItems}}</span> <button md-icon-button (click)="emitPageChange(\'left\')" [disabled]="currentPage === 1"> <md-icon fontSet="fa" fontIcon="fa-angle-left" color="primary"></md-icon> </button> <button md-icon-button (click)="emitPageChange(\'right\')" [disabled]="currentPage === totalOfPagesRoundedUp"> <md-icon fontSet="fa" fontIcon="fa-angle-right" color="primary"></md-icon> </button> </div> '}]}],t.ctorParameters=function(){return[]},t.propDecorators={totalItems:[{type:e.Input}],currentPage:[{type:e.Input}],amountPerPage:[{type:e.Input}],pageChanged:[{type:e.Output}]},t}(),l=function(){function t(){var t=this;this.dataChange=new e.EventEmitter,this.stripped=!0,this.condensed=!1,this.hover=!0,this.searchable=!0,this.selectable=!0,this.includeTips=!0,this.includeCounter=!0,this.autoSave=!1,this.insert=!1,this.insertPosition="start",this.multipleSelection=new e.EventEmitter,this.markAllObjects=function(e){t.filteredData.forEach(function(n){t.markObject(e,n)})},this.isAllObjectsMarked=function(){var e=!0;return t.filteredData.forEach(function(n){e=e&&t.markedObjects.indexOf(n)>=0}),e},this.geActionTitle=function(t,e,n){return"string"==typeof e?e:e(t,n)},this.getAttributeValue=function(t,e,n){return"string"==typeof e?void 0!==t&&void 0!==t[e]?t[e]:e:e(t,n)},this.callAction=function(e,n){"string"==typeof e&&(e=t.getInternalAction(e));var o=e(n);o&&o.subscribe(function(e){e&&t.markChanged(e)})},this.addItemToTheList=function(e){"end"==t.insertPosition?t.tableData.push(e):t.tableData.unshift(e)},this.markChanged=function(e){if(t.change.next(e),t.httpService){var n=JSON.stringify(t.getFromData(e));if(JSON.stringify(e)!=n)if("function"==typeof e.forEach)e.forEach(function(e){return t.markChanged(e)});else{var o=!1;o=t.trackByAttr?t.dataChanged.find(function(n){return n[t.trackByAttr]==e[t.trackByAttr]}):t.dataChanged.find(function(t){return t==e}),o||t.dataChanged.push(e)}else t.removeFromChangedObjects(e)}else t.data=t.tableData},this.actions=new Array,this.columns=new Array,this.tableData=new Array,this.filteredData=new Array,this.selectedCells=new Array,this.markedObjects=new Array,this.searchStringControl=new o.FormControl,this.dataChanged=new Array,this.noDataProvided=!1,this.saving=!1,this.loading=!1,this.change=new e.EventEmitter,this.onPagination=new e.EventEmitter}return t.prototype.ngOnChanges=function(t){var e=this;(t.data||t.httpService)&&(this.loadData(),this.filterData()),t.trackByAttr&&(this.trackBy=function(t,n){return n[e.trackByAttr]})},t.prototype.ngOnInit=function(){this.ensureBooleanIputs(),this.initSearch()},t.prototype.pageChanged=function(t){this.onPagination.emit({event:t.event})},t.prototype.trackBy=function(t,e){return this.trackByAttr?e[this.trackByAttr]:t},t.prototype.isCellSelected=function(t,e){return!!this.selectedCell&&(this.isCellAndColumnEqual(this.selectedCell,t,e)||this.isCellInSelectedCells(t,e))},t.prototype.hasMultiSelection=function(){return this.selectedCells.length>1&&""!=this.selectedCells[0].column},t.prototype.selectCell=function(t,e,n,o){if(void 0===o&&(o=!1),o)if((t.shiftKey||t.ctrlKey)&&this.selectedCell)if(this.preventDefaultSelectionBehaviour(t),t.shiftKey&&t.ctrlKey){var a=this.getObjectsByRange(e,this.selectedCell.object);this.copyDataFromSelectedCellToTheOthers(a)}else if(t.altKey&&t.ctrlKey){var a=this.getObjectsByRange(e,this.selectedCell.object);this.copyAndIterateDataFromSelectedCellToTheOthers(a)}else if(t.shiftKey){var a=this.getObjectsByRange(e,this.selectedCell.object);this.selectCellsWithShiftKey(a,this.selectedCell.column)}else t.ctrlKey&&this.selectCellsWithCtrlKey(e,this.selectedCell.column);else this.selectCellWithoutKey(e,n)},t.prototype.copyToMultipleSelection=function(t){void 0===t&&(t=!1);var e=this.selectedCells.map(function(t){return t.object});t?this.copyAndIterateDataFromSelectedCellToTheOthers(e):this.copyDataFromSelectedCellToTheOthers(e)},t.prototype.saveChanges=function(){var t=this,e=this.dataChanged.length;if(e){this.saving=!0;var n=0;this.dataChanged.forEach(function(o){t.httpService.save(o).then(function(o){++n==e&&(t.saving=!1,t.copyTableDataToData(),t.dataChange.emit(t.data),t.dataChanged=[])})})}},t.prototype.discardChanges=function(){this.resetTableData()},t.prototype.markObject=function(t,e){this.markedObject=e,t.checked?this.addToMarkedObjects(e):this.removeFromMarkedObjects(e)},t.prototype.markObjectByRange=function(t,e){var n=this;if(t.shiftKey&&this.markedObject){this.preventDefaultSelectionBehaviour(t);var o=this.isObjectMarked(this.markedObject);this.getObjectsByRange(e,this.markedObject).forEach(function(t){o?n.addToMarkedObjects(t):n.removeFromMarkedObjects(t)})}},t.prototype.isObjectMarked=function(t){if(this.markedObjects){return!!this.markedObjects.find(function(e){return e==t})}return!1},t.prototype.clearSearch=function(){},t.prototype.getOptionLabel=function(t,e){var n=e.find(function(e){return e.id==t}).label;return n||t},t.prototype.showActionButton=function(t,e){return!e.hide||("boolean"==typeof e.hide?!e.hide:!e.hide(t))},t.prototype.disableOptionCell=function(t,e){return!!e&&("boolean"==typeof e?e:e(t))},t.prototype.sortBy=function(t){this.sortAttr=t,this.sortDirection=void 0==this.sortDirection||!this.sortDirection},t.prototype.addItem=function(){var t=this;if("function"==typeof this.insert){var e=this.insert();e&&e.subscribe(function(e){e&&(t.addItemToTheList(e),t.httpService&&t.markChanged(e))})}else{var n=this.model?new this.model:{};this.addItemToTheList(n),this.markChanged(n)}},t.prototype.deleteItem=function(t){var e=this;this.httpService?this.httpService.delete(t).then(function(n){e.removeObjectFromAllLists(t)},function(t){console.log("Error when deleting the object",t)}):this.removeObjectFromAllLists(t)},t.prototype.getInternalAction=function(t){var e=this;switch(t){case"delete":return function(t){return e.deleteItem(t)};case"add":return function(t){return e.addItem()};default:return function(){}}},t.prototype.removeObjectFromAllLists=function(t){this.markChanged(t),this.removeFromChangedObjects(t),this.removeFromMarkedObjects(t),this.removeFromSelectedCells(t),this.removeFromTableData(t)},t.prototype.removeFromTableData=function(t){var e=this.tableData.indexOf(t);this.tableData.splice(e,1)},t.prototype.addToMarkedObjects=function(t){this.isObjectMarked(t)||this.markedObjects.push(t)},t.prototype.removeFromChangedObjects=function(t){var e=this.dataChanged.indexOf(t);this.dataChanged.splice(e,1)},t.prototype.removeFromMarkedObjects=function(t){var e=this.markedObjects.indexOf(t);this.markedObjects.splice(e,1)},t.prototype.ensureBooleanIputs=function(){this.autoSave="string"==typeof this.autoSave&&"true"===this.autoSave},t.prototype.isCellAndColumnEqual=function(t,e,n){return t.object==e&&t.column==n},t.prototype.isCellInSelectedCells=function(t,e){var n=this;if(this.selectedCells){return!!this.selectedCells.find(function(o){return n.isCellAndColumnEqual(o,t,e)})}return!1},t.prototype.isObjectInSelectedCells=function(t){if(this.selectedCells){return!!this.selectedCells.find(function(e){return e.object==t})}return!1},t.prototype.selectCellWithoutKey=function(t,e){this.isCellSelected(t,e)&&1==this.selectedCells.length?(this.selectedCell=void 0,this.selectedCells=[]):(this.selectedCell={object:t,column:e},this.selectedCells=[{object:t,column:e}])},t.prototype.selectCellsWithShiftKey=function(t,e){var n=this;t.forEach(function(t){n.addToSelectedCells(t,e)})},t.prototype.addToSelectedCells=function(t,e){this.isCellInSelectedCells(t,e)||this.selectedCells.push({object:t,column:e})},t.prototype.selectCellsWithCtrlKey=function(t,e){this.isCellInSelectedCells(t,e)?this.removeFromSelectedCells(t,e):this.addToSelectedCells(t,e)},t.prototype.getFromSelected=function(t,e){var n=this;return this.selectedCells.find(function(o){return n.isCellAndColumnEqual(o,t,e)})},t.prototype.removeFromSelectedCells=function(t,e){var n=this;if(e){var o=this.selectedCells.indexOf(this.getFromSelected(t,e));this.selectedCells.splice(o,1)}else{this.selectedCells.filter(function(e){return e.object==t}).forEach(function(e){n.removeFromSelectedCells(t,e.column)})}},t.prototype.getObjectsByRange=function(t,e){var n=this.filteredData.indexOf(e),o=this.filteredData.indexOf(t);return n<o?this.filteredData.filter(function(t,e){return e>=n&&e<=o}):this.filteredData.filter(function(t,e){return e<=n&&e>=o})},t.prototype.getInFiltered=function(t){var e=this;return t.filter(function(t){return e.filteredData.indexOf(t)>=0})},t.prototype.copyAndIterateDataFromSelectedCellToTheOthers=function(t){var e=this.selectedCell.column,n=this.selectedCell.object[e],o=n.match(/\d+$/);if(o){var a=this.filteredData.indexOf(t[1]),i=this.filteredData.indexOf(this.selectedCell.object),c=parseInt(o[0]),r=this.getInFiltered(t);i<a?r.forEach(function(t){t[e]=n.replace(/\d+$([^\d]*)$/,c+"$1"),c++}):r.reverse().forEach(function(t){t[e]=n.replace(/\d+$([^\d]*)$/,c+"$1"),c--}),this.autoSave?this.saveChanges():this.markChanged(r)}},t.prototype.copyDataFromSelectedCellToTheOthers=function(t){var e=this.selectedCell.column,n=this.selectedCell.object[e],o=this.getInFiltered(t);o.forEach(function(t){t[e]=n}),this.autoSave?this.saveChanges():this.markChanged(o)},t.prototype.loadData=function(){var t=this;this.httpService?(this.loading=!0,this.httpService.filter().subscribe(function(e){e&&(t.data=e,t.resetTableData(),t.loading=!1)})):this.data?this.tableData=this.data:this.noDataProvided=!0},t.prototype.resetTableData=function(){this.tableData=JSON.parse(JSON.stringify(this.data)),this.filterData(),this.dataChanged=[],this.markedObject=[],this.selectedCells=[]},t.prototype.copyTableDataToData=function(){this.data=JSON.parse(JSON.stringify(this.tableData))},t.prototype.initSearch=function(){var t=this;this.searchStringControl.valueChanges.debounceTime(300).distinctUntilChanged().subscribe(function(e){t.searchString=e,t.filterData()})},t.prototype.getFromData=function(t){var e=this;return this.trackByAttr?this.data.find(function(n){return n[e.trackByAttr]==t[e.trackByAttr]}):this.data.find(function(e){return e==t})},t.prototype.filterData=function(){this.searchString?this.filteredData=(new i.FilterPipe).transform(this.tableData,this.searchString):this.filteredData=this.tableData},t.prototype.preventDefaultSelectionBehaviour=function(t){t.preventDefault(),window.getSelection().removeAllRanges()},t.decorators=[{type:e.Component,args:[{selector:"data-box",styles:[".data-box-wrapper md-icon[fontSet=fa]{font-size:19px;height:auto}.data-box-wrapper md-input-container{width:100%}.data-box-wrapper .table-actions-wrapper{text-align:right}.data-box-wrapper .table-actions-wrapper span{display:inline-block;padding:10px 0px}.data-box-wrapper .text-rigth{text-align:right}.data-box-wrapper table{border-collapse:collapse;width:100%}.data-box-wrapper table .array-ul{list-style:none;margin:0;padding:4px}.data-box-wrapper table .array-ul li{line-height:12px;font-size:10px}.data-box-wrapper table a{text-decoration:none}.data-box-wrapper table .nowrap{white-space:nowrap}.data-box-wrapper table .fit-text{width:1px}.data-box-wrapper table thead tr{height:50px}.data-box-wrapper table td,.data-box-wrapper table th{padding:0px 6px}.data-box-wrapper table tbody md-icon .icon-text{padding:0px 4px 0px 3px;border-radius:3px;font-size:13px;line-height:17px;margin-left:-7px;margin-top:-7px;position:absolute}.data-box-wrapper table tbody a{font-weight:800}.data-box-wrapper table tbody tr{font-size:12px;line-height:20px}.data-box-wrapper table tbody .option-selected{display:grid} "],template:'<div class="data-box-wrapper"> \x3c!-- TITLE section --\x3e <div *ngIf="title"> <div [ngSwitch]="titleSize"> <h1 *ngSwitchCase="\'h1\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h1> <h2 *ngSwitchCase="\'h2\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h2> <h3 *ngSwitchCase="\'h3\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h3> <h4 *ngSwitchCase="\'h4\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h4> <h5 *ngSwitchCase="\'h5\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h5> <h6 *ngSwitchCase="\'h6\'"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </h6> <p *ngSwitchCase="undefined"> {{title}} <button  *ngIf="insert" md-icon-button  (click)="addItem()"> <md-icon fontSet="fa" fontIcon="fa-plus" title="Adicionar" color="primary"></md-icon> </button> </p> </div> </div> \x3c!-- end TITLE section --\x3e \x3c!-- LOAD section --\x3e <div *ngIf="noDataProvided"> <p>Dados não fornecidos.</p> </div> <div *ngIf="loading"> <p>Carregando dados...</p> </div> <div *ngIf="saving"> <p>Salvando dados...</p> </div> \x3c!-- end LOAD section --\x3e \x3c!-- TABLE section--\x3e <div *ngIf="!noDataProvided && !loading"> \x3c!-- TIPS section --\x3e <div class="text-rigth" *ngIf="includeTips"> <button md-icon-button (click)="showTips = !showTips" title="Ajuda"> <md-icon fontSet="fa" fontIcon="fa-question" color="primary"></md-icon> </button> <div *ngIf="showTips"> <hr> Como usar a tabela <ul> <li>shift + click: seleciona multiplas linhas.</li> <li>ctrl + click: seleciona multiplas linhas, uma por clique.</li> <li>shift + ctrl + click: copia um valor pra multiplas linhas.</li> <li>alt + ctrl + click: copia um valor pra multiplas linhas e adiciona +1 se o último conteúdo for numérico (dia 1, dia 2, dia 3...)</li> <li>Nenhuma alteração é salva automaticamente. Para salvar as alterações é preciso clicar em "Salvar alterações"</li> </ul> <hr> </div> </div> \x3c!-- end TIPS section --\x3e <div class="table-actions-wrapper"> <span *ngIf="dataChanged.length"> <button md-raised-button color="primary" (click)="saveChanges()">Salvar</button> <button md-raised-button color="warn" (click)="discardChanges()">Descartar</button> </span> <span *ngIf="hasMultiSelection()"> <button md-raised-button color="accent" (click)="copyToMultipleSelection()">Copiar</button> <button md-raised-button color="accent" (click)="copyToMultipleSelection(true)">Iterar</button> </span> </div> <div *ngIf="searchable"> <md-input-container> <input mdInput type="text" [formControl]="searchStringControl" placeholder="Filtre pelo nome, código..." /> <span *ngIf="searchStringControl.value" mdSuffix (click)="searchStringControl.setValue(\'\')"> <md-icon fontSet="fa" fontIcon="fa-close"></md-icon> </span> </md-input-container> </div> <div *ngIf="includeCounter"> <small> Mostrando {{filteredData.length}} de {{tableData.length}} resultados  <a href="javascript:void(0)" *ngIf="filteredData.length < tableData.length" (click)="searchStringControl.setValue(\'\')">(Mostrar tudo)</a> </small> </div> \x3c!-- PAGINATOR --\x3e <np-paginator *ngIf="onPagination && currentPage && amountPerPage" (pageChanged)="pageChanged($event)" [totalItems]="totalItems || filteredData.length" [currentPage]="currentPage" [amountPerPage]="amountPerPage" > </np-paginator> \x3c!-- END PAGINATOR section--\x3e <table [ngClass]="{\'stripped\': stripped, \'hover\': hover, \'condensed\': condensed}"> <thead> <tr class="nowrap"> <th class="fit-text" *ngIf="selectable"> <md-checkbox color="accent" (change)="markAllObjects($event)" [checked]="isAllObjectsMarked()"></md-checkbox> </th> <th *ngFor="let column of columns" align="{{column.align || left}}" [ngClass]="{\'fit-text\': column.fitText}"> <span [attr.title]="getAttributeValue(undefined, column.tooltip)"> <span [ngSwitch]="column.sort"> <span *ngSwitchCase="true" (click)="sortBy(column.attr)"> {{column.header}} <a href="javascript:void(0)" *ngIf="sortAttr == column.attr"><md-icon fontSet="fa" fontIcon="fa-sort-{{sortDirection ? \'up\' : \'down\'}}" md-input-icon></md-icon></a> <a href="javascript:void(0)" *ngIf="!(sortAttr == column.attr)"><md-icon fontSet="fa" fontIcon="fa-sort" md-input-icon></md-icon></a> </span> <span *ngSwitchDefault="">{{column.header}}</span> </span> </span> </th> <th class="fit-text" *ngIf="actions && actions.length">Ações</th> </tr> </thead> <tbody> <tr *ngFor="let object of filteredData | orderBy:sortAttr:sortDirection; let objectIndex = index; trackBy:trackBy"> <td class="fit-text" *ngIf="selectable"> <md-checkbox color="accent" (change)="markObject($event, object)" (click)="markObjectByRange($event, object)" [checked]="isObjectMarked(object)"></md-checkbox> </td> <td  *ngFor="let column of columns" align="{{column.align || left}}" [ngClass]="{\'fit-text\': column.fitText, \'highlight-cell\': isCellSelected(object, column.attr), \'nowrap\': column.actions.length > 0}" (click)="selectCell($event, object, column.attr, column.selectable)" [attr.title]="getAttributeValue(object, column.tooltip)"> <div [ngSwitch]="column.editable"> <span *ngSwitchCase="false"> <div [ngSwitch]="column.type"> <span *ngSwitchCase="\'text\'">{{getAttributeValue(object, column.attr)}}</span> <span *ngSwitchCase="\'text-icon\'"> <md-icon color="{{getAttributeValue(object, column.colorIcon)}}" fontSet="fa" fontIcon="{{getAttributeValue(object, column.fontIcon)}}"></md-icon> {{getAttributeValue(object, column.attr)}} </span> <span *ngSwitchCase="\'number\'">{{getAttributeValue(object, column.attr)}}</span> <span *ngSwitchCase="\'option\'">{{getOptionLabel(getAttributeValue(object, column.attr), column.options)}}</span> <span *ngSwitchCase="\'currency\'">{{getAttributeValue(object, column.attr) | currency:column.currencyLocation:true}}</span> <span *ngSwitchCase="\'date\' || \'date-time\'"> <div *ngIf="getAttributeValue(object, column.attr) != column.attr"> {{getAttributeValue(object, column.attr) | date: column.dateFormat}} </div> </span> <span *ngSwitchCase="\'boolean\'"> <span [ngSwitch]="getAttributeValue(object, column.attr)"> <md-icon *ngSwitchCase="true" color="primary" fontSet="fa" fontIcon="fa-check" md-list-icon></md-icon> </span> </span> <ul *ngSwitchCase="\'array\'" class="array-ul"> <li *ngFor="let item of getAttributeValue(object, column.attr)">{{getAttributeValue(item, column.arrayAttr, object)}}</li> </ul> <span *ngSwitchCase="\'actions\'"> <ng-container *ngFor="let action of column.actions"> <span *ngIf="action.action === \'menu\'"> <button *ngIf="action.icon" md-icon-button [mdMenuTriggerFor]="btnAction" [attr.title]="getAttributeValue(undefined, action.tooltip)"> <md-icon *ngIf="action.icon" fontSet="fa" fontIcon="{{action.icon}}" color="{{action.color}}"></md-icon> </button> <button *ngIf="!action.icon" md-raised-button [mdMenuTriggerFor]="btnAction" [attr.title]="getAttributeValue(undefined, action.tooltip)" color="{{action.color || \'default\'}}"> <span>{{geActionTitle(object, action.title)}}</span> </button> <md-menu #btnAction="mdMenu" xPosition="before" yPosition="below"> <button *ngFor="let option of action.options" (click)="callAction(option.function, object)" md-menu-item>  {{option.name}} </button> </md-menu> </span> <span *ngIf="action.action !== \'menu\'"> <button *ngIf="action.icon" md-icon-button [attr.title]="getAttributeValue(undefined, action.tooltip)" (click)="callAction(action.action, object)"> <md-icon *ngIf="action.icon" fontSet="fa" fontIcon="{{action.icon}}" color="{{action.color}}"></md-icon> </button> <button *ngIf="!action.icon" md-raised-button [attr.title]="getAttributeValue(undefined, action.tooltip)" (click)="callAction(action.action, object)" color="{{action.color || \'default\'}}"> <span>{{geActionTitle(object, action.title)}}</span> </button> </span> </ng-container> </span> </div> </span> <div *ngSwitchCase="true"> <div [ngSwitch]="column.type"> <span *ngSwitchCase="\'text\'"> <md-input-container> <input *ngIf="!column.attr2" mdInput type="text" [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}" /> <input *ngIf="column.attr2" mdInput type="text" [(ngModel)]="object[column.attr][column.attr2]" (change)="markChanged(object)" name="{{column.attr}}{{column.attr2}}{{objectIndex}}" /> </md-input-container> </span> <span *ngSwitchCase="\'text-icon\'"> <md-input-container> <input mdInput type="text" [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}" /> </md-input-container> </span> <span *ngSwitchCase="\'option\'"> <span *ngIf="column.unique" class="option-selected"> {{object[column.attr]}} </span> <md-select [disabled]="disableOptionCell(object, column.disable)" [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}"> <md-option [value]="undefined" *ngIf="column.options.length > 0" >-</md-option> <md-option [value]="undefined" *ngIf="column.options.length === 0" >Sem opções para selecionar</md-option> <md-option *ngFor="let option of column.options" [value]="option.id"> {{option.label}} </md-option> </md-select> </span> <span *ngSwitchCase="\'number\'"> <md-input-container> <input mdInput *ngIf="!column.attr2"  type="number" max="{{column.max}}" min="{{column.min}}" [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}" /> <input mdInput *ngIf="column.attr2"  type="number" max="{{column.max}}" min="{{column.min}}" [(ngModel)]="object[column.attr][column.attr2]" (change)="markChanged(object)" name="{{column.attr}}{{column.attr2}}{{objectIndex}}" /> </md-input-container> </span> <span *ngSwitchCase="\'boolean\'"> <md-checkbox color="primary" name="{{column.attr}}{{objectIndex}}" [(ngModel)]="object[column.attr]" (change)="markChanged(object)"></md-checkbox> </span> <span *ngSwitchCase="\'date-time\'"> <np-datetime-picker *ngIf="!column.attr2"  [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}" close-on-select="false" date-format="{{column.dateFormat}}" ></np-datetime-picker>     <np-datetime-picker *ngIf="column.attr2"  [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{column.attr2}}{{objectIndex}}" close-on-select="false" date-format="{{column.dateFormat}}" ></np-datetime-picker>     </span> <span *ngSwitchCase="\'date\'"> <np-datetime-picker *ngIf="!column.attr2"  [(ngModel)]="object[column.attr]" (change)="markChanged(object)" name="{{column.attr}}{{objectIndex}}" close-on-select="true" date-format="{{column.dateFormat}}" date-only="true" ></np-datetime-picker> <np-datetime-picker *ngIf="column.attr2"  [(ngModel)]="object[column.attr][column.attr2]" (change)="markChanged(object)" name="{{column.attr}}{{column.attr2}}{{objectIndex}}" close-on-select="true" date-format="{{column.dateFormat}}" date-only="true" ></np-datetime-picker> </span> </div> </div> </div> </td> <td class="nowrap" *ngIf="actions && actions.length"> <ng-container *ngFor="let action of actions"> <button *ngIf="showActionButton(object, action)" md-icon-button  title="{{action.title}}" (click)="callAction(action.action, object)"> <md-icon *ngIf="action.icon" fontSet="fa" fontIcon="{{action.icon}}"  color="{{action.color}}"></md-icon> <span *ngIf="!action.icon">{{action.title}}</span> </button> </ng-container> </td> </tr> </tbody> </table> <div class="table-actions-wrapper"> <span *ngIf="dataChanged.length"> <button md-raised-button color="primary" (click)="saveChanges()">Salvar</button> <button md-raised-button color="warn" (click)="discardChanges()">Descartar</button> </span> <span *ngIf="hasMultiSelection()"> <button md-raised-button color="accent" (click)="copyToMultipleSelection()">Copiar</button> <button md-raised-button color="accent" (click)="copyToMultipleSelection(true)">Iterar</button> </span> </div> \x3c!-- TIPS section --\x3e <div class="text-rigth" *ngIf="includeTips"> <button md-icon-button (click)="showTips = !showTips" title="Ajuda"> <md-icon fontSet="fa" fontIcon="fa-question" color="primary"></md-icon> </button> <div class="about-data-box" *ngIf="showTips"> <hr> Como usar a tabela <ul> <li>shift + click: seleciona multiplas linhas.</li> <li>ctrl + click: seleciona multiplas linhas, uma por clique.</li> <li>shift + ctrl + click: copia um valor pra multiplas linhas.</li> <li>alt + ctrl + click: copia um valor pra multiplas linhas e adiciona +1 se o último conteúdo for numérico (dia 1, dia 2, dia 3...)</li> <li>Nenhuma alteração é salva automaticamente. Para salvar as alterações é preciso clicar em "Salvar alterações"</li> </ul> <hr> </div> </div> \x3c!-- end TIPS section --\x3e </div> </div> '}]}],t.ctorParameters=function(){return[]},t.propDecorators={columns:[{type:e.Input}],actions:[{type:e.Input}],data:[{type:e.Input}],dataChange:[{type:e.Output}],title:[{type:e.Input}],titleSize:[{type:e.Input,args:["title-size"]}],maxRows:[{type:e.Input,args:["max-rows"]}],stripped:[{type:e.Input}],condensed:[{type:e.Input}],hover:[{type:e.Input}],searchable:[{type:e.Input}],selectable:[{type:e.Input}],includeTips:[{type:e.Input,args:["tips"]}],includeCounter:[{type:e.Input,args:["counter"]}],autoSave:[{type:e.Input,args:["auto-save"]}],httpService:[{type:e.Input,args:["http-service"]}],model:[{type:e.Input}],trackByAttr:[{type:e.Input,args:["track-by"]}],insert:[{type:e.Input}],insertPosition:[{type:e.Input,args:["insert-position"]}],totalItems:[{type:e.Input}],currentPage:[{type:e.Input}],amountPerPage:[{type:e.Input}],multipleSelection:[{type:e.Output}],change:[{type:e.Output}],onPagination:[{type:e.Output,args:["on-pagination"]}]},t}(),s=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,o.ReactiveFormsModule,a.MaterialModule,a.MdCheckboxModule,a.MdIconModule,a.MdInputModule,c.DatetimePickerModule,i.CustomPipesModule],declarations:[l,r],exports:[l,r]}]}],t.ctorParameters=function(){return[]},t}(),d=function(){function t(t){this.sort=!0,this.search=!0,this.align="left",this.fitText=!1,this.editable=!1,this.selectable=!1,this.attr=t&&t.attr?t.attr:void 0,this.attr2=t&&t.attr2?t.attr2:void 0,this.arrayAttr=t&&t.arrayAttr?t.arrayAttr:void 0,this.header=t&&t.header?t.header:void 0,this.sort=t&&t.sort?t.sort:void 0,this.search=t&&t.search?t.search:void 0,this.align=t&&t.align?t.align:void 0,this.fitText=t&&t.fitText?t.fitText:void 0,this.tooltip=t&&t.tooltip?t.tooltip:void 0,this.maxLength=t&&t.maxLength?t.maxLength:void 0,this.editable=!(!t||!t.editable)&&t.editable,this.selectable=!(!t||!t.selectable)&&t.selectable,this.type=t&&t.type?t.type:"text",this.dateFormat=t&&t.dateFormat?t.dateFormat:"dd/MM/yy",this.currencyLocation=t&&t.currencyLocation?t.currencyLocation:"USD",this.max=t&&t.max?t.max:void 0,this.min=t&&t.min?t.min:void 0,this.options=t&&t.options?t.options:[],this.unique=!(!t||!t.unique)&&t.unique,this.actions=t&&t.actions?t.actions:[],this.fontIcon=t&&t.fontIcon?t.fontIcon:void 0,this.colorIcon=t&&t.colorIcon?t.colorIcon:"black",this.disable=!(!t||!t.disable)&&t.disable}return t}(),u=function(){function t(t){void 0===t&&(t={}),this.title=t.title?t.title:void 0,this.action=t.action?t.action:void 0,this.icon=t.icon?t.icon:void 0,this.color=t.color?t.color:void 0,this.hide=!!t.hide&&t.hide}return t}();t.DataBoxModule=s,t.DataBoxColumn=d,t.DataBoxAction=u,Object.defineProperty(t,"__esModule",{value:!0})});