@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
143 lines (136 loc) • 14.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component, Injectable, forwardRef, NgModule } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { PopoverModule } from 'ngx-bootstrap/popover';
import * as i4 from 'ngx-bootstrap/tooltip';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i2$1 from '@c8y/ngx-components';
import { operationStatusIcons, operationStatusClasses, PRODUCT_EXPERIENCE_EVENT_SOURCE, CoreModule } from '@c8y/ngx-components';
import { BulkOperationListItemService } from '@c8y/ngx-components/operations/bulk-operation-list-item';
import * as i2 from '@c8y/ngx-components/operations/operations-list';
import { OperationsListItemComponent } from '@c8y/ngx-components/operations/operations-list';
import * as i1 from 'ngx-bootstrap/modal';
import { ACTIONS_OPERATIONS, COMPONENTS } from '@c8y/ngx-components/operations/product-experience';
import * as i1$1 from '@c8y/client';
import * as i3 from '@angular/common';
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: "19.2.14", 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: "19.2.14", type: OperationDetailsModalComponent, isStandalone: false, 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: i2.OperationsListItemComponent, selector: "c8y-operations-list-item", inputs: ["operation", "collapsed", "readOnly", "noExpandToggle", "isSmartRulesMicroserviceAvailable"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsModalComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-operation-details-modal', standalone: false, 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: "19.2.14", 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: "19.2.14", ngImport: i0, type: OperationDetailsService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsService, decorators: [{
type: Injectable
}], 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: "19.2.14", ngImport: i0, type: OperationDetailsComponent, deps: [{ token: OperationDetailsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OperationDetailsComponent, isStandalone: false, 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$1.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$1.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$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.DatePipe, name: "c8yDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-operation-details', providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => OperationDetailsComponent)
}
], standalone: false, 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: "19.2.14", ngImport: i0, type: OperationDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsModule, declarations: [OperationDetailsComponent, OperationDetailsModalComponent], imports: [CoreModule, PopoverModule, TooltipModule, CollapseModule, OperationsListItemComponent], exports: [OperationDetailsComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsModule, providers: [OperationDetailsService, BulkOperationListItemService], imports: [CoreModule, PopoverModule, TooltipModule, CollapseModule, OperationsListItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OperationDetailsModule, decorators: [{
type: NgModule,
args: [{
imports: [CoreModule, PopoverModule, TooltipModule, CollapseModule, OperationsListItemComponent],
providers: [OperationDetailsService, BulkOperationListItemService],
declarations: [OperationDetailsComponent, OperationDetailsModalComponent],
exports: [OperationDetailsComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OperationDetailsComponent, OperationDetailsModalComponent, OperationDetailsModule, OperationDetailsService };
//# sourceMappingURL=c8y-ngx-components-operations-operation-details.mjs.map