@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
54 lines • 13 kB
JavaScript
import { Component, forwardRef, Input } from '@angular/core';
import { operationStatusClasses, operationStatusIcons, PRODUCT_EXPERIENCE_EVENT_SOURCE } from '@c8y/ngx-components';
import { ACTIONS_OPERATIONS, COMPONENTS } from '@c8y/ngx-components/operations/product-experience';
import { OperationDetailsService } from './operation-details.service';
import * as i0 from "@angular/core";
import * as i1 from "./operation-details.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@angular/common";
import * as i4 from "ngx-bootstrap/tooltip";
/**
* Operation details component displays a single operation's status, description and creationTime.
*
* ```html
* <c8y-operation-details [operation]="operation"></c8y-operation-details>
* ```
*/
export 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: "18.2.13", ngImport: i0, type: OperationDetailsComponent, deps: [{ token: i1.OperationDetailsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OperationDetailsComponent, 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: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { 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: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OperationDetailsComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-operation-details', providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => OperationDetailsComponent)
}
], 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: i1.OperationDetailsService }], propDecorators: { operation: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BlcmF0aW9uLWRldGFpbHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vb3BlcmF0aW9ucy9vcGVyYXRpb24tZGV0YWlscy9vcGVyYXRpb24tZGV0YWlscy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9vcGVyYXRpb25zL29wZXJhdGlvbi1kZXRhaWxzL29wZXJhdGlvbi1kZXRhaWxzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQ0wsc0JBQXNCLEVBQ3RCLG9CQUFvQixFQUdwQiwrQkFBK0IsRUFDaEMsTUFBTSxxQkFBcUIsQ0FBQztBQUM3QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsVUFBVSxFQUFFLE1BQU0sbURBQW1ELENBQUM7QUFDbkcsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7OztBQUV0RTs7Ozs7O0dBTUc7QUFXSCxNQUFNLE9BQU8seUJBQXlCO0lBY3BDLFlBQW9CLHVCQUFnRDtRQUFoRCw0QkFBdUIsR0FBdkIsdUJBQXVCLENBQXlCO1FBYnBFLFlBQU8sR0FBRyxrQkFBa0IsQ0FBQztRQU03QiwyQkFBc0IsR0FBMkI7WUFDL0MsU0FBUyxFQUFFLFNBQVMsRUFBRSw0RUFBNEU7WUFDbEcsSUFBSSxFQUFFO2dCQUNKLFNBQVMsRUFBRSxVQUFVLENBQUMsaUJBQWlCO2FBQ3hDO1NBQ0YsQ0FBQztJQUVxRSxDQUFDO0lBRXhFLFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxHQUFHLG9CQUFvQixDQUFDO1FBQ3hDLElBQUksQ0FBQyxhQUFhLEdBQUcsc0JBQXNCLENBQUM7SUFDOUMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsdUJBQXVCLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUMzRCxDQUFDOytHQXZCVSx5QkFBeUI7bUdBQXpCLHlCQUF5QixvRkFQekI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsK0JBQStCO2dCQUN4QyxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHlCQUF5QixDQUFDO2FBQ3pEO1NBQ0YsMEJDM0JILG1oREE2Q0E7OzRGRGhCYSx5QkFBeUI7a0JBVnJDLFNBQVM7K0JBQ0UsdUJBQXVCLGFBRXRCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSwrQkFBK0I7NEJBQ3hDLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLDBCQUEwQixDQUFDO3lCQUN6RDtxQkFDRjs0RkFJUSxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSU9wZXJhdGlvbiB9IGZyb20gJ0BjOHkvY2xpZW50JztcbmltcG9ydCB7XG4gIG9wZXJhdGlvblN0YXR1c0NsYXNzZXMsXG4gIG9wZXJhdGlvblN0YXR1c0ljb25zLFxuICBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50LFxuICBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50U291cmNlLFxuICBQUk9EVUNUX0VYUEVSSUVOQ0VfRVZFTlRfU09VUkNFXG59IGZyb20gJ0BjOHkvbmd4LWNvbXBvbmVudHMnO1xuaW1wb3J0IHsgQUNUSU9OU19PUEVSQVRJT05TLCBDT01QT05FTlRTIH0gZnJvbSAnQGM4eS9uZ3gtY29tcG9uZW50cy9vcGVyYXRpb25zL3Byb2R1Y3QtZXhwZXJpZW5jZSc7XG5pbXBvcnQgeyBPcGVyYXRpb25EZXRhaWxzU2VydmljZSB9IGZyb20gJy4vb3BlcmF0aW9uLWRldGFpbHMuc2VydmljZSc7XG5cbi8qKlxuICogT3BlcmF0aW9uIGRldGFpbHMgY29tcG9uZW50IGRpc3BsYXlzIGEgc2luZ2xlIG9wZXJhdGlvbidzIHN0YXR1cywgZGVzY3JpcHRpb24gYW5kIGNyZWF0aW9uVGltZS5cbiAqXG4gKiBgYGBodG1sXG4gKiA8Yzh5LW9wZXJhdGlvbi1kZXRhaWxzIFtvcGVyYXRpb25dPVwib3BlcmF0aW9uXCI+PC9jOHktb3BlcmF0aW9uLWRldGFpbHM+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LW9wZXJhdGlvbi1kZXRhaWxzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL29wZXJhdGlvbi1kZXRhaWxzLmNvbXBvbmVudC5odG1sJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogUFJPRFVDVF9FWFBFUklFTkNFX0VWRU5UX1NPVVJDRSxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE9wZXJhdGlvbkRldGFpbHNDb21wb25lbnQpXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE9wZXJhdGlvbkRldGFpbHNDb21wb25lbnQgaW1wbGVtZW50cyBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50U291cmNlIHtcbiAgQUNUSU9OUyA9IEFDVElPTlNfT1BFUkFUSU9OUztcbiAgQElucHV0KCkgb3BlcmF0aW9uOiBJT3BlcmF0aW9uO1xuXG4gIHN0YXR1c0ljb25zOiBvYmplY3Q7XG4gIHN0YXR1c0NsYXNzZXM6IG9iamVjdDtcblxuICBwcm9kdWN0RXhwZXJpZW5jZUV2ZW50OiBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50ID0ge1xuICAgIGV2ZW50TmFtZTogdW5kZWZpbmVkLCAvLyBzdXByZXNzIGVtaXR0aW5nIGV2ZW50cyBpZiBhIHBhcmVudCBjb21wb25lbnQgZG9lcyBub3QgZGVjbGFyZSBldmVudCBuYW1lXG4gICAgZGF0YToge1xuICAgICAgY29tcG9uZW50OiBDT01QT05FTlRTLk9QRVJBVElPTl9ERVRBSUxTXG4gICAgfVxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgb3BlcmF0aW9uRGV0YWlsc1NlcnZpY2U6IE9wZXJhdGlvbkRldGFpbHNTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuc3RhdHVzSWNvbnMgPSBvcGVyYXRpb25TdGF0dXNJY29ucztcbiAgICB0aGlzLnN0YXR1c0NsYXNzZXMgPSBvcGVyYXRpb25TdGF0dXNDbGFzc2VzO1xuICB9XG5cbiAgb3BlbkRldGFpbHMoKSB7XG4gICAgdGhpcy5vcGVyYXRpb25EZXRhaWxzU2VydmljZS5vcGVuRGV0YWlscyh0aGlzLm9wZXJhdGlvbik7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjOHktbGlzdC0tZ3JvdXBcIiAqbmdJZj1cIm9wZXJhdGlvblwiPlxuICA8YSBjbGFzcz1cImM4eS1saXN0X19pdGVtXCI+XG4gICAgPGRpdiBjbGFzcz1cImM4eS1saXN0X19pdGVtX19ibG9ja1wiPlxuICAgICAgPGRpdiBjbGFzcz1cImM4eS1saXN0X19pdGVtX19pY29uXCI+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBjbGFzcz1cImJ0bi1jbGVhblwiXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJvcGVyYXRpb24uc3RhdHVzPy50b1N0cmluZygpIHwgdHJhbnNsYXRlXCJcbiAgICAgICAgICBbdG9vbHRpcF09XCJvcGVyYXRpb24uc3RhdHVzPy50b1N0cmluZygpIHwgdHJhbnNsYXRlXCJcbiAgICAgICAgICBbZGVsYXldPVwiNTAwXCJcbiAgICAgICAgICBwbGFjZW1lbnQ9XCJyaWdodFwiXG4gICAgICAgICAgY29udGFpbmVyPVwiYm9keVwiXG4gICAgICAgID5cbiAgICAgICAgICA8aVxuICAgICAgICAgICAgW2M4eUljb25dPVwic3RhdHVzSWNvbnNbb3BlcmF0aW9uLnN0YXR1c11cIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwic3RhdHVzQ2xhc3Nlc1tvcGVyYXRpb24uc3RhdHVzXVwiXG4gICAgICAgICAgPjwvaT5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjOHktbGlzdF9faXRlbV9fYm9keSBwLXItMTZcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQtZmxleC00MFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb2wtOFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICBjbGFzcz1cImJ0bi1jbGVhbiB0ZXh0LXRydW5jYXRlXCJcbiAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgIHRpdGxlPVwie3sgb3BlcmF0aW9uLmRlc2NyaXB0aW9uIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cIm9wZW5EZXRhaWxzKClcIlxuICAgICAgICAgICAgICBjOHlQcm9kdWN0RXhwZXJpZW5jZVxuICAgICAgICAgICAgICBpbmhlcml0XG4gICAgICAgICAgICAgIFthY3Rpb25EYXRhXT1cInsgYWN0aW9uOiBBQ1RJT05TLk9QRU5fT1BFUkFUSU9OX0RFVEFJTFMgfVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHt7IG9wZXJhdGlvbi5kZXNjcmlwdGlvbiB8IHRyYW5zbGF0ZSB9fVxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNvbC00IHRleHQtbXV0ZWRcIj5cbiAgICAgICAgICAgIDxzbWFsbCBjbGFzcz1cImljb24tZmxleFwiPlxuICAgICAgICAgICAgICA8aSBjOHlJY29uPVwiY2FsZW5kYXJcIiBjbGFzcz1cIm0tci00XCI+PC9pPlxuICAgICAgICAgICAgICA8c3Bhbj57eyBvcGVyYXRpb24uY3JlYXRpb25UaW1lIHwgYzh5RGF0ZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDwvc21hbGw+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvYT5cbjwvZGl2PlxuIl19