@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
88 lines • 12.1 kB
JavaScript
import { Component, EventEmitter, forwardRef, HostListener, Input, Output, ViewChild } from '@angular/core';
import { assignWith } from 'lodash-es';
import { GainsightService } from '../product-experience/gainsight.service';
import { PRODUCT_EXPERIENCE_EVENT_SOURCE } from '../product-experience/product-experience.model';
import * as i0 from "@angular/core";
import * as i1 from "../product-experience/gainsight.service";
import * as i2 from "../common/icon.directive";
import * as i3 from "@angular/common";
import * as i4 from "../i18n/c8y-translate.pipe";
/**
* Actions are functions that can be executed on the
* current list item. They are displayed next to the
* item and can be grouped in a dropdown.
*
* ```html
* <c8y-li>
* <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
* Delete
* </c8y-li-action>
* <c8y-li-action (click)="(false)" icon="rocket">
* Launch to space
* </c8y-li-action>
* </c8y-li>
* ```
*/
export class ListItemActionComponent {
constructor(gainsightService) {
this.gainsightService = gainsightService;
/**
* Defines if the action is disabled or not.
*/
this.disabled = false;
/**
* An EventEmitter to determine what to do if the
* action is triggered.
*/
this.click = new EventEmitter();
}
/**
* @ignore
*/
onClick(event) {
const element = event.closest('[title]') || event.closest('[uib-tooltip]');
if (!element) {
return;
}
const eventName = this.productExperienceEvent?.eventName || 'listItemAction';
const actionName = element.getAttribute('title') || element.getAttribute('uib-tooltip');
const action = this.gainsightService.translateToEnglish(actionName);
// Assign url and action to event data only if they are not already defined
const eventData = assignWith(this.productExperienceEvent?.data, {
url: element.baseURI,
action
}, (targetVal, sourceVal) => sourceVal ?? targetVal);
this.gainsightService.triggerEvent(eventName, eventData);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemActionComponent, deps: [{ token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: { label: "label", icon: "icon", disabled: "disabled" }, outputs: { click: "click" }, host: { listeners: { "click": "onClick($event.target)" } }, providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => ListItemActionComponent)
}
], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n <li>\n <button\n title=\"{{ label | translate }}\"\n (click)=\"click.emit($event)\"\n data-cy=\"c8y-li-action--btn\"\n [disabled]=\"disabled\"\n >\n <i\n [c8yIcon]=\"icon\"\n *ngIf=\"icon\"\n ></i>\n \n <span *ngIf=\"label\">{{ label | translate }}</span>\n <ng-content></ng-content>\n </button>\n </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemActionComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-list-item-action, c8y-li-action', providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => ListItemActionComponent)
}
], template: "<ng-template #template>\n <li>\n <button\n title=\"{{ label | translate }}\"\n (click)=\"click.emit($event)\"\n data-cy=\"c8y-li-action--btn\"\n [disabled]=\"disabled\"\n >\n <i\n [c8yIcon]=\"icon\"\n *ngIf=\"icon\"\n ></i>\n \n <span *ngIf=\"label\">{{ label | translate }}</span>\n <ng-content></ng-content>\n </button>\n </li>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i1.GainsightService }], propDecorators: { template: [{
type: ViewChild,
args: ['template', { static: false }]
}], label: [{
type: Input
}], icon: [{
type: Input
}], disabled: [{
type: Input
}], click: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click', ['$event.target']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1pdGVtLWFjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb3JlL2xpc3QtZ3JvdXAvbGlzdC1pdGVtLWFjdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9jb3JlL2xpc3QtZ3JvdXAvbGlzdC1pdGVtLWFjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDdkMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDM0UsT0FBTyxFQUdMLCtCQUErQixFQUNoQyxNQUFNLGdEQUFnRCxDQUFDOzs7Ozs7QUFHeEQ7Ozs7Ozs7Ozs7Ozs7OztHQWVHO0FBV0gsTUFBTSxPQUFPLHVCQUF1QjtJQW1DbEMsWUFBb0IsZ0JBQWtDO1FBQWxDLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFsQnREOztXQUVHO1FBRUgsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQjs7O1dBR0c7UUFFSCxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQVF3QixDQUFDO0lBRTFEOztPQUVHO0lBRUgsT0FBTyxDQUFDLEtBQWtCO1FBQ3hCLE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUMzRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDYixPQUFPO1FBQ1QsQ0FBQztRQUNELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxTQUFTLElBQUksZ0JBQWdCLENBQUM7UUFDN0UsTUFBTSxVQUFVLEdBQUcsT0FBTyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3hGLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNwRSwyRUFBMkU7UUFDM0UsTUFBTSxTQUFTLEdBQUcsVUFBVSxDQUMxQixJQUFJLENBQUMsc0JBQXNCLEVBQUUsSUFBSSxFQUNqQztZQUNFLEdBQUcsRUFBRSxPQUFPLENBQUMsT0FBTztZQUNwQixNQUFNO1NBQ1AsRUFDRCxDQUFDLFNBQVMsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLFNBQVMsSUFBSSxTQUFTLENBQ2pELENBQUM7UUFFRixJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUMzRCxDQUFDOytHQTVEVSx1QkFBdUI7bUdBQXZCLHVCQUF1Qix1TkFQdkI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsK0JBQStCO2dCQUN4QyxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixDQUFDO2FBQ3ZEO1NBQ0YsZ0lDMUNILHlhQWtCQTs7NEZEMEJhLHVCQUF1QjtrQkFWbkMsU0FBUzsrQkFDRSxxQ0FBcUMsYUFFcEM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLCtCQUErQjs0QkFDeEMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsd0JBQXdCLENBQUM7eUJBQ3ZEO3FCQUNGO3FGQU9ELFFBQVE7c0JBRFAsU0FBUzt1QkFBQyxVQUFVLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQU94QyxLQUFLO3NCQURKLEtBQUs7Z0JBTU4sSUFBSTtzQkFESCxLQUFLO2dCQU1OLFFBQVE7c0JBRFAsS0FBSztnQkFPTixLQUFLO3NCQURKLE1BQU07Z0JBZVAsT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBmb3J3YXJkUmVmLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGFzc2lnbldpdGggfSBmcm9tICdsb2Rhc2gtZXMnO1xuaW1wb3J0IHsgR2FpbnNpZ2h0U2VydmljZSB9IGZyb20gJy4uL3Byb2R1Y3QtZXhwZXJpZW5jZS9nYWluc2lnaHQuc2VydmljZSc7XG5pbXBvcnQge1xuICBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50LFxuICBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50U291cmNlLFxuICBQUk9EVUNUX0VYUEVSSUVOQ0VfRVZFTlRfU09VUkNFXG59IGZyb20gJy4uL3Byb2R1Y3QtZXhwZXJpZW5jZS9wcm9kdWN0LWV4cGVyaWVuY2UubW9kZWwnO1xuaW1wb3J0IHsgU3VwcG9ydGVkSWNvbnNTdWdnZXN0aW9ucyB9IGZyb20gJ0BjOHkvbmd4LWNvbXBvbmVudHMvaWNvbi1zZWxlY3Rvci9pY29ucyc7XG5cbi8qKlxuICogQWN0aW9ucyBhcmUgZnVuY3Rpb25zIHRoYXQgY2FuIGJlIGV4ZWN1dGVkIG9uIHRoZVxuICogY3VycmVudCBsaXN0IGl0ZW0uIFRoZXkgYXJlIGRpc3BsYXllZCBuZXh0IHRvIHRoZVxuICogaXRlbSBhbmQgY2FuIGJlIGdyb3VwZWQgaW4gYSBkcm9wZG93bi5cbiAqXG4gKiBgYGBodG1sXG4gKiA8Yzh5LWxpPlxuICogICA8Yzh5LWxpLWFjdGlvbiAoY2xpY2spPVwiZGVsZXRlRGV2aWNlKGRldmljZS5pZClcIiBpY29uPVwidGltZXNcIj5cbiAqICAgICBEZWxldGVcbiAqICAgPC9jOHktbGktYWN0aW9uPlxuICogICA8Yzh5LWxpLWFjdGlvbiAoY2xpY2spPVwiKGZhbHNlKVwiIGljb249XCJyb2NrZXRcIj5cbiAqICAgICBMYXVuY2ggdG8gc3BhY2VcbiAqICAgPC9jOHktbGktYWN0aW9uPlxuICogPC9jOHktbGk+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWxpc3QtaXRlbS1hY3Rpb24sIGM4eS1saS1hY3Rpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vbGlzdC1pdGVtLWFjdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IFBST0RVQ1RfRVhQRVJJRU5DRV9FVkVOVF9TT1VSQ0UsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBMaXN0SXRlbUFjdGlvbkNvbXBvbmVudClcbiAgICB9XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTGlzdEl0ZW1BY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50U291cmNlIHtcbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3RlbXBsYXRlJywgeyBzdGF0aWM6IGZhbHNlIH0pXG4gIHRlbXBsYXRlOiBhbnk7XG4gIC8qKlxuICAgKiBUaGUgbGFiZWwgdG8gZGlzcGxheSAoeW91IGNhbiBhbHRlcm5hdGl2ZWx5IHVzZVxuICAgKiBjb250ZW50IHByb2plY3Rpb24gdG8gZGlzcGxheSB0aGUgbGFiZWwpLlxuICAgKi9cbiAgQElucHV0KClcbiAgbGFiZWw6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBuYW1lIG9mIHRoZSBpY29uIHRvIHVzZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIGljb246IFN1cHBvcnRlZEljb25zU3VnZ2VzdGlvbnM7XG4gIC8qKlxuICAgKiBEZWZpbmVzIGlmIHRoZSBhY3Rpb24gaXMgZGlzYWJsZWQgb3Igbm90LlxuICAgKi9cbiAgQElucHV0KClcbiAgZGlzYWJsZWQgPSBmYWxzZTtcbiAgLyoqXG4gICAqIEFuIEV2ZW50RW1pdHRlciB0byBkZXRlcm1pbmUgd2hhdCB0byBkbyBpZiB0aGVcbiAgICogYWN0aW9uIGlzIHRyaWdnZXJlZC5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBjbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAvKipcbiAgICogVGhlIHByb2R1Y3QgZXhwZXJpZW5jZSBldmVudCB0byBiZSB0cmlnZ2VyZWRcbiAgICogd2hlbiB0aGUgYWN0aW9uIGlzIGNsaWNrZWQuXG4gICAqL1xuICBwcm9kdWN0RXhwZXJpZW5jZUV2ZW50OiBQcm9kdWN0RXhwZXJpZW5jZUV2ZW50O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZ2FpbnNpZ2h0U2VydmljZTogR2FpbnNpZ2h0U2VydmljZSkge31cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudC50YXJnZXQnXSlcbiAgb25DbGljayhldmVudDogSFRNTEVsZW1lbnQpIHtcbiAgICBjb25zdCBlbGVtZW50ID0gZXZlbnQuY2xvc2VzdCgnW3RpdGxlXScpIHx8IGV2ZW50LmNsb3Nlc3QoJ1t1aWItdG9vbHRpcF0nKTtcbiAgICBpZiAoIWVsZW1lbnQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgZXZlbnROYW1lID0gdGhpcy5wcm9kdWN0RXhwZXJpZW5jZUV2ZW50Py5ldmVudE5hbWUgfHwgJ2xpc3RJdGVtQWN0aW9uJztcbiAgICBjb25zdCBhY3Rpb25OYW1lID0gZWxlbWVudC5nZXRBdHRyaWJ1dGUoJ3RpdGxlJykgfHwgZWxlbWVudC5nZXRBdHRyaWJ1dGUoJ3VpYi10b29sdGlwJyk7XG4gICAgY29uc3QgYWN0aW9uID0gdGhpcy5nYWluc2lnaHRTZXJ2aWNlLnRyYW5zbGF0ZVRvRW5nbGlzaChhY3Rpb25OYW1lKTtcbiAgICAvLyBBc3NpZ24gdXJsIGFuZCBhY3Rpb24gdG8gZXZlbnQgZGF0YSBvbmx5IGlmIHRoZXkgYXJlIG5vdCBhbHJlYWR5IGRlZmluZWRcbiAgICBjb25zdCBldmVudERhdGEgPSBhc3NpZ25XaXRoKFxuICAgICAgdGhpcy5wcm9kdWN0RXhwZXJpZW5jZUV2ZW50Py5kYXRhLFxuICAgICAge1xuICAgICAgICB1cmw6IGVsZW1lbnQuYmFzZVVSSSxcbiAgICAgICAgYWN0aW9uXG4gICAgICB9LFxuICAgICAgKHRhcmdldFZhbCwgc291cmNlVmFsKSA9PiBzb3VyY2VWYWwgPz8gdGFyZ2V0VmFsXG4gICAgKTtcblxuICAgIHRoaXMuZ2FpbnNpZ2h0U2VydmljZS50cmlnZ2VyRXZlbnQoZXZlbnROYW1lLCBldmVudERhdGEpO1xuICB9XG59XG4iLCI8bmctdGVtcGxhdGUgI3RlbXBsYXRlPlxuICA8bGk+XG4gICAgPGJ1dHRvblxuICAgICAgdGl0bGU9XCJ7eyBsYWJlbCB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICAoY2xpY2spPVwiY2xpY2suZW1pdCgkZXZlbnQpXCJcbiAgICAgIGRhdGEtY3k9XCJjOHktbGktYWN0aW9uLS1idG5cIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICA+XG4gICAgICA8aVxuICAgICAgICBbYzh5SWNvbl09XCJpY29uXCJcbiAgICAgICAgKm5nSWY9XCJpY29uXCJcbiAgICAgID48L2k+XG4gICAgICAmbmJzcDtcbiAgICAgIDxzcGFuICpuZ0lmPVwibGFiZWxcIj57eyBsYWJlbCB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2J1dHRvbj5cbiAgPC9saT5cbjwvbmctdGVtcGxhdGU+XG4iXX0=