import { NgClass, NgTemplateOutlet, JsonPipe, KeyValuePipe } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, Component, NgModule } from '@angular/core';
import * as i1 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 } from '@c8y/ngx-components/operations/shared';
import { TooltipDirective } from 'ngx-bootstrap/tooltip';
import { pipe } from 'rxjs';
import { tap } from 'rxjs/operators';

class OperationsTimelineComponent {
    constructor(realtime, operationsService) {
        this.realtime = realtime;
        this.operationsService = operationsService;
        this.filterPipe = pipe(tap());
        this.loadMoreMode = 'auto';
        this.footerTemplates = [];
        this.propertiesToHide = [];
        this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OperationsTimelineComponent, deps: [{ token: i1.OperationRealtimeService }, { token: i2.OperationsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: OperationsTimelineComponent, isStandalone: true, selector: "c8y-operations-timeline", inputs: { operations: "operations", sourceId: "sourceId", filterPipe: "filterPipe", loadMoreMode: "loadMoreMode", bodyTemplate: "bodyTemplate", footerTemplates: "footerTemplates", propertiesToHide: "propertiesToHide" }, ngImport: i0, template: "@if (!operations?.data || !operations?.data?.length) {\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-energy'\"\n    [title]=\"'No recent operations found.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n}\n\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      loadMore: loadMoreMode\n    \"\n  >\n    {{ op.creationTime | c8yDate: 'medium' }}\n\n    <c8y-li>\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\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\n            @if (bodyTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: op }\"\n              ></ng-container>\n            } @else {\n              <small>{{ op.description }}</small>\n            }\n          </div>\n\n          @if (op.status === 'PENDING') {\n            <div class=\"m-l-auto showOnHover\">\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          }\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse #collapseEl>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n\n        <ul class=\"list-unstyled small\">\n          @for (prop of operationsService.getStandardKeys(op) | keyvalue; track prop.key) {\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\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          }\n\n          @for (key of operationsService.getNonStandardKeys(op, propertiesToHide); track key) {\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\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          }\n        </ul>\n\n        @for (footer of footerTemplates; track footer) {\n          <ng-container\n            [ngTemplateOutlet]=\"footer\"\n            [ngTemplateOutletContext]=\"{ $implicit: op }\"\n          ></ng-container>\n        }\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: 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: "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: "20.3.19", ngImport: i0, type: OperationsTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-operations-timeline', imports: [
                        EmptyStateComponent,
                        ListGroupComponent,
                        ForOfDirective,
                        ListItemTimelineComponent,
                        ListItemComponent,
                        ListItemIconComponent,
                        IconDirective,
                        TooltipDirective,
                        NgClass,
                        ListItemBodyComponent,
                        NgTemplateOutlet,
                        ListItemCollapseComponent,
                        C8yTranslateDirective,
                        JsonPipe,
                        DatePipe,
                        KeyValuePipe,
                        C8yTranslatePipe,
                        HumanizePipe
                    ], template: "@if (!operations?.data || !operations?.data?.length) {\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-energy'\"\n    [title]=\"'No recent operations found.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n}\n\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      loadMore: loadMoreMode\n    \"\n  >\n    {{ op.creationTime | c8yDate: 'medium' }}\n\n    <c8y-li>\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\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\n            @if (bodyTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"bodyTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: op }\"\n              ></ng-container>\n            } @else {\n              <small>{{ op.description }}</small>\n            }\n          </div>\n\n          @if (op.status === 'PENDING') {\n            <div class=\"m-l-auto showOnHover\">\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          }\n        </div>\n      </c8y-li-body>\n\n      <c8y-li-collapse #collapseEl>\n        <div\n          class=\"legend form-block\"\n          translate\n        >\n          Details\n        </div>\n\n        <ul class=\"list-unstyled small\">\n          @for (prop of operationsService.getStandardKeys(op) | keyvalue; track prop.key) {\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\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          }\n\n          @for (key of operationsService.getNonStandardKeys(op, propertiesToHide); track key) {\n            <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\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          }\n        </ul>\n\n        @for (footer of footerTemplates; track footer) {\n          <ng-container\n            [ngTemplateOutlet]=\"footer\"\n            [ngTemplateOutletContext]=\"{ $implicit: op }\"\n          ></ng-container>\n        }\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
            }], loadMoreMode: [{
                type: Input
            }], bodyTemplate: [{
                type: Input
            }], footerTemplates: [{
                type: Input
            }], propertiesToHide: [{
                type: Input
            }] } });

/**
 * @deprecated Use `OperationsTimelineComponent` as a standalone component instead.
 */
class OperationsTimelineModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OperationsTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: OperationsTimelineModule, imports: [OperationsTimelineComponent], exports: [OperationsTimelineComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OperationsTimelineModule, imports: [OperationsTimelineComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OperationsTimelineModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [OperationsTimelineComponent],
                    exports: [OperationsTimelineComponent]
                }]
        }] });

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

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