import * as i0 from '@angular/core';
import { Input, Component, Injectable, forwardRef, NgModule } from '@angular/core';
import { BulkOperationListItemService } from '@c8y/ngx-components/operations/bulk-operation-list-item';
import { C8yTranslatePipe, operationStatusIcons, operationStatusClasses, IconDirective, ProductExperienceDirective, DatePipe, PRODUCT_EXPERIENCE_EVENT_SOURCE } from '@c8y/ngx-components';
import { ACTIONS_OPERATIONS, COMPONENTS } from '@c8y/ngx-components/operations/product-experience';
import * as i1 from 'ngx-bootstrap/modal';
import * as i1$1 from '@c8y/client';
import * as i2 from '@c8y/ngx-components/operations/operations-list';
import { OperationsListItemComponent } from '@c8y/ngx-components/operations/operations-list';
import { NgIf, NgClass } from '@angular/common';
import { TooltipDirective } from 'ngx-bootstrap/tooltip';

class OperationDetailsModalComponent {
    constructor(modalRef, operationsListService) {
        this.modalRef = modalRef;
        this.operationsListService = operationsListService;
        this.collapsed = false;
        this.readOnly = false;
        this.isSmartRulesMicroserviceAvailable = false;
    }
    async ngOnInit() {
        this.isSmartRulesMicroserviceAvailable =
            await this.operationsListService.isSmartRulesMicroserviceAvailable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.OperationsListService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OperationDetailsModalComponent, isStandalone: true, selector: "c8y-operation-details-modal", inputs: { operation: "operation", collapsed: "collapsed", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator\">\n    <h3 id=\"modal-title\">{{ 'Single operation details' | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-operations-list-item\n      [operation]=\"operation\"\n      [collapsed]=\"collapsed\"\n      [noExpandToggle]=\"true\"\n      [readOnly]=\"readOnly\"\n      [isSmartRulesMicroserviceAvailable]=\"isSmartRulesMicroserviceAvailable\"\n    ></c8y-operations-list-item>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Close' | translate }}\"\n      type=\"button\"\n      (click)=\"modalRef.hide()\"\n    >\n      {{ 'Close' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: OperationsListItemComponent, selector: "c8y-operations-list-item", inputs: ["operation", "collapsed", "readOnly", "noExpandToggle", "isSmartRulesMicroserviceAvailable"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-operation-details-modal', imports: [OperationsListItemComponent, C8yTranslatePipe], template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator\">\n    <h3 id=\"modal-title\">{{ 'Single operation details' | translate }}</h3>\n  </div>\n\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-operations-list-item\n      [operation]=\"operation\"\n      [collapsed]=\"collapsed\"\n      [noExpandToggle]=\"true\"\n      [readOnly]=\"readOnly\"\n      [isSmartRulesMicroserviceAvailable]=\"isSmartRulesMicroserviceAvailable\"\n    ></c8y-operations-list-item>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Close' | translate }}\"\n      type=\"button\"\n      (click)=\"modalRef.hide()\"\n    >\n      {{ 'Close' | translate }}\n    </button>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.OperationsListService }], propDecorators: { operation: [{
                type: Input
            }], collapsed: [{
                type: Input
            }], readOnly: [{
                type: Input
            }] } });

class OperationDetailsService {
    constructor(operationService, modalService) {
        this.operationService = operationService;
        this.modalService = modalService;
    }
    /**
     * Opens a modal window with the details of given single operation.
     * @param operationOrOperationId Operation's object or id.
     * @param options Additional options:
     * - `collapsed`: boolean - whether the details pane should be initially collapsed
     * - `readOnly`: boolean - whether the details should be displayed in read-only mode
     */
    async openDetails(operationOrOperationId, options) {
        const operation = operationOrOperationId.id
            ? operationOrOperationId
            : (await this.operationService.detail(operationOrOperationId)).data;
        const initialState = { operation, ...options };
        this.modalService.show(OperationDetailsModalComponent, {
            initialState,
            class: 'modal-lg',
            ariaDescribedby: 'modal-body',
            ariaLabelledBy: 'modal-title'
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsService, deps: [{ token: i1$1.OperationService }, { token: i1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: i1$1.OperationService }, { type: i1.BsModalService }] });

/**
 * Operation details component displays a single operation's status, description and creationTime.
 *
 * ```html
 * <c8y-operation-details [operation]="operation"></c8y-operation-details>
 * ```
 */
class OperationDetailsComponent {
    constructor(operationDetailsService) {
        this.operationDetailsService = operationDetailsService;
        this.ACTIONS = ACTIONS_OPERATIONS;
        this.productExperienceEvent = {
            eventName: undefined, // supress emitting events if a parent component does not declare event name
            data: {
                component: COMPONENTS.OPERATION_DETAILS
            }
        };
    }
    ngOnInit() {
        this.statusIcons = operationStatusIcons;
        this.statusClasses = operationStatusClasses;
    }
    openDetails() {
        this.operationDetailsService.openDetails(this.operation);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsComponent, deps: [{ token: OperationDetailsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OperationDetailsComponent, isStandalone: true, selector: "c8y-operation-details", inputs: { operation: "operation" }, providers: [
            {
                provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                useExisting: forwardRef(() => OperationDetailsComponent)
            }
        ], ngImport: i0, template: "<div class=\"c8y-list--group\" *ngIf=\"operation\">\n  <a class=\"c8y-list__item\">\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <button\n          class=\"btn-clean\"\n          type=\"button\"\n          [attr.aria-label]=\"operation.status?.toString() | translate\"\n          [tooltip]=\"operation.status?.toString() | translate\"\n          [delay]=\"500\"\n          placement=\"right\"\n          container=\"body\"\n        >\n          <i\n            [c8yIcon]=\"statusIcons[operation.status]\"\n            [ngClass]=\"statusClasses[operation.status]\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body p-r-16\">\n        <div class=\"content-flex-40\">\n          <div class=\"col-8\">\n            <button\n              class=\"btn-clean text-truncate\"\n              type=\"button\"\n              title=\"{{ operation.description | translate }}\"\n              (click)=\"openDetails()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: ACTIONS.OPEN_OPERATION_DETAILS }\"\n            >\n              {{ operation.description | translate }}\n            </button>\n          </div>\n          <div class=\"col-4 text-muted\">\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"calendar\" class=\"m-r-4\"></i>\n              <span>{{ operation.creationTime | c8yDate }}</span>\n            </small>\n          </div>\n        </div>\n      </div>\n    </div>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-operation-details', providers: [
                        {
                            provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                            useExisting: forwardRef(() => OperationDetailsComponent)
                        }
                    ], imports: [
                        NgIf,
                        TooltipDirective,
                        IconDirective,
                        NgClass,
                        ProductExperienceDirective,
                        C8yTranslatePipe,
                        DatePipe
                    ], template: "<div class=\"c8y-list--group\" *ngIf=\"operation\">\n  <a class=\"c8y-list__item\">\n    <div class=\"c8y-list__item__block\">\n      <div class=\"c8y-list__item__icon\">\n        <button\n          class=\"btn-clean\"\n          type=\"button\"\n          [attr.aria-label]=\"operation.status?.toString() | translate\"\n          [tooltip]=\"operation.status?.toString() | translate\"\n          [delay]=\"500\"\n          placement=\"right\"\n          container=\"body\"\n        >\n          <i\n            [c8yIcon]=\"statusIcons[operation.status]\"\n            [ngClass]=\"statusClasses[operation.status]\"\n          ></i>\n        </button>\n      </div>\n      <div class=\"c8y-list__item__body p-r-16\">\n        <div class=\"content-flex-40\">\n          <div class=\"col-8\">\n            <button\n              class=\"btn-clean text-truncate\"\n              type=\"button\"\n              title=\"{{ operation.description | translate }}\"\n              (click)=\"openDetails()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: ACTIONS.OPEN_OPERATION_DETAILS }\"\n            >\n              {{ operation.description | translate }}\n            </button>\n          </div>\n          <div class=\"col-4 text-muted\">\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"calendar\" class=\"m-r-4\"></i>\n              <span>{{ operation.creationTime | c8yDate }}</span>\n            </small>\n          </div>\n        </div>\n      </div>\n    </div>\n  </a>\n</div>\n" }]
        }], ctorParameters: () => [{ type: OperationDetailsService }], propDecorators: { operation: [{
                type: Input
            }] } });

/**
 * This module allows to display details of a single operation in a modal.
 */
class OperationDetailsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModule, imports: [OperationDetailsComponent], exports: [OperationDetailsComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModule, providers: [OperationDetailsService, BulkOperationListItemService] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationDetailsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [OperationDetailsComponent],
                    providers: [OperationDetailsService, BulkOperationListItemService],
                    exports: [OperationDetailsComponent]
                }]
        }] });

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

export { OperationDetailsComponent, OperationDetailsModalComponent, OperationDetailsModule, OperationDetailsService };
//# sourceMappingURL=c8y-ngx-components-operations-operation-details.mjs.map
