@c8y/ngx-components/fesm2022/c8y-ngx-components-operations-operations-list.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { InjectionToken, Optional, Inject, Injectable, makeEnvironmentProviders, forwardRef, ViewChild, Input, Component, input } from '@angular/core';
import * as i1$2 from '@c8y/ngx-components';
import { gettext, hookRoute, hookTab, hookNavigator, ViewContext, CoreModule, PRODUCT_EXPERIENCE_EVENT_SOURCE, OperationRealtimeService } from '@c8y/ngx-components';
import * as i2$1 from '@c8y/ngx-components/operations/shared';
import { DEVICE_CONTROL_NAVIGATOR_NODE_CONFIG, OperationsNavigationFactory, OPERATION_STATUS_OPTIONS_MAP } from '@c8y/ngx-components/operations/shared';
import { omitBy, isNil, flatten } from 'lodash-es';
import * as i4 from '@angular/router';
import { RouterLink } from '@angular/router';
import * as i1 from '@c8y/client';
import { OperationStatus } from '@c8y/client';
import * as i1$1 from '@c8y/ngx-components/operations/bulk-operation-list-item';
import * as i8 from '@c8y/ngx-components/operations/operations-list-item-details';
import { OperationsListItemDetailsModule } from '@c8y/ngx-components/operations/operations-list-item-details';
import * as i7 from 'ngx-bootstrap/tooltip';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i2 from '@c8y/ngx-components/upgrade';
import * as i4$1 from '@angular/common';
import { SINGLE_OPERATION_EVENT_DEVICE_TAB, SINGLE_OPERATION_EVENT_OVERVIEW } from '@c8y/ngx-components/operations/product-experience';
import * as i5 from '@c8y/ngx-components/operations/status-filter';
import { StatusFilterModule } from '@c8y/ngx-components/operations/status-filter';
import { BehaviorSubject, combineLatest, pipe } from 'rxjs';
import { tap, switchMap, shareReplay, map } from 'rxjs/operators';

const SINGLE_OPERATIONS_TAB_CONFIG = new InjectionToken('SINGLE_OPERATIONS_TAB_CONFIG');
class SingleOperationsTabsFactory {
    constructor(router, config) {
        this.router = router;
        this.config = config;
    }
    get() {
        const tabs = [];
        if (this.router.url.match(/devicecontrol/g)) {
            tabs.push({
                ...{
                    path: 'devicecontrol/single',
                    label: gettext('Single operations'),
                    icon: 'c8y-icon c8y-icon-device-control',
                    priority: 1100,
                    orientation: 'horizontal'
                },
                ...omitBy(this.config, isNil)
            });
        }
        return tabs;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleOperationsTabsFactory, deps: [{ token: i4.Router }, { token: SINGLE_OPERATIONS_TAB_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleOperationsTabsFactory }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleOperationsTabsFactory, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i4.Router }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [SINGLE_OPERATIONS_TAB_CONFIG]
                }] }] });

const deviceControlOverviewFeatureProviderFactory = (config) => {
    config = {
        ...{ path: 'devicecontrol/single' },
        ...omitBy(config, isNil)
    };
    return makeEnvironmentProviders([
        hookRoute({
            path: config.path,
            loadComponent: () => Promise.resolve().then(function () { return operationsList_component; }).then(m => m.OperationsListComponent)
        }),
        hookRoute({
            path: config.path,
            redirectTo: config.path,
            pathMatch: 'full'
        }),
        /* Provide config for SingleOperationsTabsFactory */
        {
            provide: SINGLE_OPERATIONS_TAB_CONFIG,
            useValue: {
                path: config.path,
                label: config.tabLabel,
                icon: config.tabIcon,
                priority: config.tabPriority,
                orientation: config.tabOrientation
            }
        },
        hookTab(SingleOperationsTabsFactory),
        /* Provide config for OperationsNavigationFactory */
        {
            provide: DEVICE_CONTROL_NAVIGATOR_NODE_CONFIG,
            useValue: {
                path: config.path,
                label: config.navigatorLabel,
                icon: config.navigatorIcon,
                priority: config.navigatorPriority,
                parent: config.navigatorParent
            }
        },
        hookNavigator(OperationsNavigationFactory)
    ]);
};
const deviceControlTabFeatureProviderFactory = (route) => makeEnvironmentProviders([
    hookRoute({
        ...{
            context: ViewContext.Device,
            path: 'control',
            loadComponent: () => Promise.resolve().then(function () { return operationsList_component; }).then(m => m.OperationsListComponent),
            label: gettext('Control'),
            icon: 'c8y-icon c8y-icon-device-control',
            priority: 100
        },
        ...omitBy(route, isNil)
    })
]);

class OperationsListService {
    constructor(operationService, smartRulesService, ng1SmartRulesService) {
        this.operationService = operationService;
        this.smartRulesService = smartRulesService;
        this.ng1SmartRulesService = ng1SmartRulesService;
    }
    getOperations(customFilter = {}) {
        const filter = {
            withTotalPages: true,
            withDeleted: true,
            pageSize: 50,
            dateFrom: new Date(0).toISOString(),
            revert: true,
            ...customFilter
        };
        return this.operationService.list(filter);
    }
    isSmartRulesMicroserviceAvailable() {
        return this.smartRulesService.isMicroserviceAvailable();
    }
    getSmartRulesCreatePermissions() {
        if (this.ng1SmartRulesService && this.ng1SmartRulesService.permissionsCfgs) {
            return this.ng1SmartRulesService.permissionsCfgs.create;
        }
    }
    async createSmartRule(operation) {
        if (this.ng1SmartRulesService) {
            return await this.ng1SmartRulesService.addNewForOutputOperationWithUI(operation);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListService, deps: [{ token: i1.OperationService }, { token: i1.SmartRulesService }, { token: i2.Ng1SmartRulesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: i1.OperationService }, { type: i1.SmartRulesService }, { type: i2.Ng1SmartRulesService, decorators: [{
                    type: Optional
                }] }] });

class OperationsListItemComponent {
    constructor(bulkOperationListItemService, sharedService, operationsListService, route, router) {
        this.bulkOperationListItemService = bulkOperationListItemService;
        this.sharedService = sharedService;
        this.operationsListService = operationsListService;
        this.route = route;
        this.router = router;
        this.collapsed = true;
        this.readOnly = false;
        this.noExpandToggle = false;
        this.refreshLoading = false;
        this.OPERATION_STATUS = OperationStatus;
        this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
        this.deviceId = this.route.snapshot.parent?.data.contextData?.id ||
            this.route.snapshot.firstChild?.data.contextData?.id;
    }
    ngOnInit() {
        this.updateOperationTitle();
        const smartRulesCreatePermissions = this.operationsListService.getSmartRulesCreatePermissions();
        if (smartRulesCreatePermissions) {
            this.inventoryPermissions = smartRulesCreatePermissions[0].anyRole;
            this.smartRuleAdminPermissions = smartRulesCreatePermissions[1].anyRole;
        }
    }
    ngOnChanges(changes) {
        if (changes.operation && changes.operation.currentValue) {
            this.updateOperationTitle();
        }
    }
    createCustomizedBulkOperation($event) {
        if ($event) {
            $event.stopPropagation();
        }
        this.router.navigateByUrl(`/devicecontrol/single/create-bulk/${this.operation.id}`);
    }
    updateOperationTitle() {
        this.operationTitle =
            this.operation?.c8y_Command?.text ||
                this.operation?.description ||
                gettext('No command text or description available');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListItemComponent, deps: [{ token: i1$1.BulkOperationListItemService }, { token: i2$1.OperationsService }, { token: OperationsListService }, { token: i4.ActivatedRoute }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OperationsListItemComponent, isStandalone: true, selector: "c8y-operations-list-item", inputs: { operation: "operation", collapsed: "collapsed", readOnly: "readOnly", noExpandToggle: "noExpandToggle", isSmartRulesMicroserviceAvailable: "isSmartRulesMicroserviceAvailable" }, providers: [
            {
                provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                useExisting: forwardRef(() => OperationsListItemComponent)
            }
        ], viewQueries: [{ propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item--double-actions\"\n  [ngClass]=\"{ 'c8y-list__item--no-expand': noExpandToggle }\"\n  [collapsed]=\"collapsed\"\n  #listItem\n  id=\"{{ operation.id }}\"\n>\n  <c8y-li-icon>\n    <button\n      class=\"btn-clean\"\n      type=\"button\"\n      [attr.aria-label]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate\"\n      [tooltip]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate\"\n      placement=\"right\"\n      container=\"body\"\n      [delay]=\"500\"\n    >\n      <i\n        [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].icon\"\n        [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass\"\n      ></i>\n    </button>\n  </c8y-li-icon>\n  <div [ngClass]=\"{ 'content-flex-58': !readOnly, 'content-flex-50': readOnly }\">\n    <div class=\"col-5\">\n      <span title=\"{{ operationTitle | translate }}\" class=\"text-truncate\">\n        {{ operationTitle | translate }}\n      </span>\n    </div>\n    <div class=\"col-3\" *ngIf=\"!deviceId\">\n      <a\n        title=\"{{ operation.deviceName }}\"\n        [routerLink]=\"['/device', operation.deviceId, 'device-info']\"\n        routerLinkActive=\"active\"\n        class=\"text-truncate\"\n      >\n        {{ operation.deviceName }}\n      </a>\n    </div>\n    <div class=\"col-3\">\n      <small class=\"icon-flex text-muted\">\n        <i c8yIcon=\"calendar\" class=\"m-r-4\"></i>\n        {{ operation.creationTime | c8yDate }}\n      </small>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!readOnly\">\n    <c8y-li-action\n      label=\"{{ 'Schedule as bulk operation' | translate }}\"\n      (click)=\"createCustomizedBulkOperation($event)\"\n      icon=\"c8y-icon c8y-icon-energy\"\n      c8yProductExperience\n      inherit\n    ></c8y-li-action>\n    <ng-container *c8yIfAllowed=\"inventoryPermissions; allowAny: true\">\n      <ng-container *c8yIfAllowed=\"smartRuleAdminPermissions; allowAny: true\">\n        <c8y-li-action\n          *ngIf=\"isSmartRulesMicroserviceAvailable\"\n          label=\"{{ 'Create smart rule' | translate }}\"\n          (click)=\"operationsListService.createSmartRule(operation)\"\n          icon=\"sliders\"\n          c8yProductExperience\n          inherit\n        ></c8y-li-action>\n      </ng-container>\n    </ng-container>\n    <c8y-li-action\n      *ngIf=\"operation.status === OPERATION_STATUS.PENDING\"\n      label=\"{{ 'Cancel operation' | translate }}\"\n      (click)=\"$event.stopPropagation(); sharedService.cancel(operation)\"\n      icon=\"times-circle\"\n      c8yProductExperience\n      inherit\n    ></c8y-li-action>\n  </ng-container>\n  <c8y-li-collapse class=\"m-b-16\">\n    <c8y-operation-details-tabs\n      *ngIf=\"!listItem.collapsed\"\n      [operation]=\"operation\"\n      [bulkOperationModalDetailsService]=\"bulkOperationListItemService\"\n    ></c8y-operation-details-tabs>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1$2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i1$2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i1$2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.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: "ngmodule", type: OperationsListItemDetailsModule }, { kind: "component", type: i8.OperationDetailsTabsComponent, selector: "c8y-operation-details-tabs", inputs: ["operation", "readOnly", "bulkOperationModalDetailsService"], outputs: ["onRetryFailedOperations", "showFailedOperation"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-operations-list-item', standalone: true, imports: [CoreModule, TooltipModule, OperationsListItemDetailsModule, RouterLink], providers: [
                        {
                            provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                            useExisting: forwardRef(() => OperationsListItemComponent)
                        }
                    ], template: "<c8y-li\n  class=\"c8y-list__item--double-actions\"\n  [ngClass]=\"{ 'c8y-list__item--no-expand': noExpandToggle }\"\n  [collapsed]=\"collapsed\"\n  #listItem\n  id=\"{{ operation.id }}\"\n>\n  <c8y-li-icon>\n    <button\n      class=\"btn-clean\"\n      type=\"button\"\n      [attr.aria-label]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate\"\n      [tooltip]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate\"\n      placement=\"right\"\n      container=\"body\"\n      [delay]=\"500\"\n    >\n      <i\n        [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].icon\"\n        [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass\"\n      ></i>\n    </button>\n  </c8y-li-icon>\n  <div [ngClass]=\"{ 'content-flex-58': !readOnly, 'content-flex-50': readOnly }\">\n    <div class=\"col-5\">\n      <span title=\"{{ operationTitle | translate }}\" class=\"text-truncate\">\n        {{ operationTitle | translate }}\n      </span>\n    </div>\n    <div class=\"col-3\" *ngIf=\"!deviceId\">\n      <a\n        title=\"{{ operation.deviceName }}\"\n        [routerLink]=\"['/device', operation.deviceId, 'device-info']\"\n        routerLinkActive=\"active\"\n        class=\"text-truncate\"\n      >\n        {{ operation.deviceName }}\n      </a>\n    </div>\n    <div class=\"col-3\">\n      <small class=\"icon-flex text-muted\">\n        <i c8yIcon=\"calendar\" class=\"m-r-4\"></i>\n        {{ operation.creationTime | c8yDate }}\n      </small>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!readOnly\">\n    <c8y-li-action\n      label=\"{{ 'Schedule as bulk operation' | translate }}\"\n      (click)=\"createCustomizedBulkOperation($event)\"\n      icon=\"c8y-icon c8y-icon-energy\"\n      c8yProductExperience\n      inherit\n    ></c8y-li-action>\n    <ng-container *c8yIfAllowed=\"inventoryPermissions; allowAny: true\">\n      <ng-container *c8yIfAllowed=\"smartRuleAdminPermissions; allowAny: true\">\n        <c8y-li-action\n          *ngIf=\"isSmartRulesMicroserviceAvailable\"\n          label=\"{{ 'Create smart rule' | translate }}\"\n          (click)=\"operationsListService.createSmartRule(operation)\"\n          icon=\"sliders\"\n          c8yProductExperience\n          inherit\n        ></c8y-li-action>\n      </ng-container>\n    </ng-container>\n    <c8y-li-action\n      *ngIf=\"operation.status === OPERATION_STATUS.PENDING\"\n      label=\"{{ 'Cancel operation' | translate }}\"\n      (click)=\"$event.stopPropagation(); sharedService.cancel(operation)\"\n      icon=\"times-circle\"\n      c8yProductExperience\n      inherit\n    ></c8y-li-action>\n  </ng-container>\n  <c8y-li-collapse class=\"m-b-16\">\n    <c8y-operation-details-tabs\n      *ngIf=\"!listItem.collapsed\"\n      [operation]=\"operation\"\n      [bulkOperationModalDetailsService]=\"bulkOperationListItemService\"\n    ></c8y-operation-details-tabs>\n  </c8y-li-collapse>\n</c8y-li>\n" }]
        }], ctorParameters: () => [{ type: i1$1.BulkOperationListItemService }, { type: i2$1.OperationsService }, { type: OperationsListService }, { type: i4.ActivatedRoute }, { type: i4.Router }], propDecorators: { operation: [{
                type: Input
            }], collapsed: [{
                type: Input
            }], readOnly: [{
                type: Input
            }], noExpandToggle: [{
                type: Input
            }], isSmartRulesMicroserviceAvailable: [{
                type: Input
            }], listItem: [{
                type: ViewChild,
                args: ['listItem', { static: true }]
            }] } });

class OperationsListComponent {
    constructor(realtime, operationsListService, route) {
        this.realtime = realtime;
        this.operationsListService = operationsListService;
        this.route = route;
        this.fragmentType = input();
        this.readOnlyItems = input(false);
        this.deviceId = this.route.snapshot.parent.data.contextData?.id;
        this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
        this.refreshLoading = false;
        this.isSmartRulesMicroserviceAvailable = false;
        this.showOverviewBreadcrumbs = false;
        this.statusFilter$ = new BehaviorSubject(null);
        this.reload$ = new BehaviorSubject(null);
        this.operations$ = combineLatest(this.statusFilter$, this.reload$).pipe(tap(() => {
            this.refreshLoading = true;
        }), switchMap(([statusFilters]) => this.filter(statusFilters)), tap(() => {
            this.refreshLoading = false;
        }), shareReplay(1));
        this.operationsFilterPipe = pipe(map((operations) => {
            const statusFilters = this.statusFilter$.getValue();
            if (!statusFilters || !statusFilters.length) {
                return operations;
            }
            const allowedStatuses = flatten(statusFilters.map(sf => sf.status));
            return operations.filter(op => allowedStatuses.includes(op.status));
        }));
        this.productExperienceEvent = {
            eventName: !!this.deviceId ? SINGLE_OPERATION_EVENT_DEVICE_TAB : SINGLE_OPERATION_EVENT_OVERVIEW
        };
        this.title = this.route.snapshot.parent.data.contextData
            ? this.route.snapshot.parent.data.contextData.name
            : gettext('Single operations');
        this.showOverviewBreadcrumbs = !this.deviceId;
    }
    async ngOnInit() {
        this.isSmartRulesMicroserviceAvailable =
            await this.operationsListService.isSmartRulesMicroserviceAvailable();
    }
    filter(statusFilters) {
        const status = statusFilters && statusFilters.length > 0
            ? {
                status: flatten(statusFilters.map(statusFilter => statusFilter.status))
            }
            : {};
        return this.getOperations(status);
    }
    getOperations(filter) {
        let queryFilter = this.deviceId ? { ...filter, deviceId: this.deviceId } : filter;
        if (this.fragmentType()) {
            queryFilter = { ...queryFilter, fragmentType: this.fragmentType() };
        }
        return this.operationsListService.getOperations(queryFilter);
    }
    compareOperations(operationA, operationB) {
        return (new Date(operationA.creationTime).getTime() - new Date(operationB.creationTime).getTime());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListComponent, deps: [{ token: i1$2.OperationRealtimeService }, { token: OperationsListService }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: OperationsListComponent, isStandalone: true, selector: "c8y-operations-list", inputs: { fragmentType: { classPropertyName: "fragmentType", publicName: "fragmentType", isSignal: true, isRequired: false, transformFunction: null }, readOnlyItems: { classPropertyName: "readOnlyItems", publicName: "readOnlyItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            OperationRealtimeService,
            {
                provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                useExisting: forwardRef(() => OperationsListComponent)
            }
        ], viewQueries: [{ propertyName: "statusFilter", first: true, predicate: ["statusFilter"], descendants: true, static: true }], ngImport: i0, template: "<c8y-title>{{ title | translate }}</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"showOverviewBreadcrumbs\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-overviews'\"\n    [label]=\"'Overviews' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-control'\"\n    [label]=\"'Device Control' | translate\"\n    [path]=\"'devicecontrol/single'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-control'\"\n    [label]=\"'Single operations' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-status-filter\n    #statusFilter\n    [options]=\"OPERATION_STATUS_OPTIONS_MAP\"\n    (onFilterChanged)=\"statusFilter$.next($event)\"\n    c8yProductExperience\n    inherit\n  ></c8y-status-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"realtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link d-flex a-i-center\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': refreshLoading }\"\n    ></i>\n    <span class=\"text-truncate\">\n      {{ 'Reload' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-content select=\"c8y-help\">\n  <c8y-help\n    src=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-view-single-operations\"\n  ></c8y-help>\n</ng-content>\n\n<!-- Empty state  -->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No items to display.' | translate\"\n  [subtitle]=\"'Operations will be displayed here.' | translate\"\n  *ngIf=\"(operations$ | async)?.data.length === 0 && !(statusFilter$ | async)\"\n></c8y-ui-empty-state>\n<!-- No results empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No results to display.' | translate\"\n  [subtitle]=\"'Adjust or reset the filter.' | translate\"\n  *ngIf=\"(operations$ | async)?.data.length === 0 && (statusFilter$ | async)\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filter' | translate }}\"\n    type=\"button\"\n    (click)=\"statusFilter.reset()\"\n    translate\n  >\n    Reset filter\n  </button>\n</c8y-ui-empty-state>\n\n<!-- Detailed list of operations + load more button -->\n<c8y-list-group class=\"m-b-24\">\n  <div\n    class=\"page-sticky-header c8y-list__item c8y-list__item--double-actions hidden-xs\"\n    *ngIf=\"(operations$ | async)?.data.length\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i class=\"p-l-24\"></i>\n      </div>\n      <div class=\"c8y-list__item__body text-truncate-wrap\">\n        <div class=\"content-flex-57\">\n          <div class=\"col-5\">\n            {{ 'Operation' | translate }}\n          </div>\n          <div\n            class=\"flex-grow\"\n            *ngIf=\"!deviceId\"\n          >\n            {{ 'Device' | translate }}\n          </div>\n          <div class=\"col-4\">\n            {{ 'Date created' | translate }}\n          </div>\n        </div>\n      </div>\n      <div class=\"c8y-list__item__actions\"></div>\n    </div>\n  </div>\n  <div\n    class=\"d-contents\"\n    *c8yFor=\"\n      let op of operations$ | async;\n      let i = index;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: deviceId, removeOnUpdate: true, insertOnUpdate: true };\n      comparator: compareOperations.bind(this);\n      loadMore: 'auto';\n      pipe: operationsFilterPipe\n    \"\n  >\n    <c8y-operations-list-item\n      class=\"d-contents\"\n      [operation]=\"op\"\n      [readOnly]=\"readOnlyItems()\"\n      [isSmartRulesMicroserviceAvailable]=\"isSmartRulesMicroserviceAvailable\"\n      (reload)=\"reload$.next()\"\n      c8yProductExperience\n      inherit\n    ></c8y-operations-list-item>\n  </div>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1$2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i1$2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1$2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "directive", type: i1$2.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$2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: i1$2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i1$2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i1$2.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "ngmodule", type: StatusFilterModule }, { kind: "component", type: i5.StatusFilterComponent, selector: "c8y-status-filter", inputs: ["options", "multiple", "small"], outputs: ["onFilterChanged"] }, { kind: "component", type: OperationsListItemComponent, selector: "c8y-operations-list-item", inputs: ["operation", "collapsed", "readOnly", "noExpandToggle", "isSmartRulesMicroserviceAvailable"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationsListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-operations-list', standalone: true, imports: [CoreModule, StatusFilterModule, OperationsListItemComponent], providers: [
                        OperationRealtimeService,
                        {
                            provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                            useExisting: forwardRef(() => OperationsListComponent)
                        }
                    ], template: "<c8y-title>{{ title | translate }}</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"showOverviewBreadcrumbs\">\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-overviews'\"\n    [label]=\"'Overviews' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-control'\"\n    [label]=\"'Device Control' | translate\"\n    [path]=\"'devicecontrol/single'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-device-control'\"\n    [label]=\"'Single operations' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-status-filter\n    #statusFilter\n    [options]=\"OPERATION_STATUS_OPTIONS_MAP\"\n    (onFilterChanged)=\"statusFilter$.next($event)\"\n    c8yProductExperience\n    inherit\n  ></c8y-status-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <c8y-realtime-btn [service]=\"realtime\"></c8y-realtime-btn>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link d-flex a-i-center\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"reload$.next()\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': refreshLoading }\"\n    ></i>\n    <span class=\"text-truncate\">\n      {{ 'Reload' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-content select=\"c8y-help\">\n  <c8y-help\n    src=\"/docs/device-management-application/monitoring-and-controlling-devices/#to-view-single-operations\"\n  ></c8y-help>\n</ng-content>\n\n<!-- Empty state  -->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-energy'\"\n  [title]=\"'No items to display.' | translate\"\n  [subtitle]=\"'Operations will be displayed here.' | translate\"\n  *ngIf=\"(operations$ | async)?.data.length === 0 && !(statusFilter$ | async)\"\n></c8y-ui-empty-state>\n<!-- No results empty state -->\n<c8y-ui-empty-state\n  [icon]=\"'search'\"\n  [title]=\"'No results to display.' | translate\"\n  [subtitle]=\"'Adjust or reset the filter.' | translate\"\n  *ngIf=\"(operations$ | async)?.data.length === 0 && (statusFilter$ | async)\"\n>\n  <button\n    class=\"btn btn-primary\"\n    title=\"{{ 'Reset filter' | translate }}\"\n    type=\"button\"\n    (click)=\"statusFilter.reset()\"\n    translate\n  >\n    Reset filter\n  </button>\n</c8y-ui-empty-state>\n\n<!-- Detailed list of operations + load more button -->\n<c8y-list-group class=\"m-b-24\">\n  <div\n    class=\"page-sticky-header c8y-list__item c8y-list__item--double-actions hidden-xs\"\n    *ngIf=\"(operations$ | async)?.data.length\"\n  >\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <i class=\"p-l-24\"></i>\n      </div>\n      <div class=\"c8y-list__item__body text-truncate-wrap\">\n        <div class=\"content-flex-57\">\n          <div class=\"col-5\">\n            {{ 'Operation' | translate }}\n          </div>\n          <div\n            class=\"flex-grow\"\n            *ngIf=\"!deviceId\"\n          >\n            {{ 'Device' | translate }}\n          </div>\n          <div class=\"col-4\">\n            {{ 'Date created' | translate }}\n          </div>\n        </div>\n      </div>\n      <div class=\"c8y-list__item__actions\"></div>\n    </div>\n  </div>\n  <div\n    class=\"d-contents\"\n    *c8yFor=\"\n      let op of operations$ | async;\n      let i = index;\n      realtime: realtime;\n      realtimeOptions: { entityOrId: deviceId, removeOnUpdate: true, insertOnUpdate: true };\n      comparator: compareOperations.bind(this);\n      loadMore: 'auto';\n      pipe: operationsFilterPipe\n    \"\n  >\n    <c8y-operations-list-item\n      class=\"d-contents\"\n      [operation]=\"op\"\n      [readOnly]=\"readOnlyItems()\"\n      [isSmartRulesMicroserviceAvailable]=\"isSmartRulesMicroserviceAvailable\"\n      (reload)=\"reload$.next()\"\n      c8yProductExperience\n      inherit\n    ></c8y-operations-list-item>\n  </div>\n</c8y-list-group>\n" }]
        }], ctorParameters: () => [{ type: i1$2.OperationRealtimeService }, { type: OperationsListService }, { type: i4.ActivatedRoute }], propDecorators: { statusFilter: [{
                type: ViewChild,
                args: ['statusFilter', { static: true }]
            }] } });

var operationsList_component = /*#__PURE__*/Object.freeze({
    __proto__: null,
    OperationsListComponent: OperationsListComponent
});

/**
 * Generated bundle index. Do not edit.
 */

export { OperationsListComponent, OperationsListItemComponent, OperationsListService, deviceControlOverviewFeatureProviderFactory, deviceControlTabFeatureProviderFactory };
//# sourceMappingURL=c8y-ngx-components-operations-operations-list.mjs.map