mg-components
Version:
1,535 lines (1,518 loc) • 144 kB
JavaScript
import { trigger, state, transition, animate, style } from '@angular/animations';
import { Component, ContentChild, Directive, NgModule, Injectable, Input, EventEmitter, Output, forwardRef, Inject, ContentChildren, Renderer2, defineInjectable, TemplateRef, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatButtonModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** @type {?} */
const menuAnimations = {
bodyExpansion: trigger("bodyExpansion", [
state("false", style({ height: "0px", visibility: "hidden" })),
state("true", style({ height: "*", visibility: "visible" })),
transition("true <=> false", animate("225ms cubic-bezier(0.4,0.0,0.2,1)"))
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SubmenuComponent {
}
SubmenuComponent.decorators = [
{ type: Component, args: [{
selector: "mg-submenu",
template: "<ng-content></ng-content>\n",
styles: [":host /deep/ mg-menu .submenu-trigger-container{padding-left:20px}"]
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class MenuComponent {
constructor() {
this.expanded = false;
}
/**
* @return {?}
*/
onTriggerClick() {
if (this.subMenu) {
this.expanded = !this.expanded;
}
}
}
MenuComponent.decorators = [
{ type: Component, args: [{
selector: "mg-menu",
template: "<div class=\"submenu-trigger-container\" (click)=\"onTriggerClick()\">\n <div class=\"icon-container\">\n <ng-content select=\"mat-icon\"></ng-content>\n </div>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <mat-icon [ngClass]=\"{'drop-down': expanded}\" *ngIf=\"subMenu\">keyboard_arrow_down</mat-icon>\n</div>\n<div class=\"submenu-container\" [@bodyExpansion]=\"expanded\">\n <ng-content select=\"mg-submenu\"></ng-content>\n</div>\n",
animations: [menuAnimations.bodyExpansion],
styles: [".submenu-trigger-container{width:100%;display:flex;align-items:center;overflow:hidden;color:#757575;font-size:16px;border-left:2px solid transparent;padding:12px;box-sizing:border-box;cursor:pointer}.submenu-trigger-container:hover{border-left-color:#6c14c8;color:#6c14c8}.submenu-trigger-container>.icon-container{display:flex}.submenu-trigger-container>.icon-container mat-icon{margin:0 8px}.submenu-trigger-container>.content{flex:1}.submenu-container{overflow:hidden;width:100%}:host.mg-menu-active .submenu-trigger-container{color:#6c14c8;background-color:#f8f2fe}"]
}] }
];
MenuComponent.propDecorators = {
subMenu: [{ type: ContentChild, args: [SubmenuComponent,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SubmenuTriggerDirective {
}
SubmenuTriggerDirective.decorators = [
{ type: Directive, args: [{
selector: "[mgSubmenuTrigger]"
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class MenuModule {
}
MenuModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, BrowserAnimationsModule, MatIconModule],
declarations: [SubmenuComponent, MenuComponent, SubmenuTriggerDirective],
exports: [SubmenuComponent, MenuComponent, SubmenuTriggerDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SearchInputService {
constructor() { }
}
SearchInputService.decorators = [
{ type: Injectable, args: [{
providedIn: "root"
},] }
];
/** @nocollapse */
SearchInputService.ctorParameters = () => [];
/** @nocollapse */ SearchInputService.ngInjectableDef = defineInjectable({ factory: function SearchInputService_Factory() { return new SearchInputService(); }, token: SearchInputService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SearchInputComponent {
constructor() {
this.valueChange = new EventEmitter();
}
}
SearchInputComponent.decorators = [
{ type: Component, args: [{
selector: "search-input",
template: `
<input matInput type="text" placeholder="{{placeholder}}" [(ngModel)]="value" />
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
<mat-icon>close</mat-icon>
</button>
`,
styles: [`
:host {
height: 40px;
background-color: white;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
display: flex;
border-radius: 2px;
}
input {
border: none;
padding: 4px 8px;
outline: none;
height: 40px;
background-color: transparent;
flex: 1;
}
`]
}] }
];
/** @nocollapse */
SearchInputComponent.ctorParameters = () => [];
SearchInputComponent.propDecorators = {
placeholder: [{ type: Input }],
value: [{ type: Input }],
valueChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SearchInputModule {
}
SearchInputModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatButtonModule,
MatInputModule,
MatIconModule,
FormsModule
],
declarations: [SearchInputComponent],
exports: [SearchInputComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SpinnerOverlayComponent {
constructor() {
this.diameter = 48;
}
}
SpinnerOverlayComponent.decorators = [
{ type: Component, args: [{
selector: "mg-spinner-overlay",
template: `
<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
`,
styles: [`
:host {
position: absolute;
width: 100%;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.6);
}
`]
}] }
];
SpinnerOverlayComponent.propDecorators = {
diameter: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class SpinnerOverlayModule {
}
SpinnerOverlayModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MatProgressSpinnerModule],
exports: [MatProgressSpinnerModule, SpinnerOverlayComponent],
declarations: [SpinnerOverlayComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
// tslint:disable-next-line:component-class-suffix
class Header {
}
Header.decorators = [
{ type: Component, args: [{
selector: "mg-header",
template: "<ng-content></ng-content>"
}] }
];
// tslint:disable-next-line:component-class-suffix
class Footer {
}
Footer.decorators = [
{ type: Component, args: [{
selector: "mg-footer",
template: "<ng-content></ng-content>"
}] }
];
// tslint:disable-next-line:directive-class-suffix
class PrimeTemplate {
/**
* @param {?} template
*/
constructor(template) {
this.template = template;
}
/**
* @return {?}
*/
getType() {
if (this.type) {
console.log('Defining a pTemplate with type property is deprecated use pTemplate="type" instead.');
return this.type;
}
else {
return this.name;
}
}
}
PrimeTemplate.decorators = [
{ type: Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: "[yTemplate]"
},] }
];
/** @nocollapse */
PrimeTemplate.ctorParameters = () => [
{ type: TemplateRef }
];
PrimeTemplate.propDecorators = {
type: [{ type: Input }],
name: [{ type: Input, args: ["yTemplate",] }]
};
// tslint:disable-next-line:directive-class-suffix
class TemplateWrapper {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.templateRef, {
$implicit: this.item,
index: this.index
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
TemplateWrapper.decorators = [
{ type: Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: "[yTemplateWrapper]"
},] }
];
/** @nocollapse */
TemplateWrapper.ctorParameters = () => [
{ type: ViewContainerRef }
];
TemplateWrapper.propDecorators = {
item: [{ type: Input }],
index: [{ type: Input }],
templateRef: [{ type: Input, args: ["yTemplateWrapper",] }]
};
// tslint:disable-next-line:component-class-suffix
class Column {
constructor() {
this.sortFunction = new EventEmitter();
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.templates.forEach(item => {
switch (item.getType()) {
case "header":
this.headerTemplate = item.template;
break;
case "body":
this.bodyTemplate = item.template;
break;
case "footer":
this.footerTemplate = item.template;
break;
case "filter":
this.filterTemplate = item.template;
break;
case "editor":
this.editorTemplate = item.template;
break;
default:
this.bodyTemplate = item.template;
break;
}
});
}
}
Column.decorators = [
{ type: Component, args: [{
selector: "mg-column",
template: ``
}] }
];
Column.propDecorators = {
field: [{ type: Input }],
sortField: [{ type: Input }],
header: [{ type: Input }],
footer: [{ type: Input }],
sortable: [{ type: Input }],
editable: [{ type: Input }],
filter: [{ type: Input }],
filterMatchMode: [{ type: Input }],
rowspan: [{ type: Input }],
colspan: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
hidden: [{ type: Input }],
expander: [{ type: Input }],
selectionMode: [{ type: Input }],
filterPlaceholder: [{ type: Input }],
frozen: [{ type: Input }],
sortFunction: [{ type: Output }],
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
template: [{ type: ContentChild, args: [TemplateRef,] }]
};
// tslint:disable-next-line:component-class-suffix
class Row {
}
Row.decorators = [
{ type: Component, args: [{
selector: "mg-row",
template: ``
}] }
];
Row.propDecorators = {
columns: [{ type: ContentChildren, args: [Column,] }]
};
// tslint:disable-next-line:component-class-suffix
class HeaderColumnGroup {
}
HeaderColumnGroup.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-headerColumnGroup",
template: ``
}] }
];
HeaderColumnGroup.propDecorators = {
rows: [{ type: ContentChildren, args: [Row,] }]
};
// tslint:disable-next-line:component-class-suffix
class FooterColumnGroup {
}
FooterColumnGroup.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-footerColumnGroup",
template: ``
}] }
];
FooterColumnGroup.propDecorators = {
rows: [{ type: ContentChildren, args: [Row,] }]
};
// tslint:disable-next-line:component-class-suffix
class ColumnBodyTemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.column.bodyTemplate, {
$implicit: this.column,
rowData: this.rowData,
rowIndex: this.rowIndex,
level: this.level
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
ColumnBodyTemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-columnBodyTemplateLoader",
template: ``
}] }
];
/** @nocollapse */
ColumnBodyTemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
ColumnBodyTemplateLoader.propDecorators = {
column: [{ type: Input }],
rowData: [{ type: Input }],
rowIndex: [{ type: Input }],
level: [{ type: Input }]
};
// tslint:disable-next-line:component-class-suffix
class ColumnHeaderTemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.column.headerTemplate, {
$implicit: this.column
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
ColumnHeaderTemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-columnHeaderTemplateLoader",
template: ``
}] }
];
/** @nocollapse */
ColumnHeaderTemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
ColumnHeaderTemplateLoader.propDecorators = {
column: [{ type: Input }]
};
// tslint:disable-next-line:component-class-suffix
class ColumnFooterTemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.column.footerTemplate, {
$implicit: this.column
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
ColumnFooterTemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-columnFooterTemplateLoader",
template: ``
}] }
];
/** @nocollapse */
ColumnFooterTemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
ColumnFooterTemplateLoader.propDecorators = {
column: [{ type: Input }]
};
// tslint:disable-next-line:component-class-suffix
class ColumnFilterTemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.column.filterTemplate, {
$implicit: this.column
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
ColumnFilterTemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-columnFilterTemplateLoader",
template: ``
}] }
];
/** @nocollapse */
ColumnFilterTemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
ColumnFilterTemplateLoader.propDecorators = {
column: [{ type: Input }]
};
// tslint:disable-next-line:component-class-suffix
class ColumnEditorTemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.column.editorTemplate, {
$implicit: this.column,
rowData: this.rowData
});
}
/**
* @return {?}
*/
ngOnDestroy() {
this.view.destroy();
}
}
ColumnEditorTemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-columnEditorTemplateLoader",
template: ``
}] }
];
/** @nocollapse */
ColumnEditorTemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
ColumnEditorTemplateLoader.propDecorators = {
column: [{ type: Input }],
rowData: [{ type: Input }]
};
// tslint:disable-next-line:component-class-suffix
class TemplateLoader {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.template) {
this.view = this.viewContainer.createEmbeddedView(this.template, {
$implicit: this.data
});
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.view) {
this.view.destroy();
}
}
}
TemplateLoader.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-templateLoader",
template: ``
}] }
];
/** @nocollapse */
TemplateLoader.ctorParameters = () => [
{ type: ViewContainerRef }
];
TemplateLoader.propDecorators = {
template: [{ type: Input }],
data: [{ type: Input }]
};
class TreeSharedModule {
}
TreeSharedModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [
Header,
Footer,
Column,
TemplateWrapper,
ColumnHeaderTemplateLoader,
ColumnBodyTemplateLoader,
ColumnFooterTemplateLoader,
ColumnFilterTemplateLoader,
PrimeTemplate,
TemplateLoader,
Row,
HeaderColumnGroup,
FooterColumnGroup,
ColumnEditorTemplateLoader
],
declarations: [
Header,
Footer,
Column,
TemplateWrapper,
ColumnHeaderTemplateLoader,
ColumnBodyTemplateLoader,
ColumnFooterTemplateLoader,
ColumnFilterTemplateLoader,
PrimeTemplate,
TemplateLoader,
Row,
HeaderColumnGroup,
FooterColumnGroup,
ColumnEditorTemplateLoader
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
// <mg-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks"
// styleClass="ui-paginator-bottom"
// (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions"
// *ngIf="paginator"></mg-paginator>
// tslint:disable-next-line:component-class-suffix
class TreeTable {
/**
* @param {?} renderer
*/
constructor(renderer) {
this.renderer = renderer;
this.pageLinks = 5;
this.first = 0;
this.labelExpand = "Expand";
this.labelCollapse = "Collapse";
this.metaKeySelection = true;
this.filterDelay = 300;
this.RowDblclick = new EventEmitter();
this.selectionChange = new EventEmitter();
this.NodeSelect = new EventEmitter();
this.NodeUnselect = new EventEmitter();
this.NodeExpand = new EventEmitter();
this.NodeCollapse = new EventEmitter();
this.ContextMenuSelect = new EventEmitter();
}
/**
* @param {?} event
* @param {?} node
* @return {?}
*/
onRowClick(event, node) {
/** @type {?} */
const eventTarget = (/** @type {?} */ (event.target));
if (eventTarget.className &&
(eventTarget.className.indexOf("mg-treetable-toggler") >= 0 ||
eventTarget.className.indexOf("skip-selection") >= 0)) {
return;
}
else if (this.selectionMode) {
if (node.selectable === false) {
return;
}
/** @type {?} */
const metaSelection = this.rowTouched ? false : this.metaKeySelection;
/** @type {?} */
const index = this.findIndexInSelection(node);
/** @type {?} */
const selected = index >= 0;
if (this.isCheckboxSelectionMode()) {
if (selected) {
this.propagateSelectionDown(node, false);
if (node.parent) {
this.propagateSelectionUp(node.parent, false);
}
this.selectionChange.emit(this.selection);
this.NodeUnselect.emit({ originalEvent: event, node: node });
}
else {
this.propagateSelectionDown(node, true);
if (node.parent) {
this.propagateSelectionUp(node.parent, true);
}
this.selectionChange.emit(this.selection);
this.NodeSelect.emit({ originalEvent: event, node: node });
}
}
else {
if (metaSelection) {
/** @type {?} */
const metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
if (this.isSingleSelectionMode()) {
this.selectionChange.emit(null);
}
else {
this.selection = this.selection.filter((val, i) => i !== index);
this.selectionChange.emit(this.selection);
}
this.NodeUnselect.emit({ originalEvent: event, node: node });
}
else {
if (this.isSingleSelectionMode()) {
this.selection = node;
this.selectionChange.emit(node);
}
else if (this.isMultipleSelectionMode()) {
this.selection = !metaKey ? [] : this.selection || [];
this.selection = [...this.selection, node];
this.selectionChange.emit(this.selection);
}
this.NodeSelect.emit({ originalEvent: event, node: node });
}
}
else {
if (this.isSingleSelectionMode()) {
if (selected) {
this.selection = null;
this.NodeUnselect.emit({ originalEvent: event, node: node });
}
else {
this.selection = node;
this.NodeSelect.emit({ originalEvent: event, node: node });
}
}
else {
if (selected) {
this.selection = this.selection.filter((val, i) => i !== index);
this.NodeUnselect.emit({ originalEvent: event, node: node });
}
else {
this.selection = [...(this.selection || []), node];
this.NodeSelect.emit({ originalEvent: event, node: node });
}
}
this.selectionChange.emit(this.selection);
}
}
}
this.rowTouched = false;
}
/**
* @return {?}
*/
onRowTouchEnd() {
this.rowTouched = true;
}
/**
* @param {?} event
* @param {?} node
* @return {?}
*/
onRowRightClick(event, node) {
if (this.contextMenu) {
/** @type {?} */
const index = this.findIndexInSelection(node);
/** @type {?} */
const selected = index >= 0;
if (!selected) {
if (this.isSingleSelectionMode()) {
this.selection = node;
}
else if (this.isMultipleSelectionMode()) {
this.selection = [];
this.selection.push(node);
this.selectionChange.emit(this.selection);
}
this.selectionChange.emit(this.selection);
}
this.contextMenu.show(event);
this.ContextMenuSelect.emit({ originalEvent: event, node: node });
}
}
/**
* @param {?} node
* @return {?}
*/
findIndexInSelection(node) {
/** @type {?} */
let index = -1;
if (this.selectionMode && this.selection) {
/** @type {?} */
let nodeKey;
if (this.uniqueKeyPath) {
nodeKey = this.resolveFieldData(node, this.uniqueKeyPath);
}
if (this.isSingleSelectionMode()) {
if (this.uniqueKeyPath) {
/** @type {?} */
const selectionKey = this.resolveFieldData(this.selection, this.uniqueKeyPath);
index = selectionKey === nodeKey ? 0 : -1;
}
else {
index = this.selection === node ? 0 : -1;
}
}
else {
for (let i = 0; i < this.selection.length; i++) {
if (this.uniqueKeyPath) {
/** @type {?} */
const selectionKey = this.resolveFieldData(this.selection[i], this.uniqueKeyPath);
if (selectionKey === nodeKey) {
index = i;
break;
}
}
else if (this.selection[i] === node) {
index = i;
break;
}
}
}
}
return index;
}
/**
* @param {?} node
* @param {?} select
* @return {?}
*/
propagateSelectionUp(node, select) {
if (node.children && node.children.length) {
/** @type {?} */
let selectedCount = 0;
/** @type {?} */
let childPartialSelected = false;
for (const child of node.children) {
if (this.isSelected(child)) {
selectedCount++;
}
else if (child.partialSelected) {
childPartialSelected = true;
}
}
if (select && selectedCount === node.children.length) {
this.selection = this.selection || [];
this.selection.push(node);
node.partialSelected = false;
}
else {
if (!select) {
/** @type {?} */
const index = this.findIndexInSelection(node);
if (index >= 0) {
this.selection.splice(index, 1);
}
}
if (childPartialSelected ||
(selectedCount > 0 && selectedCount !== node.children.length)) {
node.partialSelected = true;
}
else {
node.partialSelected = false;
}
}
}
/** @type {?} */
const parent = node.parent;
if (parent) {
this.propagateSelectionUp(parent, select);
}
}
/**
* @param {?} node
* @param {?} select
* @return {?}
*/
propagateSelectionDown(node, select) {
/** @type {?} */
const index = this.findIndexInSelection(node);
if (select && index === -1) {
this.selection = this.selection || [];
this.selection.push(node);
}
else if (!select && index > -1) {
this.selection.splice(index, 1);
}
node.partialSelected = false;
if (node.children && node.children.length) {
for (const child of node.children) {
this.propagateSelectionDown(child, select);
}
}
}
/**
* @param {?} node
* @return {?}
*/
isSelected(node) {
return this.findIndexInSelection(node) !== -1;
}
/**
* @return {?}
*/
isSingleSelectionMode() {
return this.selectionMode && this.selectionMode === "single";
}
/**
* @return {?}
*/
isMultipleSelectionMode() {
return this.selectionMode && this.selectionMode === "multiple";
}
/**
* @return {?}
*/
isCheckboxSelectionMode() {
return this.selectionMode && this.selectionMode === "checkbox";
}
/**
* @param {?} rowData
* @return {?}
*/
getRowStyleClass(rowData) {
/** @type {?} */
let styleClass = "";
if (this.rowStyleClass) {
/** @type {?} */
const rowClass = this.rowStyleClass.call(this, rowData);
if (rowClass) {
styleClass += " " + rowClass;
}
}
return styleClass;
}
/**
* @return {?}
*/
hasFooter() {
if (this.columns) {
/** @type {?} */
const columnsArr = this.columns.toArray();
for (let i = 0; i < columnsArr.length; i++) {
if (columnsArr[i].footer) {
return true;
}
}
}
return false;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.immutable) {
this.handleDataChange();
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.globalFilter && this.value) {
this.globalFilterFunction = this.renderer.listen(this.globalFilter, "keyup", () => {
this.filterTimeout = setTimeout(() => {
this.filter();
this.filterTimeout = null;
}, this.filterDelay);
});
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes["value"] && this.value && !this.immutable) {
this.handleDataChange();
}
}
/**
* @return {?}
*/
shownColumns() {
return this.columns.filter(col => !col.hidden);
}
/**
* @return {?}
*/
handleDataChange() {
if (this.paginator) {
this.updatePaginator();
}
this.updateDataToRender(this.filteredValue || this.value);
}
/**
* @return {?}
*/
updatePaginator() {
this.totalRecords = this.lazy
? this.totalRecords
: this.value
? this.value.length
: 0;
if (this.totalRecords && this.first >= this.totalRecords) {
/** @type {?} */
const numberOfPages = Math.ceil(this.totalRecords / this.rows);
this.first = Math.max((numberOfPages - 1) * this.rows, 0);
}
}
/**
* @param {?} event
* @return {?}
*/
paginate(event) {
this.first = event.first;
this.rows = event.rows;
if (this.lazy) {
this.stopFilterPropagation = true;
}
else {
this.updateDataToRender(this.filteredValue || this.value);
}
}
/**
* @param {?} datasource
* @return {?}
*/
updateDataToRender(datasource) {
if ((this.paginator || this.virtualScroll) && datasource) {
this.dataToRender = [];
/** @type {?} */
const startIndex = this.lazy ? 0 : this.first;
/** @type {?} */
const endIndex = this.virtualScroll
? this.first + this.rows * 2
: startIndex + this.rows;
for (let i = startIndex; i < endIndex; i++) {
if (i >= datasource.length) {
break;
}
this.dataToRender.push(datasource[i]);
}
}
else {
this.dataToRender = datasource;
}
this.loading = false;
}
/**
* @param {?} object
* @return {?}
*/
filterFields(object) {
/** @type {?} */
let res = false;
this.columns.toArray().map(col => {
if (!res && object[col.field]) {
res = object[col.field]
.toString()
.toLowerCase()
.includes(this.globalFilter.value.toString().toLowerCase());
}
});
return res;
}
/**
* @param {?} children
* @param {?} parent
* @return {?}
*/
filterChildren(children, parent) {
/** @type {?} */
let res = false;
if (children) {
children.map(child => {
/** @type {?} */
const _fields = this.filterFields(child.data);
/** @type {?} */
const _children = this.filterChildren(child.children, child);
res = _fields || _children || res;
});
parent.expanded = res;
}
return res;
}
/**
* @param {?} node
* @return {?}
*/
isFiltered(node) {
if (this.globalFilter) {
return (this.filterFields(node.data) || this.filterChildren(node.children, node));
}
else {
return true;
}
}
/**
* @return {?}
*/
filter() {
this.first = 0;
this.filteredValue = this.value.filter(val => {
return (this.filterFields(val.data) || this.filterChildren(val.children, val));
});
if (this.paginator) {
this.totalRecords = this.filteredValue
? this.filteredValue.length
: this.value
? this.value.length
: 0;
}
this.updateDataToRender(this.filteredValue || this.value);
}
/**
* @return {?}
*/
filterConstraints() {
return {
/**
* @param {?} value
* @param {?} filter
* @return {?}
*/
startsWith(value, filter) {
if (filter === undefined || filter === null || filter.trim() === "") {
return true;
}
if (value === undefined || value === null) {
return false;
}
/** @type {?} */
const filterValue = filter.toString().toLowerCase();
return (value
.toString()
.toLowerCase()
.slice(0, filterValue.length) === filterValue);
},
/**
* @param {?} value
* @param {?} filter
* @return {?}
*/
contains(value, filter) {
if (filter === undefined ||
filter === null ||
(typeof filter === "string" && filter.trim() === "")) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return (value
.toString()
.toLowerCase()
.indexOf(filter.toLowerCase()) !== -1);
},
/**
* @param {?} value
* @param {?} filter
* @return {?}
*/
endsWith(value, filter) {
if (filter === undefined || filter === null || filter.trim() === "") {
return true;
}
if (value === undefined || value === null) {
return false;
}
/** @type {?} */
const filterValue = filter.toString().toLowerCase();
return (value
.toString()
.toLowerCase()
.indexOf(filterValue, value.toString().length - filterValue.length) !== -1);
},
/**
* @param {?} value
* @param {?} filter
* @return {?}
*/
equals(value, filter) {
if (filter === undefined ||
filter === null ||
(typeof filter === "string" && filter.trim() === "")) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return (value.toString().toLowerCase() === filter.toString().toLowerCase());
},
/**
* @param {?} value
* @param {?} filter
* @return {?}
*/
in(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) {
return true;
}
if (value === undefined || value === null) {
return false;
}
for (let i = 0; i < filter.length; i++) {
if (filter[i] === value) {
return true;
}
}
return false;
}
};
}
/**
* @param {?} data
* @param {?} field
* @return {?}
*/
resolveFieldData(data, field) {
if (data && field) {
if (field.indexOf(".") === -1) {
return data[field];
}
else {
/** @type {?} */
const fields = field.split(".");
/** @type {?} */
let value = data;
for (let i = 0, len = fields.length; i < len; ++i) {
if (value == null) {
return null;
}
value = value[fields[i]];
}
return value;
}
}
else {
return null;
}
}
/**
* @return {?}
*/
ngOnDestroy() {
// remove event listener
if (this.globalFilterFunction) {
this.globalFilterFunction();
}
}
}
TreeTable.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: "mg-treeTable",
template: `
<div [ngClass]="'mg-treetable ui-widget'" [ngStyle]="style" [class]="styleClass">
<div class="mg-treetable-header ui-widget-header" *ngIf="header">
<ng-content select="mg-header"></ng-content>
</div>
<div class="mg-treetable-tablewrapper">
<table class="ui-widget-content" [class]="tableStyleClass" [ngStyle]="tableStyle">
<thead>
<tr class="ui-state-default">
<th #headerCell *ngFor="let col of columns" [ngStyle]="col.style" [class]="col.styleClass"
[ngClass]="'ui-state-default ui-unselectable-text'"
[style.display]="col.hidden ? 'none' : 'table-cell'">
<span class="ui-column-title" *ngIf="!col.headerTemplate">{{col.header}}</span>
<span class="ui-column-title" *ngIf="col.headerTemplate">
<mg-columnHeaderTemplateLoader [column]="col"></mg-columnHeaderTemplateLoader>
</span>
</th>
</tr>
</thead>
<tfoot *ngIf="hasFooter()">
<tr>
<td *ngFor="let col of columns" [ngStyle]="col.style" [class]="col.styleClass"
[ngClass]="{'ui-state-default':true}">
<span class="ui-column-footer" *ngIf="!col.footerTemplate">{{col.footer}}</span>
<span class="ui-column-footer" *ngIf="col.footerTemplate">
<mg-columnFooterTemplateLoader [column]="col"></mg-columnFooterTemplateLoader>
</span>
</td>
</tr>
</tfoot>
<tbody mgTreeRow *ngFor="let node of dataToRender;let odd = odd;let even=even"
[node]="node" [level]="0"
[labelExpand]="labelExpand" [labelCollapse]="labelCollapse"
class="ui-widget-content"
[ngClass]="{'mg-treetable-even':even,'mg-treetable-odd':odd}"
></tbody>
</table>
</div>
<div class="mg-treetable-footer ui-widget-header" *ngIf="footer">
<ng-content select="mg-footer"></ng-content>
</div>
</div>
`,
styles: [":host /deep/ table{border-collapse:collapse;width:100%;table-layout:fixed;border-spacing:0}:host /deep/ th{background:#ebedf0;padding:.7em .5em;overflow:hidden;white-space:nowrap;font-weight:700;text-align:center;border:1px solid #d9d9d9}:host /deep/ tbody.ui-widget-content{border:1px solid #d5d5d5}:host /deep/ tbody{background:#fff;color:#222}:host /deep/ tbody>div{display:table-row;border-bottom:0 transparent}:host /deep/ td{padding:.25em .5em;overflow:hidden;white-space:nowrap;line-height:calc(38px - .5em)}:host /deep/ td.mg-treetable-child-table-container{padding:0}:host /deep/ .mg-treetable-toggler{vertical-align:middle;cursor:pointer;text-decoration:none;width:24px;height:24px;line-height:1}:host /deep/ .mg-treetable-row-selected{background-color:#d3d3d3}:host /deep/ mat-icon{-webkit-transform:rotateZ(0);transform:rotateZ(0);will-change:transform;transition:transform .15s cubic-bezier(.39,.58,.57,1);transition:transform .15s cubic-bezier(.39,.58,.57,1),-webkit-transform .15s cubic-bezier(.39,.58,.57,1)}:host /deep/ mat-icon.drop-down{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}"]
}] }
];
/** @nocollapse */
TreeTable.ctorParameters = () => [
{ type: Renderer2 }
];
TreeTable.propDecorators = {
paginator: [{ type: Input }],
rows: [{ type: Input }],
totalRecords: [{ type: Input }],
pageLinks: [{ type: Input }],
rowsPerPageOptions: [{ type: Input }],
first: [{ type: Input }],
lazy: [{ type: Input }],
virtualScroll: [{ type: Input }],
value: [{ type: Input }],
selectionMode: [{ type: Input }],
selection: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
labelExpand: [{ type: Input }],
labelCollapse: [{ type: Input }],
metaKeySelection: [{ type: Input }],
contextMenu: [{ type: Input }],
globalFilter: [{ type: Input }],
filterDelay: [{ type: Input }],
immutable: [{ type: Input }],
rowStyleClass: [{ type: Input }],
tableStyle: [{ type: Input }],
tableStyleClass: [{ type: Input }],
uniqueKeyPath: [{ type: Input }],
RowDblclick: [{ type: Output }],
selectionChange: [{ type: Output }],
NodeSelect: [{ type: Output }],
NodeUnselect: [{ type: Output }],
NodeExpand: [{ type: Output }],
NodeCollapse: [{ type: Output }],
ContextMenuSelect: [{ type: Output }],
header: [{ type: ContentChild, args: [Header,] }],
footer: [{ type: ContentChild, args: [Footer,] }],
columns: [{ type: ContentChildren, args: [Column,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
// tslint:disable-next-line:component-class-suffix
class UITreeRow {
/**
* @param {?} treeTable
*/
constructor(treeTable) {
this.treeTable = treeTable;
this.level = 0;
this.labelExpand = "Expand";
this.labelCollapse = "Collapse";
}
/**
* @return {?}
*/
ngOnInit() {
this.node.parent = this.parentNode;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes["node"] && this.node) ;
}
/**
* @param {?} event
* @return {?}
*/
toggle(event) {
if (this.node.expanded) {
this.treeTable.NodeCollapse.emit({
originalEvent: event,
node: this.node
});
}
else {
this.treeTable.NodeExpand.emit({ originalEvent: event, node: this.node });
}
this.node.expanded = !this.node.expanded;
event.preventDefault();
}
/**
* @return {?}
*/
isLeaf() {
return this.node.leaf === false
? false
: !(this.node.children && this.node.children.length);
}
/**
* @return {?}
*/
isSelected() {
return this.treeTable.isSelected(this.node);
}
/**
* @param {?} event
* @return {?}
*/
onRowClick(event) {
this.treeTable.onRowClick(event, this.node);
}
/**
* @param {?} event
* @return {?}
*/
onRowRightClick(event) {
this.treeTable.onRowRightClick(event, this.node);
}
/**
* @param {?} event
* @return {?}
*/
rowDblClick(event) {
this.treeTable.RowDblclick.emit({ originalEvent: event, node: this.node });
}
/**
* @return {?}
*/
onRowTouchEnd() {
this.treeTable.onRowTouchEnd();
}
/**
* @param {?} data
* @param {?} field
* @return {?}
*/
resolveFieldData(data, field) {
if (data && field) {
if (field.indexOf(".") === -1) {
return data[field];
}
else {
/** @type {?} */
const fields = field.split(".");
/** @type {?} */
let value = data;
for (let i = 0, len = fields.length; i < len; ++i) {
value = value[fields[i]];
}
return value;
}
}
else {
return null;
}
}
}
UITreeRow.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:componen