UNPKG

@angular-mdc/web

Version:
864 lines (825 loc) 30.2 kB
/** * @license * Copyright (c) Dominic Carretto * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@angular/cdk/coercion'), require('@angular-mdc/web/checkbox'), require('@angular-mdc/web/dom'), require('@material/data-table')) : typeof define === 'function' && define.amd ? define('@angular-mdc/web/data-table', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@angular/cdk/coercion', '@angular-mdc/web/checkbox', '@angular-mdc/web/dom', '@material/data-table'], factory) : (global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.dataTable = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.web.base, global.ng.cdk.coercion, global.ng.web.checkbox, global.ng.web.dom, global.mdc.dataTable)); }(this, (function (exports, core, common, rxjs, operators, base, coercion, checkbox, dom, dataTable) { '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. ***************************************************************************** */ /* global Reflect, Promise */ var _extendStatics = function extendStatics(d, b) { _extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; } || function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) d[p] = b[p]; } }; return _extendStatics(d, b); }; function __extends(d, b) { _extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } function __generator(thisArg, body) { var _ = { label: 0, sent: function sent() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) { try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } } /** * @fileoverview added by tsickle * Generated from: data-table/data-table.directives.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var uniqueIdCounter = 0; var MDCDataTableTable = /** @class */ (function () { function MDCDataTableTable(elementRef) { this.elementRef = elementRef; } MDCDataTableTable.decorators = [ { type: core.Directive, args: [{ selector: '[mdcDataTableTable]', exportAs: 'mdcDataTableTable', host: { 'class': 'mdc-data-table__table' } },] }, ]; /** @nocollapse */ MDCDataTableTable.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; return MDCDataTableTable; }()); var MDCDataTableHeaderRow = /** @class */ (function () { function MDCDataTableHeaderRow(elementRef) { this.elementRef = elementRef; } MDCDataTableHeaderRow.decorators = [ { type: core.Directive, args: [{ selector: '[mdcDataTableHeaderRow]', exportAs: 'mdcDataTableHeaderRow', host: { 'class': 'mdc-data-table__header-row' } },] }, ]; /** @nocollapse */ MDCDataTableHeaderRow.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; return MDCDataTableHeaderRow; }()); var MDCDataTableHeaderCell = /** @class */ (function () { function MDCDataTableHeaderCell(elementRef) { this.elementRef = elementRef; this._numeric = false; } Object.defineProperty(MDCDataTableHeaderCell.prototype, "numeric", { get: /** * @return {?} */ function () { return this._numeric; }, set: /** * @param {?} value * @return {?} */ function (value) { this._numeric = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); MDCDataTableHeaderCell.decorators = [ { type: core.Component, args: [{selector: '[mdcDataTableHeaderCell]', exportAs: 'mdcDataTableHeaderCell', host: { 'role': 'columnheader', 'scope': 'col', 'class': 'mdc-data-table__header-cell', '[class.mdc-data-table__header-cell--checkbox]': '!!_checkbox', '[class.mdc-data-table__header-cell--numeric]': 'numeric' }, template: '<ng-content></ng-content>', encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush },] }, ]; /** @nocollapse */ MDCDataTableHeaderCell.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; MDCDataTableHeaderCell.propDecorators = { numeric: [{ type: core.Input }], _checkbox: [{ type: core.ContentChild, args: [checkbox.MdcCheckbox, { static: false },] }] }; return MDCDataTableHeaderCell; }()); var MDCDataTableContent = /** @class */ (function () { function MDCDataTableContent(elementRef) { this.elementRef = elementRef; } MDCDataTableContent.decorators = [ { type: core.Directive, args: [{ selector: '[mdcDataTableContent]', exportAs: 'mdcDataTableContent', host: { 'class': 'mdc-data-table__content' } },] }, ]; /** @nocollapse */ MDCDataTableContent.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; return MDCDataTableContent; }()); var MDCDataTableRow = /** @class */ (function () { function MDCDataTableRow(elementRef) { this.elementRef = elementRef; this._id = "mdc-data-table-row-" + uniqueIdCounter++; this._selected = false; } Object.defineProperty(MDCDataTableRow.prototype, "id", { /** The unique ID of the row. */ get: /** * The unique ID of the row. * @return {?} */ function () { return this._id; }, enumerable: true, configurable: true }); Object.defineProperty(MDCDataTableRow.prototype, "selected", { get: /** * @return {?} */ function () { return this._selected; }, set: /** * @param {?} value * @return {?} */ function (value) { this._selected = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); /** * @return {?} */ MDCDataTableRow.prototype.getNativeElement = /** * @return {?} */ function () { return this.elementRef.nativeElement; }; MDCDataTableRow.decorators = [ { type: core.Component, args: [{selector: '[mdcDataTableRow]', exportAs: 'mdcDataTableRow', host: { '[attr.data-row-id]': 'id', 'class': 'mdc-data-table__row', '[class.mdc-data-table__row-checkbox]': '!!_checkbox', '[class.mdc-data-table__row--selected]': 'selected' }, template: '<ng-content></ng-content>', encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush },] }, ]; /** @nocollapse */ MDCDataTableRow.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; MDCDataTableRow.propDecorators = { _checkbox: [{ type: core.ContentChild, args: [checkbox.MdcCheckbox, { static: false },] }], selected: [{ type: core.Input }] }; return MDCDataTableRow; }()); var MDCDataTableCell = /** @class */ (function () { function MDCDataTableCell(elementRef) { this.elementRef = elementRef; this._checkbox = false; this._numeric = false; } Object.defineProperty(MDCDataTableCell.prototype, "checkbox", { get: /** * @return {?} */ function () { return this._checkbox; }, set: /** * @param {?} value * @return {?} */ function (value) { this._checkbox = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); Object.defineProperty(MDCDataTableCell.prototype, "numeric", { get: /** * @return {?} */ function () { return this._numeric; }, set: /** * @param {?} value * @return {?} */ function (value) { this._numeric = coercion.coerceBooleanProperty(value); }, enumerable: true, configurable: true }); MDCDataTableCell.decorators = [ { type: core.Component, args: [{selector: '[mdcDataTableCell]', exportAs: 'mdcDataTableCell', host: { 'class': 'mdc-data-table__cell', '[class.mdc-data-table__cell--checkbox]': 'checkbox', '[class.mdc-data-table__cell--numeric]': 'numeric' }, template: '<ng-content></ng-content>', encapsulation: core.ViewEncapsulation.None, changeDetection: core.ChangeDetectionStrategy.OnPush },] }, ]; /** @nocollapse */ MDCDataTableCell.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; MDCDataTableCell.propDecorators = { checkbox: [{ type: core.Input }], numeric: [{ type: core.Input }] }; return MDCDataTableCell; }()); /** * @fileoverview added by tsickle * Generated from: data-table/data-table.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var MDCDataTable = /** @class */ (function (_super) { __extends(MDCDataTable, _super); function MDCDataTable(elementRef) { var _this = _super.call(this, elementRef) || this; _this.elementRef = elementRef; /** * Emits whenever the component is destroyed. */ _this._destroyed = new rxjs.Subject(); _this._headerCheckboxSubscription = null; /** * Subscription to checkbox events in rows. */ _this._rowCheckboxesSubscription = null; /** * Emitted when all rows are selected. */ _this.selectedAll = new core.EventEmitter(); /** * Emitted when all rows are unselected. */ _this.unselectedAll = new core.EventEmitter(); /** * Emitted when a row is selected. */ _this.selectionChanged = new core.EventEmitter(); return _this; } Object.defineProperty(MDCDataTable.prototype, "rowCheckboxChanges", { /** Combined stream of all checkbox row change events. */ get: /** * Combined stream of all checkbox row change events. * @return {?} */ function () { return rxjs.merge.apply(void 0, this.rows.map((/** * @param {?} row * @return {?} */ function (row) { return (/** @type {?} */ (row._checkbox)).change; }))); }, enumerable: true, configurable: true }); /** * @return {?} */ MDCDataTable.prototype.getDefaultFoundation = /** * @return {?} */ function () { var _this = this; /** @type {?} */ var adapter = { addClassAtRowIndex: (/** * @param {?} rowIndex * @param {?} className * @return {?} */ function (rowIndex, className) { return _this.getRows()[rowIndex].getNativeElement().classList.add(className); }), getRowCount: (/** * @return {?} */ function () { return _this.getRows().length; }), getRowElements: (/** * @return {?} */ function () { return [].slice.call(_this.elementRef.nativeElement.querySelectorAll(dataTable.strings.ROW_SELECTOR)); }), getRowIdAtIndex: (/** * @param {?} rowIndex * @return {?} */ function (rowIndex) { return _this.getRows()[rowIndex].getNativeElement().getAttribute(dataTable.strings.DATA_ROW_ID_ATTR); }), getRowIndexByChildElement: (/** * @param {?} el * @return {?} */ function (el) { return _this.getRows().findIndex((/** * @param {?} _ * @return {?} */ function (_) { return _.getNativeElement() === (((/** @type {?} */ (dom.closest(el, dataTable.strings.ROW_SELECTOR))))); })); }), getSelectedRowCount: (/** * @return {?} */ function () { return _this.elementRef.nativeElement.querySelectorAll(dataTable.strings.ROW_SELECTED_SELECTOR).length; }), isCheckboxAtRowIndexChecked: (/** * @param {?} rowIndex * @return {?} */ function (rowIndex) { return _this.rows.length > 0 && _this.getRows()[rowIndex] && _this.getRows()[rowIndex]._checkbox !== undefined && (/** @type {?} */ (_this.getRows()[rowIndex]._checkbox)).checked ? true : false; }), isHeaderRowCheckboxChecked: (/** * @return {?} */ function () { return _this._headerCheckbox ? _this._headerCheckbox.checked : false; }), isRowsSelectable: (/** * @return {?} */ function () { return !!_this.elementRef.nativeElement.querySelector(dataTable.strings.ROW_CHECKBOX_SELECTOR); }), notifyRowSelectionChanged: (/** * @param {?} data * @return {?} */ function (data) { return _this.selectionChanged.emit({ index: data.rowIndex, id: data.rowId, selected: data.selected }); }), notifySelectedAll: (/** * @return {?} */ function () { return _this.selectedAll.emit(); }), notifyUnselectedAll: (/** * @return {?} */ function () { return _this.unselectedAll.emit(); }), registerHeaderRowCheckbox: (/** * @return {?} */ function () { return _this._registerHeaderCheckbox(); }), registerRowCheckboxes: (/** * @return {?} */ function () { return _this._registerRowCheckboxes(); }), removeClassAtRowIndex: (/** * @param {?} rowIndex * @param {?} className * @return {?} */ function (rowIndex, className) { return _this.getRows()[rowIndex].getNativeElement().classList.remove(className); }), setAttributeAtRowIndex: (/** * @param {?} rowIndex * @param {?} attr * @param {?} value * @return {?} */ function (rowIndex, attr, value) { return _this.getRows()[rowIndex].getNativeElement().setAttribute(attr, value); }), setHeaderRowCheckboxChecked: (/** * @param {?} checked * @return {?} */ function (checked) { return (/** @type {?} */ (_this._headerCheckbox)).checked = checked; }), setHeaderRowCheckboxIndeterminate: (/** * @param {?} indeterminate * @return {?} */ function (indeterminate) { return (/** @type {?} */ (_this._headerCheckbox)).indeterminate = indeterminate; }), setRowCheckboxCheckedAtIndex: (/** * @param {?} rowIndex * @param {?} checked * @return {?} */ function (rowIndex, checked) { return _this.getRows()[rowIndex]._checkbox ? (/** @type {?} */ (_this.getRows()[rowIndex]._checkbox)).toggle(checked) : null; }) }; return new dataTable.MDCDataTableFoundation(adapter); }; /** * @return {?} */ MDCDataTable.prototype.ngAfterViewInit = /** * @return {?} */ function () { this._foundation.init(); this.layoutAsync(); }; /** * @return {?} */ MDCDataTable.prototype.ngOnDestroy = /** * @return {?} */ function () { this._destroyed.next(); this._destroyed.complete(); this._unsubscribeHeaderCheckbox(); this._unsubscribeRowCheckboxes(); if (this._foundation) { this._foundation.destroy(); } }; /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is asynchronous. */ /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is asynchronous. * @return {?} */ MDCDataTable.prototype.layoutAsync = /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is asynchronous. * @return {?} */ function () { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { switch (_a.label) { case 0: return [4 /*yield*/, this._foundation.layoutAsync()]; case 1: _a.sent(); return [2 /*return*/]; } }); }); }; /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is synchronous. */ /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is synchronous. * @return {?} */ MDCDataTable.prototype.layout = /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is synchronous. * @return {?} */ function () { this._foundation.layout(); }; /** * @return Returns array of selected row ids. */ /** * @return {?} Returns array of selected row ids. */ MDCDataTable.prototype.getSelectedRowIds = /** * @return {?} Returns array of selected row ids. */ function () { return this._foundation.getSelectedRowIds(); }; /** * Sets selected row ids. Overwrites previously selected rows. * @param rowIds Array of row ids that needs to be selected. */ /** * Sets selected row ids. Overwrites previously selected rows. * @param {?} rowIds Array of row ids that needs to be selected. * @return {?} */ MDCDataTable.prototype.setSelectedRowIds = /** * Sets selected row ids. Overwrites previously selected rows. * @param {?} rowIds Array of row ids that needs to be selected. * @return {?} */ function (rowIds) { return this._foundation.setSelectedRowIds(rowIds); }; /** * @return {?} */ MDCDataTable.prototype.getRows = /** * @return {?} */ function () { return this.rows.toArray(); }; /** * @return {?} */ MDCDataTable.prototype.getHeaderCheckbox = /** * @return {?} */ function () { return this._headerCheckbox; }; /** * @private * @return {?} */ MDCDataTable.prototype._unsubscribeHeaderCheckbox = /** * @private * @return {?} */ function () { if (this._headerCheckboxSubscription) { this._headerCheckboxSubscription.unsubscribe(); } }; /** * @private * @return {?} */ MDCDataTable.prototype._unsubscribeRowCheckboxes = /** * @private * @return {?} */ function () { if (this._rowCheckboxesSubscription) { this._rowCheckboxesSubscription.unsubscribe(); } }; /** * @private * @return {?} */ MDCDataTable.prototype._registerHeaderCheckbox = /** * @private * @return {?} */ function () { var _this = this; this._unsubscribeHeaderCheckbox(); /** @type {?} */ var headerRowCheckboxIndex = this.headerCells.toArray().findIndex((/** * @param {?} _ * @return {?} */ function (_) { return _._checkbox !== undefined; })); this._headerCheckbox = this.headerCells.toArray()[headerRowCheckboxIndex]._checkbox; this._headerCheckboxSubscription = (/** @type {?} */ (this._headerCheckbox)).change.pipe(operators.takeUntil(this._destroyed)) .subscribe((/** * @param {?} _ * @return {?} */ function (_) { return _this._foundation.handleHeaderRowCheckboxChange(); })); }; /** * @private * @return {?} */ MDCDataTable.prototype._registerRowCheckboxes = /** * @private * @return {?} */ function () { var _this = this; this._unsubscribeRowCheckboxes(); this._rowCheckboxesSubscription = this.rowCheckboxChanges.subscribe((/** * @param {?} event * @return {?} */ function (event) { _this._foundation.handleRowCheckboxChange((/** @type {?} */ ((/** @type {?} */ ({ target: event.source._inputElement.nativeElement }))))); })); }; MDCDataTable.decorators = [ { type: core.Component, args: [{ selector: 'mdc-data-table', exportAs: 'mdcDataTable', host: { 'class': 'mdc-data-table' }, template: '<ng-content></ng-content>', changeDetection: core.ChangeDetectionStrategy.OnPush, encapsulation: core.ViewEncapsulation.None },] }, ]; /** @nocollapse */ MDCDataTable.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; MDCDataTable.propDecorators = { selectedAll: [{ type: core.Output }], unselectedAll: [{ type: core.Output }], selectionChanged: [{ type: core.Output }], rows: [{ type: core.ContentChildren, args: [MDCDataTableRow, { descendants: true },] }], headerCells: [{ type: core.ContentChildren, args: [MDCDataTableHeaderCell, { descendants: true },] }] }; return MDCDataTable; }(base.MDCComponent)); /** * @fileoverview added by tsickle * Generated from: data-table/module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var DATA_TABLE_DECLARATIONS = [ MDCDataTable, MDCDataTableCell, MDCDataTableContent, MDCDataTableHeaderCell, MDCDataTableHeaderRow, MDCDataTableRow, MDCDataTableTable ]; var MDCDataTableModule = /** @class */ (function () { function MDCDataTableModule() { } MDCDataTableModule.decorators = [ { type: core.NgModule, args: [{ imports: [common.CommonModule], exports: DATA_TABLE_DECLARATIONS, declarations: DATA_TABLE_DECLARATIONS },] }, ]; return MDCDataTableModule; }()); exports.MDCDataTable = MDCDataTable; exports.MDCDataTableCell = MDCDataTableCell; exports.MDCDataTableContent = MDCDataTableContent; exports.MDCDataTableHeaderCell = MDCDataTableHeaderCell; exports.MDCDataTableHeaderRow = MDCDataTableHeaderRow; exports.MDCDataTableModule = MDCDataTableModule; exports.MDCDataTableRow = MDCDataTableRow; exports.MDCDataTableTable = MDCDataTableTable; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=web-data-table.umd.js.map