@hpe/angular-toolkit
Version:
Hewlett-Packard Enterprise : Angular toolkit for rapid project development
1,581 lines (1,514 loc) • 196 kB
JavaScript
import { ChangeDetectorRef, Component, Input, ViewEncapsulation, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
import { AppEvent, FilterChangeEvent, RowSelectedEvent, RowUnselectedEvent, MenuSelectionMode } from '@hpe/angular-toolkit/model';
import { AbstractSubscriber, EventBusService, LabelService, HpeServiceModule } from '@hpe/angular-toolkit/service';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MessageModule, MessagesModule, OverlayPanelModule, PanelMenuModule } from 'primeng/primeng';
import { Lib } from '@hpe/angular-toolkit/lib';
import { MessageService } from 'primeng/components/common/messageservice';
import { CommonModule } from '@angular/common';
import { MatToolbarModule, MatButtonModule, MatCardModule } from '@angular/material';
import { ContextMenuModule } from 'primeng/contextmenu';
import { DropdownModule } from 'primeng/dropdown';
import { MultiSelectModule } from 'primeng/multiselect';
import { TableModule } from 'primeng/table';
import { ToastModule } from 'primeng/toast';
import { HpeDirectiveModule } from '@hpe/angular-toolkit/gui/directive';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class ButtonPanel extends AbstractSubscriber {
/**
* @param {?} eventBusService
* @param {?} changeDetectorRef
*/
constructor(eventBusService, changeDetectorRef) {
super(eventBusService);
this.changeDetectorRef = changeDetectorRef;
this.submitting = false;
super.subscribeToApp(AppEvent.SUBMIT_START, () => this.onSubmitStart());
super.subscribeToApp(AppEvent.SUBMIT_END, () => this.onSubmitEnd());
}
/**
* @return {?}
*/
getComponentClass() {
let /** @type {?} */ styles = ['row'];
if (this.submitting) {
styles.push("disabled");
}
return styles;
}
/**
* @return {?}
*/
onSubmitStart() {
this.submitting = true;
this.changeDetectorRef.detectChanges();
}
/**
* @return {?}
*/
onSubmitEnd() {
this.submitting = false;
this.changeDetectorRef.detectChanges();
}
}
ButtonPanel.decorators = [
{ type: Component, args: [{
selector: 'hpe-button-panel',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<div [ngClass]="getComponentClass()">
<ng-content></ng-content>
</div>
`,
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 = () => [
{ type: EventBusService, },
{ type: ChangeDetectorRef, },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class CardPanel {
/**
* @param {?} labelService
*/
constructor(labelService) {
this.labelService = labelService;
this.toggleButton = true;
this.overflowUnset = true;
this.state = "open";
}
/**
* @return {?}
*/
get cardOpen() {
return this.state == "open";
}
/**
* @return {?}
*/
get tooltip() {
return this.labelService.getLabel("card-panel", "toggle.tooltip");
}
/**
* @return {?}
*/
onToggleClick() {
this.state = (this.state == 'open')
? 'closed'
: 'open';
}
/**
* @param {?} e
* @return {?}
*/
animationStart(e) {
this.overflowUnset = false;
}
/**
* @param {?} e
* @return {?}
*/
animationEnd(e) {
this.overflowUnset = this.cardOpen;
}
}
CardPanel.decorators = [
{ type: Component, args: [{
selector: 'hpe-card-panel',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<mat-card>
<hpe-title-panel icon="{{icon}}" title="{{title}}" >
<ng-content select="[cpPostTitle]" tpPostTitle></ng-content>
<ng-content select="[cpControl]" tpControl></ng-content>
<button mat-button *ngIf="toggleButton" (click)="onToggleClick()" [title]="tooltip" tpControl class="buttonStyle">
<hpe-title-icon name="fa-angle-up" *ngIf="cardOpen"></hpe-title-icon>
<hpe-title-icon name="fa-angle-down" *ngIf="!cardOpen"></hpe-title-icon>
</button>
</hpe-title-panel>
<div [@focusPanel] = "state"
(@focusPanel.start)= "animationStart($event)"
(@focusPanel.done) = "animationEnd($event)"
[style.overflow] = "overflowUnset ? 'unset' : 'hidden'">
<ng-content select="[cpBody]"></ng-content>
</div>
</mat-card>
`,
styles: [`mat-card{margin:1rem;padding:0}.buttonStyle{min-width:0;padding:0 8px}`],
animations: [
trigger('focusPanel', [
state('open', style({ height: '*' })),
state('closed', style({ height: 0 })),
transition('open => closed', animate('500ms ease-in')),
transition('closed => open', animate('500ms ease-out'))
])
]
},] },
];
/** @nocollapse */
CardPanel.ctorParameters = () => [
{ type: LabelService, },
];
CardPanel.propDecorators = {
"icon": [{ type: Input },],
"title": [{ type: Input },],
"toggleButton": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class GlobalCss {
}
GlobalCss.decorators = [
{ type: Component, args: [{
selector: 'hpe-global-css',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
`,
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: ViewEncapsulation.None
},] },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class Icon {
constructor() { }
/**
* @return {?}
*/
get content() {
return (this.isFontAwesomeIcon())
? null
: this.name;
}
/**
* @return {?}
*/
get iconClass() {
let /** @type {?} */ styles = ["iconStyle"];
if (this.isFontAwesomeIcon()) {
styles.push("fa");
styles.push(this.name);
}
else {
styles.push("material-icons");
}
return styles;
}
/**
* @return {?}
*/
isFontAwesomeIcon() {
return (this.name != null && this.name.startsWith("fa-"));
}
}
Icon.decorators = [
{ type: Component, args: [{
selector: 'hpe-icon',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<i [ngClass]="iconClass">{{content}}</i>
`,
styles: [`.iconStyle{vertical-align:middle}`]
},] },
];
/** @nocollapse */
Icon.ctorParameters = () => [];
Icon.propDecorators = {
"name": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @template T
*/
//=============================================================================
class ListPanel {
/**
* @param {?} labelService
*/
constructor(labelService) {
this.labelService = labelService;
//-------------------------------------------------------------------------
this.onRowSelected = new EventEmitter();
this.onRowUnselected = new EventEmitter();
}
/**
* @return {?}
*/
refresh() {
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(result => {
this.loading = false;
this.data = (result.results);
this.filteredSize = (result.results.length);
this.overflow = (result.overflow);
}, error => {
console.log("Service raised an error : " + JSON.stringify(error));
this.data = [];
this.loading = false;
this.failed = true;
});
}
}
/**
* @return {?}
*/
get color() {
return (this.overflow)
? 'orange'
: 'slate';
}
/**
* @return {?}
*/
get exportSelTooltip() {
return this.loc("exportSel.tooltip");
}
/**
* @return {?}
*/
get exportAllTooltip() {
return this.loc("exportAll.tooltip");
}
/**
* @return {?}
*/
get refreshTooltip() {
return this.loc("refresh.tooltip");
}
/**
* @return {?}
*/
ngOnInit() {
this.refresh();
}
/**
* @param {?} event
* @return {?}
*/
onFilterChange(event) {
this.filteredSize = event.filteredSize;
}
/**
* @param {?} event
* @return {?}
*/
onRowSelect(event) {
this.onRowSelected.emit(event.row);
}
/**
* @param {?} event
* @return {?}
*/
onRowUnselect(event) {
this.onRowUnselected.emit(event.row);
}
/**
* @param {?} code
* @return {?}
*/
loc(code) {
return this.labelService.getLabel("list-panel", code);
}
}
ListPanel.decorators = [
{ type: Component, args: [{
selector: 'hpe-list-panel',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<hpe-card-panel icon="{{icon}}" title="{{title}}">
<hpe-rounded-text [text]="filteredSize" [color]="color" cpPostTitle></hpe-rounded-text>
<ng-content select="lpButtons"></ng-content>
<hpe-title-button cpControl
icon = "fa-file-o"
[tooltip] = "exportSelTooltip"
[disabled] = "loading || failed"
(click) = "lt.exportSelected()"
></hpe-title-button>
<hpe-title-button cpControl
icon = "fa-files-o"
[tooltip] = "exportAllTooltip"
[disabled] = "loading || failed"
(click) = "lt.exportAll()"
></hpe-title-button>
<hpe-title-button cpControl
icon = "fa-refresh"
[tooltip] = "refreshTooltip"
[disabled] = "loading"
(click) = "refresh()"
></hpe-title-button>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div cpBody class="innerPanel">
<hpe-list-table #lt
[rowId] = "rowId"
[columns] = "columns"
[visibleColumns] = "visibleColumns"
[data] = "data"
[contextMenu] = "contextMenu"
[multiSelection] = "multiSelection"
[menuSelector] = "menuSelector"
[loading] = "loading"
[labelGroup] = "labelGroup"
(onFilterChange) = "onFilterChange($event)"
(onRowSelected) = "onRowSelect($event)"
(onRowUnselected)= "onRowUnselect($event)"
></hpe-list-table>
<ng-content select="lpControls"></ng-content>
</div>
</hpe-card-panel>
`,
styles: [`.innerPanel{padding:8px}`]
},] },
];
/** @nocollapse */
ListPanel.ctorParameters = () => [
{ type: LabelService, },
];
ListPanel.propDecorators = {
"icon": [{ type: Input },],
"title": [{ type: Input },],
"rowId": [{ type: Input },],
"columns": [{ type: Input },],
"visibleColumns": [{ type: Input },],
"multiSelection": [{ type: Input },],
"contextMenu": [{ type: Input },],
"menuSelector": [{ type: Input },],
"service": [{ type: Input },],
"labelGroup": [{ type: Input },],
"onRowSelected": [{ type: Output },],
"onRowUnselected": [{ type: Output },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class ListTable extends AbstractSubscriber {
/**
* @param {?} eventBusService
* @param {?} labelService
*/
constructor(eventBusService, labelService) {
super(eventBusService);
this.labelService = labelService;
//-------------------------------------------------------------------------
this.onFilterChange = new EventEmitter();
this.onRowSelected = new EventEmitter();
this.onRowUnselected = new 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 {?}
*/
exportAll() {
this.pTable.exportCSV();
}
/**
* @return {?}
*/
exportSelected() {
this.pTable.exportCSV({ selectionOnly: true });
}
/**
* @return {?}
*/
get allValue() {
return this.labelService.getLabel("list-table", "all");
}
/**
* @return {?}
*/
get noRecords() {
return this.labelService.getLabel("list-table", "noRecords");
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
let /** @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" ???
}
/**
* @param {?} event
* @return {?}
*/
onRowSelect(event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
let /** @type {?} */ row = this.restoreRow(event.data);
let /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
this.onRowSelected.emit(new RowSelectedEvent(row, rows));
}
/**
* @param {?} event
* @return {?}
*/
onRowUnselect(event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
let /** @type {?} */ row = this.restoreRow(event.data);
let /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
this.onRowUnselected.emit(new RowUnselectedEvent(row, rows));
}
/**
* @param {?} event
* @return {?}
*/
onContextMenuSelect(event) {
//--- In case of multi-selection, the selectedRow variable is an array of rows
let /** @type {?} */ row = this.restoreRow(event.data);
let /** @type {?} */ rows = this.calcSelectedRows(this.selectedRow);
let /** @type {?} */ rse = new RowSelectedEvent(row, rows);
//--- Emit event
this.onRowSelected.emit(rse);
//--- Setup context menu
this.activeMenu = this.selectMenuItems(this.contextMenu, rse, null);
}
/**
* @param {?} event
* @return {?}
*/
onFilter(event) {
this.onFilterChange.emit(new FilterChangeEvent(this.getFilteredSize()));
}
/**
* @param {?} value
* @param {?} col
* @return {?}
*/
filter(value, col) {
this.pTable.filter(value, col.field, col.filterMatchMode);
}
/**
* @return {?}
*/
initColumns() {
console.log("Initializing columns : " + JSON.stringify(this.columns));
this.colToIndex = new Map();
if (this.columns == null) ;
else {
let /** @type {?} */ index = 0;
this.columns.forEach((col) => {
this.colToIndex.set(col.field, index++);
col.displayHeader = this.calcHeader(col);
col.filterMatchMode = this.calcFilterMatchMode(col);
});
}
}
/**
* @param {?} col
* @return {?}
*/
calcHeader(col) {
return col.header
|| (this.labelGroup && this.labelService.getLabel(this.labelGroup, col.field))
|| col.field;
}
/**
* @param {?} col
* @return {?}
*/
calcFilterMatchMode(col) {
if (col.filter == null) {
return "contains";
}
if (col.filter == "select") {
return "equals";
}
if (col.filter == "list") {
return "in";
}
return null;
}
/**
* @return {?}
*/
initData() {
console.log("Initializing data : " + JSON.stringify(this.data));
if (this.columns == null || this.data == null) {
this.displayData = null;
}
else {
this.displayData = [];
this.data.forEach((row) => {
let /** @type {?} */ displayRow = {};
this.displayData.push(displayRow);
for (let /** @type {?} */ key in row) {
let /** @type {?} */ cell = new ListTableCell();
displayRow[key] = cell;
let /** @type {?} */ value = row[key];
let /** @type {?} */ colNdx = this.colToIndex.get(key);
let /** @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 {?}
*/
calcDisplayValue(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 {?}
*/
calcDisplayStyle(row, col, value) {
let /** @type {?} */ styles = ['cell'];
if (col.alignment != null) {
styles.push(this.alignMap[col.alignment]);
}
if (col.styler != null) {
let /** @type {?} */ style$$1 = col.styler.style(value, row);
if (style$$1.icon != null) {
styles.push("fa");
styles.push(style$$1.icon);
}
if (style$$1.extraClass != null) {
styles.push(style$$1.extraClass);
}
}
return styles;
}
/**
* @return {?}
*/
initVisibleColumns() {
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((name) => {
let /** @type {?} */ index = this.colToIndex.get(name);
if (index != null) {
this.displayColumns.push(this.columns[index]);
}
});
}
}
/**
* @return {?}
*/
initColumnValues() {
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((col) => {
console.log(" --> " + col.field);
this.columnValues.set(col.field, this.getColumnValues(col));
});
}
/**
* @param {?} col
* @return {?}
*/
getColumnValues(col) {
let /** @type {?} */ field = col.field;
let /** @type {?} */ values = new Set();
//--- first, collect distinct values
this.data.forEach(row => {
let /** @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
let /** @type {?} */ list = [];
//--- only the dropdown filter needs the "All" option
if (col.filter == "select") {
list.push({
label: this.allValue,
value: null
});
}
values.forEach((value) => {
if (col.transcoder != null) {
value = col.transcoder.transcode(value);
}
let /** @type {?} */ label = (value != null)
? value.toString()
: null;
list.push({
label: label,
value: label
});
});
return list;
}
/**
* @return {?}
*/
getFilteredSize() {
if (this.pTable) {
if (this.pTable.filteredValue) {
return this.pTable.filteredValue.length;
}
}
if (this.data) {
return this.data.length;
}
return null;
}
/**
* @param {?} data
* @return {?}
*/
restoreRow(data) {
let /** @type {?} */ row = {};
for (let /** @type {?} */ key in data) {
row[key] = data[key].originalValue;
}
return row;
}
/**
* @param {?} rows
* @return {?}
*/
calcSelectedRows(rows) {
let /** @type {?} */ result = [];
if (rows != null) {
rows.forEach((row) => {
result.push(this.restoreRow(row));
});
}
return result;
}
/**
* @param {?} menu
* @param {?} rse
* @param {?} parentId
* @return {?}
*/
selectMenuItems(menu, rse, parentId) {
//--- Filter menu items depending on selector
let /** @type {?} */ result = [];
menu.forEach((menu) => {
let /** @type {?} */ m = Lib.menu.clone(menu);
//--- Concatenate parentId
if (parentId != null) {
m.id = parentId + "." + m.id;
}
m.command = (event) => {
this.fireEvent(m.id, rse);
};
if (this.menuSelector == null) {
result.push(m);
}
else {
let /** @type {?} */ mode = this.menuSelector.select(m.id, rse);
m.disabled = (mode == MenuSelectionMode.DISABLE);
if (mode == 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 {?}
*/
fireEvent(code, event) {
//--- Hide context-menu (it seems that with our config it does not disappear automatically)
this.pContextMenu.hide();
let /** @type {?} */ tableEvent = {
code: code,
params: event
};
super.emitToApp(tableEvent);
}
}
ListTable.decorators = [
{ type: Component, args: [{
selector: 'hpe-list-table',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<p-table #tt
[columns] = "displayColumns"
[value] = "displayData"
[dataKey] = "rowId"
[selectionMode] = "multiSelection ? 'multiple' : 'single'"
[paginator] = "true"
[rows] = "rowsPerPage"
[rowsPerPageOptions] = "rowSet"
[pageLinks] = "10"
[loading] = "loading"
[metaKeySelection] = "true"
[contextMenu] = "cm"
[(selection)] = "selectedRow"
(onRowSelect) = "onRowSelect($event)"
(onRowUnselect) = "onRowUnselect($event)"
contextMenuSelectionMode = "joint"
(onContextMenuSelect) = "onContextMenuSelect($event)"
(onFilter) = "onFilter($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.displayHeader}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr class="ui-fluid">
<th *ngFor="let col of columns">
<input *ngIf="col.filter == null"
pInputText
type = "text"
(input) = "filter($event.target.value, col)"
class = "filter">
<p-dropdown *ngIf = "col.filter == 'select'"
[options] = "columnValues.get(col.field)"
[style] = "{'width':'100%'}"
(onChange) = "filter($event.value, col)"
></p-dropdown>
<p-multiSelect *ngIf = "col.filter == 'list'"
[options] = "columnValues.get(col.field)"
[defaultLabel] = "allValue"
(onChange) = "filter($event.value, col)"
class = "filter"></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row let-columns="columns">
<tr [pSelectableRow]="row" [pContextMenuRow]="row">
<td *ngFor="let col of columns">
<span [ngClass]="row[col.field].style">{{row[col.field]}}</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage" let-columns>
<tr>
<td [attr.colspan]="columns.length">
{{noRecords}}
</td>
</tr>
</ng-template>
</p-table>
<p-contextMenu #cm [model]="activeMenu" appendTo="body"></p-contextMenu>
`,
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 = () => [
{ type: EventBusService, },
{ type: LabelService, },
];
ListTable.propDecorators = {
"rowId": [{ type: Input },],
"columns": [{ type: Input },],
"data": [{ type: Input },],
"visibleColumns": [{ type: Input },],
"multiSelection": [{ type: Input },],
"rowsPerPage": [{ type: Input },],
"rowSet": [{ type: Input },],
"loading": [{ type: Input },],
"labelGroup": [{ type: Input },],
"contextMenu": [{ type: Input },],
"menuSelector": [{ type: Input },],
"onFilterChange": [{ type: Output },],
"onRowSelected": [{ type: Output },],
"onRowUnselected": [{ type: Output },],
"pTable": [{ type: ViewChild, args: ['tt',] },],
"pContextMenu": [{ type: ViewChild, args: ['cm',] },],
};
class ListTableCell {
/**
* @return {?}
*/
toString() {
return this.displayValue;
}
}
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class LoadingSpinner extends AbstractSubscriber {
/**
* @param {?} eventBusService
* @param {?} changeDetectorRef
*/
constructor(eventBusService, changeDetectorRef) {
super(eventBusService);
this.changeDetectorRef = changeDetectorRef;
//-------------------------------------------------------------------------
//---
//--- Variables
//---
//-------------------------------------------------------------------------
this.state = "loaded";
//-------------------------------------------------------------------------
this.classes = {
loading: "fa-pulse",
loaded: "loaded",
};
//--- Local Fat Arrow is mandatory in order to preserve 'this'
super.subscribeToApp(AppEvent.SUBMIT_START, event => this.onSubmitStart(event));
super.subscribeToApp(AppEvent.SUBMIT_END, event => this.onSubmitEnd(event));
}
/**
* @param {?} event
* @return {?}
*/
onSubmitStart(event) {
this.state = "loading";
this.changeDetectorRef.detectChanges();
}
/**
* @param {?} event
* @return {?}
*/
onSubmitEnd(event) {
this.state = "loaded";
this.changeDetectorRef.detectChanges();
}
}
LoadingSpinner.decorators = [
{ type: Component, args: [{
selector: 'hpe-loading-spinner',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<div class="loadingContainer" >
<i class="fa fa-circle-o-notch fa-2x" [ngClass]="classes[state]"></i>
</div>
`,
styles: [`.loadingContainer{height:100%;display:flex;align-items:center}.loaded{display:none}`]
},] },
];
/** @nocollapse */
LoadingSpinner.ctorParameters = () => [
{ type: EventBusService, },
{ type: ChangeDetectorRef, },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class Logo {
}
Logo.decorators = [
{ type: Component, args: [{
selector: 'hpe-logo',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<div class="logoContainer">
<img alt="Hewlett-Packard Enterprise" width="143" height="56" class="logo" src="asset/image/hpe-logo.png">
</div>
`,
styles: [`.logoContainer{height:100%;display:flex;align-items:center}.logo{vertical-align:middle;padding-left:8px;padding-right:8px}`]
},] },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class MenuButton {
/**
* @param {?} eventBusService
*/
constructor(eventBusService) {
this.eventBusService = eventBusService;
}
/**
* @return {?}
*/
onClick() {
let /** @type {?} */ event = new AppEvent(AppEvent.MENU_BUTTON_CLICK);
this.eventBusService.emitToApp(event);
}
}
MenuButton.decorators = [
{ type: Component, args: [{
selector: 'hpe-menu-button',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<hpe-toolbar-button icon="menu" (click)="onClick()"></hpe-toolbar-button>
`,
styles: [``]
},] },
];
/** @nocollapse */
MenuButton.ctorParameters = () => [
{ type: EventBusService, },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class MenuPanel {
constructor() { }
}
MenuPanel.decorators = [
{ type: Component, args: [{
selector: 'hpe-menu-panel',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<p-panelMenu [model]="menu"></p-panelMenu>
`,
styles: [`:host ::ng-deep .ui-widget-content{border:none}:host ::ng-deep .ui-state-default{border:none}:host ::ng-deep .ui-panelmenu-header.ui-state-active a{background-color:#425563}`]
},] },
];
/** @nocollapse */
MenuPanel.ctorParameters = () => [];
MenuPanel.propDecorators = {
"menu": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class MessageToast {
constructor() { }
}
MessageToast.decorators = [
{ type: Component, args: [{
selector: 'hpe-message-toast',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<p-toast position="top-center"></p-toast>
`,
styles: [``]
},] },
];
/** @nocollapse */
MessageToast.ctorParameters = () => [];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class NotificationButton {
/**
* @param {?} messageService
*/
constructor(messageService) {
this.messageList = [];
this.unreadMessages = false;
this.subscription = messageService.messageObserver.subscribe((messages) => this.onMessage(messages));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.subscription != null) {
this.subscription.unsubscribe();
}
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
this.unreadMessages = false;
}
/**
* @param {?} messages
* @return {?}
*/
onMessage(messages) {
if (messages instanceof Array) {
messages.forEach(e => this.messageList.unshift(e));
}
else {
this.messageList.unshift(messages);
}
this.unreadMessages = true;
}
}
NotificationButton.decorators = [
{ type: Component, args: [{
selector: 'hpe-notification-button',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<hpe-toolbar-button icon="fa-bell" [toggle]="true" [highlighted]="unreadMessages" (click)="onClick($event)" [disabled]="messageList.length == 0">
<hpe-notification-item *ngFor="let msg of messageList" [message]="msg"></hpe-notification-item>
</hpe-toolbar-button>
`,
styles: [``]
},] },
];
/** @nocollapse */
NotificationButton.ctorParameters = () => [
{ type: MessageService, },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class NotificationItem {
constructor() {
//-------------------------------------------------------------------------
this.icons = {
success: 'fa-check',
info: 'fa-info-circle',
warn: 'fa-exclamation-circle',
error: 'fa-times-circle'
};
}
}
NotificationItem.decorators = [
{ type: Component, args: [{
selector: 'hpe-notification-item',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<div class="item" [ngClass]="message.severity">
<i class="fa" [ngClass]="icons[message.severity]"></i>
<b>{{message.summary}}</b>
<p class="message">{{message.detail}}</p>
</div>
`,
styles: [`.item{padding:4px 4px 1px;font-size:.9rem;margin:0;line-height:1rem;border-bottom:1px solid #c6c9ca;white-space:normal;max-width:800px}.message{margin-top:4px;margin-bottom:4px}.error{color:#ab1a0f;background-color:#ffcbc8}.warn{color:#8a6714;background-color:#ffe9b5}.success{color:#2c832f;background-color:#b4f0b6}.info{color:#1765a3;background-color:#bfe0fa}`]
},] },
];
/** @nocollapse */
NotificationItem.ctorParameters = () => [];
NotificationItem.propDecorators = {
"message": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class RightTitle {
/**
* @param {?} labelService
*/
constructor(labelService) {
this.labelService = labelService;
//-------------------------------------------------------------------------
this.onClose = new EventEmitter();
}
/**
* @return {?}
*/
get closeTooltip() {
return this.labelService.getLabel("right-title", "close.tooltip");
}
/**
* @param {?} event
* @return {?}
*/
close(event) {
this.onClose.emit(event);
}
}
RightTitle.decorators = [
{ type: Component, args: [{
selector: 'hpe-right-title',
template: `<hpe-title-panel [icon]="icon" [title]="title" >
<hpe-title-button tpControl
icon = "cancel"
[tooltip]= "closeTooltip"
(click) = "close($event)"
></hpe-title-button>
</hpe-title-panel>
`,
styles: [``]
},] },
];
/** @nocollapse */
RightTitle.ctorParameters = () => [
{ type: LabelService, },
];
RightTitle.propDecorators = {
"icon": [{ type: Input },],
"title": [{ type: Input },],
"onClose": [{ type: Output },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class RoundedText {
constructor() {
this.text = null;
this.color = "green";
}
/**
* @return {?}
*/
get text() {
return this._text;
}
/**
* @param {?} value
* @return {?}
*/
set text(value) {
this._text = value;
if (value == null) {
this.displayedText = "...";
}
else {
this.displayedText = value;
}
}
/**
* @return {?}
*/
getClassColor() {
let /** @type {?} */ styles = ["roundedStyle"];
if (this.color != null) {
styles.push(this.color);
}
return styles;
}
}
RoundedText.decorators = [
{ type: Component, args: [{
selector: 'hpe-rounded-text',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<span [ngClass]="getClassColor()" [innerText]="displayedText"></span>
`,
styles: [`.roundedStyle{padding:6px 10px 3px;font-size:1.1rem;border-radius:25px;border:1px solid}.black{border-color:#202020;color:#202020}.red{border-color:#e74c3c;color:#e74c3c}.green{border-color:#00a982;color:#00a982}.orange{border-color:#ff8d6d;color:#ff8d6d}.slate{border-color:#425563;color:#425563}`]
},] },
];
/** @nocollapse */
RoundedText.ctorParameters = () => [];
RoundedText.propDecorators = {
"color": [{ type: Input },],
"text": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class TitleButton {
constructor() {
//-------------------------------------------------------------------------
this.onClick = new EventEmitter();
}
}
TitleButton.decorators = [
{ type: Component, args: [{
selector: 'hpe-title-button',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<button mat-button [title]="tooltip" [disabled]="disabled" (click)="onClick.emit($event)" class="buttonStyle">
<hpe-title-icon [name]="icon"></hpe-title-icon>
</button>
`,
styles: [`.buttonStyle{min-width:0;padding:0 8px}`]
},] },
];
/** @nocollapse */
TitleButton.ctorParameters = () => [];
TitleButton.propDecorators = {
"icon": [{ type: Input },],
"tooltip": [{ type: Input },],
"disabled": [{ type: Input },],
"onClick": [{ type: Output },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class TitleIcon {
constructor() { }
}
TitleIcon.decorators = [
{ type: Component, args: [{
selector: 'hpe-title-icon',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<hpe-icon [name]="name" class="iconStyle"></hpe-icon>
`,
styles: [`.iconStyle{color:#425563;font-size:24px}`]
},] },
];
/** @nocollapse */
TitleIcon.ctorParameters = () => [];
TitleIcon.propDecorators = {
"name": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class TitlePanel {
constructor() { }
}
TitlePanel.decorators = [
{ type: Component, args: [{
selector: 'hpe-title-panel',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<mat-toolbar class="toolbar">
<hpe-title-icon [name]="icon"></hpe-title-icon>
<div class="panelTitle">{{title}}</div>
<ng-content select="[tpPostTitle]"></ng-content>
<span class="horizFiller"></span>
<ng-content select="[tpControl]"></ng-content>
</mat-toolbar>
`,
styles: [`.toolbar{background-color:#ebedf0;height:46px;min-height:46px}.panelTitle{font-size:1.4rem;color:#425563;margin-left:16px;margin-right:16px}.horizFiller{flex:1 1 auto}`]
},] },
];
/** @nocollapse */
TitlePanel.ctorParameters = () => [];
TitlePanel.propDecorators = {
"icon": [{ type: Input },],
"title": [{ type: Input },],
};
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class Toolbar {
}
Toolbar.decorators = [
{ type: Component, args: [{
selector: 'hpe-toolbar',
template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->
<mat-toolbar class="toolbar">
<ng-content select="[tbLeft]"></ng-content>
<span class="horizFiller"></span>
<ng-content select="[tbRight]"></ng-content>
</mat-toolbar>
`,
styles: [`.toolbar{background-color:#425563;padding-left:0;padding-right:0;color:#fff;align-items:stretch;height:58px}.horizFiller{flex:1 1 auto}`]
},] },
];
//=============================================================================
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
//=============================================================================
class ToolbarButton {
constructor() {
//-------------------------------------------------------------------------