@c8y/ngx-components 1011.0.33 → 1011.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/c8y-ngx-components-sub-assets.umd.js +4 -5
- package/bundles/c8y-ngx-components-sub-assets.umd.js.map +1 -1
- package/bundles/c8y-ngx-components-sub-assets.umd.min.js +1 -1
- package/bundles/c8y-ngx-components-sub-assets.umd.min.js.map +1 -1
- package/bundles/c8y-ngx-components-upgrade.umd.js +6 -5
- package/bundles/c8y-ngx-components-upgrade.umd.js.map +1 -1
- package/bundles/c8y-ngx-components-upgrade.umd.min.js +1 -1
- package/bundles/c8y-ngx-components-upgrade.umd.min.js.map +1 -1
- package/bundles/c8y-ngx-components.umd.js +62 -20
- package/bundles/c8y-ngx-components.umd.js.map +1 -1
- package/bundles/c8y-ngx-components.umd.min.js +1 -1
- package/bundles/c8y-ngx-components.umd.min.js.map +1 -1
- package/c8y-ngx-components.metadata.json +1 -1
- package/core/action-bar/action-bar.component.d.ts +22 -6
- package/core/common/outlet.directive.d.ts +7 -0
- package/core/data-grid/data-grid.component.d.ts +3 -0
- package/esm2015/core/action-bar/action-bar.component.js +41 -15
- package/esm2015/core/bootstrap/bootstrap.component.js +2 -2
- package/esm2015/core/common/outlet.directive.js +19 -2
- package/esm2015/core/data-grid/data-grid.component.js +6 -2
- package/esm2015/sub-assets/sub-assets-grid.component.js +6 -7
- package/esm2015/upgrade/action-bar.factory.js +6 -2
- package/esm2015/upgrade/bridge.service.js +2 -5
- package/fesm2015/c8y-ngx-components-sub-assets.js +4 -5
- package/fesm2015/c8y-ngx-components-sub-assets.js.map +1 -1
- package/fesm2015/c8y-ngx-components-upgrade.js +5 -5
- package/fesm2015/c8y-ngx-components-upgrade.js.map +1 -1
- package/fesm2015/c8y-ngx-components.js +62 -17
- package/fesm2015/c8y-ngx-components.js.map +1 -1
- package/package.json +2 -2
- package/sub-assets/c8y-ngx-components-sub-assets.metadata.json +1 -1
- package/sub-assets/sub-assets-grid.component.d.ts +3 -3
- package/upgrade/action-bar.factory.d.ts +1 -0
- package/upgrade/c8y-ngx-components-upgrade.metadata.json +1 -1
|
@@ -3985,6 +3985,13 @@ MapFunctionPipe.decorators = [
|
|
|
3985
3985
|
* <div *c8yOutlet="template"></div>
|
|
3986
3986
|
* <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
|
|
3987
3987
|
* <div *c8yOutlet="nodes"></div>
|
|
3988
|
+
*
|
|
3989
|
+
*
|
|
3990
|
+
* note: If template is instance of HTMLElement (for example, node compiled by angularJS) then there can be
|
|
3991
|
+
* only single instance rendered, as only one instance of HTMLElement can exist in DOM.
|
|
3992
|
+
* If there is need for displaying same element multiple times, please make sure to inject into
|
|
3993
|
+
* this element createCopy function, which should return another instance of given element.
|
|
3994
|
+
*
|
|
3988
3995
|
*/
|
|
3989
3996
|
class OutletDirective {
|
|
3990
3997
|
constructor(viewContainer, resolver, renderer, el) {
|
|
@@ -4017,7 +4024,17 @@ class OutletDirective {
|
|
|
4017
4024
|
else if (template instanceof Element) {
|
|
4018
4025
|
const parent = this.renderer.parentNode(this.el.nativeElement);
|
|
4019
4026
|
this.destroy();
|
|
4020
|
-
|
|
4027
|
+
/**
|
|
4028
|
+
* Because compiled element can be used only once, we need to create copy of it
|
|
4029
|
+
* in order to display it in multiple locations.
|
|
4030
|
+
* For example standard "More" menu, and its RWD version.
|
|
4031
|
+
*/
|
|
4032
|
+
if (template.createCopy) {
|
|
4033
|
+
this._element = template.createCopy();
|
|
4034
|
+
}
|
|
4035
|
+
else {
|
|
4036
|
+
this._element = template;
|
|
4037
|
+
}
|
|
4021
4038
|
this.renderer.insertBefore(parent, this._element, this.el.nativeElement);
|
|
4022
4039
|
// case Component -> <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
|
|
4023
4040
|
}
|
|
@@ -4424,20 +4441,44 @@ class ActionBarComponent {
|
|
|
4424
4441
|
/**
|
|
4425
4442
|
* The current items to display in the ActionBar.
|
|
4426
4443
|
*/
|
|
4427
|
-
this.items = [];
|
|
4444
|
+
this.items$ = of([]);
|
|
4445
|
+
/**
|
|
4446
|
+
* Provides observable for right action items.
|
|
4447
|
+
*/
|
|
4448
|
+
this.right$ = of([]);
|
|
4449
|
+
/**
|
|
4450
|
+
* Provides observable for left action items.
|
|
4451
|
+
*/
|
|
4452
|
+
this.left$ = of([]);
|
|
4453
|
+
/**
|
|
4454
|
+
* Provides observable for more action items.
|
|
4455
|
+
*/
|
|
4456
|
+
this.more$ = of([]);
|
|
4457
|
+
/**
|
|
4458
|
+
* Returns true if no items are present and hides the action bar.
|
|
4459
|
+
*/
|
|
4460
|
+
this.hidden$ = of(true);
|
|
4461
|
+
/**
|
|
4462
|
+
* Binds hidden property to this component's native element
|
|
4463
|
+
*/
|
|
4464
|
+
this.hidden = true;
|
|
4465
|
+
this.destroy$ = new Subject();
|
|
4428
4466
|
}
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4467
|
+
ngOnInit() {
|
|
4468
|
+
this.right$ = this.items$.pipe(map(items => filter$1(items, { placement: 'right' })), map(items => sortBy(items, this.byPriority)));
|
|
4469
|
+
this.left$ = this.items$.pipe(map(items => filter$1(items, { placement: 'left' })), map(items => sortBy(items, this.byPriority)));
|
|
4470
|
+
this.more$ = this.items$.pipe(map(items => filter$1(items, { placement: 'more' })), map(items => sortBy(items, this.byPriority)));
|
|
4471
|
+
this.hidden$ = this.items$.pipe(map(items => {
|
|
4472
|
+
return !(items && items.length);
|
|
4473
|
+
}));
|
|
4474
|
+
this.hidden$
|
|
4475
|
+
.pipe(takeUntil(this.destroy$)).subscribe(hidden => {
|
|
4476
|
+
this.hidden = hidden;
|
|
4477
|
+
});
|
|
4434
4478
|
}
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
*/
|
|
4439
|
-
getSortedItems(placement) {
|
|
4440
|
-
return sortBy(filter$1(this.items, { placement }), this.byPriority);
|
|
4479
|
+
ngOnDestroy() {
|
|
4480
|
+
this.destroy$.next();
|
|
4481
|
+
this.destroy$.complete();
|
|
4441
4482
|
}
|
|
4442
4483
|
byPriority(item) {
|
|
4443
4484
|
return -item.priority;
|
|
@@ -4446,7 +4487,7 @@ class ActionBarComponent {
|
|
|
4446
4487
|
ActionBarComponent.decorators = [
|
|
4447
4488
|
{ type: Component, args: [{
|
|
4448
4489
|
selector: 'c8y-action-bar',
|
|
4449
|
-
template: "<div class=\"navbar-header\">\n <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n <span class=\"text-primary\">{{'Action bar' | translate}}</span>\n </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\"
|
|
4490
|
+
template: "<div class=\"navbar-header\">\n <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n <span class=\"text-primary\">{{ 'Action bar' | translate }}</span>\n </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\">\n <ul class=\"nav navbar-nav navbar-left\">\n <ng-container *ngFor=\"let item of left$ | async\">\n <ng-container *c8yOutlet=\"item.template\"></ng-container>\n </ng-container>\n </ul>\n <ul class=\"nav navbar-nav navbar-right\">\n <ng-container *ngFor=\"let item of right$ | async\">\n <ng-container *c8yOutlet=\"item.template\"></ng-container>\n </ng-container>\n <li class=\"no-remove more-wrapper\" *ngIf=\"(more$ | async).length > 0\">\n <div class=\"dropdown\" dropdown>\n <button\n title=\"{{ 'More' | translate }}\u2026\"\n class=\"dropdown-toggle c8y-dropdown d-flex\"\n dropdownToggle\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <span class=\"text-truncate\" translate>More\u2026</span>\n <i [c8yIcon]=\"'caret-down'\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" *dropdownMenu>\n <ng-container *ngFor=\"let item of more$ | async\">\n <ng-container *c8yOutlet=\"item.template\"></ng-container>\n </ng-container>\n </ul>\n <ul class=\"dropdown-menu visible-xs\">\n <ng-container *ngFor=\"let item of more$ | async\">\n <ng-container *c8yOutlet=\"item.template\"></ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n </ul>\n</div>\n",
|
|
4450
4491
|
host: { class: 'c8y-ui-action-bar' }
|
|
4451
4492
|
},] }
|
|
4452
4493
|
];
|
|
@@ -4455,7 +4496,7 @@ ActionBarComponent.propDecorators = {
|
|
|
4455
4496
|
hasTabs: [{ type: Input }, { type: HostBinding, args: ['class.has-tabs',] }],
|
|
4456
4497
|
isTabsHorizontal: [{ type: Input }, { type: HostBinding, args: ['class.horizontal-tabs',] }],
|
|
4457
4498
|
uiActionBar: [{ type: HostBinding, args: ['class.c8y-ui-action-bar',] }],
|
|
4458
|
-
items
|
|
4499
|
+
items$: [{ type: Input }],
|
|
4459
4500
|
hidden: [{ type: HostBinding }]
|
|
4460
4501
|
};
|
|
4461
4502
|
|
|
@@ -5878,7 +5919,7 @@ class BootstrapComponent {
|
|
|
5878
5919
|
BootstrapComponent.decorators = [
|
|
5879
5920
|
{ type: Component, args: [{
|
|
5880
5921
|
selector: 'c8y-bootstrap',
|
|
5881
|
-
template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n <c8y-header-bar #header></c8y-header-bar>\n <c8y-navigator-outlet\n [nodes]=\"navigator.items$ | async\"\n [open]=\"headerService.navigatorOpen$ | async\"\n >\n <header class=\"title navigator-slot-top\">\n <div class=\"tenant-brand\"></div>\n <c8y-app-icon\n [name]=\"(ui.state$ | async).app.name\"\n [contextPath]=\"(ui.state$ | async).app.contextPath\"\n ></c8y-app-icon>\n <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n </header>\n <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n <p translate>powered by Cumulocity</p>\n </div>\n </c8y-navigator-outlet>\n\n <div class=\"alerts\">\n <c8y-alert-outlet></c8y-alert-outlet>\n </div>\n <c8y-tabs-outlet\n #tabsComponent\n [tabs]=\"tabs.items$ | async\"\n [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n [orientation]=\"tabs.orientation$ | async\"\n >\n </c8y-tabs-outlet>\n <c8y-action-bar\n #actionBarComponent\n [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n [hasTabs]=\"tabsComponent.hasTabs\"\n [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n [items]=\"actionBar.items
|
|
5922
|
+
template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n <c8y-header-bar #header></c8y-header-bar>\n <c8y-navigator-outlet\n [nodes]=\"navigator.items$ | async\"\n [open]=\"headerService.navigatorOpen$ | async\"\n >\n <header class=\"title navigator-slot-top\">\n <div class=\"tenant-brand\"></div>\n <c8y-app-icon\n [name]=\"(ui.state$ | async).app.name\"\n [contextPath]=\"(ui.state$ | async).app.contextPath\"\n ></c8y-app-icon>\n <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n </header>\n <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n <p translate>powered by Cumulocity</p>\n </div>\n </c8y-navigator-outlet>\n\n <div class=\"alerts\">\n <c8y-alert-outlet></c8y-alert-outlet>\n </div>\n <c8y-tabs-outlet\n #tabsComponent\n [tabs]=\"tabs.items$ | async\"\n [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n [orientation]=\"tabs.orientation$ | async\"\n >\n </c8y-tabs-outlet>\n <c8y-action-bar\n #actionBarComponent\n [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n [hasTabs]=\"tabsComponent.hasTabs\"\n [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n [items$]=\"actionBar.items$\"\n >\n </c8y-action-bar>\n\n <div\n class=\"mcontainer\"\n [ngClass]=\"{\n open: headerService.navigatorOpen$ | async,\n 'no-apps-margin': noAppsMargin$ | async,\n 'horizontal-tabs': tabsComponent.isHorizontal,\n 'vertical-tabs': !tabsComponent.isHorizontal,\n 'has-tabs': tabsComponent.hasTabs,\n 'has-action-bar': !actionBarComponent.hidden\n }\"\n >\n <div class=\"container-fluid\">\n <router-outlet></router-outlet>\n <ng-content select=\"#c8y-legacy-view\"></ng-content>\n <!-- legacy ng-view, will not be migrated atm -->\n </div>\n </div>\n</div>\n<c8y-cookie-banner></c8y-cookie-banner>\n"
|
|
5882
5923
|
},] }
|
|
5883
5924
|
];
|
|
5884
5925
|
BootstrapComponent.ctorParameters = () => [
|
|
@@ -14962,6 +15003,9 @@ class DataGridComponent {
|
|
|
14962
15003
|
filter: true
|
|
14963
15004
|
};
|
|
14964
15005
|
this.searchText = '';
|
|
15006
|
+
/** Shows the warning for the sub-assets counter */
|
|
15007
|
+
this.showCounterWarning = false;
|
|
15008
|
+
/** Emits an event when mouse is over a row. */
|
|
14965
15009
|
this.rowMouseOver = new EventEmitter();
|
|
14966
15010
|
this.rowMouseLeave = new EventEmitter();
|
|
14967
15011
|
this.rowClick = new EventEmitter();
|
|
@@ -15409,7 +15453,7 @@ class DataGridComponent {
|
|
|
15409
15453
|
DataGridComponent.decorators = [
|
|
15410
15454
|
{ type: Component, args: [{
|
|
15411
15455
|
selector: 'c8y-data-grid',
|
|
15412
|
-
template: "<div class=\"table-data-grid-scroll\" #scroll>\n <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n <h4 class=\"m-r-16\">{{ title | translate }}</h4>\n\n <ng-container *ngIf=\"displayOptions.filter\">\n <span *ngIf=\"!filteringApplied\">\n <span class=\"label label-warning m-r-4\" translate>No filters</span>\n <small\n *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n class=\"m-r-4\"\n ngNonBindable\n translate\n [translateParams]=\"filteringLabelsParams\"\n >{{ filteredItemsCount }} of {{ allItemsCount }} items</small\n >\n </span>\n <span *ngIf=\"filteringApplied\">\n <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n <span class=\"badge badge-info m-r-4\">\n {{ (dataSource.stats$ | async).filteredSize }}\n </span>\n <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\"\n >of {{ allItemsCount }} items</small\n >\n </ng-container>\n <button\n title=\" {{ 'Clear filters' | translate }}\"\n class=\"m-l-8 btn btn-xs btn-default m-r-4\"\n (click)=\"clearFilters()\"\n >\n {{ 'Clear filters' | translate }}\n </button>\n </span>\n <span class=\"hidden-xs hidden-sm\">\n <button\n class=\"btn-clean text-primary\"\n popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n >\n <i c8yIcon=\"question-circle-o\"></i>\n </button> </span\n ></ng-container>\n\n <div class=\"flex-item-right\">\n <div class=\"btnbar flex-row\">\n <label class=\"c8y-switch\" *ngIf=\"showChildDevices.show\">\n <input type=\"checkbox\" [(ngModel)]=\"showChildDevices.value\" (click)=\"loadChildDevices()\"/>\n <span></span>\n {{ 'Show child devices' | translate }}\n </label>\n <button class=\"btn-clean m-l-4 m-r-16\" \n *ngIf=\"showChildDevices.show\"\n [popover]=\"childDevicesPop\"\n placement=\"bottom\"\n [outsideClick]=\"true\"\n >\n <i c8yIcon=\"question-circle-o\" class=\"text-primary\"></i>\n </button>\n <ng-template #childDevicesPop>\n <span translate>\n Displays the button\n <button class=\"btn btn-xs btn-icon btn-default\"><i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i></button>\n next to devices with children. Clicking it displays a list with all child devices.\n </span>\n </ng-template>\n <div\n class=\"dropdown\"\n dropdown\n [insideClick]=\"true\"\n container=\"body\"\n placement=\"bottom left\"\n >\n <button\n title=\"{{ 'Configure columns' | translate }}\"\n class=\"btnbar-btn c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n <span>{{ 'Configure columns' | translate }}</span>\n </button>\n\n <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n <li class=\"bg-white\">\n <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n <ng-container *ngIf=\"!column.positionFixed\">\n <div class=\"list-group-item draggable-after p-0 \">\n <label\n title=\"{{ (column.header | translate) || column.name }}\"\n class=\"c8y-checkbox p-l-16 p-r-32 p-t-8 p-b-8 flex-item-v-stretch\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"column.visible\"\n (change)=\"updateGridColumnsSize()\"\n />\n <span></span>\n <span>{{ (column.header | translate) || column.name }}</span>\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </li>\n </ul>\n </div>\n\n <button\n title=\"{{ 'Reload' | translate }}\"\n class=\"btnbar-btn btn-link\"\n [disabled]=\"dataSource.loading$ | async\"\n (click)=\"searchText = ''; reload()\"\n >\n <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n <span>{{ 'Reload' | translate }}</span>\n </button>\n\n <div *ngIf=\"!serverSideDataCallback || showSearch\" class=\"input-group input-group-search m-l-sm-16\">\n <input\n type=\"search\"\n class=\"form-control\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n [ngModel]=\"searchText\"\n (input)=\"searchText$.emit($event.target.value)\"\n />\n <div class=\"input-group-addon\">\n <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n <i\n c8yIcon=\"times\"\n class=\"pointer\"\n *ngIf=\"searchText.length > 0\"\n (click)=\"searchText = ''; searchText$.emit('')\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n *ngIf=\"selectedItemIds.length !== 0\"\n >\n <h4>\n <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n {{ count }} selected items.\n </span>\n <br class=\"visible-xs\" />\n <small *ngIf=\"selectedItemIds.length >= pagination.pageSize\">\n <a (click)=\"setAllItemsSelected(true)\" class=\"interact\">\n <span\n ngNonBindable\n translate\n [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n >\n Select all {{ count }} items\n </span>\n </a>\n </small>\n </h4>\n <div class=\"flex-item-right\">\n <div class=\"btnbar flex-row\">\n <ng-container\n *ngFor=\"let bulkActionControl of bulkActionControls\"\n [ngSwitch]=\"bulkActionControl.type\"\n >\n <button\n title=\"{{ 'Export' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Export\"\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"sign-out\"></i>\n <span>{{ 'Export' | translate }}</span>\n </button>\n\n <button\n title=\"{{ 'Delete' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Delete\"\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"trash\"></i>\n <span>{{ 'Delete' | translate }}</span>\n </button>\n\n <button\n title=\"{{ bulkActionControl.text | translate }}\"\n *ngSwitchDefault\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n <span>{{ bulkActionControl.text | translate }}</span>\n </button>\n </ng-container>\n\n <button\n title=\"{{ 'Cancel' | translate }}\"\n class=\"btnbar-btn\"\n (click)=\"cancel()\"\n >\n <i c8yIcon=\"times\"></i>\n <span>{{ 'Cancel' | translate }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <table\n class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByName\"\n [class.table-striped]=\"displayOptions.striped\"\n [class.table-bordered]=\"displayOptions.bordered\"\n [class.table-data-grid-with-checkboxes]=\"selectable\"\n [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n >\n <ng-container *ngFor=\"let column of columns; trackBy: trackByName\" [cdkColumnDef]=\"column.name\">\n <ng-container [ngSwitch]=\"column.name\">\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n <div>\n <label class=\"c8y-checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"currentPageSelectionState.allSelected\"\n [indeterminate]=\"\n !(\n currentPageSelectionState.allSelected ||\n currentPageSelectionState.allDeselected\n )\n \"\n (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n />\n <span></span>\n </label>\n </div>\n </th>\n\n <td cdk-cell *cdkCellDef=\"let row\">\n <label class=\"c8y-checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"isItemSelected(row)\"\n (change)=\"setItemsSelected([row], $event.target.checked)\"\n />\n <span></span>\n </label>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'actions'\">\n <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\"></th>\n\n <td cdk-cell *cdkCellDef=\"let row\">\n <ng-container *ngIf=\"actionControls.length <= 2\">\n <ng-container\n *ngFor=\"let actionControl of actionControls\"\n [ngSwitch]=\"actionControl.type\"\n >\n <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n <button\n *ngSwitchCase=\"builtInActionType.Edit\"\n class=\"btn btn-icon btn-xs btn-default\"\n title=\"{{ 'Edit' | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"pencil\"></i>\n </button>\n <button\n *ngSwitchCase=\"builtInActionType.Delete\"\n class=\"btn btn-dot showOnHover\"\n title=\"{{ 'Delete' | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i class=\"text-danger\" c8yIcon=\"minus-circle\"></i>\n </button>\n <button\n *ngSwitchDefault\n class=\"btn btn-icon btn-xs btn-default\"\n title=\"{{ actionControl.text | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n tooltip=\"{{ actionControl.text | translate }}\"\n container=\"body\"\n >\n <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"actionControls.length > 2\" class=\"dropdown\" dropdown>\n <button\n title=\"{{ 'Actions' | translate }}\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n <li *ngFor=\"let actionControl of actionControls\" [ngSwitch]=\"actionControl.type\">\n <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n <button\n title=\"{{ 'Edit' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Edit\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n <button\n title=\"{{ 'Delete' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Delete\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"trash\"></i>\n {{ 'Delete' | translate }}\n </button>\n <button\n title=\"{{ 'Export' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Export\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"download\"></i>\n {{ 'Export' | translate }}\n </button>\n <button\n title=\"{{ actionControl.text | translate }}\"\n *ngSwitchDefault\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n {{ actionControl.text | translate }}\n </button>\n </ng-container>\n </li>\n </ul>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [ngClass]=\"column.headerCSSClassName\"\n [attr.data-type]=\"column.dataType\"\n [class.sorted]=\"column.sortOrder\"\n [class.filtered]=\"column | map: isColumnFilteringApplied\"\n [class.hidden]=\"!column.visible\"\n >\n <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n <ng-container\n *ngIf=\"\n (\n [{\n columnName: column.name,\n value: ((column.header | translate) || column.name)\n }]\n | map:getHeaderCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n </div>\n\n <div\n *ngIf=\"column.filterable\"\n class=\"dropdown\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n placement=\"bottom left\"\n [insideClick]=\"true\"\n >\n <button\n class=\"btn-header c8y-dropdown\"\n dropdownToggle\n [title]=\"(column.header | translate) || column.name\"\n >\n <ng-container\n *ngIf=\"\n (\n [{\n columnName: column.name,\n value: ((column.header | translate) || column.name)\n }]\n | map:getHeaderCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n </button>\n\n <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n <li class=\"data-grid__dropdown\">\n <ng-container\n *ngIf=\"\n (\n [{\n column: column,\n dropdown: dropdown\n }]\n | map:getFilteringFormRendererSpec:this\n ) as filteringFormRendererSpec\n \"\n >\n <c8y-filtering-form-renderer [spec]=\"filteringFormRendererSpec\">\n </c8y-filtering-form-renderer>\n </ng-container>\n </li>\n </ul>\n </div>\n\n <button\n *ngIf=\"column.sortable\"\n class=\"btn-sort\"\n title=\"{{ 'Sort' | translate }}\"\n (click)=\"changeSortOrder(column.name)\"\n >\n <ng-container [ngSwitch]=\"column.sortOrder\">\n <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n </ng-container>\n </button>\n\n <span\n class=\"resize-handle\"\n (mousedown)=\"\n resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n \"\n >\n </span>\n </th>\n\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [ngClass]=\"column.cellCSSClassName\"\n [attr.data-cell-title]=\"column.header | translate\"\n [class.hidden]=\"!column.visible\"\n >\n <ng-container\n *ngIf=\"\n (\n [{\n value: resolveCellValue(row, column.path),\n row: row,\n columnName: column.name\n }]\n | map:getCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n </td>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n <template #infiniteScrollContainer></template>\n </td>\n </ng-container>\n\n <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnNames\"\n (mouseover)=\"rowMouseOver.emit(row)\"\n (mouseleave)=\"rowMouseLeave.emit(row)\"\n (click)=\"rowClick.emit(row)\"\n ></tr>\n\n <ng-container *ngIf=\"infiniteScroll\">\n <tr cdk-footer-row *cdkFooterRowDef=\"['infiniteScrollFooter']\"></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\" class=\"text-center\">\n <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n </div>\n\n <div\n class=\"row m-0 p-t-40 p-b-40\"\n *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n >\n <div class=\"col-md-4 col-md-offset-4\">\n <ng-content select=\".c8y-empty-state\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n <div class=\"col-sm-4 no-gutter\">\n <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter\">\n <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\"\n >{{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}</span\n >\n </div>\n </div>\n\n <div class=\"col-sm-4 no-gutter text-center\">\n <div\n *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n class=\"form-group form-inline\"\n >\n <label class=\"m-r-4\">{{ 'Items per page' | translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [ngModel]=\"pagination.pageSize\"\n (ngModelChange)=\"\n updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n \"\n >\n <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n {{ pageSize }}\n </option>\n </select>\n </div>\n </div>\n </div>\n\n <div class=\"col-sm-4 no-gutter text-right\">\n <pagination\n [class.hidden]=\"totalPagesCount <= 1\"\n [ngModel]=\"pagination.currentPage\"\n (pageChanged)=\"updatePagination($event)\"\n [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n [itemsPerPage]=\"pagination.pageSize\"\n (numPages)=\"totalPagesCount = $event\"\n [maxSize]=\"5\"\n [boundaryLinks]=\"false\"\n previousText=\" \"\n nextText=\" \"\n ></pagination>\n </div>\n </div>\n</div>\n"
|
|
15456
|
+
template: "<div class=\"table-data-grid-scroll\" #scroll>\n <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n <h4 class=\"m-r-16\">{{ title | translate }}</h4>\n\n <ng-container *ngIf=\"displayOptions.filter\">\n <span *ngIf=\"!filteringApplied\">\n <span class=\"label label-warning m-r-4\" translate>No filters</span>\n <small\n *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n class=\"m-r-4\"\n ngNonBindable\n translate\n [translateParams]=\"filteringLabelsParams\"\n >{{ filteredItemsCount }} of {{ allItemsCount }} items</small\n >\n </span>\n <span *ngIf=\"filteringApplied\">\n <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n <span class=\"badge badge-info m-r-4\">\n {{ (dataSource.stats$ | async).filteredSize }}\n </span>\n <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\"\n >of {{ allItemsCount }} items</small\n >\n </ng-container>\n <button\n title=\" {{ 'Clear filters' | translate }}\"\n class=\"m-l-8 btn btn-xs btn-default m-r-4\"\n (click)=\"clearFilters()\"\n >\n {{ 'Clear filters' | translate }}\n </button>\n </span>\n <span class=\"hidden-xs hidden-sm\">\n <button\n class=\"btn-clean text-primary\"\n popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n >\n <i c8yIcon=\"question-circle-o\"></i>\n </button>\n </span>\n\n <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n <button\n class=\"btn-clean text-primary\"\n popover=\"{{\n 'The counter for the total number of items might be inaccurate.' | translate\n }}\"\n placement=\"right\"\n triggers=\"focus\"\n >\n <i c8yIcon=\"warning\"></i>\n </button>\n </span>\n </ng-container>\n\n <div class=\"flex-item-right\">\n <div class=\"btnbar flex-row\">\n <label class=\"c8y-switch\" *ngIf=\"showChildDevices.show\">\n <input type=\"checkbox\" [(ngModel)]=\"showChildDevices.value\" (click)=\"loadChildDevices()\"/>\n <span></span>\n {{ 'Show child devices' | translate }}\n </label>\n <button class=\"btn-clean m-l-4 m-r-16\" \n *ngIf=\"showChildDevices.show\"\n [popover]=\"childDevicesPop\"\n placement=\"bottom\"\n [outsideClick]=\"true\"\n >\n <i c8yIcon=\"question-circle-o\" class=\"text-primary\"></i>\n </button>\n <ng-template #childDevicesPop>\n <span translate>\n Displays the button\n <button class=\"btn btn-xs btn-icon btn-default\"><i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i></button>\n next to devices with children. Clicking it displays a list with all child devices.\n </span>\n </ng-template>\n <div\n class=\"dropdown\"\n dropdown\n [insideClick]=\"true\"\n container=\"body\"\n placement=\"bottom left\"\n >\n <button\n title=\"{{ 'Configure columns' | translate }}\"\n class=\"btnbar-btn c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n <span>{{ 'Configure columns' | translate }}</span>\n </button>\n\n <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n <li class=\"bg-white\">\n <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n <ng-container *ngIf=\"!column.positionFixed\">\n <div class=\"list-group-item draggable-after p-0 \">\n <label\n title=\"{{ (column.header | translate) || column.name }}\"\n class=\"c8y-checkbox p-l-16 p-r-32 p-t-8 p-b-8 flex-item-v-stretch\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"column.visible\"\n (change)=\"updateGridColumnsSize()\"\n />\n <span></span>\n <span>{{ (column.header | translate) || column.name }}</span>\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </li>\n </ul>\n </div>\n\n <button\n title=\"{{ 'Reload' | translate }}\"\n class=\"btnbar-btn btn-link\"\n [disabled]=\"dataSource.loading$ | async\"\n (click)=\"searchText = ''; reload()\"\n >\n <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n <span>{{ 'Reload' | translate }}</span>\n </button>\n\n <div *ngIf=\"!serverSideDataCallback || showSearch\" class=\"input-group input-group-search m-l-sm-16\">\n <input\n type=\"search\"\n class=\"form-control\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n [ngModel]=\"searchText\"\n (input)=\"searchText$.emit($event.target.value)\"\n />\n <div class=\"input-group-addon\">\n <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n <i\n c8yIcon=\"times\"\n class=\"pointer\"\n *ngIf=\"searchText.length > 0\"\n (click)=\"searchText = ''; searchText$.emit('')\"\n ></i>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n *ngIf=\"selectedItemIds.length !== 0\"\n >\n <h4>\n <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n {{ count }} selected items.\n </span>\n <br class=\"visible-xs\" />\n <small *ngIf=\"selectedItemIds.length >= pagination.pageSize\">\n <a (click)=\"setAllItemsSelected(true)\" class=\"interact\">\n <span\n ngNonBindable\n translate\n [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n >\n Select all {{ count }} items\n </span>\n </a>\n </small>\n </h4>\n <div class=\"flex-item-right\">\n <div class=\"btnbar flex-row\">\n <ng-container\n *ngFor=\"let bulkActionControl of bulkActionControls\"\n [ngSwitch]=\"bulkActionControl.type\"\n >\n <button\n title=\"{{ 'Export' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Export\"\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"sign-out\"></i>\n <span>{{ 'Export' | translate }}</span>\n </button>\n\n <button\n title=\"{{ 'Delete' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Delete\"\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"trash\"></i>\n <span>{{ 'Delete' | translate }}</span>\n </button>\n\n <button\n title=\"{{ bulkActionControl.text | translate }}\"\n *ngSwitchDefault\n class=\"btnbar-btn\"\n (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n >\n <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n <span>{{ bulkActionControl.text | translate }}</span>\n </button>\n </ng-container>\n\n <button\n title=\"{{ 'Cancel' | translate }}\"\n class=\"btnbar-btn\"\n (click)=\"cancel()\"\n >\n <i c8yIcon=\"times\"></i>\n <span>{{ 'Cancel' | translate }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <table\n class=\"table table-hover table-filtered-sorted table-data-grid large-padding\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByName\"\n [class.table-striped]=\"displayOptions.striped\"\n [class.table-bordered]=\"displayOptions.bordered\"\n [class.table-data-grid-with-checkboxes]=\"selectable\"\n [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n >\n <ng-container *ngFor=\"let column of columns; trackBy: trackByName\" [cdkColumnDef]=\"column.name\">\n <ng-container [ngSwitch]=\"column.name\">\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n <div>\n <label class=\"c8y-checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"currentPageSelectionState.allSelected\"\n [indeterminate]=\"\n !(\n currentPageSelectionState.allSelected ||\n currentPageSelectionState.allDeselected\n )\n \"\n (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n />\n <span></span>\n </label>\n </div>\n </th>\n\n <td cdk-cell *cdkCellDef=\"let row\">\n <label class=\"c8y-checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"isItemSelected(row)\"\n (change)=\"setItemsSelected([row], $event.target.checked)\"\n />\n <span></span>\n </label>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'actions'\">\n <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\"></th>\n\n <td cdk-cell *cdkCellDef=\"let row\">\n <ng-container *ngIf=\"actionControls.length <= 2\">\n <ng-container\n *ngFor=\"let actionControl of actionControls\"\n [ngSwitch]=\"actionControl.type\"\n >\n <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n <button\n *ngSwitchCase=\"builtInActionType.Edit\"\n class=\"btn btn-icon btn-xs btn-default\"\n title=\"{{ 'Edit' | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"pencil\"></i>\n </button>\n <button\n *ngSwitchCase=\"builtInActionType.Delete\"\n class=\"btn btn-dot showOnHover\"\n title=\"{{ 'Delete' | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i class=\"text-danger\" c8yIcon=\"minus-circle\"></i>\n </button>\n <button\n *ngSwitchDefault\n class=\"btn btn-icon btn-xs btn-default\"\n title=\"{{ actionControl.text | translate }}\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n tooltip=\"{{ actionControl.text | translate }}\"\n container=\"body\"\n >\n <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"actionControls.length > 2\" class=\"dropdown\" dropdown>\n <button\n title=\"{{ 'Actions' | translate }}\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n <li *ngFor=\"let actionControl of actionControls\" [ngSwitch]=\"actionControl.type\">\n <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n <button\n title=\"{{ 'Edit' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Edit\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n <button\n title=\"{{ 'Delete' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Delete\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"trash\"></i>\n {{ 'Delete' | translate }}\n </button>\n <button\n title=\"{{ 'Export' | translate }}\"\n *ngSwitchCase=\"builtInActionType.Export\"\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"download\"></i>\n {{ 'Export' | translate }}\n </button>\n <button\n title=\"{{ actionControl.text | translate }}\"\n *ngSwitchDefault\n (click)=\"actionControl.callback(row, reload.bind(this))\"\n >\n <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n {{ actionControl.text | translate }}\n </button>\n </ng-container>\n </li>\n </ul>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [ngClass]=\"column.headerCSSClassName\"\n [attr.data-type]=\"column.dataType\"\n [class.sorted]=\"column.sortOrder\"\n [class.filtered]=\"column | map: isColumnFilteringApplied\"\n [class.hidden]=\"!column.visible\"\n >\n <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\n <ng-container\n *ngIf=\"\n (\n [{\n columnName: column.name,\n value: ((column.header | translate) || column.name)\n }]\n | map:getHeaderCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n </div>\n\n <div\n *ngIf=\"column.filterable\"\n class=\"dropdown\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n placement=\"bottom left\"\n [insideClick]=\"true\"\n >\n <button\n class=\"btn-header c8y-dropdown\"\n dropdownToggle\n [title]=\"(column.header | translate) || column.name\"\n >\n <ng-container\n *ngIf=\"\n (\n [{\n columnName: column.name,\n value: ((column.header | translate) || column.name)\n }]\n | map:getHeaderCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n </button>\n\n <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n <li class=\"data-grid__dropdown\">\n <ng-container\n *ngIf=\"\n (\n [{\n column: column,\n dropdown: dropdown\n }]\n | map:getFilteringFormRendererSpec:this\n ) as filteringFormRendererSpec\n \"\n >\n <c8y-filtering-form-renderer [spec]=\"filteringFormRendererSpec\">\n </c8y-filtering-form-renderer>\n </ng-container>\n </li>\n </ul>\n </div>\n\n <button\n *ngIf=\"column.sortable\"\n class=\"btn-sort\"\n title=\"{{ 'Sort' | translate }}\"\n (click)=\"changeSortOrder(column.name)\"\n >\n <ng-container [ngSwitch]=\"column.sortOrder\">\n <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n </ng-container>\n </button>\n\n <span\n class=\"resize-handle\"\n (mousedown)=\"\n resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n \"\n >\n </span>\n </th>\n\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [ngClass]=\"column.cellCSSClassName\"\n [attr.data-cell-title]=\"column.header | translate\"\n [class.hidden]=\"!column.visible\"\n >\n <ng-container\n *ngIf=\"\n (\n [{\n value: resolveCellValue(row, column.path),\n row: row,\n columnName: column.name\n }]\n | map:getCellRendererSpec:this\n ) as cellRendererSpec\n \"\n >\n <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n </ng-container>\n </td>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n <template #infiniteScrollContainer></template>\n </td>\n </ng-container>\n\n <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnNames\"\n (mouseover)=\"rowMouseOver.emit(row)\"\n (mouseleave)=\"rowMouseLeave.emit(row)\"\n (click)=\"rowClick.emit(row)\"\n ></tr>\n\n <ng-container *ngIf=\"infiniteScroll\">\n <tr cdk-footer-row *cdkFooterRowDef=\"['infiniteScrollFooter']\"></tr>\n </ng-container>\n </table>\n\n <div *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\" class=\"text-center\">\n <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n </div>\n\n <div\n class=\"row m-0 p-t-40 p-b-40\"\n *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n >\n <div class=\"col-md-4 col-md-offset-4\">\n <ng-content select=\".c8y-empty-state\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n <div class=\"col-sm-4 no-gutter\">\n <div *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter\">\n <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\"\n >{{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}</span\n >\n </div>\n </div>\n\n <div class=\"col-sm-4 no-gutter text-center\">\n <div\n *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n class=\"form-group form-inline\"\n >\n <label class=\"m-r-4\">{{ 'Items per page' | translate }}</label>\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [ngModel]=\"pagination.pageSize\"\n (ngModelChange)=\"\n updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n \"\n >\n <option *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\n {{ pageSize }}\n </option>\n </select>\n </div>\n </div>\n </div>\n\n <div class=\"col-sm-4 no-gutter text-right\">\n <pagination\n [class.hidden]=\"totalPagesCount <= 1\"\n [ngModel]=\"pagination.currentPage\"\n (pageChanged)=\"updatePagination($event)\"\n [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n [itemsPerPage]=\"pagination.pageSize\"\n (numPages)=\"totalPagesCount = $event\"\n [maxSize]=\"5\"\n [boundaryLinks]=\"false\"\n previousText=\" \"\n nextText=\" \"\n ></pagination>\n </div>\n </div>\n</div>\n"
|
|
15413
15457
|
},] }
|
|
15414
15458
|
];
|
|
15415
15459
|
DataGridComponent.ctorParameters = () => [
|
|
@@ -15436,6 +15480,7 @@ DataGridComponent.propDecorators = {
|
|
|
15436
15480
|
_actionControls: [{ type: Input, args: ['actionControls',] }],
|
|
15437
15481
|
_bulkActionControls: [{ type: Input, args: ['bulkActionControls',] }],
|
|
15438
15482
|
searchText: [{ type: Input }],
|
|
15483
|
+
showCounterWarning: [{ type: Input }],
|
|
15439
15484
|
rowMouseOver: [{ type: Output }],
|
|
15440
15485
|
rowMouseLeave: [{ type: Output }],
|
|
15441
15486
|
rowClick: [{ type: Output }],
|