@c8y/ngx-components 1011.0.34 → 1011.0.36
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.umd.js +5 -1
- 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/data-grid/data-grid.component.d.ts +3 -0
- package/esm2015/core/data-grid/data-grid.component.js +6 -2
- package/esm2015/sub-assets/sub-assets-grid.component.js +6 -7
- 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.js +5 -1
- 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
|
@@ -16515,6 +16515,9 @@
|
|
|
16515
16515
|
filter: true
|
|
16516
16516
|
};
|
|
16517
16517
|
this.searchText = '';
|
|
16518
|
+
/** Shows the warning for the sub-assets counter */
|
|
16519
|
+
this.showCounterWarning = false;
|
|
16520
|
+
/** Emits an event when mouse is over a row. */
|
|
16518
16521
|
this.rowMouseOver = new i0.EventEmitter();
|
|
16519
16522
|
this.rowMouseLeave = new i0.EventEmitter();
|
|
16520
16523
|
this.rowClick = new i0.EventEmitter();
|
|
@@ -17047,7 +17050,7 @@
|
|
|
17047
17050
|
DataGridComponent.decorators = [
|
|
17048
17051
|
{ type: i0.Component, args: [{
|
|
17049
17052
|
selector: 'c8y-data-grid',
|
|
17050
|
-
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"
|
|
17053
|
+
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"
|
|
17051
17054
|
},] }
|
|
17052
17055
|
];
|
|
17053
17056
|
DataGridComponent.ctorParameters = function () { return [
|
|
@@ -17074,6 +17077,7 @@
|
|
|
17074
17077
|
_actionControls: [{ type: i0.Input, args: ['actionControls',] }],
|
|
17075
17078
|
_bulkActionControls: [{ type: i0.Input, args: ['bulkActionControls',] }],
|
|
17076
17079
|
searchText: [{ type: i0.Input }],
|
|
17080
|
+
showCounterWarning: [{ type: i0.Input }],
|
|
17077
17081
|
rowMouseOver: [{ type: i0.Output }],
|
|
17078
17082
|
rowMouseLeave: [{ type: i0.Output }],
|
|
17079
17083
|
rowClick: [{ type: i0.Output }],
|