angular2-collapsible
Version:
Angular collapsible component styled with Materialize CSS.
1,412 lines (1,394 loc) • 62.7 kB
JavaScript
import { Injectable, EventEmitter, Component, ElementRef, HostBinding, Input, Output, ContentChildren, HostListener, ViewChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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
*/
class CollapsibleService {
constructor() {
this.headers = new Array();
this.bodies = new Array();
}
/**
* @return {?}
*/
getType() {
return this.type;
}
/**
* @param {?} type
* @return {?}
*/
setType(type) {
this.type = type;
}
/**
* @return {?}
*/
getCollapsibleTable() {
return this.collapsibleTable;
}
/**
* @param {?} table
* @return {?}
*/
setCollapsibleTable(table) {
this.collapsibleTable = table;
}
/**
* @param {?} header
* @return {?}
*/
addListHeader(header) {
this.headers.push(header);
}
/**
* @param {?} body
* @return {?}
*/
addListBody(body) {
this.bodies.push(body);
}
/**
* @return {?}
*/
collapseAll() {
this.bodies.forEach((/**
* @param {?} collapsibleBodyComponent
* @return {?}
*/
(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 }
];
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
*/
class CollapsibleEvent {
}
if (false) {
/** @type {?} */
CollapsibleEvent.prototype.type;
}
class CollapsibleEventService {
constructor() {
// Observable string sources
this.toggleCollapsibleItemSource = new Subject();
// Observable string streams
this.toggleCollapsibleItem$ = this.toggleCollapsibleItemSource.asObservable();
}
// Toggle collapsible item
/**
* @param {?=} event
* @return {?}
*/
toggleCollapsibleItem(event) {
this.toggleCollapsibleItemSource.next(event);
}
/**
* @return {?}
*/
unsubscribe() {
this.toggleCollapsibleItemSource.unsubscribe();
}
}
CollapsibleEventService.decorators = [
{ type: Injectable }
];
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
*/
class CollapsibleAnimationsService {
/**
* @param {?} triggerName
* @return {?}
*/
static collapsibleBodyAnimations(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 }
];
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
*/
class CollapsibleBodyComponent {
/**
* @param {?} el
* @param {?} collapsibleService
* @param {?} eventService
*/
constructor(el, collapsibleService, eventService) {
this.el = el;
this.collapsibleService = collapsibleService;
this.eventService = eventService;
this.toggleState = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
this.eventService.toggleCollapsibleItem$.subscribe((/**
* @return {?}
*/
() => {
this.toggleCollapsibleItem();
}));
}
/**
* @return {?}
*/
hasContent() {
for (const child of this.el.nativeElement.childNodes) {
if (((/** @type {?} */ (child))).tagName != null) {
return true;
}
}
return false;
}
/**
* @return {?}
*/
toggleCollapsibleItem() {
// toggle body's state only if it has any childs
if (this.hasContent()) {
if (this.collapsibleService.getType() === 'accordion') {
/** @type {?} */
const 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 {?}
*/
ngOnChanges(changes) {
if (this.hasContent()) {
for (const key of Object.keys(changes)) {
if (key === 'expanded' &&
changes.expanded.currentValue != null) {
// this.expanded = changes.expanded.currentValue;
this.expandedState = this.expanded.toString();
}
}
}
}
// Makes sure we don't have a memory leak by destroying the
// Subscription when our component is destroyed
/**
* @return {?}
*/
ngOnDestroy() {
this.eventService.unsubscribe();
}
}
CollapsibleBodyComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-body',
template: `<ng-content></ng-content>`,
animations: CollapsibleAnimationsService.collapsibleBodyAnimations('collapsibleBodyState'),
styles: [`
:host {
display: block;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
padding: 2rem;
}
.side-nav :host {
padding: 0;
}
.side-nav :host,
.side-nav.fixed :host {
border: 0;
background-color: #fff;
}
`]
}] }
];
/** @nocollapse */
CollapsibleBodyComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: CollapsibleService },
{ type: CollapsibleEventService }
];
CollapsibleBodyComponent.propDecorators = {
expandedState: [{ type: HostBinding, args: ['@collapsibleBodyState',] }],
expanded: [{ type: Input }],
toggleState: [{ type: Output }]
};
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
*/
class CollapsibleListItemComponent {
/**
* @param {?} collapsibleService
*/
constructor(collapsibleService) {
this.collapsibleService = collapsibleService;
}
/**
* @return {?}
*/
ngAfterContentInit() {
// store list bodies in 'CollapsibleService'
this.contentListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
this.collapsibleService.addListBody(item);
}));
}
}
CollapsibleListItemComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-list-item',
template: `
<ng-content select="collapsible-header"></ng-content>
<ng-content select="collapsible-body"></ng-content>
`,
providers: [CollapsibleEventService]
}] }
];
/** @nocollapse */
CollapsibleListItemComponent.ctorParameters = () => [
{ type: CollapsibleService }
];
CollapsibleListItemComponent.propDecorators = {
contentListBodies: [{ type: ContentChildren, args: [CollapsibleBodyComponent,] }]
};
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
*/
class CollapsibleListComponent {
/**
* @param {?} collapsibleService
*/
constructor(collapsibleService) {
this.collapsibleService = collapsibleService;
// component options
//
// describes the type of the collapsible list: 'accordion' or 'expandable'
this.type = 'accordion';
}
/**
* @return {?}
*/
ngOnInit() {
this.collapsibleService.setType(this.type);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
for (const 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: [`
:host {
display: block;
margin: 0.5rem 0 1rem 0;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.side-nav :host,
.side-nav.fixed :host {
border: none;
box-shadow: none;
}
:host(.popout) {
border: none;
box-shadow: none;
}
:host(.popout) > li {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin: 0 24px;
transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.side-nav :host {
margin: 0;
}
`]
}] }
];
/** @nocollapse */
CollapsibleListComponent.ctorParameters = () => [
{ type: CollapsibleService }
];
CollapsibleListComponent.propDecorators = {
type: [{ type: Input }],
contentListItems: [{ type: ContentChildren, args: [CollapsibleListItemComponent,] }]
};
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
*/
class CollapsibleHeaderComponent {
/**
* @param {?} eventService
*/
constructor(eventService) {
this.eventService = eventService;
}
/**
* @return {?}
*/
click() {
this.eventService.toggleCollapsibleItem();
}
}
CollapsibleHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-header',
template: `<ng-content></ng-content>`,
styles: [`
:host {
display: block;
cursor: pointer;
min-height: 3rem;
line-height: 3rem;
padding: 0 1rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
`]
}] }
];
/** @nocollapse */
CollapsibleHeaderComponent.ctorParameters = () => [
{ type: CollapsibleEventService }
];
CollapsibleHeaderComponent.propDecorators = {
click: [{ type: HostListener, args: ['click',] }]
};
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
*/
class CollapsibleTableRowDetailComponent {
/**
* @param {?} collapsibleService
*/
constructor(collapsibleService) {
this.collapsibleService = collapsibleService;
this.subject = new Subject();
}
/**
* @return {?}
*/
ngOnInit() {
this.subject.asObservable().subscribe((/**
* @return {?}
*/
() => {
this.viewListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
item.toggleCollapsibleItem();
}));
}));
}
/**
* @return {?}
*/
ngAfterViewInit() {
// store list bodies in 'CollapsibleService'
this.viewListBodies.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
this.collapsibleService.addListBody(item);
}));
}
}
CollapsibleTableRowDetailComponent.decorators = [
{ type: Component, args: [{
selector: 'collapsible-table-row-detail',
template: `
<td colspan="100%">
<collapsible-list-item>
<collapsible-body>
<ng-content></ng-content>
</collapsible-body>
</collapsible-list-item>
</td>
`,
styles: [`
:host {
display: table-row;
}
:host collapsible-body,
:host td {
padding: 0;
}
`]
}] }
];
/** @nocollapse */
CollapsibleTableRowDetailComponent.ctorParameters = () => [
{ type: CollapsibleService }
];
CollapsibleTableRowDetailComponent.propDecorators = {
expanded: [{ type: Input }],
viewListBodies: [{ type: ViewChildren, args: [CollapsibleBodyComponent,] }]
};
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
*/
class CollapsibleTableRowComponent {
/**
* @param {?} el
* @param {?} sanitizer
* @param {?} collapsibleService
*/
constructor(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 {?}
*/
ngOnInit() {
/** @type {?} */
const elem = this.el.nativeElement;
/** @type {?} */
const tbody = elem.parentElement;
if (tbody.tagName === 'TBODY') {
/** @type {?} */
const collapsibleTableRows = tbody.querySelectorAll('collapsible-table-row');
for (let i = 0; i < collapsibleTableRows.length; i++) {
/** @type {?} */
const 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 {?}
*/
ngAfterContentInit() {
this.updateRow();
}
/**
* @return {?}
*/
updateRow() {
/** @type {?} */
const elem = this.el.nativeElement;
// determine if the row is inside the 'thead'
/** @type {?} */
const th = elem.querySelector('th');
if (th != null) {
this.isHeadRow = true;
}
// determine if the row is inside the 'tbody'
/** @type {?} */
const 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 {?}
*/
getHeight() {
return this.el.nativeElement.offsetHeight;
}
/**
* @private
* @param {?} event
* @return {?}
*/
isLeftMouseButton(event) {
/** @type {?} */
const button = event.button;
/** @type {?} */
const which = event['which'];
/** @type {?} */
const 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 {?}
*/
mousedown(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 {?}
*/
mouseup(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 {?} */
const rangeSelectedRows = this.prevSelectedRows.concat(this.parentCollapsibleTable.selectedRows);
rangeSelectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a - b));
/** @type {?} */
const firstRowIndex = Math.min.apply(null, rangeSelectedRows);
/** @type {?} */
const 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 {?}
*/
mouseenter(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 {?}
*/
mouseleave(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 {?}
*/
click(event) {
if (this.detail != null) {
/** @type {?} */
const 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: [`
:host {
display: table-row;
transition-property: background-color, color;
}
`]
}] }
];
/** @nocollapse */
CollapsibleTableRowComponent.ctorParameters = () => [
{ 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'],] }]
};
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
*/
class CollapsibleTableComponent {
/**
* @param {?} el
* @param {?} collapsibleService
*/
constructor(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 {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterContentInit() {
// 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 {?}
*/
ngOnChanges(changes) {
for (const 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 {?}
*/
focus() {
this.el.nativeElement.focus();
}
/**
* @param {?} index
* @return {?}
*/
addSelectedRow(index) {
switch (true) {
case this.selectMultipleRows && this.selectedRows.indexOf(index) === -1:
this.selectedRows.push(index);
this.selectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a - b));
break;
case !this.selectMultipleRows:
this.selectedRows = [];
this.deselectAllRows();
this.selectedRows.push(index);
this.selectedRows.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a - b));
break;
}
}
/**
* @param {?} index
* @return {?}
*/
removeSelectedRow(index) {
if (this.selectedRows.indexOf(index) !== -1) {
this.selectedRows.splice(this.selectedRows.indexOf(index), 1);
}
}
/**
* @return {?}
*/
clearSelectedRows() {
this.selectedRows = [];
}
/**
* @return {?}
*/
deselectAllRows() {
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
row.selected = false;
row.updateRow();
}));
}
/**
* @param {?} index
* @return {?}
*/
selectRow(index) {
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(index);
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @param {?} i
* @return {?}
*/
(row, i) => {
if (index !== i) {
if (!this.selectMultipleRows) {
row.selected = false;
}
}
else {
row.selected = true;
}
row.updateRow();
}));
break;
}
}
}
/**
* @param {?} firstRowIndex
* @param {?} lastRowIndex
* @return {?}
*/
selectRows(firstRowIndex, lastRowIndex) {
if (this.selectMultipleRows &&
0 < firstRowIndex && firstRowIndex < lastRowIndex &&
lastRowIndex <= this.collapsibleTableRows.length - 1) {
this.clearSelectedRows();
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @param {?} i
* @return {?}
*/
(row, i) => {
if (firstRowIndex <= i && i <= lastRowIndex) {
this.addSelectedRow(i);
row.selected = true;
}
else {
row.selected = false;
}
row.updateRow();
}));
}
}
/**
* @param {?} index
* @return {?}
*/
toggleRowSelection(index) {
if (this.select &&
0 < index && index <= this.collapsibleTableRows.length - 1) {
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @param {?} i
* @return {?}
*/
(row, i) => {
if (index === i) {
if (row.selected) {
this.removeSelectedRow(index);
}
else {
this.addSelectedRow(index);
}
row.selected = !row.selected;
row.updateRow();
}
}));
}
}
/*updateFixedTableHeight() {
this.fixedTableHeight = this.el.nativeElement.offsetHeight + 'px';
let elem: Element = this.el.nativeElement;
let rowHeights = 0;
if (this.collapsibleTableRowComponent != null) {
this.collapsibleTableRowComponent.forEach(row => {
});
}
}*/
/**
* @param {?} row
* @return {?}
*/
updateStriped(row) {
if (this.striped && row.isBodyRow) {
row.isParentStriped = true;
if (row.isOddRow) {
row.parentStripedRowBackgroundColor = this.stripedOddColor || CollapsibleTableRowComponent.DEFAULT_STRIPED_ODD_ROW_COLOR;
row.parentStripedRowTextColor = this.stripedOddTextColor || CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
row.rowBackgroundColor = row.parentStripedRowBackgroundColor;
row.rowTextColor = row.parentStripedRowTextColor;
}
else {
row.parentStripedRowBackgroundColor = this.stripedEvenColor || CollapsibleTableRowComponent.DEFAULT_STRIPED_EVEN_ROW_COLOR;
row.parentStripedRowTextColor = this.stripedEvenTextColor || CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
row.rowBackgroundColor = row.parentStripedRowBackgroundColor;
row.rowTextColor = row.parentStripedRowTextColor;
}
}
else {
row.isParentStriped = false;
row.rowBackgroundColor = undefined;
row.rowTextColor = undefined;
}
}
/**
* @param {?} row
* @return {?}
*/
updateHighlight(row) {
row.isParentHighlight = this.highlight;
row.parentHighlightRowBackgroundColor = this.highlightColor || CollapsibleTableRowComponent.DEFAULT_HIGHLIGHT_ROW_COLOR;
row.parentHighlightRowTextColor = this.highlightTextColor || CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
}
/**
* @param {?} row
* @return {?}
*/
updateActive(row) {
row.activeRowBackgroundColor = this.activeColor || CollapsibleTableRowComponent.DEFAULT_ACTIVE_ROW_COLOR;
row.activeRowTextColor = this.activeTextColor || CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
}
/**
* @param {?} row
* @return {?}
*/
updateSelect(row) {
row.parentAllowsSelect = this.select;
row.parentAllowsSelectMultipleRows = this.selectMultipleRows;
row.parentAllowsDeselectingRows = this.allowDeselectingRows;
if (row.selected) {
row.selectedRowBackgroundColor = this.selectColor || CollapsibleTableRowComponent.DEFAULT_SELECTED_ROW_COLOR;
row.selectedRowTextColor = this.selectTextColor || CollapsibleTableRowComponent.DEFAULT_ROW_TEXT_COLOR;
row.rowBackgroundColor = row.selectedRowBackgroundColor;
row.rowTextColor = row.selectedRowTextColor;
}
}
/**
* @param {?=} change
* @return {?}
*/
updateTable(change) {
if (this.collapsibleTableRows != null) {
if (change != null) {
switch (change) {
case 'striped':
// propagate changes to each of the CollapsibleTableRowComponent children
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @return {?}
*/
row => { this.updateStriped(row); }));
break;
case 'highlight':
this.collapsibleTableRows.forEach((/**
* @param {?} row
* @return {?}
*/
row => { this.updateHighlight(row); }));
break;
case 'active':
this.collapsibleTableRows.forEach((/**