angular2-collapsible
Version:
Angular collapsible component styled with Materialize CSS.
1,324 lines (1,314 loc) • 71.7 kB
JavaScript
import { Injectable, EventEmitter, Component, ElementRef, HostBinding, Input, Output, ContentChildren, HostListener, ViewChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __values } from 'tslib';
import { Subject } from 'rxjs';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* Generated from: lib/services/collapsible.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleService = /** @class */ (function () {
function CollapsibleService() {
this.headers = new Array();
this.bodies = new Array();
}
/**
* @return {?}
*/
CollapsibleService.prototype.getType = /**
* @return {?}
*/
function () {
return this.type;
};
/**
* @param {?} type
* @return {?}
*/
CollapsibleService.prototype.setType = /**
* @param {?} type
* @return {?}
*/
function (type) {
this.type = type;
};
/**
* @return {?}
*/
CollapsibleService.prototype.getCollapsibleTable = /**
* @return {?}
*/
function () {
return this.collapsibleTable;
};
/**
* @param {?} table
* @return {?}
*/
CollapsibleService.prototype.setCollapsibleTable = /**
* @param {?} table
* @return {?}
*/
function (table) {
this.collapsibleTable = table;
};
/**
* @param {?} header
* @return {?}
*/
CollapsibleService.prototype.addListHeader = /**
* @param {?} header
* @return {?}
*/
function (header) {
this.headers.push(header);
};
/**
* @param {?} body
* @return {?}
*/
CollapsibleService.prototype.addListBody = /**
* @param {?} body
* @return {?}
*/
function (body) {
this.bodies.push(body);
};
/**
* @return {?}
*/
CollapsibleService.prototype.collapseAll = /**
* @return {?}
*/
function () {
this.bodies.forEach((/**
* @param {?} collapsibleBodyComponent
* @return {?}
*/
function (collapsibleBodyComponent) {
// set 'expanded' properties of all the CollapsibleBodyComponents to 'false'
collapsibleBodyComponent.expanded = false;
collapsibleBodyComponent.expandedState = collapsibleBodyComponent.expanded.toString();
// emit 'toggleState' event for all the CollapsibleBodyComponents
collapsibleBodyComponent.toggleState.emit(false);
}));
};
CollapsibleService.decorators = [
{ type: Injectable }
];
return CollapsibleService;
}());
if (false) {
/** @type {?} */
CollapsibleService.prototype.type;
/** @type {?} */
CollapsibleService.prototype.collapsibleTable;
/** @type {?} */
CollapsibleService.prototype.headers;
/** @type {?} */
CollapsibleService.prototype.bodies;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/services/collapsible-event.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleEvent = /** @class */ (function () {
function CollapsibleEvent() {
}
return CollapsibleEvent;
}());
if (false) {
/** @type {?} */
CollapsibleEvent.prototype.type;
}
var CollapsibleEventService = /** @class */ (function () {
function CollapsibleEventService() {
// Observable string sources
this.toggleCollapsibleItemSource = new Subject();
// Observable string streams
this.toggleCollapsibleItem$ = this.toggleCollapsibleItemSource.asObservable();
}
// Toggle collapsible item
// Toggle collapsible item
/**
* @param {?=} event
* @return {?}
*/
CollapsibleEventService.prototype.toggleCollapsibleItem =
// Toggle collapsible item
/**
* @param {?=} event
* @return {?}
*/
function (event) {
this.toggleCollapsibleItemSource.next(event);
};
/**
* @return {?}
*/
CollapsibleEventService.prototype.unsubscribe = /**
* @return {?}
*/
function () {
this.toggleCollapsibleItemSource.unsubscribe();
};
CollapsibleEventService.decorators = [
{ type: Injectable }
];
return CollapsibleEventService;
}());
if (false) {
/** @type {?} */
CollapsibleEventService.prototype.type;
/**
* @type {?}
* @private
*/
CollapsibleEventService.prototype.toggleCollapsibleItemSource;
/** @type {?} */
CollapsibleEventService.prototype.toggleCollapsibleItem$;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/services/collapsible-animations.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleAnimationsService = /** @class */ (function () {
function CollapsibleAnimationsService() {
}
/**
* @param {?} triggerName
* @return {?}
*/
CollapsibleAnimationsService.collapsibleBodyAnimations = /**
* @param {?} triggerName
* @return {?}
*/
function (triggerName) {
return [
trigger(triggerName, [
state('*', style({
height: 0,
paddingTop: 0,
paddingBottom: 0,
borderBottom: 'none',
boxShadow: 'none',
overflow: 'hidden'
})),
state('true', style({
boxShadow: 'inset 0 4px 4px -2px rgb(208, 208, 208), inset 0 -3px 2px -1px rgb(208, 208, 208)',
overflow: 'inherit'
})),
transition('* => true', animate(CollapsibleAnimationsService.collapsibleBodyAnimationDuration + ' ' +
CollapsibleAnimationsService.easeInQuad)),
transition('* => false', animate(CollapsibleAnimationsService.collapsibleBodyAnimationDuration + ' ' +
CollapsibleAnimationsService.easeOutQuad))
])
];
};
CollapsibleAnimationsService.collapsibleBodyAnimationDuration = '0.2s';
CollapsibleAnimationsService.easeInQuad = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
CollapsibleAnimationsService.easeOutQuad = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
CollapsibleAnimationsService.collapsibleTableRowAnimationDuration = '0.2s';
CollapsibleAnimationsService.decorators = [
{ type: Injectable }
];
return CollapsibleAnimationsService;
}());
if (false) {
/** @type {?} */
CollapsibleAnimationsService.collapsibleBodyAnimationDuration;
/** @type {?} */
CollapsibleAnimationsService.easeInQuad;
/** @type {?} */
CollapsibleAnimationsService.easeOutQuad;
/** @type {?} */
CollapsibleAnimationsService.collapsibleTableRowAnimationDuration;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-body/collapsible-body.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleBodyComponent = /** @class */ (function () {
function CollapsibleBodyComponent(el, collapsibleService, eventService) {
this.el = el;
this.collapsibleService = collapsibleService;
this.eventService = eventService;
this.toggleState = new EventEmitter();
}
/**
* @return {?}
*/
CollapsibleBodyComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.eventService.toggleCollapsibleItem$.subscribe((/**
* @return {?}
*/
function () {
_this.toggleCollapsibleItem();
}));
};
/**
* @return {?}
*/
CollapsibleBodyComponent.prototype.hasContent = /**
* @return {?}
*/
function () {
var e_1, _a;
try {
for (var _b = __values(this.el.nativeElement.childNodes), _c = _b.next(); !_c.done; _c = _b.next()) {
var child = _c.value;
if (((/** @type {?} */ (child))).tagName != null) {
return true;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return false;
};
/**
* @return {?}
*/
CollapsibleBodyComponent.prototype.toggleCollapsibleItem = /**
* @return {?}
*/
function () {
// toggle body's state only if it has any childs
if (this.hasContent()) {
if (this.collapsibleService.getType() === 'accordion') {
/** @type {?} */
var tempExpanded = this.expanded;
this.collapsibleService.collapseAll();
this.expanded = tempExpanded;
}
this.expanded = !this.expanded;
this.expandedState = this.expanded.toString();
// emit 'toggleState' event
this.toggleState.emit(this.expanded);
}
};
/**
* @param {?} changes
* @return {?}
*/
CollapsibleBodyComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var e_2, _a;
if (this.hasContent()) {
try {
for (var _b = __values(Object.keys(changes)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
if (key === 'expanded' &&
changes.expanded.currentValue != null) {
// this.expanded = changes.expanded.currentValue;
this.expandedState = this.expanded.toString();
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
}
};
// Makes sure we don't have a memory leak by destroying the
// Subscription when our component is destroyed
// Makes sure we don't have a memory leak by destroying the
// Subscription when our component is destroyed
/**
* @return {?}
*/
CollapsibleBodyComponent.prototype.ngOnDestroy =
// Makes sure we don't have a memory leak by destroying the
// Subscription when our component is destroyed
/**
* @return {?}
*/
function () {
this.eventService.unsubscribe();
};
CollapsibleBodyComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-body',
template: "<ng-content></ng-content>",
animations: CollapsibleAnimationsService.collapsibleBodyAnimations('collapsibleBodyState'),
styles: ["\n :host {\n display: block;\n border-bottom: 1px solid #ddd;\n box-sizing: border-box;\n padding: 2rem;\n }\n\n .side-nav :host {\n padding: 0;\n }\n\n .side-nav :host,\n .side-nav.fixed :host {\n border: 0;\n background-color: #fff;\n }\n "]
}] }
];
/** @nocollapse */
CollapsibleBodyComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: CollapsibleService },
{ type: CollapsibleEventService }
]; };
CollapsibleBodyComponent.propDecorators = {
expandedState: [{ type: HostBinding, args: ['@collapsibleBodyState',] }],
expanded: [{ type: Input }],
toggleState: [{ type: Output }]
};
return CollapsibleBodyComponent;
}());
if (false) {
/** @type {?} */
CollapsibleBodyComponent.prototype.expandedState;
/** @type {?} */
CollapsibleBodyComponent.prototype.expanded;
/** @type {?} */
CollapsibleBodyComponent.prototype.toggleState;
/**
* @type {?}
* @private
*/
CollapsibleBodyComponent.prototype.el;
/**
* @type {?}
* @private
*/
CollapsibleBodyComponent.prototype.collapsibleService;
/**
* @type {?}
* @private
*/
CollapsibleBodyComponent.prototype.eventService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-list-item/collapsible-list-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleListItemComponent = /** @class */ (function () {
function CollapsibleListItemComponent(collapsibleService) {
this.collapsibleService = collapsibleService;
}
/**
* @return {?}
*/
CollapsibleListItemComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
// store list bodies in 'CollapsibleService'
this.contentListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
_this.collapsibleService.addListBody(item);
}));
};
CollapsibleListItemComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-list-item',
template: "\n <ng-content select=\"collapsible-header\"></ng-content>\n <ng-content select=\"collapsible-body\"></ng-content>\n ",
providers: [CollapsibleEventService]
}] }
];
/** @nocollapse */
CollapsibleListItemComponent.ctorParameters = function () { return [
{ type: CollapsibleService }
]; };
CollapsibleListItemComponent.propDecorators = {
contentListBodies: [{ type: ContentChildren, args: [CollapsibleBodyComponent,] }]
};
return CollapsibleListItemComponent;
}());
if (false) {
/** @type {?} */
CollapsibleListItemComponent.prototype.contentListBodies;
/**
* @type {?}
* @private
*/
CollapsibleListItemComponent.prototype.collapsibleService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-list/collapsible-list.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleListComponent = /** @class */ (function () {
function CollapsibleListComponent(collapsibleService) {
this.collapsibleService = collapsibleService;
// component options
//
// describes the type of the collapsible list: 'accordion' or 'expandable'
this.type = 'accordion';
}
/**
* @return {?}
*/
CollapsibleListComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.collapsibleService.setType(this.type);
};
/**
* @param {?} changes
* @return {?}
*/
CollapsibleListComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var change in changes) {
if (change === 'type') {
this.type = changes.type.currentValue;
this.collapsibleService.setType(this.type);
}
}
};
CollapsibleListComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-list',
template: "<ng-content select=\"collapsible-list-item\"></ng-content>",
providers: [CollapsibleService],
styles: ["\n :host {\n display: block;\n margin: 0.5rem 0 1rem 0;\n border-top: 1px solid #ddd;\n border-right: 1px solid #ddd;\n border-left: 1px solid #ddd;\n box-shadow:\n 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12),\n 0 3px 1px -2px rgba(0, 0, 0, 0.2);\n }\n\n .side-nav :host,\n .side-nav.fixed :host {\n border: none;\n box-shadow: none;\n }\n\n :host(.popout) {\n border: none;\n box-shadow: none;\n }\n\n :host(.popout) > li {\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n margin: 0 24px;\n transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .side-nav :host {\n margin: 0;\n }\n "]
}] }
];
/** @nocollapse */
CollapsibleListComponent.ctorParameters = function () { return [
{ type: CollapsibleService }
]; };
CollapsibleListComponent.propDecorators = {
type: [{ type: Input }],
contentListItems: [{ type: ContentChildren, args: [CollapsibleListItemComponent,] }]
};
return CollapsibleListComponent;
}());
if (false) {
/** @type {?} */
CollapsibleListComponent.prototype.type;
/** @type {?} */
CollapsibleListComponent.prototype.contentListItems;
/**
* @type {?}
* @private
*/
CollapsibleListComponent.prototype.collapsibleService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-header/collapsible-header.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleHeaderComponent = /** @class */ (function () {
function CollapsibleHeaderComponent(eventService) {
this.eventService = eventService;
}
/**
* @return {?}
*/
CollapsibleHeaderComponent.prototype.click = /**
* @return {?}
*/
function () {
this.eventService.toggleCollapsibleItem();
};
CollapsibleHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-header',
template: "<ng-content></ng-content>",
styles: ["\n :host {\n display: block;\n cursor: pointer;\n min-height: 3rem;\n line-height: 3rem;\n padding: 0 1rem;\n background-color: #fff;\n border-bottom: 1px solid #ddd;\n }\n "]
}] }
];
/** @nocollapse */
CollapsibleHeaderComponent.ctorParameters = function () { return [
{ type: CollapsibleEventService }
]; };
CollapsibleHeaderComponent.propDecorators = {
click: [{ type: HostListener, args: ['click',] }]
};
return CollapsibleHeaderComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
CollapsibleHeaderComponent.prototype.eventService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-table-row-detail/collapsible-table-row-detail.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleTableRowDetailComponent = /** @class */ (function () {
function CollapsibleTableRowDetailComponent(collapsibleService) {
this.collapsibleService = collapsibleService;
this.subject = new Subject();
}
/**
* @return {?}
*/
CollapsibleTableRowDetailComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.subject.asObservable().subscribe((/**
* @return {?}
*/
function () {
_this.viewListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
item.toggleCollapsibleItem();
}));
}));
};
/**
* @return {?}
*/
CollapsibleTableRowDetailComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
// store list bodies in 'CollapsibleService'
this.viewListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
_this.collapsibleService.addListBody(item);
}));
};
CollapsibleTableRowDetailComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-table-row-detail',
template: "\n <td colspan=\"100%\">\n <collapsible-list-item>\n <collapsible-body>\n <ng-content></ng-content>\n </collapsible-body>\n </collapsible-list-item>\n </td>\n ",
styles: ["\n :host {\n display: table-row;\n }\n\n :host collapsible-body,\n :host td {\n padding: 0;\n }\n "]
}] }
];
/** @nocollapse */
CollapsibleTableRowDetailComponent.ctorParameters = function () { return [
{ type: CollapsibleService }
]; };
CollapsibleTableRowDetailComponent.propDecorators = {
expanded: [{ type: Input }],
viewListBodies: [{ type: ViewChildren, args: [CollapsibleBodyComponent,] }]
};
return CollapsibleTableRowDetailComponent;
}());
if (false) {
/** @type {?} */
CollapsibleTableRowDetailComponent.prototype.subject;
/** @type {?} */
CollapsibleTableRowDetailComponent.prototype.expanded;
/** @type {?} */
CollapsibleTableRowDetailComponent.prototype.viewListBodies;
/**
* @type {?}
* @private
*/
CollapsibleTableRowDetailComponent.prototype.collapsibleService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-table-row/collapsible-table-row.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleTableRowComponent = /** @class */ (function () {
function CollapsibleTableRowComponent(el, sanitizer, collapsibleService) {
this.el = el;
this.sanitizer = sanitizer;
this.collapsibleService = collapsibleService;
this.backgroundTransitionDuration = '0.3s';
// transition-timing-function: easeInQuad
this.backgroundTransitionTimingFunction = this.sanitizer
.bypassSecurityTrustStyle(CollapsibleTableRowComponent.EASE_OUT_QUAD);
this.isHeadRow = false;
this.isBodyRow = false;
this.isOddRow = false;
this.isEvenRow = false;
this.isParentStriped = false;
this.isParentHighlight = false;
this.parentAllowsSelect = false;
this.parentAllowsSelectMultipleRows = false;
this.parentAllowsDeselectingRows = false;
this.dragSelection = false;
}
/**
* @return {?}
*/
CollapsibleTableRowComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var elem = this.el.nativeElement;
/** @type {?} */
var tbody = elem.parentElement;
if (tbody.tagName === 'TBODY') {
/** @type {?} */
var collapsibleTableRows = tbody.querySelectorAll('collapsible-table-row');
for (var i = 0; i < collapsibleTableRows.length; i++) {
/** @type {?} */
var collapsibleTableRow = collapsibleTableRows[i];
if (collapsibleTableRow === elem) {
this.index = i + 1;
break;
}
}
}
// retrieve parent CollapsibleTableComponent through the CollapsibleService
this.parentCollapsibleTable = this.collapsibleService.getCollapsibleTable();
if (this.parentCollapsibleTable != null) {
// check if collapsible-table is marked to show striped table
this.isParentStriped = this.parentCollapsibleTable.striped;
// check if collapsible-table is marked to highlight current row
this.isParentHighlight = this.parentCollapsibleTable.highlight;
this.parentHighlightRowBackgroundColor = this.parentCollapsibleTable.highlightColor ||
CollapsibleTableRowComponent.DEFAULT_HIGHLIGHT_ROW_COLOR;
this.parentHighlightRowTextColor = this.parentCollapsibleTable.highlightTextColor ||
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
// check if collapsible-table specifies the active row color
this.activeRowBackgroundColor = this.parentCollapsibleTable.activeColor ||
CollapsibleTableRowComponent.DEFAULT_ACTIVE_ROW_COLOR;
this.activeRowTextColor = this.parentCollapsibleTable.activeTextColor ||
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
// check if collapsible-table allows selecting rows
this.parentAllowsSelect = this.parentCollapsibleTable.select;
this.parentAllowsSelectMultipleRows = this.parentCollapsibleTable.selectMultipleRows;
// check if collapsible-table specifies a color for the selected row
this.selectedRowBackgroundColor = this.parentCollapsibleTable.selectColor ||
CollapsibleTableRowComponent.DEFAULT_SELECTED_ROW_COLOR;
this.selectedRowTextColor = this.parentCollapsibleTable.selectTextColor ||
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
// check if collapsible-table allows to deselect rows
this.parentAllowsDeselectingRows = this.parentCollapsibleTable.allowDeselectingRows != null ?
this.parentCollapsibleTable.allowDeselectingRows : false;
}
};
/**
* @return {?}
*/
CollapsibleTableRowComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.updateRow();
};
/**
* @return {?}
*/
CollapsibleTableRowComponent.prototype.updateRow = /**
* @return {?}
*/
function () {
/** @type {?} */
var elem = this.el.nativeElement;
// determine if the row is inside the 'thead'
/** @type {?} */
var th = elem.querySelector('th');
if (th != null) {
this.isHeadRow = true;
}
// determine if the row is inside the 'tbody'
/** @type {?} */
var td = elem.querySelector('td');
if (td != null) {
this.isBodyRow = true;
// determine if the row is 'odd' or 'event'
if (this.index % 2 === 0) {
this.isEvenRow = true;
this.parentStripedRowBackgroundColor = this.parentCollapsibleTable.stripedEvenColor ||
CollapsibleTableRowComponent.DEFAULT_STRIPED_EVEN_ROW_COLOR;
this.parentStripedRowTextColor = this.parentCollapsibleTable.stripedEvenTextColor ||
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
}
else {
this.isOddRow = true;
this.parentStripedRowBackgroundColor = this.parentCollapsibleTable.stripedOddColor ||
CollapsibleTableRowComponent.DEFAULT_STRIPED_ODD_ROW_COLOR;
this.parentStripedRowTextColor = this.parentCollapsibleTable.stripedOddTextColor ||
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
}
switch (true) {
case this.parentAllowsSelect && this.selected:
this.rowBackgroundColor = this.selectedRowBackgroundColor;
this.rowTextColor = this.selectedRowTextColor;
break;
case this.isParentStriped:
this.rowBackgroundColor = this.parentStripedRowBackgroundColor;
this.rowTextColor = this.parentStripedRowTextColor;
break;
}
}
};
/**
* @return {?}
*/
CollapsibleTableRowComponent.prototype.getHeight = /**
* @return {?}
*/
function () {
return this.el.nativeElement.offsetHeight;
};
/**
* @private
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.isLeftMouseButton = /**
* @private
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var button = event.button;
/** @type {?} */
var which = event['which'];
/** @type {?} */
var target = (/** @type {?} */ ((event.target || event.srcElement || event.currentTarget)));
if (['TR', 'TD'].indexOf(target.tagName) > -1) {
if ('button' in event) {
return button === 0;
}
else {
return (which || button) === 1;
}
}
return false;
};
/**
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.mousedown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// handle only if the Left mouse button pressed
// and the row is a body row
if (this.isLeftMouseButton(event) && this.isBodyRow) {
if (this.parentCollapsibleTable.noTextSelect) {
event.preventDefault();
}
if (this.isBodyRow) {
if (this.parentAllowsSelect && !this.parentAllowsDeselectingRows) {
this.prevSelectedRows = this.parentCollapsibleTable.selectedRows;
this.parentCollapsibleTable.clearSelectedRows();
this.parentCollapsibleTable.deselectAllRows();
}
this.rowBackgroundColor = this.activeRowBackgroundColor;
this.rowTextColor = this.activeRowTextColor;
}
}
};
/**
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.mouseup = /**
* @param {?} event
* @return {?}
*/
function (event) {
// handle only if the Left mouse button pressed
// and the row is a body row
if (this.isLeftMouseButton(event) && this.isBodyRow) {
// handle selection
if (this.parentAllowsSelect) {
if (!this.parentAllowsDeselectingRows) {
this.parentCollapsibleTable.selectRow(this.index);
}
else {
if (!this.dragSelection) {
this.parentCollapsibleTable.toggleRowSelection(this.index);
}
}
}
// check row state
this.parentCollapsibleTable.updateTable();
/*switch (true) {
// parent allows selecting rows and the row is selected
case this.parentAllowsSelect && this.selected:
this.rowBackgroundColor = this.selectedRowBackgroundColor;
this.rowTextColor = this.selectedRowTextColor;
this.parentCollapsibleTable.updateTable();
break;
// highlighted
case this.isParentHighlight:
this.rowBackgroundColor = this.parentHighlightRowBackgroundColor;
this.rowTextColor = this.parentHighlightRowTextColor;
break;
// striped
case this.isParentStriped:
this.rowBackgroundColor = this.parentStripedRowBackgroundColor;
this.rowTextColor = this.parentStripedRowTextColor;
break;
default:
this.rowBackgroundColor = undefined;
this.rowTextColor = undefined;
break;
}*/
// select multiple rows using the 'Shift' key
if (this.parentAllowsSelect &&
this.parentAllowsSelectMultipleRows &&
event != null && event.shiftKey) {
if (this.prevSelectedRows != null &&
this.prevSelectedRows.length > 0 &&
this.parentCollapsibleTable.selectedRows.length > 0) {
/** @type {?} */
var rangeSelectedRows = this.prevSelectedRows.concat(this.parentCollapsibleTable.selectedRows);
rangeSelectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a - b; }));
/** @type {?} */
var firstRowIndex = Math.min.apply(null, rangeSelectedRows);
/** @type {?} */
var lastRowIndex = Math.max.apply(null, rangeSelectedRows);
this.parentCollapsibleTable.selectRows(firstRowIndex, lastRowIndex);
}
}
// set dragSelection flag to false. Prevents selection drag behavior
this.dragSelection = false;
// focus the collapsible table
this.parentCollapsibleTable.focus();
}
};
/**
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.mouseenter = /**
* @param {?} event
* @return {?}
*/
function (event) {
// handle only if the row is a body row
if (this.isBodyRow) {
switch (true) {
// the use is trying to select multiple rows by holding a mouse button
case this.parentAllowsSelect && this.parentAllowsSelectMultipleRows && this.parentCollapsibleTable.mouseDownHold:
this.parentCollapsibleTable.selectRow(this.index);
this.dragSelection = true;
break;
// parent allows selecting rows and the row is selected
case this.parentAllowsSelect && this.selected:
break;
// highlighted
case this.isParentHighlight:
this.rowBackgroundColor = this.parentHighlightRowBackgroundColor;
this.rowTextColor = this.parentHighlightRowTextColor;
break;
}
}
};
/**
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.mouseleave = /**
* @param {?} event
* @return {?}
*/
function (event) {
// handle only if the row is a body row
if (this.isBodyRow) {
// check row state
switch (true) {
// the use is trying to select multiple rows by holding a mouse button
case this.parentAllowsSelect && this.parentAllowsSelectMultipleRows && this.parentCollapsibleTable.mouseDownHold:
this.parentCollapsibleTable.selectRow(this.index);
this.dragSelection = false;
break;
// parent allows selecting rows and the row is selected
case this.parentAllowsSelect && this.selected:
break;
// stripped
case this.isParentStriped:
this.rowBackgroundColor = this.parentStripedRowBackgroundColor;
this.rowTextColor = this.parentStripedRowTextColor;
break;
default:
this.rowBackgroundColor = undefined;
this.rowTextColor = undefined;
break;
}
}
};
/**
* @param {?} event
* @return {?}
*/
CollapsibleTableRowComponent.prototype.click = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.detail != null) {
/** @type {?} */
var target = (/** @type {?} */ ((event.target || event.srcElement || event.currentTarget)));
if (target != null && ['TR', 'TD'].indexOf(target.tagName) > -1) {
this.detail.subject.next();
}
}
};
CollapsibleTableRowComponent.EASE_OUT_QUAD = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
CollapsibleTableRowComponent.DEFAULT_STRIPED_ODD_ROW_COLOR = 'rgba(242,242,242,0.8)';
CollapsibleTableRowComponent.DEFAULT_STRIPED_EVEN_ROW_COLOR = 'transparent';
CollapsibleTableRowComponent.DEFAULT_HIGHLIGHT_ROW_COLOR = 'rgba(222,222,222, 0.8)';
CollapsibleTableRowComponent.DEFAULT_ACTIVE_ROW_COLOR = 'rgba(212,212,212, 0.8)';
CollapsibleTableRowComponent.DEFAULT_SELECTED_ROW_COLOR = 'rgba(212,212,212, 0.8)';
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR = 'black';
CollapsibleTableRowComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-table-row',
template: "<ng-content></ng-content>",
styles: ["\n :host {\n display: table-row;\n transition-property: background-color, color;\n }\n "]
}] }
];
/** @nocollapse */
CollapsibleTableRowComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: DomSanitizer },
{ type: CollapsibleService }
]; };
CollapsibleTableRowComponent.propDecorators = {
detail: [{ type: Input }],
rowTextColor: [{ type: HostBinding, args: ['style.color',] }],
rowBackgroundColor: [{ type: HostBinding, args: ['style.background-color',] }],
backgroundTransitionDuration: [{ type: HostBinding, args: ['style.transition-duration',] }],
backgroundTransitionTimingFunction: [{ type: HostBinding, args: ['style.transition-timing-function',] }],
selected: [{ type: HostBinding, args: ['class.selected',] }],
mousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
mouseup: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
mouseenter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }],
mouseleave: [{ type: HostListener, args: ['mouseleave', ['$event'],] }],
click: [{ type: HostListener, args: ['click', ['$event'],] }]
};
return CollapsibleTableRowComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.EASE_OUT_QUAD;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_STRIPED_ODD_ROW_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_STRIPED_EVEN_ROW_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_HIGHLIGHT_ROW_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_ACTIVE_ROW_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_SELECTED_ROW_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
/** @type {?} */
CollapsibleTableRowComponent.prototype.detail;
/** @type {?} */
CollapsibleTableRowComponent.prototype.rowTextColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.rowBackgroundColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.backgroundTransitionDuration;
/** @type {?} */
CollapsibleTableRowComponent.prototype.backgroundTransitionTimingFunction;
/** @type {?} */
CollapsibleTableRowComponent.prototype.selected;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isHeadRow;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isBodyRow;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isOddRow;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isEvenRow;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isParentStriped;
/** @type {?} */
CollapsibleTableRowComponent.prototype.isParentHighlight;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentAllowsSelect;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentAllowsSelectMultipleRows;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentStripedRowBackgroundColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentStripedRowTextColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentHighlightRowBackgroundColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentHighlightRowTextColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.activeRowBackgroundColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.activeRowTextColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.selectedRowBackgroundColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.selectedRowTextColor;
/** @type {?} */
CollapsibleTableRowComponent.prototype.parentAllowsDeselectingRows;
/** @type {?} */
CollapsibleTableRowComponent.prototype.index;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.parentCollapsibleTable;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.prevSelectedRows;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.dragSelection;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.el;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.sanitizer;
/**
* @type {?}
* @private
*/
CollapsibleTableRowComponent.prototype.collapsibleService;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/collapsible-table/collapsible-table.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CollapsibleTableComponent = /** @class */ (function () {
function CollapsibleTableComponent(el, collapsibleService) {
this.el = el;
this.collapsibleService = collapsibleService;
// allows navigation between table rows using arrow keys
this.allowKeyboardNavigation = true;
this.fixedTableHeight = 'auto';
this.tabindex = 0;
this.selectedRows = [];
// specifies collapsible type. Can be either 'accordion' or 'expandable'
this.type = 'accordion';
this.mouseDownHold = false;
}
/**
* @return {?}
*/
CollapsibleTableComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
CollapsibleTableComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
// this.updateFixedTableHeight();
/*
LOG(`CollapsibleTableComponent::ngOnInit()\n` +
`this = {\n` +
`bordered = ${this.bordered}\n` +
`borderedHorizontally = ${this.borderedHorizontally}\n` +
`borderedVertically = ${this.borderedVertically}\n` +
`striped = ${this.striped}\n` +
`stripedOddColor = ${this.stripedOddColor}\n` +
`stripedEvenColor = ${this.stripedEvenColor}\n` +
`highlight = ${this.highlight}\n` +
`highlightColor = ${this.highlightColor}\n` +
`highlightTextColor = ${this.highlightTextColor}\n` +
`activeColor = ${this.activeColor}\n` +
`activeTextColor = ${this.activeTextColor}\n` +
`centered = ${this.centered}\n` +
`responsive = ${this.responsive}\n` +
`select = ${this.select}\n` +
`selectColor = ${this.selectColor}\n` +
`selectTextColor = ${this.selectTextColor}\n` +
`selectMultipleRows = ${this.selectMultipleRows}\n` +
`noTextSelect = ${this.noTextSelect}\n` +
`}`);
*/
};
/**
* @param {?} changes
* @return {?}
*/
CollapsibleTableComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var change in changes) {
if (changes.hasOwnProperty(change)) {
if (this.collapsibleTableRows != null) {
switch (change) {
case 'striped':
case 'stripedOddColor':
case 'stripedOddTextColor':
case 'stripedEvenColor':
case 'stripedEvenTextColor':
this.updateTable('striped');
break;
case 'highlight':
case 'highlightColor':
case 'highlightTextColor':
this.updateTable('highlight');
break;
case 'activeColor':
case 'activeTextColor':
this.updateTable('active');
break;
case 'select':
case 'selectColor':
case 'selectTextColor':
case 'selectMultipleRows':
case 'allowDeselectingRows':
this.updateTable('select');
break;
}
}
// update collapsible table type in CollapsibleService
if (change === 'type') {
this.type = changes.type.currentValue;
this.collapsibleService.setType(this.type);
}
}
}
this.collapsibleService.setCollapsibleTable(this);
};
/**
* @return {?}
*/
CollapsibleTableComponent.prototype.focus = /**
* @return {?}
*/
function () {
this.el.nativeElement.focus();
};
/**
* @param {?} index
* @return {?}
*/
CollapsibleTableComponent.prototype.addSelectedRow = /**
* @param {?} index
* @return {?}
*/
function (index) {
switch (true) {
case this.selectMultipleRows && this.selectedRows.indexOf(index) === -1:
this.selectedRows.push(index);
this.selectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a - b; }));
break;
case !this.selectMultipleRows:
this.selectedRows = [];
this.deselectAllRows();
this.selectedRows.push(index);
this.selectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a - b; }));
break;
}
};
/**
* @param {?} index
* @return {?}
*/
CollapsibleTableComponent.prototype.removeSelectedRow = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (this.selectedRows.indexOf(index) !== -1) {
this.selectedRows.splice(this.selectedRows.indexOf(index), 1);
}
};
/**
* @return {?}
*/
CollapsibleTableComponent.prototype.clearSelectedRows = /**
* @return {?}
*/
function () {
this.selectedRows = [];
};
/**
* @return {?}
*/
CollapsibleTableComponent.prototype.deselectAllRows = /**
* @return {?}
*/
function () {
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @return {?}
*/
function (row) {
row.selected = false;
row.updateRow();
}));
};
/**
* @param {?} index
* @return {?}
*/
CollapsibleTableComponent.prototype.selectRow = /**
* @param {?} index
* @return {?}
*/
function (index) {
var _this = this;
if (this.select) {
switch (true) {
case index === 0:
this.selectRow(1);
break;
case index === this.collapsibleTableRows.length:
this.selectRow(this.collapsibleTableRows.length - 1);
break;
case 0 < index && index <= this.collapsibleTableRows.length - 1:
this.addSelectedRow(inde