angular2-mdl-miracle
Version:
Angular 2 components, directives and styles based on material design lite https://getmdl.io.
58 lines • 3.52 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
export var MdlDefaultGrid = (function () {
function MdlDefaultGrid(columns, data) {
this.data = new Array();
this.columns = columns;
if (data)
this.data = data;
}
MdlDefaultGrid.prototype.addAll = function (data) {
(_a = this.data).push.apply(_a, data);
var _a;
};
return MdlDefaultGrid;
}());
var template = "\n <table class=\"mdl-data-table\">\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <mdl-checkbox mdl-ripple [ngModel]=\"isAllSelected()\" (ngModelChange)=\"toogleAll()\"></mdl-checkbox>\n </th>\n <th *ngFor=\"let column of model.columns\" [ngClass]=\"{'mdl-data-table__cell--non-numeric': !column.numeric}\">\n {{column.name}}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let data of model.data; let i = index\" [ngClass]=\"{'is-selected': selectable && data.selected}\">\n <td *ngIf=\"selectable\">\n <mdl-checkbox mdl-ripple [(ngModel)]=\"data.selected\" (ngModelChange)=\"selectionChanged(data)\"></mdl-checkbox>\n </td>\n <td *ngFor=\"let column of model.columns\" [ngClass]=\"{'mdl-data-table__cell--non-numeric': !column.numeric}\">\n <mdl-checkbox *ngIf=\"column.isBoolean\" mdl-ripple [(ngModel)]=\"data[column.key]\" [disabled]=\"!column.editable\"></mdl-checkbox>\n <pre *ngIf=\"column.isText\">{{data[column.key]}}</pre>\n </td>\n </tr>\n </tbody>\n </table>\n ";
var styles = [
"\n :host{\n display:inline-block;\n }\n "
];
export var MdlDataGridComponent = (function () {
function MdlDataGridComponent() {
this.selectionChange = new EventEmitter();
this.selectable = false;
this.allSelected = false;
}
MdlDataGridComponent.prototype.isAllSelected = function () {
return this.model.data.every(function (data) { return data.selected; });
};
MdlDataGridComponent.prototype.toogleAll = function () {
var selected = !this.isAllSelected();
this.model.data.forEach(function (data) { return data.selected = selected; });
this.updateSelected();
};
MdlDataGridComponent.prototype.updateSelected = function () {
this.selected = this.model.data.filter(function (data) { return data.selected; });
this.selectionChange.emit({ value: this.selected });
};
MdlDataGridComponent.prototype.selectionChanged = function (data) {
this.updateSelected();
};
MdlDataGridComponent.decorators = [
{ type: Component, args: [{
selector: 'mdl-data-grid',
template: template,
styles: styles,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdlDataGridComponent.ctorParameters = function () { return []; };
MdlDataGridComponent.propDecorators = {
'model': [{ type: Input, args: ['grid-model',] },],
'selected': [{ type: Input, args: ['grid-model-selected',] },],
'selectionChange': [{ type: Output, args: ['grid-model-selectionChanged',] },],
'selectable': [{ type: Input, args: ['selectable',] },],
};
return MdlDataGridComponent;
}());
//# sourceMappingURL=mdl-data-grid.component.js.map