@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
85 lines (80 loc) • 14.2 kB
JavaScript
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