@hpe/angular-toolkit
Version:
Hewlett-Packard Enterprise : Angular toolkit for rapid project development
1,082 lines (1,071 loc) • 241 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@hpe/angular-toolkit/model'), require('@hpe/angular-toolkit/service'), require('@angular/animations'), require('@hpe/angular-toolkit/lib'), require('primeng/components/common/messageservice'), require('@angular/common'), require('@angular/material'), require('primeng/primeng'), require('primeng/contextmenu'), require('primeng/dropdown'), require('primeng/multiselect'), require('primeng/table'), require('primeng/toast'), require('@hpe/angular-toolkit/gui/directive')) :
typeof define === 'function' && define.amd ? define('@hpe/angular-toolkit/gui/panel', ['exports', '@angular/core', '@hpe/angular-toolkit/model', '@hpe/angular-toolkit/service', '@angular/animations', '@hpe/angular-toolkit/lib', 'primeng/components/common/messageservice', '@angular/common', '@angular/material', 'primeng/primeng', 'primeng/contextmenu', 'primeng/dropdown', 'primeng/multiselect', 'primeng/table', 'primeng/toast', '@hpe/angular-toolkit/gui/directive'], factory) :
(factory((global.hpe = global.hpe || {}, global.hpe['angular-toolkit'] = global.hpe['angular-toolkit'] || {}, global.hpe['angular-toolkit'].gui = global.hpe['angular-toolkit'].gui || {}, global.hpe['angular-toolkit'].gui.panel = {}),global.ng.core,global.hpe['angular-toolkit'].model,global.hpe['angular-toolkit'].service,global.ng.animations,global.hpe['angular-toolkit'].lib,null,global.ng.common,global.ng.material,null,null,null,null,null,null,global.hpe['angular-toolkit'].gui.directive));
}(this, (function (exports,core,model,service,animations,lib,messageservice,common,material,primeng,contextmenu,dropdown,multiselect,table,toast,directive) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ButtonPanel = (function (_super) {
__extends(ButtonPanel, _super);
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function ButtonPanel(eventBusService, changeDetectorRef) {
var _this = _super.call(this, eventBusService) || this;
_this.changeDetectorRef = changeDetectorRef;
_this.submitting = false;
_super.prototype.subscribeToApp.call(_this, model.AppEvent.SUBMIT_START, function () { return _this.onSubmitStart(); });
_super.prototype.subscribeToApp.call(_this, model.AppEvent.SUBMIT_END, function () { return _this.onSubmitEnd(); });
return _this;
}
/**
* @return {?}
*/
ButtonPanel.prototype.getComponentClass = /**
* @return {?}
*/
function () {
var /** @type {?} */ styles = ['row'];
if (this.submitting) {
styles.push("disabled");
}
return styles;
};
/**
* @return {?}
*/
ButtonPanel.prototype.onSubmitStart = /**
* @return {?}
*/
function () {
this.submitting = true;
this.changeDetectorRef.detectChanges();
};
/**
* @return {?}
*/
ButtonPanel.prototype.onSubmitEnd = /**
* @return {?}
*/
function () {
this.submitting = false;
this.changeDetectorRef.detectChanges();
};
ButtonPanel.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-button-panel',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n\n<div [ngClass]=\"getComponentClass()\">\n <ng-content></ng-content>\n </div>\n",
styles: [".row{display:flex;padding:1rem;border-top:1px solid #e1e1e1;justify-content:center;background-color:#f6f6f6}.disabled{pointer-events:none;background-color:#c6c9ca}"]
},] },
];
/** @nocollapse */
ButtonPanel.ctorParameters = function () {
return [
{ type: service.EventBusService, },
{ type: core.ChangeDetectorRef, },
];
};
return ButtonPanel;
}(service.AbstractSubscriber));
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var CardPanel = (function () {
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function CardPanel(labelService) {
this.labelService = labelService;
this.toggleButton = true;
this.overflowUnset = true;
this.state = "open";
}
Object.defineProperty(CardPanel.prototype, "cardOpen", {
//-------------------------------------------------------------------------
//---
//--- API methods
//---
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.state == "open";
},
enumerable: true,
configurable: true
});
Object.defineProperty(CardPanel.prototype, "tooltip", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.labelService.getLabel("card-panel", "toggle.tooltip");
},
enumerable: true,
configurable: true
});
//-------------------------------------------------------------------------
//---
//--- Events
//---
//-------------------------------------------------------------------------
/**
* @return {?}
*/
CardPanel.prototype.onToggleClick = /**
* @return {?}
*/
function () {
this.state = (this.state == 'open')
? 'closed'
: 'open';
};
//-------------------------------------------------------------------------
/**
* @param {?} e
* @return {?}
*/
CardPanel.prototype.animationStart = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.overflowUnset = false;
};
//-------------------------------------------------------------------------
/**
* @param {?} e
* @return {?}
*/
CardPanel.prototype.animationEnd = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.overflowUnset = this.cardOpen;
};
CardPanel.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-card-panel',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n\n<mat-card>\n\t<hpe-title-panel icon=\"{{icon}}\" title=\"{{title}}\" >\n\t\t<ng-content select=\"[cpPostTitle]\" tpPostTitle></ng-content>\n\n\t\t<ng-content select=\"[cpControl]\" tpControl></ng-content>\n\n\t\t<button mat-button *ngIf=\"toggleButton\" (click)=\"onToggleClick()\" [title]=\"tooltip\" tpControl class=\"buttonStyle\">\n\t\t\t<hpe-title-icon name=\"fa-angle-up\" *ngIf=\"cardOpen\"></hpe-title-icon>\n\t\t\t<hpe-title-icon name=\"fa-angle-down\" *ngIf=\"!cardOpen\"></hpe-title-icon>\n\t\t</button>\n\n\t</hpe-title-panel>\n\n\t<div [@focusPanel] = \"state\"\n\t\t (@focusPanel.start)= \"animationStart($event)\"\n\t\t (@focusPanel.done) = \"animationEnd($event)\"\n\t\t [style.overflow] = \"overflowUnset ? 'unset' : 'hidden'\">\n\n\t\t<ng-content select=\"[cpBody]\"></ng-content>\n\t</div>\n\n</mat-card>\n",
styles: ["mat-card{margin:1rem;padding:0}.buttonStyle{min-width:0;padding:0 8px}"],
animations: [
animations.trigger('focusPanel', [
animations.state('open', animations.style({ height: '*' })),
animations.state('closed', animations.style({ height: 0 })),
animations.transition('open => closed', animations.animate('500ms ease-in')),
animations.transition('closed => open', animations.animate('500ms ease-out'))
])
]
},] },
];
/** @nocollapse */
CardPanel.ctorParameters = function () {
return [
{ type: service.LabelService, },
];
};
CardPanel.propDecorators = {
"icon": [{ type: core.Input },],
"title": [{ type: core.Input },],
"toggleButton": [{ type: core.Input },],
};
return CardPanel;
}());
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var GlobalCss = (function () {
function GlobalCss() {
}
GlobalCss.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-global-css',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n",
styles: [".ui-contextmenu{width:auto}.ui-contextmenu .ui-menuitem-link:hover{background-color:#00a982}.ui-contextmenu .ui-menuitem-link{text-decoration:none}.ui-toast-message-error{color:#ab1a0f;background-color:#ffcbc8}.ui-toast-message-warn{color:#8a6714;background-color:#ffe9b5}.ui-toast-message-success{color:#2c832f;background-color:#b4f0b6}.ui-toast-message-info{color:#1765a3;background-color:#bfe0fa}"],
encapsulation: core.ViewEncapsulation.None
},] },
];
return GlobalCss;
}());
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var Icon = (function () {
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function Icon() {
}
Object.defineProperty(Icon.prototype, "content", {
//-------------------------------------------------------------------------
//---
//--- API methods
//---
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return (this.isFontAwesomeIcon())
? null
: this.name;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Icon.prototype, "iconClass", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
var /** @type {?} */ styles = ["iconStyle"];
if (this.isFontAwesomeIcon()) {
styles.push("fa");
styles.push(this.name);
}
else {
styles.push("material-icons");
}
return styles;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Icon.prototype.isFontAwesomeIcon = /**
* @return {?}
*/
function () {
return (this.name != null && this.name.startsWith("fa-"));
};
Icon.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-icon',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n\n<i [ngClass]=\"iconClass\">{{content}}</i>\n",
styles: [".iconStyle{vertical-align:middle}"]
},] },
];
/** @nocollapse */
Icon.ctorParameters = function () { return []; };
Icon.propDecorators = {
"name": [{ type: core.Input },],
};
return Icon;
}());
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @template T
*/
var ListPanel = (function () {
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function ListPanel(labelService) {
this.labelService = labelService;
//-------------------------------------------------------------------------
this.onRowSelected = new core.EventEmitter();
this.onRowUnselected = new core.EventEmitter();
}
/**
* @return {?}
*/
ListPanel.prototype.refresh = /**
* @return {?}
*/
function () {
var _this = this;
this.loading = false;
this.failed = false;
this.overflow = false;
this.filteredSize = null;
//--- Remove subscription to service (if any)
if (this.service != null) {
this.loading = true;
this.service().subscribe(function (result) {
_this.loading = false;
_this.data = (result.results);
_this.filteredSize = (result.results.length);
_this.overflow = (result.overflow);
}, function (error) {
console.log("Service raised an error : " + JSON.stringify(error));
_this.data = [];
_this.loading = false;
_this.failed = true;
});
}
};
Object.defineProperty(ListPanel.prototype, "color", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return (this.overflow)
? 'orange'
: 'slate';
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListPanel.prototype, "exportSelTooltip", {
//-------------------------------------------------------------------------
//--- Localization stuff
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.loc("exportSel.tooltip");
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListPanel.prototype, "exportAllTooltip", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.loc("exportAll.tooltip");
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListPanel.prototype, "refreshTooltip", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.loc("refresh.tooltip");
},
enumerable: true,
configurable: true
});
//-------------------------------------------------------------------------
//---
//--- Lifecycle events
//---
//-------------------------------------------------------------------------
/**
* @return {?}
*/
ListPanel.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.refresh();
};
//-------------------------------------------------------------------------
//---
//--- ListTable events
//---
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListPanel.prototype.onFilterChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.filteredSize = event.filteredSize;
};
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListPanel.prototype.onRowSelect = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.onRowSelected.emit(event.row);
};
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListPanel.prototype.onRowUnselect = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.onRowUnselected.emit(event.row);
};
/**
* @param {?} code
* @return {?}
*/
ListPanel.prototype.loc = /**
* @param {?} code
* @return {?}
*/
function (code) {
return this.labelService.getLabel("list-panel", code);
};
ListPanel.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-list-panel',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n\n<hpe-card-panel icon=\"{{icon}}\" title=\"{{title}}\">\n\t<hpe-rounded-text [text]=\"filteredSize\" [color]=\"color\" cpPostTitle></hpe-rounded-text>\n\n\t<ng-content select=\"lpButtons\"></ng-content>\n\n\t<hpe-title-button cpControl\n\t icon = \"fa-file-o\"\n\t [tooltip] = \"exportSelTooltip\"\n\t [disabled] = \"loading || failed\"\n\t (click) = \"lt.exportSelected()\"\n\t\t\t\t\t></hpe-title-button>\n\n\t<hpe-title-button cpControl\n\t\t\t\t\ticon = \"fa-files-o\"\n\t\t\t\t\t[tooltip] = \"exportAllTooltip\"\n\t\t\t\t\t[disabled] = \"loading || failed\"\n\t\t\t\t\t(click) = \"lt.exportAll()\"\n\t\t\t\t\t></hpe-title-button>\n\n\t<hpe-title-button cpControl\n\t\t\t\t\ticon = \"fa-refresh\"\n\t\t\t\t\t[tooltip] = \"refreshTooltip\"\n\t\t\t\t\t[disabled] = \"loading\"\n\t\t\t\t\t(click) = \"refresh()\"\n\t\t\t\t\t></hpe-title-button>\n\n\t<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->\n\n\t<div cpBody class=\"innerPanel\">\n\t\t<hpe-list-table #lt\n\t\t\t\t\t[rowId] = \"rowId\"\n\t\t\t\t\t[columns] = \"columns\"\n\t\t\t\t\t[visibleColumns] = \"visibleColumns\"\n\t\t\t\t\t[data] = \"data\"\n\t\t\t\t\t[contextMenu] = \"contextMenu\"\n\t\t\t\t\t[multiSelection] = \"multiSelection\"\n\t\t\t\t\t[menuSelector] = \"menuSelector\"\n\t\t\t\t\t[loading] = \"loading\"\n\t\t\t\t\t[labelGroup] = \"labelGroup\"\n\t\t\t\t\t(onFilterChange) = \"onFilterChange($event)\"\n\t\t\t\t\t(onRowSelected) = \"onRowSelect($event)\"\n\t\t (onRowUnselected)= \"onRowUnselect($event)\"\n\t\t\t\t\t></hpe-list-table>\n\n\t\t<ng-content select=\"lpControls\"></ng-content>\n\t</div>\n\n</hpe-card-panel>\n",
styles: [".innerPanel{padding:8px}"]
},] },
];
/** @nocollapse */
ListPanel.ctorParameters = function () {
return [
{ type: service.LabelService, },
];
};
ListPanel.propDecorators = {
"icon": [{ type: core.Input },],
"title": [{ type: core.Input },],
"rowId": [{ type: core.Input },],
"columns": [{ type: core.Input },],
"visibleColumns": [{ type: core.Input },],
"multiSelection": [{ type: core.Input },],
"contextMenu": [{ type: core.Input },],
"menuSelector": [{ type: core.Input },],
"service": [{ type: core.Input },],
"labelGroup": [{ type: core.Input },],
"onRowSelected": [{ type: core.Output },],
"onRowUnselected": [{ type: core.Output },],
};
return ListPanel;
}());
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ListTable = (function (_super) {
__extends(ListTable, _super);
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function ListTable(eventBusService, labelService) {
var _this = _super.call(this, eventBusService) || this;
_this.labelService = labelService;
//-------------------------------------------------------------------------
_this.onFilterChange = new core.EventEmitter();
_this.onRowSelected = new core.EventEmitter();
_this.onRowUnselected = new core.EventEmitter();
_this.alignMap = {
'left': 'alignLeft',
'center': 'alignCenter',
'right': 'alignRight'
};
_this.rowsPerPage = 8;
_this.rowSet = [4, 8, 12, 16, 20, 50];
_this.loading = false;
_this.multiSelection = false;
return _this;
}
/**
* @return {?}
*/
ListTable.prototype.exportAll = /**
* @return {?}
*/
function () {
this.pTable.exportCSV();
};
/**
* @return {?}
*/
ListTable.prototype.exportSelected = /**
* @return {?}
*/
function () {
this.pTable.exportCSV({ selectionOnly: true });
};
Object.defineProperty(ListTable.prototype, "allValue", {
//-------------------------------------------------------------------------
//--- Localization methods
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.labelService.getLabel("list-table", "all");
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListTable.prototype, "noRecords", {
//-------------------------------------------------------------------------
get: /**
* @return {?}
*/ function () {
return this.labelService.getLabel("list-table", "noRecords");
},
enumerable: true,
configurable: true
});
//-------------------------------------------------------------------------
//---
//--- Lifecycle events
//---
//-------------------------------------------------------------------------
/**
* @param {?} changes
* @return {?}
*/
ListTable.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var /** @type {?} */ rebuildColumnValues = false;
if (changes["columns"]) {
this.initColumns();
rebuildColumnValues = true;
}
if (changes["data"]) {
this.initData();
rebuildColumnValues = true;
}
if (changes["visibleColumns"]) {
this.initVisibleColumns();
}
if (rebuildColumnValues) {
this.initColumnValues();
}
// "labels" ???
};
//-------------------------------------------------------------------------
//---
//--- Events
//---
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListTable.prototype.onRowSelect = /**
* @param {?} event
* @return {?}
*/
function (event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
var /** @type {?} */ row = this.restoreRow(event.data);
var /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
this.onRowSelected.emit(new model.RowSelectedEvent(row, rows));
};
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListTable.prototype.onRowUnselect = /**
* @param {?} event
* @return {?}
*/
function (event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
var /** @type {?} */ row = this.restoreRow(event.data);
var /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
this.onRowUnselected.emit(new model.RowUnselectedEvent(row, rows));
};
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListTable.prototype.onContextMenuSelect = /**
* @param {?} event
* @return {?}
*/
function (event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
var /** @type {?} */ row = this.restoreRow(event.data);
var /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
var /** @type {?} */ rse = new model.RowSelectedEvent(row, rows);
//--- Emit event
this.onRowSelected.emit(rse);
//--- Setup context menu
this.activeMenu = this.selectMenuItems(this.contextMenu, rse, null);
};
//-------------------------------------------------------------------------
/**
* @param {?} event
* @return {?}
*/
ListTable.prototype.onFilter = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.onFilterChange.emit(new model.FilterChangeEvent(this.getFilteredSize()));
};
//-------------------------------------------------------------------------
//---
//--- Local methods
//---
//-------------------------------------------------------------------------
/**
* @param {?} value
* @param {?} col
* @return {?}
*/
ListTable.prototype.filter = /**
* @param {?} value
* @param {?} col
* @return {?}
*/
function (value, col) {
this.pTable.filter(value, col.field, col.filterMatchMode);
};
/**
* @return {?}
*/
ListTable.prototype.initColumns = /**
* @return {?}
*/
function () {
var _this = this;
console.log("Initializing columns : " + JSON.stringify(this.columns));
this.colToIndex = new Map();
if (this.columns == null) ;
else {
var /** @type {?} */ index_1 = 0;
this.columns.forEach(function (col) {
_this.colToIndex.set(col.field, index_1++);
col.displayHeader = _this.calcHeader(col);
col.filterMatchMode = _this.calcFilterMatchMode(col);
});
}
};
/**
* @param {?} col
* @return {?}
*/
ListTable.prototype.calcHeader = /**
* @param {?} col
* @return {?}
*/
function (col) {
return col.header
|| (this.labelGroup && this.labelService.getLabel(this.labelGroup, col.field))
|| col.field;
};
/**
* @param {?} col
* @return {?}
*/
ListTable.prototype.calcFilterMatchMode = /**
* @param {?} col
* @return {?}
*/
function (col) {
if (col.filter == null) {
return "contains";
}
if (col.filter == "select") {
return "equals";
}
if (col.filter == "list") {
return "in";
}
return null;
};
/**
* @return {?}
*/
ListTable.prototype.initData = /**
* @return {?}
*/
function () {
var _this = this;
console.log("Initializing data : " + JSON.stringify(this.data));
if (this.columns == null || this.data == null) {
this.displayData = null;
}
else {
this.displayData = [];
this.data.forEach(function (row) {
var /** @type {?} */ displayRow = {};
_this.displayData.push(displayRow);
for (var /** @type {?} */ key in row) {
var /** @type {?} */ cell = new ListTableCell();
displayRow[key] = cell;
var /** @type {?} */ value = row[key];
var /** @type {?} */ colNdx = _this.colToIndex.get(key);
var /** @type {?} */ col = _this.columns[colNdx];
cell.originalValue = value;
cell.displayValue = _this.calcDisplayValue(row, col, value);
cell.style = _this.calcDisplayStyle(row, col, value);
}
});
}
};
/**
* @param {?} row
* @param {?} col
* @param {?} value
* @return {?}
*/
ListTable.prototype.calcDisplayValue = /**
* @param {?} row
* @param {?} col
* @param {?} value
* @return {?}
*/
function (row, col, value) {
if (col.transcoder != null) {
value = col.transcoder.transcode(value);
}
return (value != null)
? value.toString()
: null;
};
/**
* @param {?} row
* @param {?} col
* @param {?} value
* @return {?}
*/
ListTable.prototype.calcDisplayStyle = /**
* @param {?} row
* @param {?} col
* @param {?} value
* @return {?}
*/
function (row, col, value) {
var /** @type {?} */ styles = ['cell'];
if (col.alignment != null) {
styles.push(this.alignMap[col.alignment]);
}
if (col.styler != null) {
var /** @type {?} */ style = col.styler.style(value, row);
if (style.icon != null) {
styles.push("fa");
styles.push(style.icon);
}
if (style.extraClass != null) {
styles.push(style.extraClass);
}
}
return styles;
};
/**
* @return {?}
*/
ListTable.prototype.initVisibleColumns = /**
* @return {?}
*/
function () {
var _this = this;
console.log("Initializing visible columns : " + JSON.stringify(this.visibleColumns));
if (this.columns == null || this.visibleColumns == null) {
this.displayColumns = null;
}
else {
this.displayColumns = [];
this.visibleColumns.forEach(function (name) {
var /** @type {?} */ index = _this.colToIndex.get(name);
if (index != null) {
_this.displayColumns.push(_this.columns[index]);
}
});
}
};
/**
* @return {?}
*/
ListTable.prototype.initColumnValues = /**
* @return {?}
*/
function () {
var _this = this;
this.columnValues = new Map();
//--- exit if we still do not have columns or values
if (this.columns == null || this.data == null) {
return null;
}
console.log("Calculating column values for : ");
this.columns.forEach(function (col) {
console.log(" --> " + col.field);
_this.columnValues.set(col.field, _this.getColumnValues(col));
});
};
/**
* @param {?} col
* @return {?}
*/
ListTable.prototype.getColumnValues = /**
* @param {?} col
* @return {?}
*/
function (col) {
var /** @type {?} */ field = col.field;
var /** @type {?} */ values = new Set();
//--- first, collect distinct values
this.data.forEach(function (row) {
var /** @type {?} */ value = row[field];
//--- null values causes issues with filters
if (value != null) {
values.add(value);
}
});
//--- second, build final list as an array of (value, label) entries
var /** @type {?} */ list = [];
//--- only the dropdown filter needs the "All" option
if (col.filter == "select") {
list.push({
label: this.allValue,
value: null
});
}
values.forEach(function (value) {
if (col.transcoder != null) {
value = col.transcoder.transcode(value);
}
var /** @type {?} */ label = (value != null)
? value.toString()
: null;
list.push({
label: label,
value: label
});
});
return list;
};
/**
* @return {?}
*/
ListTable.prototype.getFilteredSize = /**
* @return {?}
*/
function () {
if (this.pTable) {
if (this.pTable.filteredValue) {
return this.pTable.filteredValue.length;
}
}
if (this.data) {
return this.data.length;
}
return null;
};
/**
* @param {?} data
* @return {?}
*/
ListTable.prototype.restoreRow = /**
* @param {?} data
* @return {?}
*/
function (data) {
var /** @type {?} */ row = {};
for (var /** @type {?} */ key in data) {
row[key] = data[key].originalValue;
}
return row;
};
/**
* @param {?} rows
* @return {?}
*/
ListTable.prototype.calcSelectedRows = /**
* @param {?} rows
* @return {?}
*/
function (rows) {
var _this = this;
var /** @type {?} */ result = [];
if (rows != null) {
rows.forEach(function (row) {
result.push(_this.restoreRow(row));
});
}
return result;
};
/**
* @param {?} menu
* @param {?} rse
* @param {?} parentId
* @return {?}
*/
ListTable.prototype.selectMenuItems = /**
* @param {?} menu
* @param {?} rse
* @param {?} parentId
* @return {?}
*/
function (menu, rse, parentId) {
var _this = this;
//--- Filter menu items depending on selector
var /** @type {?} */ result = [];
menu.forEach(function (menu) {
var /** @type {?} */ m = lib.Lib.menu.clone(menu);
//--- Concatenate parentId
if (parentId != null) {
m.id = parentId + "." + m.id;
}
m.command = function (event) {
_this.fireEvent(m.id, rse);
};
if (_this.menuSelector == null) {
result.push(m);
}
else {
var /** @type {?} */ mode = _this.menuSelector.select(m.id, rse);
m.disabled = (mode == model.MenuSelectionMode.DISABLE);
if (mode == model.MenuSelectionMode.EXCLUDE) ;
else {
//--- Mode is INCLUDE or DISABLE
result.push(m);
}
}
//--- Recurse on children
if (menu.items != null) {
m.items = _this.selectMenuItems(menu.items, rse, m.id);
if (menu.items != null && m.items == null) {
m.disabled = true;
}
}
});
return (result.length != 0)
? result
: null;
};
/**
* @param {?} code
* @param {?} event
* @return {?}
*/
ListTable.prototype.fireEvent = /**
* @param {?} code
* @param {?} event
* @return {?}
*/
function (code, event) {
//--- Hide context-menu (it seems that with our config it does not disappear automatically)
this.pContextMenu.hide();
var /** @type {?} */ tableEvent = {
code: code,
params: event
};
_super.prototype.emitToApp.call(this, tableEvent);
};
ListTable.decorators = [
{ type: core.Component, args: [{
selector: 'hpe-list-table',
template: "<!--\n=============================================================================\n===\n=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.\n===\n=== Use of this source code is governed by an MIT-style license that can be\n=== found in the LICENSE file\n=============================================================================\n-->\n\n<p-table #tt\n\t\t[columns] = \"displayColumns\"\n\t\t[value] = \"displayData\"\n\t\t[dataKey] = \"rowId\"\n\t\t[selectionMode] = \"multiSelection ? 'multiple' : 'single'\"\n\t\t[paginator] = \"true\"\n\t\t[rows] = \"rowsPerPage\"\n\t\t[rowsPerPageOptions] = \"rowSet\"\n\t\t[pageLinks] = \"10\"\n\t\t[loading] = \"loading\"\n\t\t[metaKeySelection] = \"true\"\n\t\t[contextMenu] = \"cm\"\n\t\t[(selection)] = \"selectedRow\"\n\t\t(onRowSelect) = \"onRowSelect($event)\"\n\t\t(onRowUnselect) = \"onRowUnselect($event)\"\n\t\tcontextMenuSelectionMode = \"joint\"\n\t\t(onContextMenuSelect) = \"onContextMenuSelect($event)\"\n\t\t(onFilter) = \"onFilter($event)\">\n\n\t<ng-template pTemplate=\"header\" let-columns>\n\t\t<tr>\n\t\t\t<th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\n\t\t\t\t{{col.displayHeader}}\n\t\t\t\t<p-sortIcon [field]=\"col.field\"></p-sortIcon>\n\t\t\t</th>\n\t\t</tr>\n\n\t\t<tr class=\"ui-fluid\">\n\t\t\t<th *ngFor=\"let col of columns\">\n\n\t\t\t\t<input *ngIf=\"col.filter == null\"\n\t\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\t\ttype = \"text\"\n\t\t\t\t\t\t\t\t(input) = \"filter($event.target.value, col)\"\n\t\t\t\t\t\t\t\tclass = \"filter\">\n\n\t\t\t\t<p-dropdown *ngIf = \"col.filter == 'select'\"\n\t\t\t\t\t\t\t\t[options] = \"columnValues.get(col.field)\"\n\t\t\t\t\t\t\t\t[style] = \"{'width':'100%'}\"\n\t\t\t\t\t\t\t\t(onChange) = \"filter($event.value, col)\"\n\t\t\t\t\t\t\t\t></p-dropdown>\n\n\t\t\t\t<p-multiSelect *ngIf = \"col.filter == 'list'\"\n\t\t\t\t\t\t\t\t[options] = \"columnValues.get(col.field)\"\n\t\t\t\t\t\t\t\t[defaultLabel] = \"allValue\"\n\t\t\t\t\t\t\t\t(onChange) = \"filter($event.value, col)\"\n\t\t\t\t\t\t\t\tclass = \"filter\"></p-multiSelect>\n\n\t\t\t</th>\n\t\t</tr>\n\t</ng-template>\n\n\t<ng-template pTemplate=\"body\" let-row let-columns=\"columns\">\n\t\t<tr [pSelectableRow]=\"row\" [pContextMenuRow]=\"row\">\n\t\t\t<td *ngFor=\"let col of columns\">\n\t\t\t\t<span [ngClass]=\"row[col.field].style\">{{row[col.field]}}</span>\n\t\t\t</td>\n\t\t</tr>\n\t</ng-template>\n\n\t<ng-template pTemplate=\"emptymessage\" let-columns>\n\t\t<tr>\n\t\t\t<td [attr.colspan]=\"columns.length\">\n\t\t\t\t{{noRecords}}\n\t\t\t</td>\n\t\t</tr>\n\t</ng-template>\n</p-table>\n\n<p-contextMenu #cm [model]=\"activeMenu\" appendTo=\"body\"></p-contextMenu>\n",
styles: [".cell{width:100%;display:inline-block;padding:.7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter{width:100%}.alignLeft{text-align:left}.alignCenter{text-align:center}.alignRight{text-align:right}:host ::ng-deep .ui-paginator{border:none;background-image:inherit}:host ::ng-deep .ui-table .ui-table-thead>tr>th{border:none}:host ::ng-deep .ui-table .ui-table-thead>tr>th:not(.ui-state-highlight){background-color:#fff}:host ::ng-deep .ui-table .ui-table-thead>tr>th:hover{background-color:#c6c9ca}:host ::ng-deep .ui-table .ui-table-tbody>tr.ui-state-highlight{background-color:#a0c0c0}:host ::ng-deep .ui-table .ui-table-thead>tr:last-child{border-bottom:2px solid #c6c9ca}:host ::ng-deep .ui-table .ui-sortable-column.ui-state-highlight{background-color:#5f7a76}:host ::ng-deep .ui-table .ui-table-tbody>tr>td{border-left:none;border-right:none}"]
},] },
];
/** @nocollapse */
ListTable.ctorParameters = function () {
return [
{ type: service.EventBusService, },
{ type: service.LabelService, },
];
};
ListTable.propDecorators = {
"rowId": [{ type: core.Input },],
"columns": [{ type: core.Input },],
"data": [{ type: core.Input },],
"visibleColumns": [{ type: core.Input },],
"multiSelection": [{ type: core.Input },],
"rowsPerPage": [{ type: core.Input },],
"rowSet": [{ type: core.Input },],
"loading": [{ type: core.Input },],
"labelGroup": [{ type: core.Input },],
"contextMenu": [{ type: core.Input },],
"menuSelector": [{ type: core.Input },],
"onFilterChange": [{ type: core.Output },],
"onRowSelected": [{ type: core.Output },],
"onRowUnselected": [{ type: core.Output },],
"pTable": [{ type: core.ViewChild, args: ['tt',] },],
"pContextMenu": [{ type: core.ViewChild, args: ['cm',] },],
};
return ListTable;
}(service.AbstractSubscriber));
var ListTableCell = (function () {
function ListTableCell() {
}
/**
* @return {?}
*/
ListTableCell.prototype.toString = /**
* @return {?}
*/
function () {
return this.displayValue;
};
return ListTableCell;
}());
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var LoadingSpinner = (function (_super) {
__extends(LoadingSpinner, _super);
//-------------------------------------------------------------------------
//---
//--- Constructor
//---
//-------------------------------------------------------------------------
function LoadingSpinner(eventBusService, changeDetectorRef) {
var _this = _super.call(this, eventBusService) || this;
_this.changeDetectorRef = changeDetectorRef;
//-------------------------------------------------------------------------
//---
//--- Variables
//---
//-------------------------------------------------------------------------
_this.state = "loaded";
//-------------------------------------------------------------------------
_this.classes = {
loading: "fa-pulse",