@c8y/ngx-components 1021.3.1 → 1021.4.3
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/assets-navigator/asset-selector/asset-selector-node.component.d.ts +2 -1
- package/assets-navigator/asset-selector/asset-selector-node.component.d.ts.map +1 -1
- package/assets-navigator/asset-selector/asset-selector.component.d.ts +2 -1
- package/assets-navigator/asset-selector/asset-selector.component.d.ts.map +1 -1
- package/cockpit-config/cockpit-config.service.d.ts.map +1 -1
- package/cockpit-config/cockpit-configuration.component.d.ts +1 -0
- package/cockpit-config/cockpit-configuration.component.d.ts.map +1 -1
- package/cockpit-config/root-node-config.component.d.ts +2 -1
- package/cockpit-config/root-node-config.component.d.ts.map +1 -1
- package/core/login/login.component.d.ts.map +1 -1
- package/core/login/login.service.d.ts +1 -1
- package/core/login/login.service.d.ts.map +1 -1
- package/esm2022/assets-navigator/asset-selector/asset-selector-node.component.mjs +6 -3
- package/esm2022/assets-navigator/asset-selector/asset-selector.component.mjs +7 -4
- package/esm2022/assets-navigator/asset-selector/miller-view.component.mjs +1 -1
- package/esm2022/auth-configuration/sso-configuration/template-parts/access-mapping/inventory-roles-modal.component.mjs +1 -1
- package/esm2022/cockpit-config/cockpit-config.service.mjs +7 -3
- package/esm2022/cockpit-config/cockpit-configuration.component.mjs +6 -3
- package/esm2022/cockpit-config/root-node-config.component.mjs +8 -4
- package/esm2022/cockpit-config/setup/cockpit-setup-step3.component.mjs +1 -1
- package/esm2022/core/login/login.component.mjs +8 -3
- package/esm2022/core/login/login.service.mjs +5 -2
- package/esm2022/device-grid/columns/group.filtering-form-renderer.component.mjs +1 -1
- package/esm2022/protocol-lwm2m/components/configuration/typed-forms/firmware-settings.component.mjs +11 -2
- package/fesm2022/c8y-ngx-components-assets-navigator.mjs +12 -6
- package/fesm2022/c8y-ngx-components-assets-navigator.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-auth-configuration.mjs +1 -1
- package/fesm2022/c8y-ngx-components-auth-configuration.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-cockpit-config.mjs +19 -9
- package/fesm2022/c8y-ngx-components-cockpit-config.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-device-grid.mjs +1 -1
- package/fesm2022/c8y-ngx-components-device-grid.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-protocol-lwm2m-components-configuration.mjs +10 -1
- package/fesm2022/c8y-ngx-components-protocol-lwm2m-components-configuration.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs +11 -3
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/locales/locales.pot +6 -0
- package/package.json +1 -1
- package/protocol-lwm2m/components/configuration/typed-forms/firmware-settings.component.d.ts +10 -0
- package/protocol-lwm2m/components/configuration/typed-forms/firmware-settings.component.d.ts.map +1 -1
|
@@ -961,6 +961,7 @@ class AssetSelectorNodeComponent {
|
|
|
961
961
|
* The current path to the node.
|
|
962
962
|
*/
|
|
963
963
|
this.view = 'tree';
|
|
964
|
+
this.disabled = false;
|
|
964
965
|
/**
|
|
965
966
|
* Event, which indicates whether the loading of the node has completed.
|
|
966
967
|
*/
|
|
@@ -1082,11 +1083,11 @@ class AssetSelectorNodeComponent {
|
|
|
1082
1083
|
this.cd.markForCheck();
|
|
1083
1084
|
}
|
|
1084
1085
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", handleNextMillerViewColumn: "handleNextMillerViewColumn" }, outputs: { isLoadingState: "isLoadingState", onSelect: "onSelect", onDeselect: "onDeselect" }, ngImport: i0, template: "<!-- Hierarchy tree -->\n<div\n class=\"c8y-asset-selector__item\"\n [ngStyle]=\"{\n 'margin-left': level > 1 ? 16 + 'px' : '0'\n }\"\n *ngIf=\"view === 'tree'\"\n [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n [ngClass]=\"{\n 'c8y-asset-selector__item--more': node?.icon === 'plus',\n 'c8y-asset-selector__item--start': level === 0\n }\"\n>\n <div\n class=\"c8y-asset-selector__node\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n >\n <!-- expand button -->\n <div class=\"c8y-asset-selector__node__btn-spacer\">\n <button\n [title]=\"expandTitle\"\n class=\"collapse-btn btn-dot\"\n (click)=\"click()\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n [attr.aria-expanded]=\"node.open\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </button>\n </div>\n <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n <input\n id=\"nodeLabel\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <!-- group button -->\n <button\n class=\"c8y-asset-selector__btn text-truncate\"\n [attr.aria-expanded]=\"!node.open\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n (click)=\"click()\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate\"\n *ngIf=\"showPath\"\n >\n <small\n class=\"text-muted\"\n title=\"{{ breadcrumb }}\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n </p>\n <!-- up to here -->\n </span>\n </button>\n <!-- not a group button -->\n <button\n class=\"flex-grow\"\n title=\"{{ breadcrumb }}\"\n type=\"button\"\n *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n [ngClass]=\"{\n 'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n 'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n }\"\n (click)=\"selected(node)\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate text-muted small\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </p>\n <!-- up to here -->\n </span>\n </button>\n \n </div>\n <div\n class=\"collapse\"\n *ngIf=\"node.countChildren()\"\n [collapse]=\"!node.open\"\n [isAnimated]=\"true\"\n [attr.role]=\"'group'\"\n >\n <c8y-asset-selector-node\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [active]=\"active\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n <div\n class=\"miller-column__item bg-inherit\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n [ngClass]=\"{\n active: isActive(),\n 'miller-column__item--more': node.toString() === 'LoadMoreNode'\n }\"\n >\n <div\n class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n >\n <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n <input\n id=\"nodeLabel2\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel2\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <button\n title=\"{{ breadcrumb | translate }}\"\n type=\"button\"\n [ngClass]=\"{\n 'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n node.toString() === 'LoadMoreNode',\n 'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n 'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n }\"\n (click)=\"millerViewClick(node)\"\n >\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n ></i>\n <div class=\"text-left text-truncate\">\n <p\n class=\"text-truncate\"\n title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n >\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n </p>\n <!-- use just for search results to display the path -->\n <small\n class=\"text-muted text-truncate\"\n title=\"{{ breadcrumb }}\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n <!-- up to here -->\n </div>\n <span\n class=\"p-l-4 m-l-auto\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </span>\n </button>\n </div>\n\n <div\n role=\"list\"\n *ngIf=\"node\"\n [ngClass]=\"{ hidden: node !== rootNode }\"\n >\n <c8y-asset-selector-node\n role=\"listitem\"\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [view]=\"view\"\n [index]=\"index\"\n [active]=\"active\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
|
|
1086
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", handleNextMillerViewColumn: "handleNextMillerViewColumn", disabled: "disabled" }, outputs: { isLoadingState: "isLoadingState", onSelect: "onSelect", onDeselect: "onDeselect" }, ngImport: i0, template: "<!-- Hierarchy tree -->\n<div\n class=\"c8y-asset-selector__item\"\n [ngStyle]=\"{\n 'margin-left': level > 1 ? 16 + 'px' : '0'\n }\"\n *ngIf=\"view === 'tree'\"\n [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n [ngClass]=\"{\n 'c8y-asset-selector__item--more': node?.icon === 'plus',\n 'c8y-asset-selector__item--start': level === 0\n }\"\n>\n <div\n class=\"c8y-asset-selector__node\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n >\n <!-- expand button -->\n <div class=\"c8y-asset-selector__node__btn-spacer\">\n <button\n [title]=\"expandTitle\"\n class=\"collapse-btn btn-dot\"\n (click)=\"click()\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n [attr.aria-expanded]=\"node.open\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </button>\n </div>\n <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n <input\n id=\"nodeLabel\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <!-- group button -->\n <button\n class=\"c8y-asset-selector__btn text-truncate\"\n [attr.aria-expanded]=\"!node.open\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n (click)=\"click()\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate\"\n *ngIf=\"showPath\"\n >\n <small\n class=\"text-muted\"\n title=\"{{ breadcrumb }}\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n </p>\n <!-- up to here -->\n </span>\n </button>\n <!-- not a group button -->\n <button\n class=\"flex-grow\"\n title=\"{{ breadcrumb }}\"\n type=\"button\"\n *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n [ngClass]=\"{\n 'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n 'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n }\"\n (click)=\"selected(node)\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate text-muted small\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </p>\n <!-- up to here -->\n </span>\n </button>\n \n </div>\n <div\n class=\"collapse\"\n *ngIf=\"node.countChildren()\"\n [collapse]=\"!node.open\"\n [isAnimated]=\"true\"\n [attr.role]=\"'group'\"\n >\n <c8y-asset-selector-node\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [preselected]=\"preselected || []\"\n [disabled]=\"disabled\"\n [multi]=\"multi\"\n [active]=\"active\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n <div\n class=\"miller-column__item bg-inherit\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n [ngClass]=\"{\n active: isActive(),\n 'miller-column__item--more': node.toString() === 'LoadMoreNode'\n }\"\n >\n <div\n class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n >\n <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n <input\n id=\"nodeLabel2\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel2\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <button\n title=\"{{ breadcrumb | translate }}\"\n type=\"button\"\n [ngClass]=\"{\n 'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n node.toString() === 'LoadMoreNode',\n 'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n 'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n }\"\n (click)=\"millerViewClick(node)\"\n >\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n ></i>\n <div class=\"text-left text-truncate\">\n <p\n class=\"text-truncate\"\n title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n >\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n </p>\n <!-- use just for search results to display the path -->\n <small\n class=\"text-muted text-truncate\"\n title=\"{{ breadcrumb }}\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n <!-- up to here -->\n </div>\n <span\n class=\"p-l-4 m-l-auto\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </span>\n </button>\n </div>\n\n <div\n role=\"list\"\n *ngIf=\"node\"\n [ngClass]=\"{ hidden: node !== rootNode }\"\n >\n <c8y-asset-selector-node\n role=\"listitem\"\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [view]=\"view\"\n [index]=\"index\"\n [active]=\"active\"\n [disabled]=\"disabled\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
|
|
1086
1087
|
}
|
|
1087
1088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
|
|
1088
1089
|
type: Component,
|
|
1089
|
-
args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n class=\"c8y-asset-selector__item\"\n [ngStyle]=\"{\n 'margin-left': level > 1 ? 16 + 'px' : '0'\n }\"\n *ngIf=\"view === 'tree'\"\n [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n [ngClass]=\"{\n 'c8y-asset-selector__item--more': node?.icon === 'plus',\n 'c8y-asset-selector__item--start': level === 0\n }\"\n>\n <div\n class=\"c8y-asset-selector__node\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n >\n <!-- expand button -->\n <div class=\"c8y-asset-selector__node__btn-spacer\">\n <button\n [title]=\"expandTitle\"\n class=\"collapse-btn btn-dot\"\n (click)=\"click()\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n [attr.aria-expanded]=\"node.open\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </button>\n </div>\n <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n <input\n id=\"nodeLabel\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <!-- group button -->\n <button\n class=\"c8y-asset-selector__btn text-truncate\"\n [attr.aria-expanded]=\"!node.open\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n (click)=\"click()\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate\"\n *ngIf=\"showPath\"\n >\n <small\n class=\"text-muted\"\n title=\"{{ breadcrumb }}\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n </p>\n <!-- up to here -->\n </span>\n </button>\n <!-- not a group button -->\n <button\n class=\"flex-grow\"\n title=\"{{ breadcrumb }}\"\n type=\"button\"\n *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n [ngClass]=\"{\n 'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n 'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n }\"\n (click)=\"selected(node)\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate text-muted small\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </p>\n <!-- up to here -->\n </span>\n </button>\n \n </div>\n <div\n class=\"collapse\"\n *ngIf=\"node.countChildren()\"\n [collapse]=\"!node.open\"\n [isAnimated]=\"true\"\n [attr.role]=\"'group'\"\n >\n <c8y-asset-selector-node\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [active]=\"active\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n <div\n class=\"miller-column__item bg-inherit\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n [ngClass]=\"{\n active: isActive(),\n 'miller-column__item--more': node.toString() === 'LoadMoreNode'\n }\"\n >\n <div\n class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n >\n <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n <input\n id=\"nodeLabel2\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel2\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <button\n title=\"{{ breadcrumb | translate }}\"\n type=\"button\"\n [ngClass]=\"{\n 'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n node.toString() === 'LoadMoreNode',\n 'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n 'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n }\"\n (click)=\"millerViewClick(node)\"\n >\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n ></i>\n <div class=\"text-left text-truncate\">\n <p\n class=\"text-truncate\"\n title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n >\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n </p>\n <!-- use just for search results to display the path -->\n <small\n class=\"text-muted text-truncate\"\n title=\"{{ breadcrumb }}\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n <!-- up to here -->\n </div>\n <span\n class=\"p-l-4 m-l-auto\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </span>\n </button>\n </div>\n\n <div\n role=\"list\"\n *ngIf=\"node\"\n [ngClass]=\"{ hidden: node !== rootNode }\"\n >\n <c8y-asset-selector-node\n role=\"listitem\"\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [view]=\"view\"\n [index]=\"index\"\n [active]=\"active\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n" }]
|
|
1090
|
+
args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n class=\"c8y-asset-selector__item\"\n [ngStyle]=\"{\n 'margin-left': level > 1 ? 16 + 'px' : '0'\n }\"\n *ngIf=\"view === 'tree'\"\n [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n [ngClass]=\"{\n 'c8y-asset-selector__item--more': node?.icon === 'plus',\n 'c8y-asset-selector__item--start': level === 0\n }\"\n>\n <div\n class=\"c8y-asset-selector__node\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n >\n <!-- expand button -->\n <div class=\"c8y-asset-selector__node__btn-spacer\">\n <button\n [title]=\"expandTitle\"\n class=\"collapse-btn btn-dot\"\n (click)=\"click()\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n [attr.aria-expanded]=\"node.open\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </button>\n </div>\n <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n <input\n id=\"nodeLabel\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <!-- group button -->\n <button\n class=\"c8y-asset-selector__btn text-truncate\"\n [attr.aria-expanded]=\"!node.open\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n (click)=\"click()\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate\"\n *ngIf=\"showPath\"\n >\n <small\n class=\"text-muted\"\n title=\"{{ breadcrumb }}\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n </p>\n <!-- up to here -->\n </span>\n </button>\n <!-- not a group button -->\n <button\n class=\"flex-grow\"\n title=\"{{ breadcrumb }}\"\n type=\"button\"\n *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n [ngClass]=\"{\n 'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n 'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n }\"\n (click)=\"selected(node)\"\n >\n <i\n class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Smart group' | translate\"\n *ngIf=\"node.icon === 'c8y-group-smart'\"\n ></i>\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [title]=\"'Group' | translate\"\n *ngIf=\"node.icon !== 'c8y-group-smart'\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n ></i>\n <span title=\"{{ breadcrumb }}\">\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n <!-- use just for search results to display the path -->\n <p\n class=\"text-truncate text-muted small\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </p>\n <!-- up to here -->\n </span>\n </button>\n \n </div>\n <div\n class=\"collapse\"\n *ngIf=\"node.countChildren()\"\n [collapse]=\"!node.open\"\n [isAnimated]=\"true\"\n [attr.role]=\"'group'\"\n >\n <c8y-asset-selector-node\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [preselected]=\"preselected || []\"\n [disabled]=\"disabled\"\n [multi]=\"multi\"\n [active]=\"active\"\n [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n <div\n class=\"miller-column__item bg-inherit\"\n title=\"{{ breadcrumb | translate }}\"\n *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n [ngClass]=\"{\n active: isActive(),\n 'miller-column__item--more': node.toString() === 'LoadMoreNode'\n }\"\n >\n <div\n class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n >\n <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n <input\n id=\"nodeLabel2\"\n [type]=\"multi ? 'checkbox' : 'radio'\"\n (change)=\"selected(node)\"\n [checked]=\"isSelected()\"\n [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n />\n <span></span>\n <span\n class=\"sr-only\"\n for=\"nodeLabel2\"\n translate\n >\n Node label\n </span>\n </label>\n </div>\n\n <button\n title=\"{{ breadcrumb | translate }}\"\n type=\"button\"\n [ngClass]=\"{\n 'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n node.toString() === 'LoadMoreNode',\n 'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n 'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n }\"\n (click)=\"millerViewClick(node)\"\n >\n <i\n class=\"c8y-icon m-r-4\"\n [c8yIcon]=\"node.icon\"\n [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n ></i>\n <div class=\"text-left text-truncate\">\n <p\n class=\"text-truncate\"\n title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n >\n {{ node.translateLabel ? (node.label | translate) : node.label }}\n </p>\n <!-- use just for search results to display the path -->\n <small\n class=\"text-muted text-truncate\"\n title=\"{{ breadcrumb }}\"\n *ngIf=\"showPath\"\n >\n <em>{{ breadcrumb }}</em>\n </small>\n <!-- up to here -->\n </div>\n <span\n class=\"p-l-4 m-l-auto\"\n *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n >\n <i c8yIcon=\"angle-right\"></i>\n </span>\n </button>\n </div>\n\n <div\n role=\"list\"\n *ngIf=\"node\"\n [ngClass]=\"{ hidden: node !== rootNode }\"\n >\n <c8y-asset-selector-node\n role=\"listitem\"\n *ngFor=\"let childNode of node.children\"\n [node]=\"childNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"preselected || []\"\n [multi]=\"multi\"\n [view]=\"view\"\n [index]=\"index\"\n [active]=\"active\"\n [disabled]=\"disabled\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n (onSelect)=\"onSelect.emit($event)\"\n (onDeselect)=\"onDeselect.emit($event)\"\n ></c8y-asset-selector-node>\n </div>\n</div>\n" }]
|
|
1090
1091
|
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }], propDecorators: { node: [{
|
|
1091
1092
|
type: Input
|
|
1092
1093
|
}], rootNode: [{
|
|
@@ -1105,6 +1106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1105
1106
|
type: Input
|
|
1106
1107
|
}], handleNextMillerViewColumn: [{
|
|
1107
1108
|
type: Input
|
|
1109
|
+
}], disabled: [{
|
|
1110
|
+
type: Input
|
|
1108
1111
|
}], isLoadingState: [{
|
|
1109
1112
|
type: Output
|
|
1110
1113
|
}], onSelect: [{
|
|
@@ -1351,6 +1354,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
|
|
|
1351
1354
|
*/
|
|
1352
1355
|
this.selectedItems = [];
|
|
1353
1356
|
this.container = 'body';
|
|
1357
|
+
this.disabled = false;
|
|
1354
1358
|
/**
|
|
1355
1359
|
* Emits if one item was selected (all currently selected nodes).
|
|
1356
1360
|
*/
|
|
@@ -1588,7 +1592,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
|
|
|
1588
1592
|
}
|
|
1589
1593
|
}
|
|
1590
1594
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorComponent, deps: [{ token: GroupNodeService }, { token: i2.InventoryService }, { token: AssetSelectorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: { config: "config", active: "active", index: "index", asset: "asset", selectedDevice: "selectedDevice", selected: "selected", rootNode: "rootNode", selectedItems: "selectedItems", container: "container" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected", onRowSelected: "onRowSelected", onLoad: "onLoad" }, providers: [
|
|
1595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: { config: "config", active: "active", index: "index", asset: "asset", selectedDevice: "selectedDevice", selected: "selected", rootNode: "rootNode", selectedItems: "selectedItems", container: "container", disabled: "disabled" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected", onRowSelected: "onRowSelected", onLoad: "onLoad" }, providers: [
|
|
1592
1596
|
{
|
|
1593
1597
|
provide: NG_VALUE_ACCESSOR,
|
|
1594
1598
|
multi: true,
|
|
@@ -1599,7 +1603,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
|
|
|
1599
1603
|
useExisting: forwardRef(() => AssetSelectorComponent),
|
|
1600
1604
|
multi: true
|
|
1601
1605
|
}
|
|
1602
|
-
], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n #header\n [ngClass]=\"{\n 'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n 'miller-column__search': config.search,\n 'miller-column__multi': config.multi\n }\"\n *ngIf=\"\n !selectedDevice &&\n index === 0 &&\n (config.search || config.multi || config.label?.length || config.showSelected)\n \"\n>\n <p\n class=\"text-medium flex-no-shrink a-s-center\"\n [ngClass]=\"{\n 'm-b-4': config.search && root && config.singleColumn,\n 'm-r-8': !config.singleColumn && !config.search,\n 'fit-w': config.singleColumn\n }\"\n *ngIf=\"config.label?.length\"\n >\n {{ config.label | translate }}\n </p>\n <c8y-search-input\n [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n *ngIf=\"config.search && root\"\n (onClick)=\"onSearchResultClick($event)\"\n (reset)=\"onSearchResultReset($event)\"\n [mode]=\"'select'\"\n [container]=\"container\"\n [groupsOnly]=\"config.groupsOnly\"\n [ngClass]=\"{\n 'm-l-auto': !config.singleColumn && config.label.length,\n 'fit-w': config.singleColumn || !config.label.length\n }\"\n ></c8y-search-input>\n <div\n class=\"bg-inherit d-flex gap-4 fit-w\"\n *ngIf=\"config.showSelected\"\n [ngClass]=\"{ 'm-t-4': config.search }\"\n >\n <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n <ng-container *ngIf=\"!selected.length\">\n <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n </ng-container>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.name }}\"\n type=\"button\"\n (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n </span>\n </div>\n </div>\n</div>\n\n<div\n class=\"p-r-16\"\n *ngIf=\"selectedDevice\"\n>\n <div class=\"d-flex p-b-4\">\n <p\n class=\"text-medium p-t-8 m-r-8\"\n *ngIf=\"selectedDevice; else multiAssets\"\n >\n {{ 'Selected asset' | translate }}\n </p>\n <ng-template #multiAssets>\n <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n </ng-template>\n <button\n class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n title=\"{{ 'Change' | translate }}\"\n type=\"button\"\n (click)=\"clearSelectedDevices()\"\n >\n {{ 'Change' | translate }}\n </button>\n </div>\n <div class=\"d-flex\">\n <i\n class=\"text-success p-l-0 p-r-8\"\n [c8yIcon]=\"'check-circle'\"\n ></i>\n <i\n class=\"m-r-4 icon-20\"\n [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n ></i>\n <span>{{ selectedDevice.name }}</span>\n </div>\n</div>\n\n<!-- miller columns header -->\n<div\n class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n *ngIf=\"\n config.view === 'miller' &&\n ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n !selectedDevice\n \"\n [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n <p\n class=\"text-12 text-muted text-truncate m-b-4\"\n title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n *ngIf=\"config.singleColumn && index !== 0\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"home\"\n ></i>\n {{ rootNode.breadcrumb || rootNode.label | translate }}\n </p>\n <div\n class=\"d-flex a-i-center\"\n *ngIf=\"config.columnHeaders || config.singleColumn\"\n >\n <button\n class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n title=\"{{ 'Back' | translate }}\"\n type=\"button\"\n *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n (click)=\"back()\"\n >\n <i c8yIcon=\"angle-left\"></i>\n </button>\n <label\n class=\"c8y-radio checkbox-inline m-r-8\"\n *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n >\n <input\n title=\"{{ 'Select group' | translate }}\"\n type=\"radio\"\n (change)=\"select(rootNode.mo)\"\n [checked]=\"isGroupSelected()\"\n />\n <span></span>\n </label>\n\n <i\n class=\"icon-20 c8y-icon-duocolor m-r-4\"\n [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n ></i>\n <p\n class=\"text-truncate\"\n title=\"{{ rootNode.label | translate }}\"\n *ngIf=\"config.columnHeaders\"\n [ngClass]=\"{\n 'text-label-small': !config.singleColumn,\n 'text-medium': config.singleColumn\n }\"\n >\n {{ rootNode.label | translate }}\n </p>\n </div>\n\n <div\n *ngIf=\"!rootNode.root && config.showFilter\"\n [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n >\n <div class=\"input-group input-group-sm input-group-search\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n [(ngModel)]=\"filterText\"\n (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\"{{ 'Apply filter' | translate }}\"\n type=\"button\"\n (click)=\"applyFilter('*' + filterText + '*')\"\n >\n <i c8yIcon=\"filter\"></i>\n </button>\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\" {{ 'Clear filters' | translate }}\"\n type=\"button\"\n (click)=\"clearFilters()\"\n *ngIf=\"filterText.length\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n\n<c8y-asset-selector-node\n class=\"d-block bg-inherit p-relative\"\n style=\"z-index: 9\"\n *ngIf=\"rootNode && !selectedDevice\"\n [node]=\"rootNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"selected\"\n [multi]=\"config.multi\"\n [view]=\"config.view\"\n [index]=\"index\"\n [active]=\"active\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n (isLoadingState)=\"onLoading($event)\"\n (onSelect)=\"onSelect($event)\"\n (onDeselect)=\"onDeselect($event)\"\n [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.GetGroupIconPipe, name: "getGroupIcon" }] }); }
|
|
1606
|
+
], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n #header\n [ngClass]=\"{\n 'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n 'miller-column__search': config.search,\n 'miller-column__multi': config.multi\n }\"\n *ngIf=\"\n !selectedDevice &&\n index === 0 &&\n (config.search || config.multi || config.label?.length || config.showSelected)\n \"\n>\n <p\n class=\"text-medium flex-no-shrink a-s-center\"\n [ngClass]=\"{\n 'm-b-4': config.search && root && config.singleColumn,\n 'm-r-8': !config.singleColumn && !config.search,\n 'fit-w': config.singleColumn\n }\"\n *ngIf=\"config.label?.length\"\n >\n {{ config.label | translate }}\n </p>\n <c8y-search-input\n [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n *ngIf=\"config.search && root\"\n (onClick)=\"onSearchResultClick($event)\"\n (reset)=\"onSearchResultReset($event)\"\n [mode]=\"'select'\"\n [container]=\"container\"\n [groupsOnly]=\"config.groupsOnly\"\n [ngClass]=\"{\n 'm-l-auto': !config.singleColumn && config.label.length,\n 'fit-w': config.singleColumn || !config.label.length\n }\"\n ></c8y-search-input>\n <div\n class=\"bg-inherit d-flex gap-4 fit-w\"\n *ngIf=\"config.showSelected\"\n [ngClass]=\"{ 'm-t-4': config.search }\"\n >\n <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n <ng-container *ngIf=\"!selected.length\">\n <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n </ng-container>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.name }}\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n </span>\n </div>\n </div>\n</div>\n\n<div\n class=\"p-r-16\"\n *ngIf=\"selectedDevice\"\n>\n <div class=\"d-flex p-b-4\">\n <p\n class=\"text-medium p-t-8 m-r-8\"\n *ngIf=\"selectedDevice; else multiAssets\"\n >\n {{ 'Selected asset' | translate }}\n </p>\n <ng-template #multiAssets>\n <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n </ng-template>\n <button\n class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n title=\"{{ 'Change' | translate }}\"\n type=\"button\"\n (click)=\"clearSelectedDevices()\"\n >\n {{ 'Change' | translate }}\n </button>\n </div>\n <div class=\"d-flex\">\n <i\n class=\"text-success p-l-0 p-r-8\"\n [c8yIcon]=\"'check-circle'\"\n ></i>\n <i\n class=\"m-r-4 icon-20\"\n [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n ></i>\n <span>{{ selectedDevice.name }}</span>\n </div>\n</div>\n\n<!-- miller columns header -->\n<div\n class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n *ngIf=\"\n config.view === 'miller' &&\n ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n !selectedDevice\n \"\n [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n <p\n class=\"text-12 text-muted text-truncate m-b-4\"\n title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n *ngIf=\"config.singleColumn && index !== 0\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"home\"\n ></i>\n {{ rootNode.breadcrumb || rootNode.label | translate }}\n </p>\n <div\n class=\"d-flex a-i-center\"\n *ngIf=\"config.columnHeaders || config.singleColumn\"\n >\n <button\n class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n title=\"{{ 'Back' | translate }}\"\n type=\"button\"\n *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n (click)=\"back()\"\n >\n <i c8yIcon=\"angle-left\"></i>\n </button>\n <label\n class=\"c8y-radio checkbox-inline m-r-8\"\n *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n >\n <input\n title=\"{{ 'Select group' | translate }}\"\n type=\"radio\"\n (change)=\"select(rootNode.mo)\"\n [checked]=\"isGroupSelected()\"\n />\n <span></span>\n </label>\n\n <i\n class=\"icon-20 c8y-icon-duocolor m-r-4\"\n [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n ></i>\n <p\n class=\"text-truncate\"\n title=\"{{ rootNode.label | translate }}\"\n *ngIf=\"config.columnHeaders\"\n [ngClass]=\"{\n 'text-label-small': !config.singleColumn,\n 'text-medium': config.singleColumn\n }\"\n >\n {{ rootNode.label | translate }}\n </p>\n </div>\n\n <div\n *ngIf=\"!rootNode.root && config.showFilter\"\n [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n >\n <div class=\"input-group input-group-sm input-group-search\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n [(ngModel)]=\"filterText\"\n (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\"{{ 'Apply filter' | translate }}\"\n type=\"button\"\n (click)=\"applyFilter('*' + filterText + '*')\"\n >\n <i c8yIcon=\"filter\"></i>\n </button>\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\" {{ 'Clear filters' | translate }}\"\n type=\"button\"\n (click)=\"clearFilters()\"\n *ngIf=\"filterText.length\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n\n<c8y-asset-selector-node\n class=\"d-block bg-inherit p-relative\"\n style=\"z-index: 9\"\n *ngIf=\"rootNode && !selectedDevice\"\n [node]=\"rootNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"selected\"\n [multi]=\"config.multi\"\n [view]=\"config.view\"\n [index]=\"index\"\n [active]=\"active\"\n [disabled]=\"disabled\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n (isLoadingState)=\"onLoading($event)\"\n (onSelect)=\"onSelect($event)\"\n (onDeselect)=\"onDeselect($event)\"\n [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.GetGroupIconPipe, name: "getGroupIcon" }] }); }
|
|
1603
1607
|
}
|
|
1604
1608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorComponent, decorators: [{
|
|
1605
1609
|
type: Component,
|
|
@@ -1614,7 +1618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1614
1618
|
useExisting: forwardRef(() => AssetSelectorComponent),
|
|
1615
1619
|
multi: true
|
|
1616
1620
|
}
|
|
1617
|
-
], template: "<div\n class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n #header\n [ngClass]=\"{\n 'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n 'miller-column__search': config.search,\n 'miller-column__multi': config.multi\n }\"\n *ngIf=\"\n !selectedDevice &&\n index === 0 &&\n (config.search || config.multi || config.label?.length || config.showSelected)\n \"\n>\n <p\n class=\"text-medium flex-no-shrink a-s-center\"\n [ngClass]=\"{\n 'm-b-4': config.search && root && config.singleColumn,\n 'm-r-8': !config.singleColumn && !config.search,\n 'fit-w': config.singleColumn\n }\"\n *ngIf=\"config.label?.length\"\n >\n {{ config.label | translate }}\n </p>\n <c8y-search-input\n [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n *ngIf=\"config.search && root\"\n (onClick)=\"onSearchResultClick($event)\"\n (reset)=\"onSearchResultReset($event)\"\n [mode]=\"'select'\"\n [container]=\"container\"\n [groupsOnly]=\"config.groupsOnly\"\n [ngClass]=\"{\n 'm-l-auto': !config.singleColumn && config.label.length,\n 'fit-w': config.singleColumn || !config.label.length\n }\"\n ></c8y-search-input>\n <div\n class=\"bg-inherit d-flex gap-4 fit-w\"\n *ngIf=\"config.showSelected\"\n [ngClass]=\"{ 'm-t-4': config.search }\"\n >\n <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n <ng-container *ngIf=\"!selected.length\">\n <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n </ng-container>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.name }}\"\n type=\"button\"\n (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n </span>\n </div>\n </div>\n</div>\n\n<div\n class=\"p-r-16\"\n *ngIf=\"selectedDevice\"\n>\n <div class=\"d-flex p-b-4\">\n <p\n class=\"text-medium p-t-8 m-r-8\"\n *ngIf=\"selectedDevice; else multiAssets\"\n >\n {{ 'Selected asset' | translate }}\n </p>\n <ng-template #multiAssets>\n <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n </ng-template>\n <button\n class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n title=\"{{ 'Change' | translate }}\"\n type=\"button\"\n (click)=\"clearSelectedDevices()\"\n >\n {{ 'Change' | translate }}\n </button>\n </div>\n <div class=\"d-flex\">\n <i\n class=\"text-success p-l-0 p-r-8\"\n [c8yIcon]=\"'check-circle'\"\n ></i>\n <i\n class=\"m-r-4 icon-20\"\n [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n ></i>\n <span>{{ selectedDevice.name }}</span>\n </div>\n</div>\n\n<!-- miller columns header -->\n<div\n class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n *ngIf=\"\n config.view === 'miller' &&\n ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n !selectedDevice\n \"\n [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n <p\n class=\"text-12 text-muted text-truncate m-b-4\"\n title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n *ngIf=\"config.singleColumn && index !== 0\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"home\"\n ></i>\n {{ rootNode.breadcrumb || rootNode.label | translate }}\n </p>\n <div\n class=\"d-flex a-i-center\"\n *ngIf=\"config.columnHeaders || config.singleColumn\"\n >\n <button\n class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n title=\"{{ 'Back' | translate }}\"\n type=\"button\"\n *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n (click)=\"back()\"\n >\n <i c8yIcon=\"angle-left\"></i>\n </button>\n <label\n class=\"c8y-radio checkbox-inline m-r-8\"\n *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n >\n <input\n title=\"{{ 'Select group' | translate }}\"\n type=\"radio\"\n (change)=\"select(rootNode.mo)\"\n [checked]=\"isGroupSelected()\"\n />\n <span></span>\n </label>\n\n <i\n class=\"icon-20 c8y-icon-duocolor m-r-4\"\n [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n ></i>\n <p\n class=\"text-truncate\"\n title=\"{{ rootNode.label | translate }}\"\n *ngIf=\"config.columnHeaders\"\n [ngClass]=\"{\n 'text-label-small': !config.singleColumn,\n 'text-medium': config.singleColumn\n }\"\n >\n {{ rootNode.label | translate }}\n </p>\n </div>\n\n <div\n *ngIf=\"!rootNode.root && config.showFilter\"\n [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n >\n <div class=\"input-group input-group-sm input-group-search\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n [(ngModel)]=\"filterText\"\n (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\"{{ 'Apply filter' | translate }}\"\n type=\"button\"\n (click)=\"applyFilter('*' + filterText + '*')\"\n >\n <i c8yIcon=\"filter\"></i>\n </button>\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\" {{ 'Clear filters' | translate }}\"\n type=\"button\"\n (click)=\"clearFilters()\"\n *ngIf=\"filterText.length\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n\n<c8y-asset-selector-node\n class=\"d-block bg-inherit p-relative\"\n style=\"z-index: 9\"\n *ngIf=\"rootNode && !selectedDevice\"\n [node]=\"rootNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"selected\"\n [multi]=\"config.multi\"\n [view]=\"config.view\"\n [index]=\"index\"\n [active]=\"active\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n (isLoadingState)=\"onLoading($event)\"\n (onSelect)=\"onSelect($event)\"\n (onDeselect)=\"onDeselect($event)\"\n [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n" }]
|
|
1621
|
+
], template: "<div\n class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n #header\n [ngClass]=\"{\n 'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n 'miller-column__search': config.search,\n 'miller-column__multi': config.multi\n }\"\n *ngIf=\"\n !selectedDevice &&\n index === 0 &&\n (config.search || config.multi || config.label?.length || config.showSelected)\n \"\n>\n <p\n class=\"text-medium flex-no-shrink a-s-center\"\n [ngClass]=\"{\n 'm-b-4': config.search && root && config.singleColumn,\n 'm-r-8': !config.singleColumn && !config.search,\n 'fit-w': config.singleColumn\n }\"\n *ngIf=\"config.label?.length\"\n >\n {{ config.label | translate }}\n </p>\n <c8y-search-input\n [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n *ngIf=\"config.search && root\"\n (onClick)=\"onSearchResultClick($event)\"\n (reset)=\"onSearchResultReset($event)\"\n [mode]=\"'select'\"\n [container]=\"container\"\n [groupsOnly]=\"config.groupsOnly\"\n [ngClass]=\"{\n 'm-l-auto': !config.singleColumn && config.label.length,\n 'fit-w': config.singleColumn || !config.label.length\n }\"\n ></c8y-search-input>\n <div\n class=\"bg-inherit d-flex gap-4 fit-w\"\n *ngIf=\"config.showSelected\"\n [ngClass]=\"{ 'm-t-4': config.search }\"\n >\n <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n <ng-container *ngIf=\"!selected.length\">\n <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n </ng-container>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.name }}\"\n [disabled]=\"disabled\"\n type=\"button\"\n (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n </span>\n </div>\n </div>\n</div>\n\n<div\n class=\"p-r-16\"\n *ngIf=\"selectedDevice\"\n>\n <div class=\"d-flex p-b-4\">\n <p\n class=\"text-medium p-t-8 m-r-8\"\n *ngIf=\"selectedDevice; else multiAssets\"\n >\n {{ 'Selected asset' | translate }}\n </p>\n <ng-template #multiAssets>\n <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n </ng-template>\n <button\n class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n title=\"{{ 'Change' | translate }}\"\n type=\"button\"\n (click)=\"clearSelectedDevices()\"\n >\n {{ 'Change' | translate }}\n </button>\n </div>\n <div class=\"d-flex\">\n <i\n class=\"text-success p-l-0 p-r-8\"\n [c8yIcon]=\"'check-circle'\"\n ></i>\n <i\n class=\"m-r-4 icon-20\"\n [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n ></i>\n <span>{{ selectedDevice.name }}</span>\n </div>\n</div>\n\n<!-- miller columns header -->\n<div\n class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n *ngIf=\"\n config.view === 'miller' &&\n ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n !selectedDevice\n \"\n [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n <p\n class=\"text-12 text-muted text-truncate m-b-4\"\n title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n *ngIf=\"config.singleColumn && index !== 0\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"home\"\n ></i>\n {{ rootNode.breadcrumb || rootNode.label | translate }}\n </p>\n <div\n class=\"d-flex a-i-center\"\n *ngIf=\"config.columnHeaders || config.singleColumn\"\n >\n <button\n class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n title=\"{{ 'Back' | translate }}\"\n type=\"button\"\n *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n (click)=\"back()\"\n >\n <i c8yIcon=\"angle-left\"></i>\n </button>\n <label\n class=\"c8y-radio checkbox-inline m-r-8\"\n *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n >\n <input\n title=\"{{ 'Select group' | translate }}\"\n type=\"radio\"\n (change)=\"select(rootNode.mo)\"\n [checked]=\"isGroupSelected()\"\n />\n <span></span>\n </label>\n\n <i\n class=\"icon-20 c8y-icon-duocolor m-r-4\"\n [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n ></i>\n <p\n class=\"text-truncate\"\n title=\"{{ rootNode.label | translate }}\"\n *ngIf=\"config.columnHeaders\"\n [ngClass]=\"{\n 'text-label-small': !config.singleColumn,\n 'text-medium': config.singleColumn\n }\"\n >\n {{ rootNode.label | translate }}\n </p>\n </div>\n\n <div\n *ngIf=\"!rootNode.root && config.showFilter\"\n [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n >\n <div class=\"input-group input-group-sm input-group-search\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n [(ngModel)]=\"filterText\"\n (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\"{{ 'Apply filter' | translate }}\"\n type=\"button\"\n (click)=\"applyFilter('*' + filterText + '*')\"\n >\n <i c8yIcon=\"filter\"></i>\n </button>\n <button\n class=\"btn btn-dot p-r-8 p-l-4\"\n title=\" {{ 'Clear filters' | translate }}\"\n type=\"button\"\n (click)=\"clearFilters()\"\n *ngIf=\"filterText.length\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n </span>\n </div>\n </div>\n</div>\n\n<c8y-asset-selector-node\n class=\"d-block bg-inherit p-relative\"\n style=\"z-index: 9\"\n *ngIf=\"rootNode && !selectedDevice\"\n [node]=\"rootNode\"\n [rootNode]=\"rootNode\"\n [preselected]=\"selected\"\n [multi]=\"config.multi\"\n [view]=\"config.view\"\n [index]=\"index\"\n [active]=\"active\"\n [disabled]=\"disabled\"\n [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n (isLoadingState)=\"onLoading($event)\"\n (onSelect)=\"onSelect($event)\"\n (onDeselect)=\"onDeselect($event)\"\n [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n" }]
|
|
1618
1622
|
}], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
1619
1623
|
type: Input
|
|
1620
1624
|
}], active: [{
|
|
@@ -1633,6 +1637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1633
1637
|
type: Input
|
|
1634
1638
|
}], container: [{
|
|
1635
1639
|
type: Input
|
|
1640
|
+
}], disabled: [{
|
|
1641
|
+
type: Input
|
|
1636
1642
|
}], onSelected: [{
|
|
1637
1643
|
type: Output
|
|
1638
1644
|
}], onClearSelected: [{
|
|
@@ -1795,7 +1801,7 @@ class MillerViewComponent extends AssetSelectorBase {
|
|
|
1795
1801
|
useExisting: forwardRef(() => MillerViewComponent),
|
|
1796
1802
|
multi: true
|
|
1797
1803
|
}
|
|
1798
|
-
], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }, { propertyName: "assetSelectors", predicate: AssetSelectorComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"miller-view-wrapper {{ config.label }}\"\n [ngStyle]=\"{\n 'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n }\"\n #millerViewWrapper\n [ngClass]=\"{\n 'single-column': config.singleColumn,\n }\"\n>\n <div\n class=\"miller-column bg-inherit\"\n *ngFor=\"let column of columns; index as i\"\n >\n <c8y-asset-selector\n class=\"bg-inherit\"\n #assetSelector\n [config]=\"config\"\n [index]=\"i\"\n [active]=\"columns[i + 1]\"\n [rootNode]=\"column\"\n [selected]=\"selected || []\"\n [selectedDevice]=\"selectedDevice\"\n (onSelected)=\"onSelectionChange($event)\"\n (onClearSelected)=\"onClearSelected.emit()\"\n (onRowSelected)=\"addNewColumn($event)\"\n (onLoad)=\"onLoad($event)\"\n [container]=\"container\"\n ></c8y-asset-selector>\n <div\n class=\"p-relative p-b-64\"\n *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n >\n <c8y-loading></c8y-loading>\n </div>\n\n <div\n class=\"p-l-8 p-r-8\"\n *ngIf=\"!column.children.length && !isLoading\"\n >\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'The selected asset has no children.' | translate\"\n *ngIf=\"!filterText; else noSearchResults\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n <ng-template #noSearchResults>\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No results to display for the current filter.' | translate\"\n [subtitle]=\"'There are no assets matching the filter.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </ng-template>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
1804
|
+
], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }, { propertyName: "assetSelectors", predicate: AssetSelectorComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"miller-view-wrapper {{ config.label }}\"\n [ngStyle]=\"{\n 'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n }\"\n #millerViewWrapper\n [ngClass]=\"{\n 'single-column': config.singleColumn,\n }\"\n>\n <div\n class=\"miller-column bg-inherit\"\n *ngFor=\"let column of columns; index as i\"\n >\n <c8y-asset-selector\n class=\"bg-inherit\"\n #assetSelector\n [config]=\"config\"\n [index]=\"i\"\n [active]=\"columns[i + 1]\"\n [rootNode]=\"column\"\n [selected]=\"selected || []\"\n [selectedDevice]=\"selectedDevice\"\n (onSelected)=\"onSelectionChange($event)\"\n (onClearSelected)=\"onClearSelected.emit()\"\n (onRowSelected)=\"addNewColumn($event)\"\n (onLoad)=\"onLoad($event)\"\n [container]=\"container\"\n ></c8y-asset-selector>\n <div\n class=\"p-relative p-b-64\"\n *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n >\n <c8y-loading></c8y-loading>\n </div>\n\n <div\n class=\"p-l-8 p-r-8\"\n *ngIf=\"!column.children.length && !isLoading\"\n >\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No results to display.' | translate\"\n [subtitle]=\"'The selected asset has no children.' | translate\"\n *ngIf=\"!filterText; else noSearchResults\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n <ng-template #noSearchResults>\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No results to display for the current filter.' | translate\"\n [subtitle]=\"'There are no assets matching the filter.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </ng-template>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
1799
1805
|
}
|
|
1800
1806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MillerViewComponent, decorators: [{
|
|
1801
1807
|
type: Component,
|