npm - @c8y/ngx-components - Versions diffs - 1022.10.1 → 1022.16.2 - Mend

@c8y/ngx-components 1022.10.1 → 1022.16.2

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.

Files changed (1047) hide show

package/fesm2022/c8y-ngx-components-operations-operations-timeline.mjs CHANGED Viewed

@@ -1,16 +1,13 @@
 import * as i0 from '@angular/core';
 import { Input, Component, NgModule } from '@angular/core';
 import * as i1 from '@c8y/ngx-components';
-import { CoreModule } from '@c8y/ngx-components';
+import { EmptyStateComponent, ListGroupComponent, ForOfDirective, ListItemTimelineComponent, ListItemComponent, ListItemIconComponent, IconDirective, ListItemBodyComponent, ListItemCollapseComponent, C8yTranslateDirective, DatePipe, C8yTranslatePipe, HumanizePipe } from '@c8y/ngx-components';
 import * as i2 from '@c8y/ngx-components/operations/shared';
-import { OPERATION_STATUS_OPTIONS_MAP, OperationsSharedModule } from '@c8y/ngx-components/operations/shared';
+import { OPERATION_STATUS_OPTIONS_MAP } from '@c8y/ngx-components/operations/shared';
 import { pipe } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { TooltipDirective } from 'ngx-bootstrap/tooltip';
+import { NgClass, NgIf, NgTemplateOutlet, NgFor, JsonPipe, KeyValuePipe } from '@angular/common';
 class OperationsTimelineComponent {
     constructor(realtime, operationsService) {
@@ -22,11 +19,32 @@ class OperationsTimelineComponent {
         this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineComponent, deps: [{ token: i1.OperationRealtimeService }, { token: i2.OperationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OperationsTimelineComponent, isStandalone: false, selector: "c8y-operations-timeline", inputs: { operations: "operations", sourceId: "sourceId", filterPipe: "filterPipe", bodyTemplate: "bodyTemplate", footerTemplates: "footerTemplates", propertiesToHide: "propertiesToHide" }, ngImport: i0, template: "<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No recent operations found.' | translate\"\n  ng-if=\"!operations?.data || !operations?.data?.length\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let op of operations;\n      pipe: filterPipe;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId }\n    \"\n  >\n    {{ op.creationTime | date: 'medium' }}\n    <c8y-li\n      #li\n      (click)=\"li.toggleCollapsed()\"\n    >\n      <c8y-li-icon>\n        <i\n          [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n          [tooltip]=\"op.status | translate\"\n          container=\"body\"\n          [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n          [delay]=\"500\"\n        ></i>\n      </c8y-li-icon>\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div>\n            {{ op.status | translate }}\n            <br class=\"visible-xs visible-sm\" />\n            <ng-container\n              *ngIf=\"bodyTemplate; else defaultBody\"\n              [ngTemplateOutlet]=\"bodyTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: op }\"\n            ></ng-container>\n            <ng-template #defaultBody>\n              <small>{{ op.description }}</small>\n            </ng-template>\n          </div>\n          <div\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"op.status === 'PENDING'\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Cancel operation' | translate\"\n              tooltip=\"{{ 'Cancel operation' | translate }}\"\n              placement=\"left\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n        <ul class=\"list-unstyled small\">\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let prop of operationsService.getStandardKeys(op) | keyvalue\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ prop.value | translate }}\n            </label>\n            <span class=\"m-l-auto text-break-word\">\n              {{ op[prop.key] | translate }}\n            </span>\n          </li>\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ key | humanize | translate }}\n            </label>\n            <span class=\"m-l-auto text-code\">\n              {{ op[key] | json }}\n            </span>\n          </li>\n        </ul>\n        <ng-container\n          *ngFor=\"let footer of footerTemplates\"\n          [ngTemplateOutlet]=\"footer\"\n          [ngTemplateOutletContext]=\"{ $implicit: op }\"\n        ></ng-container>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OperationsTimelineComponent, isStandalone: true, selector: "c8y-operations-timeline", inputs: { operations: "operations", sourceId: "sourceId", filterPipe: "filterPipe", bodyTemplate: "bodyTemplate", footerTemplates: "footerTemplates", propertiesToHide: "propertiesToHide" }, ngImport: i0, template: "<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No recent operations found.' | translate\"\n  *ngIf=\"!operations?.data || !operations?.data?.length\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let op of operations;\n      pipe: filterPipe;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId }\n    \"\n  >\n    {{ op.creationTime | c8yDate: 'medium' }}\n    <c8y-li\n      #li\n      (click)=\"li.toggleCollapsed()\"\n    >\n      <c8y-li-icon>\n        <i\n          [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n          [tooltip]=\"op.status | translate\"\n          container=\"body\"\n          [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n          [delay]=\"500\"\n        ></i>\n      </c8y-li-icon>\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div>\n            {{ op.status | translate }}\n            <br class=\"visible-xs visible-sm\" />\n            <ng-container\n              *ngIf=\"bodyTemplate; else defaultBody\"\n              [ngTemplateOutlet]=\"bodyTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: op }\"\n            ></ng-container>\n            <ng-template #defaultBody>\n              <small>{{ op.description }}</small>\n            </ng-template>\n          </div>\n          <div\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"op.status === 'PENDING'\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Cancel operation' | translate\"\n              tooltip=\"{{ 'Cancel operation' | translate }}\"\n              placement=\"left\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n        <ul class=\"list-unstyled small\">\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let prop of operationsService.getStandardKeys(op) | keyvalue\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ prop.value | translate }}\n            </label>\n            <span class=\"m-l-auto text-break-word\">\n              {{ op[prop.key] | translate }}\n            </span>\n          </li>\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ key | humanize | translate }}\n            </label>\n            <span class=\"m-l-auto text-code\">\n              {{ op[key] | json }}\n            </span>\n          </li>\n        </ul>\n        <ng-container\n          *ngFor=\"let footer of footerTemplates\"\n          [ngTemplateOutlet]=\"footer\"\n          [ngTemplateOutletContext]=\"{ $implicit: op }\"\n        ></ng-container>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-operations-timeline', standalone: false, template: "<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No recent operations found.' | translate\"\n  ng-if=\"!operations?.data || !operations?.data?.length\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let op of operations;\n      pipe: filterPipe;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId }\n    \"\n  >\n    {{ op.creationTime | date: 'medium' }}\n    <c8y-li\n      #li\n      (click)=\"li.toggleCollapsed()\"\n    >\n      <c8y-li-icon>\n        <i\n          [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n          [tooltip]=\"op.status | translate\"\n          container=\"body\"\n          [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n          [delay]=\"500\"\n        ></i>\n      </c8y-li-icon>\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div>\n            {{ op.status | translate }}\n            <br class=\"visible-xs visible-sm\" />\n            <ng-container\n              *ngIf=\"bodyTemplate; else defaultBody\"\n              [ngTemplateOutlet]=\"bodyTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: op }\"\n            ></ng-container>\n            <ng-template #defaultBody>\n              <small>{{ op.description }}</small>\n            </ng-template>\n          </div>\n          <div\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"op.status === 'PENDING'\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Cancel operation' | translate\"\n              tooltip=\"{{ 'Cancel operation' | translate }}\"\n              placement=\"left\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n        <ul class=\"list-unstyled small\">\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let prop of operationsService.getStandardKeys(op) | keyvalue\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ prop.value | translate }}\n            </label>\n            <span class=\"m-l-auto text-break-word\">\n              {{ op[prop.key] | translate }}\n            </span>\n          </li>\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ key | humanize | translate }}\n            </label>\n            <span class=\"m-l-auto text-code\">\n              {{ op[key] | json }}\n            </span>\n          </li>\n        </ul>\n        <ng-container\n          *ngFor=\"let footer of footerTemplates\"\n          [ngTemplateOutlet]=\"footer\"\n          [ngTemplateOutletContext]=\"{ $implicit: op }\"\n        ></ng-container>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n" }]
+            args: [{ selector: 'c8y-operations-timeline', imports: [
+                        EmptyStateComponent,
+                        ListGroupComponent,
+                        ForOfDirective,
+                        ListItemTimelineComponent,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        IconDirective,
+                        TooltipDirective,
+                        NgClass,
+                        ListItemBodyComponent,
+                        NgIf,
+                        NgTemplateOutlet,
+                        ListItemCollapseComponent,
+                        C8yTranslateDirective,
+                        NgFor,
+                        JsonPipe,
+                        DatePipe,
+                        KeyValuePipe,
+                        C8yTranslatePipe,
+                        HumanizePipe
+                    ], template: "<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No recent operations found.' | translate\"\n  *ngIf=\"!operations?.data || !operations?.data?.length\"\n  [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let op of operations;\n      pipe: filterPipe;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId }\n    \"\n  >\n    {{ op.creationTime | c8yDate: 'medium' }}\n    <c8y-li\n      #li\n      (click)=\"li.toggleCollapsed()\"\n    >\n      <c8y-li-icon>\n        <i\n          [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n          [tooltip]=\"op.status | translate\"\n          container=\"body\"\n          [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n          [delay]=\"500\"\n        ></i>\n      </c8y-li-icon>\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div>\n            {{ op.status | translate }}\n            <br class=\"visible-xs visible-sm\" />\n            <ng-container\n              *ngIf=\"bodyTemplate; else defaultBody\"\n              [ngTemplateOutlet]=\"bodyTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: op }\"\n            ></ng-container>\n            <ng-template #defaultBody>\n              <small>{{ op.description }}</small>\n            </ng-template>\n          </div>\n          <div\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"op.status === 'PENDING'\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Cancel operation' | translate\"\n              tooltip=\"{{ 'Cancel operation' | translate }}\"\n              placement=\"left\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n        <ul class=\"list-unstyled small\">\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let prop of operationsService.getStandardKeys(op) | keyvalue\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ prop.value | translate }}\n            </label>\n            <span class=\"m-l-auto text-break-word\">\n              {{ op[prop.key] | translate }}\n            </span>\n          </li>\n          <li\n            class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n            *ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n          >\n            <label class=\"small m-b-0 m-r-8 a-s-start\">\n              {{ key | humanize | translate }}\n            </label>\n            <span class=\"m-l-auto text-code\">\n              {{ op[key] | json }}\n            </span>\n          </li>\n        </ul>\n        <ng-container\n          *ngFor=\"let footer of footerTemplates\"\n          [ngTemplateOutlet]=\"footer\"\n          [ngTemplateOutletContext]=\"{ $implicit: op }\"\n        ></ng-container>\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n" }]
         }], ctorParameters: () => [{ type: i1.OperationRealtimeService }, { type: i2.OperationsService }], propDecorators: { operations: [{
                 type: Input
             }], sourceId: [{
@@ -41,16 +59,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
+/**
+ * @deprecated Use `OperationsTimelineComponent` as a standalone component instead.
+ */
 class OperationsTimelineModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, declarations: [OperationsTimelineComponent], imports: [CommonModule, CoreModule, CollapseModule, TooltipModule, OperationsSharedModule], exports: [OperationsTimelineComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, imports: [CommonModule, CoreModule, CollapseModule, TooltipModule, OperationsSharedModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, imports: [OperationsTimelineComponent], exports: [OperationsTimelineComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, imports: [OperationsTimelineComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsTimelineModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, CoreModule, CollapseModule, TooltipModule, OperationsSharedModule],
-                    declarations: [OperationsTimelineComponent],
+                    imports: [OperationsTimelineComponent],
                     exports: [OperationsTimelineComponent]
                 }]
         }] });

package/fesm2022/c8y-ngx-components-operations-operations-timeline.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-operations-operations-timeline.mjs","sources":["../../operations/operations-timeline/operations-timeline.component.ts","../../operations/operations-timeline/operations-timeline.component.html","../../operations/operations-timeline/operations-timeline.module.ts","../../operations/operations-timeline/c8y-ngx-components-operations-operations-timeline.ts"],"sourcesContent":["import { Component, Input, TemplateRef } from '@angular/core';\nimport { IOperation, IResultList } from '@c8y/client';\nimport { ForOfFilterPipe, OperationRealtimeService } from '@c8y/ngx-components';\nimport {\n OperationsService,\n OperationStatusOptionsMapShared,\n OPERATION_STATUS_OPTIONS_MAP\n} from '@c8y/ngx-components/operations/shared';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\n\n@Component({\n selector: 'c8y-operations-timeline',\n templateUrl: 'operations-timeline.component.html',\n standalone: false\n})\nexport class OperationsTimelineComponent {\n @Input()\n operations: IResultList<IOperation>;\n\n @Input()\n sourceId: string;\n\n @Input()\n filterPipe: ForOfFilterPipe<IOperation> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<any>;\n\n @Input()\n footerTemplates: Array<TemplateRef<any>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n OPERATION_STATUS_OPTIONS_MAP: OperationStatusOptionsMapShared = OPERATION_STATUS_OPTIONS_MAP;\n\n constructor(\n public realtime: OperationRealtimeService,\n public operationsService: OperationsService\n ) {}\n}\n","<c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' \| translate\"\n ng-if=\"!operations?.data \|\| !operations?.data?.length\"\n [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n <c8y-li-timeline\n c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime \| date: 'medium' }}\n <c8y-li\n #li\n (click)=\"li.toggleCollapsed()\"\n >\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status \| translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status \| translate }}\n <br class=\"visible-xs visible-sm\" />\n <ng-container\n ngIf=\"bodyTemplate; else defaultBody\"\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n <ng-template #defaultBody>\n <small>{{ op.description }}</small>\n </ng-template>\n </div>\n <div\n class=\"m-l-auto showOnHover\"\n ngIf=\"op.status === 'PENDING'\"\n >\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' \| translate\"\n tooltip=\"{{ 'Cancel operation' \| translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n <ul class=\"list-unstyled small\">\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n ngFor=\"let prop of operationsService.getStandardKeys(op) \| keyvalue\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value \| translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] \| translate }}\n </span>\n </li>\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key \| humanize \| translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] \| json }}\n </span>\n </li>\n </ul>\n <ng-container\n ngFor=\"let footer of footerTemplates\"\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { OperationsSharedModule } from '@c8y/ngx-components/operations/shared';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { OperationsTimelineComponent } from './operations-timeline.component';\n\n@NgModule({\n imports: [CommonModule, CoreModule, CollapseModule, TooltipModule, OperationsSharedModule],\n declarations: [OperationsTimelineComponent],\n exports: [OperationsTimelineComponent]\n})\nexport class OperationsTimelineModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"c8y-ngx-components-operations-operations-timeline.mjs","sources":["../../operations/operations-timeline/operations-timeline.component.ts","../../operations/operations-timeline/operations-timeline.component.html","../../operations/operations-timeline/operations-timeline.module.ts","../../operations/operations-timeline/c8y-ngx-components-operations-operations-timeline.ts"],"sourcesContent":["import { Component, Input, TemplateRef } from '@angular/core';\nimport { IOperation, IResultList } from '@c8y/client';\nimport {\n ForOfFilterPipe,\n OperationRealtimeService,\n EmptyStateComponent,\n ListGroupComponent,\n ForOfDirective,\n ListItemTimelineComponent,\n ListItemComponent,\n ListItemIconComponent,\n IconDirective,\n ListItemBodyComponent,\n ListItemCollapseComponent,\n C8yTranslateDirective,\n C8yTranslatePipe,\n DatePipe,\n HumanizePipe\n} from '@c8y/ngx-components';\nimport {\n OPERATION_STATUS_OPTIONS_MAP,\n OperationsService,\n OperationStatusOptionsMapShared\n} from '@c8y/ngx-components/operations/shared';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\nimport { TooltipDirective } from 'ngx-bootstrap/tooltip';\nimport { NgClass, NgIf, NgTemplateOutlet, NgFor, JsonPipe, KeyValuePipe } from '@angular/common';\n\n@Component({\n selector: 'c8y-operations-timeline',\n templateUrl: 'operations-timeline.component.html',\n imports: [\n EmptyStateComponent,\n ListGroupComponent,\n ForOfDirective,\n ListItemTimelineComponent,\n ListItemComponent,\n ListItemIconComponent,\n IconDirective,\n TooltipDirective,\n NgClass,\n ListItemBodyComponent,\n NgIf,\n NgTemplateOutlet,\n ListItemCollapseComponent,\n C8yTranslateDirective,\n NgFor,\n JsonPipe,\n DatePipe,\n KeyValuePipe,\n C8yTranslatePipe,\n HumanizePipe\n ]\n})\nexport class OperationsTimelineComponent<B, F> {\n @Input()\n operations: IResultList<IOperation>;\n\n @Input()\n sourceId: string;\n\n @Input()\n filterPipe: ForOfFilterPipe<IOperation> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<B>;\n\n @Input()\n footerTemplates: Array<TemplateRef<F>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n OPERATION_STATUS_OPTIONS_MAP: OperationStatusOptionsMapShared = OPERATION_STATUS_OPTIONS_MAP;\n\n constructor(\n public realtime: OperationRealtimeService,\n public operationsService: OperationsService\n ) {}\n}\n","<c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' \| translate\"\n ngIf=\"!operations?.data \|\| !operations?.data?.length\"\n [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n <c8y-li-timeline\n c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime \| c8yDate: 'medium' }}\n <c8y-li\n #li\n (click)=\"li.toggleCollapsed()\"\n >\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status \| translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status \| translate }}\n <br class=\"visible-xs visible-sm\" />\n <ng-container\n ngIf=\"bodyTemplate; else defaultBody\"\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n <ng-template #defaultBody>\n <small>{{ op.description }}</small>\n </ng-template>\n </div>\n <div\n class=\"m-l-auto showOnHover\"\n ngIf=\"op.status === 'PENDING'\"\n >\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' \| translate\"\n tooltip=\"{{ 'Cancel operation' \| translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n <ul class=\"list-unstyled small\">\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n ngFor=\"let prop of operationsService.getStandardKeys(op) \| keyvalue\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value \| translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] \| translate }}\n </span>\n </li>\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key \| humanize \| translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] \| json }}\n </span>\n </li>\n </ul>\n <ng-container\n ngFor=\"let footer of footerTemplates\"\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n","import { NgModule } from '@angular/core';\nimport { OperationsTimelineComponent } from './operations-timeline.component';\n\n/\n @deprecated Use `OperationsTimelineComponent` as a standalone component instead.\n /\n@NgModule({\n imports: [OperationsTimelineComponent],\n exports: [OperationsTimelineComponent]\n})\nexport class OperationsTimelineModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-operations-status-filter.mjs CHANGED Viewed

@@ -1,13 +1,10 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, forwardRef, Output, HostBinding, Input, Component, NgModule } from '@angular/core';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i3 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i1 from '@c8y/ngx-components';
-import { PRODUCT_EXPERIENCE_EVENT_SOURCE, CoreModule } from '@c8y/ngx-components';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { IconDirective, ProductExperienceDirective, C8yTranslatePipe, PRODUCT_EXPERIENCE_EVENT_SOURCE } from '@c8y/ngx-components';
 import { ACTIONS_OPERATIONS } from '@c8y/ngx-components/operations/product-experience';
-import * as i2 from '@angular/common';
+import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective } from 'ngx-bootstrap/dropdown';
+import { NgFor, NgIf, NgClass } from '@angular/common';
 class StatusFilterComponent {
     constructor() {
@@ -95,12 +92,12 @@ class StatusFilterComponent {
         this.onFilterChanged.emit(this.statusOptions.filter(option => option.selected).map(option => option.option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusFilterComponent, isStandalone: false, selector: "c8y-status-filter", inputs: { options: "options", _multiple: ["multiple", "_multiple"], _small: ["small", "_small"] }, outputs: { onFilterChanged: "onFilterChanged" }, host: { properties: { "class.btn-group-sm": "this.displaySmall" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusFilterComponent, isStandalone: true, selector: "c8y-status-filter", inputs: { options: "options", _multiple: ["multiple", "_multiple"], _small: ["small", "_small"] }, outputs: { onFilterChanged: "onFilterChanged" }, host: { properties: { "class.btn-group-sm": "this.displaySmall" } }, providers: [
             {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => StatusFilterComponent)
             }
-        ], ngImport: i0, template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n  <button\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    type=\"button\"\n    title=\"{{ 'Status filter' | translate }}\"\n    dropdownToggle\n  >\n    <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n      <span class=\"text-truncate\" *ngIf=\"option.selected\">\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </span>\n    </span>\n    <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n      <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n      {{ 'All statuses' | translate }}\n    </span>\n  </button>\n  <ul\n    id=\"dropdown-status-filter\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"status-filter\"\n  >\n    <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n      <button\n        type=\"button\"\n        [title]=\"option.option.label | translate\"\n        (click)=\"changeFilter(option)\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status',\n          filterValue: option.option.label\n        }\"\n      >\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </button>\n    </li>\n    <li [ngClass]=\"{ active: isAllButtonSelected }\">\n      <button\n        type=\"button\"\n        title=\"{{ 'All statuses' | translate }}\"\n        (click)=\"removeFilter()\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status'\n        }\"\n      >\n        <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n        {{ 'All statuses' | translate }}\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n  <button\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    type=\"button\"\n    title=\"{{ 'Status filter' | translate }}\"\n    dropdownToggle\n  >\n    <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n      <span class=\"text-truncate\" *ngIf=\"option.selected\">\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </span>\n    </span>\n    <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n      <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n      {{ 'All statuses' | translate }}\n    </span>\n  </button>\n  <ul\n    id=\"dropdown-status-filter\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"status-filter\"\n  >\n    <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n      <button\n        type=\"button\"\n        [title]=\"option.option.label | translate\"\n        (click)=\"changeFilter(option)\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status',\n          filterValue: option.option.label\n        }\"\n      >\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </button>\n    </li>\n    <li [ngClass]=\"{ active: isAllButtonSelected }\">\n      <button\n        type=\"button\"\n        title=\"{{ 'All statuses' | translate }}\"\n        (click)=\"removeFilter()\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status'\n        }\"\n      >\n        <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n        {{ 'All statuses' | translate }}\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterComponent, decorators: [{
             type: Component,
@@ -109,7 +106,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => StatusFilterComponent)
                         }
-                    ], standalone: false, template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n  <button\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    type=\"button\"\n    title=\"{{ 'Status filter' | translate }}\"\n    dropdownToggle\n  >\n    <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n      <span class=\"text-truncate\" *ngIf=\"option.selected\">\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </span>\n    </span>\n    <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n      <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n      {{ 'All statuses' | translate }}\n    </span>\n  </button>\n  <ul\n    id=\"dropdown-status-filter\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"status-filter\"\n  >\n    <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n      <button\n        type=\"button\"\n        [title]=\"option.option.label | translate\"\n        (click)=\"changeFilter(option)\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status',\n          filterValue: option.option.label\n        }\"\n      >\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </button>\n    </li>\n    <li [ngClass]=\"{ active: isAllButtonSelected }\">\n      <button\n        type=\"button\"\n        title=\"{{ 'All statuses' | translate }}\"\n        (click)=\"removeFilter()\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status'\n        }\"\n      >\n        <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n        {{ 'All statuses' | translate }}\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+                    ], imports: [
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        NgFor,
+                        NgIf,
+                        IconDirective,
+                        NgClass,
+                        BsDropdownMenuDirective,
+                        ProductExperienceDirective,
+                        C8yTranslatePipe
+                    ], template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n  <button\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n    type=\"button\"\n    title=\"{{ 'Status filter' | translate }}\"\n    dropdownToggle\n  >\n    <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n      <span class=\"text-truncate\" *ngIf=\"option.selected\">\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </span>\n    </span>\n    <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n      <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n      {{ 'All statuses' | translate }}\n    </span>\n  </button>\n  <ul\n    id=\"dropdown-status-filter\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"status-filter\"\n  >\n    <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n      <button\n        type=\"button\"\n        [title]=\"option.option.label | translate\"\n        (click)=\"changeFilter(option)\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status',\n          filterValue: option.option.label\n        }\"\n      >\n        <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n        <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n      </button>\n    </li>\n    <li [ngClass]=\"{ active: isAllButtonSelected }\">\n      <button\n        type=\"button\"\n        title=\"{{ 'All statuses' | translate }}\"\n        (click)=\"removeFilter()\"\n        c8yProductExperience\n        inherit\n        [actionData]=\"{\n          action: ACTIONS.FILTER,\n          filterBy: 'status'\n        }\"\n      >\n        <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n        {{ 'All statuses' | translate }}\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], _multiple: [{
@@ -130,14 +137,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class StatusFilterModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule, declarations: [StatusFilterComponent], imports: [CoreModule, TooltipModule, BsDropdownModule], exports: [StatusFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule, imports: [CoreModule, TooltipModule, BsDropdownModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule, imports: [StatusFilterComponent], exports: [StatusFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusFilterModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CoreModule, TooltipModule, BsDropdownModule],
-                    declarations: [StatusFilterComponent],
+                    imports: [StatusFilterComponent],
                     exports: [StatusFilterComponent]
                 }]
         }] });

package/fesm2022/c8y-ngx-components-operations-status-filter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-operations-status-filter.mjs","sources":["../../operations/status-filter/status-filter.component.ts","../../operations/status-filter/status-filter.component.html","../../operations/status-filter/status-filter.module.ts","../../operations/status-filter/c8y-ngx-components-operations-status-filter.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, EventEmitter, forwardRef, HostBinding, Input, Output } from '@angular/core';\nimport {\n ProductExperienceEvent,\n ProductExperienceEventSource,\n PRODUCT_EXPERIENCE_EVENT_SOURCE\n} from '@c8y/ngx-components';\nimport { ACTIONS_OPERATIONS } from '@c8y/ngx-components/operations/product-experience';\nimport {\n OperationStatusOptionsMapShared,\n OperationStatusOption\n} from '@c8y/ngx-components/operations/shared';\n\n@Component({\n selector: 'c8y-status-filter',\n templateUrl: './status-filter.component.html',\n providers: [\n {\n provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,\n useExisting: forwardRef(() => StatusFilterComponent)\n }\n ],\n standalone: false\n})\nexport class StatusFilterComponent implements ProductExperienceEventSource {\n ACTIONS = ACTIONS_OPERATIONS;\n productExperienceEvent: ProductExperienceEvent;\n statusOptions: Array<{ selected: boolean; option: OperationStatusOption }> = [];\n\n /** List of filter options to be displayed /\n @Input() set options(options: OperationStatusOptionsMapShared) {\n this.statusOptions = (Object.values(options) \|\| []).map(option => ({\n selected: false,\n option\n }));\n }\n\n /\n Allows multiple options to be active simultaneosly.\n /\n @Input('multiple') set _multiple(multiple: boolean) {\n this.multiple = coerceBooleanProperty(multiple);\n }\n\n /* Display the filter as a small button group /\n @Input('small') set _small(small: boolean) {\n this.small = coerceBooleanProperty(small);\n }\n\n @HostBinding('class.btn-group-sm') get displaySmall() {\n return this.small;\n }\n\n @Output() onFilterChanged: EventEmitter<OperationStatusOption[]> = new EventEmitter();\n\n isAllButtonSelected = true;\n\n private multiple: boolean;\n private small: boolean;\n\n changeFilter(option: { selected: boolean; option: OperationStatusOption }) {\n this.isAllButtonSelected = false;\n let emitNeeded = false;\n\n if (this.multiple) {\n option.selected = !option.selected;\n emitNeeded = true;\n } else if (!option.selected) {\n option.selected = true;\n this.statusOptions.filter(op => op !== option).forEach(op => (op.selected = false));\n emitNeeded = true;\n }\n\n if (emitNeeded) {\n this.emitSelectedOptions();\n }\n }\n\n removeFilter() {\n this.isAllButtonSelected = true;\n this.statusOptions.forEach(op => (op.selected = false));\n\n this.emitSelectedOptions();\n }\n\n /\n Allows the filter to be initalliy displayed with some preset filters.\n \n @param filters An `StatusOption` array defining filter options to be preset.\n * @param emit (optional) If `true` component will emit `onFilterChanged` event.\n /\n preset(filters: OperationStatusOption[], emit = true) {\n let firstSelected = false;\n\n this.statusOptions.forEach(option => (option.selected = false));\n\n this.statusOptions\n .filter(option => (filters \|\| []).map(o => o.label).includes(option.option.label))\n .filter(() => {\n // only first option passed will be set in single selection mode\n const include: boolean = this.multiple \|\| !firstSelected;\n if (include) {\n firstSelected = true;\n }\n\n return include;\n })\n .forEach(option => (option.selected = true));\n\n this.isAllButtonSelected = !(filters && filters.length);\n\n if (emit) {\n this.emitSelectedOptions();\n }\n }\n\n reset() {\n this.removeFilter();\n }\n\n activeFilters(): OperationStatusOption[] {\n return this.statusOptions.filter(option => option.selected).map(option => option.option);\n }\n\n isFilterApplied(): boolean {\n return this.statusOptions.some(option => option.selected);\n }\n\n private emitSelectedOptions() {\n this.onFilterChanged.emit(\n this.statusOptions.filter(option => option.selected).map(option => option.option)\n );\n }\n}\n","<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n <button\n class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n type=\"button\"\n title=\"{{ 'Status filter' \| translate }}\"\n dropdownToggle\n >\n <span ngFor=\"let option of statusOptions\" class=\"d-contents\">\n <span class=\"text-truncate\" ngIf=\"option.selected\">\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label \| translate }}</span>\n </span>\n </span>\n <span class=\"text-truncate\" ngIf=\"isAllButtonSelected\">\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' \| translate }}\n </span>\n </button>\n <ul\n id=\"dropdown-status-filter\"\n dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"status-filter\"\n >\n <li ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n <button\n type=\"button\"\n [title]=\"option.option.label \| translate\"\n (click)=\"changeFilter(option)\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status',\n filterValue: option.option.label\n }\"\n >\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label \| translate }}</span>\n </button>\n </li>\n <li [ngClass]=\"{ active: isAllButtonSelected }\">\n <button\n type=\"button\"\n title=\"{{ 'All statuses' \| translate }}\"\n (click)=\"removeFilter()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status'\n }\"\n >\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' \| translate }}\n </button>\n </li>\n </ul>\n</div>\n","import { NgModule } from '@angular/core';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { StatusFilterComponent } from './status-filter.component';\n\n/*\n This module provides a component for selecting status filter.\n /\n@NgModule({\n imports: [CoreModule, TooltipModule, BsDropdownModule],\n declarations: [StatusFilterComponent],\n exports: [StatusFilterComponent]\n})\nexport class StatusFilterModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAwBa,qBAAqB,CAAA;AAXlC,IAAA,WAAA,GAAA;QAYE,IAAO,CAAA,OAAA,GAAG,kBAAkB;QAE5B,IAAa,CAAA,aAAA,GAAgE,EAAE;AA0BrE,QAAA,IAAA,CAAA,eAAe,GAA0C,IAAI,YAAY,EAAE;QAErF,IAAmB,CAAA,mBAAA,GAAG,IAAI;AA8E3B;;IAvGC,IAAa,OAAO,CAAC,OAAwC,EAAA;QAC3D,IAAI,CAAC,aAAa,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,MAAM,KAAK;AACjE,YAAA,QAAQ,EAAE,KAAK;YACf;AACD,SAAA,CAAC,CAAC;;AAGL;;AAEG;IACH,IAAuB,SAAS,CAAC,QAAiB,EAAA;AAChD,QAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC;;;IAIjD,IAAoB,MAAM,CAAC,KAAc,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAG3C,IAAA,IAAuC,YAAY,GAAA;QACjD,OAAO,IAAI,CAAC,KAAK;;AAUnB,IAAA,YAAY,CAAC,MAA4D,EAAA;AACvE,QAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;QAChC,IAAI,UAAU,GAAG,KAAK;AAEtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;YAClC,UAAU,GAAG,IAAI;;AACZ,aAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC3B,YAAA,MAAM,CAAC,QAAQ,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;YACnF,UAAU,GAAG,IAAI;;QAGnB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;QAEvD,IAAI,CAAC,mBAAmB,EAAE;;AAG5B;;;;;AAKG;AACH,IAAA,MAAM,CAAC,OAAgC,EAAE,IAAI,GAAG,IAAI,EAAA;QAClD,IAAI,aAAa,GAAG,KAAK;AAEzB,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/D,QAAA,IAAI,CAAC;AACF,aAAA,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;aAChF,MAAM,CAAC,MAAK;;YAEX,MAAM,OAAO,GAAY,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa;YACxD,IAAI,OAAO,EAAE;gBACX,aAAa,GAAG,IAAI;;AAGtB,YAAA,OAAO,OAAO;AAChB,SAAC;AACA,aAAA,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;QAE9C,IAAI,CAAC,mBAAmB,GAAG,EAAE,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;QAEvD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,KAAK,GAAA;QACH,IAAI,CAAC,YAAY,EAAE;;IAGrB,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC;;IAG1F,eAAe,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC;;IAGnD,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CACvB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,CAClF;;+GA3GQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EARrB,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,+BAA+B;AACxC,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB;AACpD;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBH,4gEA4DA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,wBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,WAAA,EAAA,YAAA,EAAA,aAAA,EAAA,YAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDpCa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAElB,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,+BAA+B;AACxC,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B;AACpD;AACF,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,QAAA,EAAA,4gEAAA,EAAA;8BAQJ,OAAO,EAAA,CAAA;sBAAnB;gBAUsB,SAAS,EAAA,CAAA;sBAA/B,KAAK;uBAAC,UAAU;gBAKG,MAAM,EAAA,CAAA;sBAAzB,KAAK;uBAAC,OAAO;gBAIyB,YAAY,EAAA,CAAA;sBAAlD,WAAW;uBAAC,oBAAoB;gBAIvB,eAAe,EAAA,CAAA;sBAAxB;;;AE/CH;;AAEG;MAMU,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAlB,kBAAkB,EAAA,YAAA,EAAA,CAHd,qBAAqB,CAD1B,EAAA,OAAA,EAAA,CAAA,UAAU,EAAE,aAAa,EAAE,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAE3C,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAJnB,OAAA,EAAA,CAAA,UAAU,EAAE,aAAa,EAAE,gBAAgB,CAAA,EAAA,CAAA,CAAA;;4FAI1C,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,gBAAgB,CAAC;oBACtD,YAAY,EAAE,CAAC,qBAAqB,CAAC;oBACrC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACbD;;AAEG;;;;"}
1	+ {"version":3,"file":"c8y-ngx-components-operations-status-filter.mjs","sources":["../../operations/status-filter/status-filter.component.ts","../../operations/status-filter/status-filter.component.html","../../operations/status-filter/status-filter.module.ts","../../operations/status-filter/c8y-ngx-components-operations-status-filter.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, EventEmitter, forwardRef, HostBinding, Input, Output } from '@angular/core';\nimport {\n ProductExperienceEvent,\n ProductExperienceEventSource,\n PRODUCT_EXPERIENCE_EVENT_SOURCE,\n IconDirective,\n ProductExperienceDirective,\n C8yTranslatePipe\n} from '@c8y/ngx-components';\nimport { ACTIONS_OPERATIONS } from '@c8y/ngx-components/operations/product-experience';\nimport {\n OperationStatusOptionsMapShared,\n OperationStatusOption\n} from '@c8y/ngx-components/operations/shared';\nimport {\n BsDropdownDirective,\n BsDropdownToggleDirective,\n BsDropdownMenuDirective\n} from 'ngx-bootstrap/dropdown';\nimport { NgFor, NgIf, NgClass } from '@angular/common';\n\n@Component({\n selector: 'c8y-status-filter',\n templateUrl: './status-filter.component.html',\n providers: [\n {\n provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,\n useExisting: forwardRef(() => StatusFilterComponent)\n }\n ],\n imports: [\n BsDropdownDirective,\n BsDropdownToggleDirective,\n NgFor,\n NgIf,\n IconDirective,\n NgClass,\n BsDropdownMenuDirective,\n ProductExperienceDirective,\n C8yTranslatePipe\n ]\n})\nexport class StatusFilterComponent implements ProductExperienceEventSource {\n ACTIONS = ACTIONS_OPERATIONS;\n productExperienceEvent: ProductExperienceEvent;\n statusOptions: Array<{ selected: boolean; option: OperationStatusOption }> = [];\n\n /** List of filter options to be displayed /\n @Input() set options(options: OperationStatusOptionsMapShared) {\n this.statusOptions = (Object.values(options) \|\| []).map(option => ({\n selected: false,\n option\n }));\n }\n\n /\n Allows multiple options to be active simultaneosly.\n /\n @Input('multiple') set _multiple(multiple: boolean) {\n this.multiple = coerceBooleanProperty(multiple);\n }\n\n /* Display the filter as a small button group /\n @Input('small') set _small(small: boolean) {\n this.small = coerceBooleanProperty(small);\n }\n\n @HostBinding('class.btn-group-sm') get displaySmall() {\n return this.small;\n }\n\n @Output() onFilterChanged: EventEmitter<OperationStatusOption[]> = new EventEmitter();\n\n isAllButtonSelected = true;\n\n private multiple: boolean;\n private small: boolean;\n\n changeFilter(option: { selected: boolean; option: OperationStatusOption }) {\n this.isAllButtonSelected = false;\n let emitNeeded = false;\n\n if (this.multiple) {\n option.selected = !option.selected;\n emitNeeded = true;\n } else if (!option.selected) {\n option.selected = true;\n this.statusOptions.filter(op => op !== option).forEach(op => (op.selected = false));\n emitNeeded = true;\n }\n\n if (emitNeeded) {\n this.emitSelectedOptions();\n }\n }\n\n removeFilter() {\n this.isAllButtonSelected = true;\n this.statusOptions.forEach(op => (op.selected = false));\n\n this.emitSelectedOptions();\n }\n\n /\n Allows the filter to be initalliy displayed with some preset filters.\n \n @param filters An `StatusOption` array defining filter options to be preset.\n * @param emit (optional) If `true` component will emit `onFilterChanged` event.\n /\n preset(filters: OperationStatusOption[], emit = true) {\n let firstSelected = false;\n\n this.statusOptions.forEach(option => (option.selected = false));\n\n this.statusOptions\n .filter(option => (filters \|\| []).map(o => o.label).includes(option.option.label))\n .filter(() => {\n // only first option passed will be set in single selection mode\n const include: boolean = this.multiple \|\| !firstSelected;\n if (include) {\n firstSelected = true;\n }\n\n return include;\n })\n .forEach(option => (option.selected = true));\n\n this.isAllButtonSelected = !(filters && filters.length);\n\n if (emit) {\n this.emitSelectedOptions();\n }\n }\n\n reset() {\n this.removeFilter();\n }\n\n activeFilters(): OperationStatusOption[] {\n return this.statusOptions.filter(option => option.selected).map(option => option.option);\n }\n\n isFilterApplied(): boolean {\n return this.statusOptions.some(option => option.selected);\n }\n\n private emitSelectedOptions() {\n this.onFilterChanged.emit(\n this.statusOptions.filter(option => option.selected).map(option => option.option)\n );\n }\n}\n","<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n <button\n class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n type=\"button\"\n title=\"{{ 'Status filter' \| translate }}\"\n dropdownToggle\n >\n <span ngFor=\"let option of statusOptions\" class=\"d-contents\">\n <span class=\"text-truncate\" ngIf=\"option.selected\">\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label \| translate }}</span>\n </span>\n </span>\n <span class=\"text-truncate\" ngIf=\"isAllButtonSelected\">\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' \| translate }}\n </span>\n </button>\n <ul\n id=\"dropdown-status-filter\"\n dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"status-filter\"\n >\n <li ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n <button\n type=\"button\"\n [title]=\"option.option.label \| translate\"\n (click)=\"changeFilter(option)\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status',\n filterValue: option.option.label\n }\"\n >\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label \| translate }}</span>\n </button>\n </li>\n <li [ngClass]=\"{ active: isAllButtonSelected }\">\n <button\n type=\"button\"\n title=\"{{ 'All statuses' \| translate }}\"\n (click)=\"removeFilter()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status'\n }\"\n >\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' \| translate }}\n </button>\n </li>\n </ul>\n</div>\n","import { NgModule } from '@angular/core';\nimport { StatusFilterComponent } from './status-filter.component';\n\n/*\n This module provides a component for selecting status filter.\n /\n@NgModule({\n imports: [StatusFilterComponent],\n exports: [StatusFilterComponent]\n})\nexport class StatusFilterModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;MA2Ca,qBAAqB,CAAA;AArBlC,IAAA,WAAA,GAAA;QAsBE,IAAO,CAAA,OAAA,GAAG,kBAAkB;QAE5B,IAAa,CAAA,aAAA,GAAgE,EAAE;AA0BrE,QAAA,IAAA,CAAA,eAAe,GAA0C,IAAI,YAAY,EAAE;QAErF,IAAmB,CAAA,mBAAA,GAAG,IAAI;AA8E3B;;IAvGC,IAAa,OAAO,CAAC,OAAwC,EAAA;QAC3D,IAAI,CAAC,aAAa,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,MAAM,KAAK;AACjE,YAAA,QAAQ,EAAE,KAAK;YACf;AACD,SAAA,CAAC,CAAC;;AAGL;;AAEG;IACH,IAAuB,SAAS,CAAC,QAAiB,EAAA;AAChD,QAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC;;;IAIjD,IAAoB,MAAM,CAAC,KAAc,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAG3C,IAAA,IAAuC,YAAY,GAAA;QACjD,OAAO,IAAI,CAAC,KAAK;;AAUnB,IAAA,YAAY,CAAC,MAA4D,EAAA;AACvE,QAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;QAChC,IAAI,UAAU,GAAG,KAAK;AAEtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;YAClC,UAAU,GAAG,IAAI;;AACZ,aAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC3B,YAAA,MAAM,CAAC,QAAQ,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;YACnF,UAAU,GAAG,IAAI;;QAGnB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;QAEvD,IAAI,CAAC,mBAAmB,EAAE;;AAG5B;;;;;AAKG;AACH,IAAA,MAAM,CAAC,OAAgC,EAAE,IAAI,GAAG,IAAI,EAAA;QAClD,IAAI,aAAa,GAAG,KAAK;AAEzB,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/D,QAAA,IAAI,CAAC;AACF,aAAA,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;aAChF,MAAM,CAAC,MAAK;;YAEX,MAAM,OAAO,GAAY,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa;YACxD,IAAI,OAAO,EAAE;gBACX,aAAa,GAAG,IAAI;;AAGtB,YAAA,OAAO,OAAO;AAChB,SAAC;AACA,aAAA,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;QAE9C,IAAI,CAAC,mBAAmB,GAAG,EAAE,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;QAEvD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,KAAK,GAAA;QACH,IAAI,CAAC,YAAY,EAAE;;IAGrB,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC;;IAG1F,eAAe,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC;;IAGnD,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CACvB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,CAClF;;+GA3GQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAlBrB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,+BAA+B;AACxC,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB;AACpD;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9BH,4gEA4DA,ED5BI,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,mBAAmB,8QACnB,yBAAyB,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACzB,KAAK,EACL,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,EACJ,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAa,2EACb,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,uBAAuB,EACvB,QAAA,EAAA,iCAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,0BAA0B,yIAC1B,gBAAgB,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBArBjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAElB,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,+BAA+B;AACxC,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B;AACpD;qBACF,EACQ,OAAA,EAAA;wBACP,mBAAmB;wBACnB,yBAAyB;wBACzB,KAAK;wBACL,IAAI;wBACJ,aAAa;wBACb,OAAO;wBACP,uBAAuB;wBACvB,0BAA0B;wBAC1B;AACD,qBAAA,EAAA,QAAA,EAAA,4gEAAA,EAAA;8BAQY,OAAO,EAAA,CAAA;sBAAnB;gBAUsB,SAAS,EAAA,CAAA;sBAA/B,KAAK;uBAAC,UAAU;gBAKG,MAAM,EAAA,CAAA;sBAAzB,KAAK;uBAAC,OAAO;gBAIyB,YAAY,EAAA,CAAA;sBAAlD,WAAW;uBAAC,oBAAoB;gBAIvB,eAAe,EAAA,CAAA;sBAAxB;;;AErEH;;AAEG;MAKU,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA,CAAA;gHAEpB,kBAAkB,EAAA,CAAA,CAAA;;4FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACTD;;AAEG;;;;"}

package/fesm2022/c8y-ngx-components-operations-stepper-bulk-type-configuration.mjs CHANGED Viewed

@@ -1,22 +1,20 @@
 import * as i0 from '@angular/core';
 import { Component, NgModule } from '@angular/core';
-import * as i6 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@c8y/ngx-components';
-import { gettext, CoreModule, FormsModule } from '@c8y/ngx-components';
-import * as i2 from '@c8y/ngx-components/repository/shared';
-import { RepositoryType, SharedRepositoryModule } from '@c8y/ngx-components/repository/shared';
-import * as i7 from '@c8y/ngx-components/operations/bulk-operation-stepper';
-import { BaseStepperComponent, BulkOperationStepperModule } from '@c8y/ngx-components/operations/bulk-operation-stepper';
+import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/ngx-components/operations/bulk-operations-service';
 import { BulkOperationType, hookListBulkType, baseUrl } from '@c8y/ngx-components/operations/bulk-operations-service';
-import * as i8 from '@c8y/ngx-components/operations/stepper-frames';
-import { StepperFramesModule } from '@c8y/ngx-components/operations/stepper-frames';
+import { gettext, IconDirective, FormGroupComponent, TypeaheadComponent, ListItemComponent, HighlightComponent, ListItemIconComponent, ListItemBodyComponent, ListGroupComponent, ForOfDirective, ListItemRadioComponent, C8yTranslateDirective, EmptyStateComponent, C8yTranslatePipe, DatePipe } from '@c8y/ngx-components';
+import { BaseStepperComponent, BulkOperationStepper, CustomStep } from '@c8y/ngx-components/operations/bulk-operation-stepper';
+import * as i2 from '@c8y/ngx-components/repository/shared';
+import { RepositoryType } from '@c8y/ngx-components/repository/shared';
 import * as i3 from '@ngx-translate/core';
 import { uniqWith, isEqual, get } from 'lodash-es';
 import { BehaviorSubject, combineLatest, from } from 'rxjs';
 import { switchMap, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import * as i5 from '@angular/common';
+import { SelectStepFrameComponent, PreviewSelectionFrameComponent, PreviewBlockDirective } from '@c8y/ngx-components/operations/stepper-frames';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 class StepperBulkTypeConfigurationComponent extends BaseStepperComponent {
     constructor(bulkOperationService, repositoryService, translate) {
@@ -87,56 +85,62 @@ class StepperBulkTypeConfigurationComponent extends BaseStepperComponent {
         return this.repositoryService.listRepositoryEntries(RepositoryType.CONFIGURATION, { query });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationComponent, deps: [{ token: i1.BulkOperationsService }, { token: i2.RepositoryService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StepperBulkTypeConfigurationComponent, isStandalone: false, selector: "c8y-stepper-bulk-type-configuration", usesInheritance: true, ngImport: i0, template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select configuration' | translate;\n      completed: !!selectedConfiguration;\n      buttonsDisabled: !selectedConfiguration;\n      onNext: goToSecondStep.bind(this)\n    \"\n  >\n    <c8y-select-step-frame\n      [header]=\"'Select configuration' | translate\"\n      [noResults]=\"\n        ((textFilter$ | async)?.length || (configType$ | async)?.length) &&\n        (configurations$ | async)?.data.length === 0\n      \"\n    >\n      <div\n        class=\"row\"\n        filters\n      >\n        <div class=\"col-md-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-12 p-b-8 visible-xs visible-sm\"></div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"m-0\">\n            <c8y-typeahead\n              placeholder=\"{{ 'Type to filter configuration types\u2026' | translate }}\"\n              name=\"configType\"\n              [(ngModel)]=\"selectedConfigType\"\n              (onSearch)=\"configType$.next($event)\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"selectedConfigType = { name: '' }; configType$.next('')\"\n              >\n                <span>{{ 'All configuration types' | translate }}</span>\n              </c8y-li>\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *ngFor=\"let configType of configTypes\"\n                (click)=\"selectedConfigType = configType; configType$.next(configType.name)\"\n                [active]=\"selectedConfigType === configType\"\n              >\n                <c8y-highlight\n                  [text]=\"configType.name\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </div>\n      <c8y-li\n        class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n        header\n      >\n        <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n        <c8y-li-body class=\"content-flex-40\">\n          <div class=\"col-5\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Name' | translate }} \"\n            >\n              {{ 'Name' | translate }}\n            </span>\n          </div>\n          <div class=\"col-4\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Device type' | translate }}\"\n            >\n              {{ 'Device type' | translate }}\n            </span>\n          </div>\n          <div class=\"col-3\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Configuration type' | translate }}\"\n            >\n              {{ 'Configuration type' | translate }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n      <c8y-list-group list>\n        <c8y-li\n          #listItem\n          *c8yFor=\"let configuration of configurations$ | async\"\n        >\n          <c8y-li-radio (onSelect)=\"selectConfiguration(configuration)\"></c8y-li-radio>\n          <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n          <c8y-li-body class=\"content-flex-40\">\n            <div class=\"col-5 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ configuration.name || '-' }}\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.name || '-'\"\n                  [pattern]=\"textFilter$ | async\"\n                ></c8y-highlight>\n              </div>\n            </div>\n            <div class=\"col-4 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}\"\n              >\n                <span\n                  class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                  translate\n                >\n                  Device type\n                </span>\n                {{ configuration.deviceType }}\n                <em\n                  class=\"text-muted\"\n                  *ngIf=\"!configuration.deviceType\"\n                >\n                  {{ 'Undefined`device type`' | translate }}\n                </em>\n              </div>\n            </div>\n            <div class=\"col-3 m-b-xs-8\">\n              <span\n                class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                translate\n              >\n                Configuration type\n              </span>\n              <span\n                class=\"label label-info\"\n                title=\"{{ 'Configuration type' | translate }}: {{\n                  configuration.configurationType\n                }}\"\n                *ngIf=\"configuration.configurationType\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.configurationType\"\n                  elementClass=\"text-gray-lighter\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </span>\n              <span\n                class=\"label label-default\"\n                title=\"{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}\"\n                *ngIf=\"!configuration.configurationType\"\n              >\n                {{ 'Undefined' | translate }}\n              </span>\n            </div>\n          </c8y-li-body>\n        </c8y-li>\n      </c8y-list-group>\n    </c8y-select-step-frame>\n  </ng-container>\n  <ng-container *customStep=\"'Preview configuration' | translate\">\n    <c8y-preview-selection-frame\n      [header]=\"'Preview configuration' | translate\"\n      [name]=\"selectedConfiguration?.name\"\n      [type]=\"selectedConfiguration?.configurationType\"\n    >\n      <ng-container *previewBlock=\"'Device type' | translate\">\n        <ng-container *ngIf=\"selectedConfiguration?.deviceType; else noType\">\n          <span>{{ selectedConfiguration?.deviceType }}</span>\n        </ng-container>\n        <ng-template #noType>\n          <em\n            class=\"text-muted\"\n            translate\n          >\n            Undefined`device type`\n          </em>\n        </ng-template>\n      </ng-container>\n      <ng-container *previewBlock=\"'Updated' | translate\">\n        <span>{{ selectedConfiguration?.lastUpdated | c8yDate }}</span>\n      </ng-container>\n      <ng-container *previewBlock=\"'Preview' | translate\">\n        <c8y-ui-empty-state\n          [icon]=\"'file-code-o'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'Could not fetch the file.' | translate\"\n          *ngIf=\"!this.selectedConfiguration?.binary; else binaryPreview\"\n        ></c8y-ui-empty-state>\n        <ng-template #binaryPreview>\n          <pre style=\"min-height: 98px\"><code>{{ this.selectedConfiguration?.binary }}</code></pre>\n        </ng-template>\n      </ng-container>\n    </c8y-preview-selection-frame>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n", dependencies: [{ kind: "component", type: i4.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i4.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i4.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i4.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i4.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i4.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i4.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i4.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "component", type: i7.BulkOperationStepper, selector: "c8y-bulk-operation-stepper", inputs: ["type"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.CustomStep, selector: "[customStep]", inputs: ["customStep", "customStepCompleted", "customStepButtonsDisabled", "customStepOnNext"] }, { kind: "component", type: i8.PreviewSelectionFrameComponent, selector: "c8y-preview-selection-frame", inputs: ["header", "name", "description", "type"] }, { kind: "component", type: i8.SelectStepFrameComponent, selector: "c8y-select-step-frame", inputs: ["header", "noResults"] }, { kind: "directive", type: i8.PreviewBlockDirective, selector: "[previewBlock]", inputs: ["previewBlock", "previewBlockIf"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StepperBulkTypeConfigurationComponent, isStandalone: true, selector: "c8y-stepper-bulk-type-configuration", usesInheritance: true, ngImport: i0, template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select configuration' | translate;\n      completed: !!selectedConfiguration;\n      buttonsDisabled: !selectedConfiguration;\n      onNext: goToSecondStep.bind(this)\n    \"\n  >\n    <c8y-select-step-frame\n      [header]=\"'Select configuration' | translate\"\n      [noResults]=\"\n        ((textFilter$ | async)?.length || (configType$ | async)?.length) &&\n        (configurations$ | async)?.data.length === 0\n      \"\n    >\n      <div\n        class=\"row\"\n        filters\n      >\n        <div class=\"col-md-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-12 p-b-8 visible-xs visible-sm\"></div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"m-0\">\n            <c8y-typeahead\n              placeholder=\"{{ 'Type to filter configuration types\u2026' | translate }}\"\n              name=\"configType\"\n              [(ngModel)]=\"selectedConfigType\"\n              (onSearch)=\"configType$.next($event)\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"selectedConfigType = { name: '' }; configType$.next('')\"\n              >\n                <span>{{ 'All configuration types' | translate }}</span>\n              </c8y-li>\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *ngFor=\"let configType of configTypes\"\n                (click)=\"selectedConfigType = configType; configType$.next(configType.name)\"\n                [active]=\"selectedConfigType === configType\"\n              >\n                <c8y-highlight\n                  [text]=\"configType.name\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </div>\n      <c8y-li\n        class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n        header\n      >\n        <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n        <c8y-li-body class=\"content-flex-40\">\n          <div class=\"col-5\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Name' | translate }} \"\n            >\n              {{ 'Name' | translate }}\n            </span>\n          </div>\n          <div class=\"col-4\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Device type' | translate }}\"\n            >\n              {{ 'Device type' | translate }}\n            </span>\n          </div>\n          <div class=\"col-3\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Configuration type' | translate }}\"\n            >\n              {{ 'Configuration type' | translate }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n      <c8y-list-group list>\n        <c8y-li\n          #listItem\n          *c8yFor=\"let configuration of configurations$ | async\"\n        >\n          <c8y-li-radio (onSelect)=\"selectConfiguration(configuration)\"></c8y-li-radio>\n          <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n          <c8y-li-body class=\"content-flex-40\">\n            <div class=\"col-5 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ configuration.name || '-' }}\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.name || '-'\"\n                  [pattern]=\"textFilter$ | async\"\n                ></c8y-highlight>\n              </div>\n            </div>\n            <div class=\"col-4 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}\"\n              >\n                <span\n                  class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                  translate\n                >\n                  Device type\n                </span>\n                {{ configuration.deviceType }}\n                <em\n                  class=\"text-muted\"\n                  *ngIf=\"!configuration.deviceType\"\n                >\n                  {{ 'Undefined`device type`' | translate }}\n                </em>\n              </div>\n            </div>\n            <div class=\"col-3 m-b-xs-8\">\n              <span\n                class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                translate\n              >\n                Configuration type\n              </span>\n              <span\n                class=\"label label-info\"\n                title=\"{{ 'Configuration type' | translate }}: {{\n                  configuration.configurationType\n                }}\"\n                *ngIf=\"configuration.configurationType\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.configurationType\"\n                  elementClass=\"text-gray-lighter\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </span>\n              <span\n                class=\"label label-default\"\n                title=\"{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}\"\n                *ngIf=\"!configuration.configurationType\"\n              >\n                {{ 'Undefined' | translate }}\n              </span>\n            </div>\n          </c8y-li-body>\n        </c8y-li>\n      </c8y-list-group>\n    </c8y-select-step-frame>\n  </ng-container>\n  <ng-container *customStep=\"'Preview configuration' | translate\">\n    <c8y-preview-selection-frame\n      [header]=\"'Preview configuration' | translate\"\n      [name]=\"selectedConfiguration?.name\"\n      [type]=\"selectedConfiguration?.configurationType\"\n    >\n      <ng-container *previewBlock=\"'Device type' | translate\">\n        <ng-container *ngIf=\"selectedConfiguration?.deviceType; else noType\">\n          <span>{{ selectedConfiguration?.deviceType }}</span>\n        </ng-container>\n        <ng-template #noType>\n          <em\n            class=\"text-muted\"\n            translate\n          >\n            Undefined`device type`\n          </em>\n        </ng-template>\n      </ng-container>\n      <ng-container *previewBlock=\"'Updated' | translate\">\n        <span>{{ selectedConfiguration?.lastUpdated | c8yDate }}</span>\n      </ng-container>\n      <ng-container *previewBlock=\"'Preview' | translate\">\n        <c8y-ui-empty-state\n          [icon]=\"'file-code-o'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'Could not fetch the file.' | translate\"\n          *ngIf=\"!this.selectedConfiguration?.binary; else binaryPreview\"\n        ></c8y-ui-empty-state>\n        <ng-template #binaryPreview>\n          <pre style=\"min-height: 98px\"><code>{{ this.selectedConfiguration?.binary }}</code></pre>\n        </ng-template>\n      </ng-container>\n    </c8y-preview-selection-frame>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n", dependencies: [{ kind: "component", type: BulkOperationStepper, selector: "c8y-bulk-operation-stepper", inputs: ["type"], outputs: ["selectionChange"] }, { kind: "directive", type: CustomStep, selector: "[customStep]", inputs: ["customStep", "customStepCompleted", "customStepButtonsDisabled", "customStepOnNext"] }, { kind: "component", type: SelectStepFrameComponent, selector: "c8y-select-step-frame", inputs: ["header", "noResults"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: PreviewSelectionFrameComponent, selector: "c8y-preview-selection-frame", inputs: ["header", "name", "description", "type"] }, { kind: "directive", type: PreviewBlockDirective, selector: "[previewBlock]", inputs: ["previewBlock", "previewBlockIf"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-stepper-bulk-type-configuration', standalone: false, template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select configuration' | translate;\n      completed: !!selectedConfiguration;\n      buttonsDisabled: !selectedConfiguration;\n      onNext: goToSecondStep.bind(this)\n    \"\n  >\n    <c8y-select-step-frame\n      [header]=\"'Select configuration' | translate\"\n      [noResults]=\"\n        ((textFilter$ | async)?.length || (configType$ | async)?.length) &&\n        (configurations$ | async)?.data.length === 0\n      \"\n    >\n      <div\n        class=\"row\"\n        filters\n      >\n        <div class=\"col-md-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-12 p-b-8 visible-xs visible-sm\"></div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"m-0\">\n            <c8y-typeahead\n              placeholder=\"{{ 'Type to filter configuration types\u2026' | translate }}\"\n              name=\"configType\"\n              [(ngModel)]=\"selectedConfigType\"\n              (onSearch)=\"configType$.next($event)\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"selectedConfigType = { name: '' }; configType$.next('')\"\n              >\n                <span>{{ 'All configuration types' | translate }}</span>\n              </c8y-li>\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *ngFor=\"let configType of configTypes\"\n                (click)=\"selectedConfigType = configType; configType$.next(configType.name)\"\n                [active]=\"selectedConfigType === configType\"\n              >\n                <c8y-highlight\n                  [text]=\"configType.name\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </div>\n      <c8y-li\n        class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n        header\n      >\n        <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n        <c8y-li-body class=\"content-flex-40\">\n          <div class=\"col-5\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Name' | translate }} \"\n            >\n              {{ 'Name' | translate }}\n            </span>\n          </div>\n          <div class=\"col-4\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Device type' | translate }}\"\n            >\n              {{ 'Device type' | translate }}\n            </span>\n          </div>\n          <div class=\"col-3\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Configuration type' | translate }}\"\n            >\n              {{ 'Configuration type' | translate }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n      <c8y-list-group list>\n        <c8y-li\n          #listItem\n          *c8yFor=\"let configuration of configurations$ | async\"\n        >\n          <c8y-li-radio (onSelect)=\"selectConfiguration(configuration)\"></c8y-li-radio>\n          <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n          <c8y-li-body class=\"content-flex-40\">\n            <div class=\"col-5 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ configuration.name || '-' }}\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.name || '-'\"\n                  [pattern]=\"textFilter$ | async\"\n                ></c8y-highlight>\n              </div>\n            </div>\n            <div class=\"col-4 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}\"\n              >\n                <span\n                  class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                  translate\n                >\n                  Device type\n                </span>\n                {{ configuration.deviceType }}\n                <em\n                  class=\"text-muted\"\n                  *ngIf=\"!configuration.deviceType\"\n                >\n                  {{ 'Undefined`device type`' | translate }}\n                </em>\n              </div>\n            </div>\n            <div class=\"col-3 m-b-xs-8\">\n              <span\n                class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                translate\n              >\n                Configuration type\n              </span>\n              <span\n                class=\"label label-info\"\n                title=\"{{ 'Configuration type' | translate }}: {{\n                  configuration.configurationType\n                }}\"\n                *ngIf=\"configuration.configurationType\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.configurationType\"\n                  elementClass=\"text-gray-lighter\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </span>\n              <span\n                class=\"label label-default\"\n                title=\"{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}\"\n                *ngIf=\"!configuration.configurationType\"\n              >\n                {{ 'Undefined' | translate }}\n              </span>\n            </div>\n          </c8y-li-body>\n        </c8y-li>\n      </c8y-list-group>\n    </c8y-select-step-frame>\n  </ng-container>\n  <ng-container *customStep=\"'Preview configuration' | translate\">\n    <c8y-preview-selection-frame\n      [header]=\"'Preview configuration' | translate\"\n      [name]=\"selectedConfiguration?.name\"\n      [type]=\"selectedConfiguration?.configurationType\"\n    >\n      <ng-container *previewBlock=\"'Device type' | translate\">\n        <ng-container *ngIf=\"selectedConfiguration?.deviceType; else noType\">\n          <span>{{ selectedConfiguration?.deviceType }}</span>\n        </ng-container>\n        <ng-template #noType>\n          <em\n            class=\"text-muted\"\n            translate\n          >\n            Undefined`device type`\n          </em>\n        </ng-template>\n      </ng-container>\n      <ng-container *previewBlock=\"'Updated' | translate\">\n        <span>{{ selectedConfiguration?.lastUpdated | c8yDate }}</span>\n      </ng-container>\n      <ng-container *previewBlock=\"'Preview' | translate\">\n        <c8y-ui-empty-state\n          [icon]=\"'file-code-o'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'Could not fetch the file.' | translate\"\n          *ngIf=\"!this.selectedConfiguration?.binary; else binaryPreview\"\n        ></c8y-ui-empty-state>\n        <ng-template #binaryPreview>\n          <pre style=\"min-height: 98px\"><code>{{ this.selectedConfiguration?.binary }}</code></pre>\n        </ng-template>\n      </ng-container>\n    </c8y-preview-selection-frame>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n" }]
+            args: [{ selector: 'c8y-stepper-bulk-type-configuration', imports: [
+                        BulkOperationStepper,
+                        CustomStep,
+                        SelectStepFrameComponent,
+                        FormsModule,
+                        NgIf,
+                        IconDirective,
+                        FormGroupComponent,
+                        TypeaheadComponent,
+                        ListItemComponent,
+                        NgFor,
+                        HighlightComponent,
+                        ListItemIconComponent,
+                        ListItemBodyComponent,
+                        ListGroupComponent,
+                        ForOfDirective,
+                        ListItemRadioComponent,
+                        C8yTranslateDirective,
+                        PreviewSelectionFrameComponent,
+                        PreviewBlockDirective,
+                        EmptyStateComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        DatePipe
+                    ], template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select configuration' | translate;\n      completed: !!selectedConfiguration;\n      buttonsDisabled: !selectedConfiguration;\n      onNext: goToSecondStep.bind(this)\n    \"\n  >\n    <c8y-select-step-frame\n      [header]=\"'Select configuration' | translate\"\n      [noResults]=\"\n        ((textFilter$ | async)?.length || (configType$ | async)?.length) &&\n        (configurations$ | async)?.data.length === 0\n      \"\n    >\n      <div\n        class=\"row\"\n        filters\n      >\n        <div class=\"col-md-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              title=\"{{ 'Filter\u2026' | translate }}\"\n              placeholder=\"{{ 'Filter\u2026' | translate }}\"\n              type=\"search\"\n              [ngModel]=\"textFilter$ | async\"\n              (ngModelChange)=\"textFilter$.next($event)\"\n            />\n            <span class=\"input-group-addon\">\n              <i\n                c8yIcon=\"search\"\n                *ngIf=\"(textFilter$ | async).length === 0\"\n              ></i>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                *ngIf=\"(textFilter$ | async).length > 0\"\n                (click)=\"textFilter$.next('')\"\n              ></i>\n            </span>\n          </div>\n        </div>\n        <div class=\"col-xs-12 p-b-8 visible-xs visible-sm\"></div>\n        <div class=\"col-md-6\">\n          <c8y-form-group class=\"m-0\">\n            <c8y-typeahead\n              placeholder=\"{{ 'Type to filter configuration types\u2026' | translate }}\"\n              name=\"configType\"\n              [(ngModel)]=\"selectedConfigType\"\n              (onSearch)=\"configType$.next($event)\"\n            >\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"selectedConfigType = { name: '' }; configType$.next('')\"\n              >\n                <span>{{ 'All configuration types' | translate }}</span>\n              </c8y-li>\n              <c8y-li\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                *ngFor=\"let configType of configTypes\"\n                (click)=\"selectedConfigType = configType; configType$.next(configType.name)\"\n                [active]=\"selectedConfigType === configType\"\n              >\n                <c8y-highlight\n                  [text]=\"configType.name\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n          </c8y-form-group>\n        </div>\n      </div>\n      <c8y-li\n        class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n        header\n      >\n        <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n        <c8y-li-body class=\"content-flex-40\">\n          <div class=\"col-5\">\n            <span\n              class=\"text-truncate\"\n              title=\" {{ 'Name' | translate }} \"\n            >\n              {{ 'Name' | translate }}\n            </span>\n          </div>\n          <div class=\"col-4\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Device type' | translate }}\"\n            >\n              {{ 'Device type' | translate }}\n            </span>\n          </div>\n          <div class=\"col-3\">\n            <span\n              class=\"text-truncate\"\n              title=\"{{ 'Configuration type' | translate }}\"\n            >\n              {{ 'Configuration type' | translate }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n      <c8y-list-group list>\n        <c8y-li\n          #listItem\n          *c8yFor=\"let configuration of configurations$ | async\"\n        >\n          <c8y-li-radio (onSelect)=\"selectConfiguration(configuration)\"></c8y-li-radio>\n          <c8y-li-icon icon=\"gears\"></c8y-li-icon>\n          <c8y-li-body class=\"content-flex-40\">\n            <div class=\"col-5 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ configuration.name || '-' }}\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.name || '-'\"\n                  [pattern]=\"textFilter$ | async\"\n                ></c8y-highlight>\n              </div>\n            </div>\n            <div class=\"col-4 m-b-xs-8\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}\"\n              >\n                <span\n                  class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                  translate\n                >\n                  Device type\n                </span>\n                {{ configuration.deviceType }}\n                <em\n                  class=\"text-muted\"\n                  *ngIf=\"!configuration.deviceType\"\n                >\n                  {{ 'Undefined`device type`' | translate }}\n                </em>\n              </div>\n            </div>\n            <div class=\"col-3 m-b-xs-8\">\n              <span\n                class=\"text-label-small m-r-8 visible-xs visible-sm\"\n                translate\n              >\n                Configuration type\n              </span>\n              <span\n                class=\"label label-info\"\n                title=\"{{ 'Configuration type' | translate }}: {{\n                  configuration.configurationType\n                }}\"\n                *ngIf=\"configuration.configurationType\"\n              >\n                <c8y-highlight\n                  [text]=\"configuration.configurationType\"\n                  elementClass=\"text-gray-lighter\"\n                  [pattern]=\"configType$ | async\"\n                ></c8y-highlight>\n              </span>\n              <span\n                class=\"label label-default\"\n                title=\"{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}\"\n                *ngIf=\"!configuration.configurationType\"\n              >\n                {{ 'Undefined' | translate }}\n              </span>\n            </div>\n          </c8y-li-body>\n        </c8y-li>\n      </c8y-list-group>\n    </c8y-select-step-frame>\n  </ng-container>\n  <ng-container *customStep=\"'Preview configuration' | translate\">\n    <c8y-preview-selection-frame\n      [header]=\"'Preview configuration' | translate\"\n      [name]=\"selectedConfiguration?.name\"\n      [type]=\"selectedConfiguration?.configurationType\"\n    >\n      <ng-container *previewBlock=\"'Device type' | translate\">\n        <ng-container *ngIf=\"selectedConfiguration?.deviceType; else noType\">\n          <span>{{ selectedConfiguration?.deviceType }}</span>\n        </ng-container>\n        <ng-template #noType>\n          <em\n            class=\"text-muted\"\n            translate\n          >\n            Undefined`device type`\n          </em>\n        </ng-template>\n      </ng-container>\n      <ng-container *previewBlock=\"'Updated' | translate\">\n        <span>{{ selectedConfiguration?.lastUpdated | c8yDate }}</span>\n      </ng-container>\n      <ng-container *previewBlock=\"'Preview' | translate\">\n        <c8y-ui-empty-state\n          [icon]=\"'file-code-o'\"\n          [title]=\"'No preview available.' | translate\"\n          [subtitle]=\"'Could not fetch the file.' | translate\"\n          *ngIf=\"!this.selectedConfiguration?.binary; else binaryPreview\"\n        ></c8y-ui-empty-state>\n        <ng-template #binaryPreview>\n          <pre style=\"min-height: 98px\"><code>{{ this.selectedConfiguration?.binary }}</code></pre>\n        </ng-template>\n      </ng-container>\n    </c8y-preview-selection-frame>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n" }]
         }], ctorParameters: () => [{ type: i1.BulkOperationsService }, { type: i2.RepositoryService }, { type: i3.TranslateService }] });
 /** Module for the 'Configuration update' operation type stepper */
 class StepperBulkTypeConfigurationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationModule, declarations: [StepperBulkTypeConfigurationComponent], imports: [CoreModule,
-            FormsModule,
-            ReactiveFormsModule,
-            BulkOperationStepperModule,
-            SharedRepositoryModule,
-            StepperFramesModule], exports: [StepperBulkTypeConfigurationComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationModule, imports: [StepperBulkTypeConfigurationComponent], exports: [StepperBulkTypeConfigurationComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationModule, providers: [
             hookListBulkType({
                 type: BulkOperationType.CONFIGURATION,
                 c8yIcon: 'cogs',
-                name: gettext('Configuration update'),
+                name: gettext$1('Configuration update'),
                 path: `${baseUrl}configuration`,
                 component: StepperBulkTypeConfigurationComponent,
                 fragments: ['c8y_DownloadConfigFile', 'c8y_Configuration'],
                 selected: false
             })
-        ], imports: [CoreModule,
-            FormsModule,
-            ReactiveFormsModule,
-            BulkOperationStepperModule,
-            SharedRepositoryModule,
-            StepperFramesModule] }); }
+        ], imports: [StepperBulkTypeConfigurationComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepperBulkTypeConfigurationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [StepperBulkTypeConfigurationComponent],
-                    imports: [
-                        CoreModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        BulkOperationStepperModule,
-                        SharedRepositoryModule,
-                        StepperFramesModule
-                    ],
+                    imports: [StepperBulkTypeConfigurationComponent],
                     providers: [
                         hookListBulkType({
                             type: BulkOperationType.CONFIGURATION,
                             c8yIcon: 'cogs',
-                            name: gettext('Configuration update'),
+                            name: gettext$1('Configuration update'),
                             path: `${baseUrl}configuration`,
                             component: StepperBulkTypeConfigurationComponent,
                             fragments: ['c8y_DownloadConfigFile', 'c8y_Configuration'],