@angular-mdc/web
Version:
677 lines (672 loc) • 23.2 kB
JavaScript
/**
* @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
*/
import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Input, ContentChild, Directive, EventEmitter, Output, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __extends, __awaiter, __generator } from 'tslib';
import { Subject, merge } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { MdcCheckbox } from '@angular-mdc/web/checkbox';
import { closest } from '@angular-mdc/web/dom';
import { MDCDataTableFoundation, strings } from '@material/data-table';
/**
* @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: Directive, args: [{
selector: '[mdcDataTableTable]',
exportAs: 'mdcDataTableTable',
host: { 'class': 'mdc-data-table__table' }
},] },
];
/** @nocollapse */
MDCDataTableTable.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MDCDataTableTable;
}());
var MDCDataTableHeaderRow = /** @class */ (function () {
function MDCDataTableHeaderRow(elementRef) {
this.elementRef = elementRef;
}
MDCDataTableHeaderRow.decorators = [
{ type: Directive, args: [{
selector: '[mdcDataTableHeaderRow]',
exportAs: 'mdcDataTableHeaderRow',
host: { 'class': 'mdc-data-table__header-row' }
},] },
];
/** @nocollapse */
MDCDataTableHeaderRow.ctorParameters = function () { return [
{ type: 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 = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
MDCDataTableHeaderCell.decorators = [
{ type: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MDCDataTableHeaderCell.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MDCDataTableHeaderCell.propDecorators = {
numeric: [{ type: Input }],
_checkbox: [{ type: ContentChild, args: [MdcCheckbox, { static: false },] }]
};
return MDCDataTableHeaderCell;
}());
var MDCDataTableContent = /** @class */ (function () {
function MDCDataTableContent(elementRef) {
this.elementRef = elementRef;
}
MDCDataTableContent.decorators = [
{ type: Directive, args: [{
selector: '[mdcDataTableContent]',
exportAs: 'mdcDataTableContent',
host: { 'class': 'mdc-data-table__content' }
},] },
];
/** @nocollapse */
MDCDataTableContent.ctorParameters = function () { return [
{ type: 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 = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MDCDataTableRow.prototype.getNativeElement = /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MDCDataTableRow.decorators = [
{ type: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MDCDataTableRow.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MDCDataTableRow.propDecorators = {
_checkbox: [{ type: ContentChild, args: [MdcCheckbox, { static: false },] }],
selected: [{ type: 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 = 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 = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
MDCDataTableCell.decorators = [
{ type: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MDCDataTableCell.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MDCDataTableCell.propDecorators = {
checkbox: [{ type: Input }],
numeric: [{ type: 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 Subject();
_this._headerCheckboxSubscription = null;
/**
* Subscription to checkbox events in rows.
*/
_this._rowCheckboxesSubscription = null;
/**
* Emitted when all rows are selected.
*/
_this.selectedAll = new EventEmitter();
/**
* Emitted when all rows are unselected.
*/
_this.unselectedAll = new EventEmitter();
/**
* Emitted when a row is selected.
*/
_this.selectionChanged = new 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 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(strings.ROW_SELECTOR)); }),
getRowIdAtIndex: (/**
* @param {?} rowIndex
* @return {?}
*/
function (rowIndex) {
return _this.getRows()[rowIndex].getNativeElement().getAttribute(strings.DATA_ROW_ID_ATTR);
}),
getRowIndexByChildElement: (/**
* @param {?} el
* @return {?}
*/
function (el) {
return _this.getRows().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.getNativeElement() === (((/** @type {?} */ (closest(el, strings.ROW_SELECTOR))))); }));
}),
getSelectedRowCount: (/**
* @return {?}
*/
function () { return _this.elementRef.nativeElement.querySelectorAll(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(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 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(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: Component, args: [{
selector: 'mdc-data-table',
exportAs: 'mdcDataTable',
host: { 'class': 'mdc-data-table' },
template: '<ng-content></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MDCDataTable.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MDCDataTable.propDecorators = {
selectedAll: [{ type: Output }],
unselectedAll: [{ type: Output }],
selectionChanged: [{ type: Output }],
rows: [{ type: ContentChildren, args: [MDCDataTableRow, { descendants: true },] }],
headerCells: [{ type: ContentChildren, args: [MDCDataTableHeaderCell, { descendants: true },] }]
};
return MDCDataTable;
}(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: NgModule, args: [{
imports: [CommonModule],
exports: DATA_TABLE_DECLARATIONS,
declarations: DATA_TABLE_DECLARATIONS
},] },
];
return MDCDataTableModule;
}());
export { MDCDataTable, MDCDataTableCell, MDCDataTableContent, MDCDataTableHeaderCell, MDCDataTableHeaderRow, MDCDataTableModule, MDCDataTableRow, MDCDataTableTable };
//# sourceMappingURL=data-table.es5.js.map