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

Angular modules for Cumulocity IoT applications

import { NgTemplateOutlet, JsonPipe, KeyValuePipe } from '@angular/common';
import * as i0 from '@angular/core';
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@c8y/ngx-components';
import { EmptyStateComponent, ForOfDirective, IconDirective, ListGroupComponent, ListItemBodyComponent, ListItemCollapseComponent, ListItemComponent, ListItemIconComponent, ListItemTimelineComponent, C8yTranslatePipe, DatePipe, HumanizePipe, EventRealtimeService } from '@c8y/ngx-components';
import * as i2 from '@c8y/ngx-components/events';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { pipe } from 'rxjs';
import { tap } from 'rxjs/operators';

class EventsTimelineComponent {
    constructor(realtime, eventsService) {
        this.realtime = realtime;
        this.eventsService = eventsService;
        this.events = input(...(ngDevMode ? [undefined, { debugName: "events" }] : []));
        this.sourceId = input.required(...(ngDevMode ? [{ debugName: "sourceId" }] : []));
        this.filterPipe = input(pipe(tap()), ...(ngDevMode ? [{ debugName: "filterPipe" }] : []));
        this.bodyTemplate = input(...(ngDevMode ? [undefined, { debugName: "bodyTemplate" }] : []));
        this.footerTemplates = input([], ...(ngDevMode ? [{ debugName: "footerTemplates" }] : []));
        this.propertiesToHide = input([], ...(ngDevMode ? [{ debugName: "propertiesToHide" }] : []));
        this.loadMoreMode = input('auto', ...(ngDevMode ? [{ debugName: "loadMoreMode" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EventsTimelineComponent, deps: [{ token: i1.EventRealtimeService }, { token: i2.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: EventsTimelineComponent, isStandalone: true, selector: "c8y-events-timeline", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, sourceId: { classPropertyName: "sourceId", publicName: "sourceId", isSignal: true, isRequired: true, transformFunction: null }, filterPipe: { classPropertyName: "filterPipe", publicName: "filterPipe", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplates: { classPropertyName: "footerTemplates", publicName: "footerTemplates", isSignal: true, isRequired: false, transformFunction: null }, propertiesToHide: { classPropertyName: "propertiesToHide", publicName: "propertiesToHide", isSignal: true, isRequired: false, transformFunction: null }, loadMoreMode: { classPropertyName: "loadMoreMode", publicName: "loadMoreMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [EventRealtimeService], ngImport: i0, template: "@if (!events()?.data || !events()?.data?.length) {\n  <c8y-ui-empty-state\n    [icon]=\"'online'\"\n    [title]=\"'No recent events found.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let event of events();\n      pipe: filterPipe();\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId() };\n      loadMore: loadMoreMode()\n    \"\n  >\n    {{ event.creationTime | c8yDate: 'medium' }}\n\n    <c8y-li>\n      <c8y-li-icon>\n        <i [c8yIcon]=\"'online'\"></i>\n      </c8y-li-icon>\n\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div data-cy=\"c8y-events-timeline--body-template\">\n            @if (bodyTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"$any({ $implicit: event })\"\n              ></ng-container>\n            } @else {\n              <small>{{ event.text }}</small>\n            }\n          </div>\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 eventsService.getStandardKeys(event) | 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                {{ $any(prop).value | translate }}\n              </label>\n              <span class=\"m-l-auto text-break-word\">\n                {{ $any(event)[$any(prop).key] | translate }}\n              </span>\n            </li>\n          }\n\n          @for (key of eventsService.getNonStandardKeys(event, 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                {{ event[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]=\"$any({ $implicit: event })\"\n          ></ng-container>\n        }\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { 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: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "ngmodule", type: CollapseModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EventsTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-events-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        JsonPipe,
                        KeyValuePipe,
                        NgTemplateOutlet,
                        C8yTranslatePipe,
                        DatePipe,
                        EmptyStateComponent,
                        ForOfDirective,
                        HumanizePipe,
                        IconDirective,
                        ListGroupComponent,
                        ListItemBodyComponent,
                        ListItemCollapseComponent,
                        ListItemComponent,
                        ListItemIconComponent,
                        ListItemTimelineComponent,
                        CollapseModule,
                        TooltipModule
                    ], providers: [EventRealtimeService], template: "@if (!events()?.data || !events()?.data?.length) {\n  <c8y-ui-empty-state\n    [icon]=\"'online'\"\n    [title]=\"'No recent events found.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n  <c8y-li-timeline\n    *c8yFor=\"\n      let event of events();\n      pipe: filterPipe();\n      realtime: realtime;\n      realtimeOptions: { entityOrId: sourceId() };\n      loadMore: loadMoreMode()\n    \"\n  >\n    {{ event.creationTime | c8yDate: 'medium' }}\n\n    <c8y-li>\n      <c8y-li-icon>\n        <i [c8yIcon]=\"'online'\"></i>\n      </c8y-li-icon>\n\n      <c8y-li-body>\n        <div class=\"d-flex text-break-word\">\n          <div data-cy=\"c8y-events-timeline--body-template\">\n            @if (bodyTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"$any({ $implicit: event })\"\n              ></ng-container>\n            } @else {\n              <small>{{ event.text }}</small>\n            }\n          </div>\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 eventsService.getStandardKeys(event) | 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                {{ $any(prop).value | translate }}\n              </label>\n              <span class=\"m-l-auto text-break-word\">\n                {{ $any(event)[$any(prop).key] | translate }}\n              </span>\n            </li>\n          }\n\n          @for (key of eventsService.getNonStandardKeys(event, 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                {{ event[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]=\"$any({ $implicit: event })\"\n          ></ng-container>\n        }\n      </c8y-li-collapse>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n" }]
        }], ctorParameters: () => [{ type: i1.EventRealtimeService }, { type: i2.EventsService }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], sourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceId", required: true }] }], filterPipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPipe", required: false }] }], bodyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyTemplate", required: false }] }], footerTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplates", required: false }] }], propertiesToHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToHide", required: false }] }], loadMoreMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreMode", required: false }] }] } });

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

export { EventsTimelineComponent };
//# sourceMappingURL=c8y-ngx-components-events-events-timeline.mjs.map