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

Angular modules for Cumulocity IoT applications

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 * as i2 from '@c8y/ngx-components/operations/shared';
import { OPERATION_STATUS_OPTIONS_MAP, OperationsSharedModule } 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';

class OperationsTimelineComponent {
    constructor(realtime, operationsService) {
        this.realtime = realtime;
        this.operationsService = operationsService;
        this.filterPipe = pipe(tap());
        this.footerTemplates = [];
        this.propertiesToHide = [];
        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" }] }); }
}
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" }]
        }], ctorParameters: () => [{ type: i1.OperationRealtimeService }, { type: i2.OperationsService }], propDecorators: { operations: [{
                type: Input
            }], sourceId: [{
                type: Input
            }], filterPipe: [{
                type: Input
            }], bodyTemplate: [{
                type: Input
            }], footerTemplates: [{
                type: Input
            }], propertiesToHide: [{
                type: Input
            }] } });

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] }); }
}
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],
                    exports: [OperationsTimelineComponent]
                }]
        }] });

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

export { OperationsTimelineComponent, OperationsTimelineModule };
//# sourceMappingURL=c8y-ngx-components-operations-operations-timeline.mjs.map