@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
85 lines • 12.8 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap/popover';
import { gettext } from '../i18n/gettext';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ngx-bootstrap/popover";
import * as i3 from "../i18n/c8y-translate.pipe";
/**
* A component to show a popover right next to the
* user action. Add this component where the confirm modal
* should be shown and toggle isOpen to display it. You
* can use `await isShow()` to wait for a result on the
* click action.
*/
export class PopoverConfirmComponent {
constructor() {
this.buttons = [
{ label: gettext('cancel'), action: () => Promise.reject() }
];
this.isOpen = false;
this.containerClass = '';
this.placement = 'right';
this.outsideClick = false;
this.adaptivePosition = false;
this.container = 'body';
}
/**
* Show the popover. Wait until an action is performed on it.
*/
async show(buttons) {
this.buttons = buttons || this.buttons;
this.isOpen = true;
let result;
try {
result = await new Promise((resolve, reject) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return (this.click = (action) => action().then(resolve).catch(reject));
});
}
catch (ex) {
throw ex;
}
finally {
this.isOpen = false;
}
return result;
}
buttonStatus(status) {
if (status) {
return `btn-${status}`;
}
return 'btn-default';
}
handleOutsideClick() {
this.click(() => Promise.reject());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: { buttons: "buttons", message: "message", title: "title", isOpen: "isOpen", containerClass: "containerClass", placement: "placement", outsideClick: "outsideClick", adaptivePosition: "adaptivePosition", container: "container" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverDirective, descendants: true }], ngImport: i0, template: "<div\n [class]=\"containerClass\"\n [popoverTitle]=\"title | translate\"\n [popover]=\"popover\"\n [isOpen]=\"isOpen\"\n [container]=\"container\"\n [placement]=\"placement\"\n [outsideClick]=\"outsideClick\"\n (onHidden)=\"handleOutsideClick()\"\n triggers=\"\"\n [adaptivePosition]=\"adaptivePosition\"\n>\n <ng-content></ng-content>\n</div>\n<ng-template #popover>\n <p>\n {{ message | translate }}\n </p>\n <div class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\">\n <ng-container *ngFor=\"let button of buttons\">\n <button\n class=\"btn btn-sm m-l-0\"\n title=\"{{ button.label | translate }}\"\n [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n [ngClass]=\"buttonStatus(button.status)\"\n (click)=\"click(button.action)\"\n >\n {{ button.label | translate }}\n </button>\n </ng-container>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverConfirmComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-popover-confirm', template: "<div\n [class]=\"containerClass\"\n [popoverTitle]=\"title | translate\"\n [popover]=\"popover\"\n [isOpen]=\"isOpen\"\n [container]=\"container\"\n [placement]=\"placement\"\n [outsideClick]=\"outsideClick\"\n (onHidden)=\"handleOutsideClick()\"\n triggers=\"\"\n [adaptivePosition]=\"adaptivePosition\"\n>\n <ng-content></ng-content>\n</div>\n<ng-template #popover>\n <p>\n {{ message | translate }}\n </p>\n <div class=\"popover-footer d-flex gap-16 flex-wrap a-i-center\">\n <ng-container *ngFor=\"let button of buttons\">\n <button\n class=\"btn btn-sm m-l-0\"\n title=\"{{ button.label | translate }}\"\n [attr.data-cy]=\"'popover-confirm--' + (button.label | translate)\"\n [ngClass]=\"buttonStatus(button.status)\"\n (click)=\"click(button.action)\"\n >\n {{ button.label | translate }}\n </button>\n </ng-container>\n </div>\n</ng-template>\n" }]
}], propDecorators: { popover: [{
type: ViewChild,
args: [PopoverDirective, { static: false }]
}], buttons: [{
type: Input
}], message: [{
type: Input
}], title: [{
type: Input
}], isOpen: [{
type: Input
}], containerClass: [{
type: Input
}], placement: [{
type: Input
}], outsideClick: [{
type: Input
}], adaptivePosition: [{
type: Input
}], container: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb25maXJtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvcmUvbW9kYWwvcG9wb3Zlci1jb25maXJtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2NvcmUvbW9kYWwvcG9wb3Zlci1jb25maXJtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUV6RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBa0IxQzs7Ozs7O0dBTUc7QUFLSCxNQUFNLE9BQU8sdUJBQXVCO0lBSnBDO1FBTVcsWUFBTyxHQUE0QjtZQUMxQyxFQUFFLEtBQUssRUFBRSxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsRUFBRTtTQUM3RCxDQUFDO1FBR08sV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLG1CQUFjLEdBQUcsRUFBRSxDQUFDO1FBQ3BCLGNBQVMsR0FBRyxPQUFPLENBQUM7UUFDcEIsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDckIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLGNBQVMsR0FBRyxNQUFNLENBQUM7S0FtQzdCO0lBOUJDOztPQUVHO0lBQ0gsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFpQztRQUMxQyxJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ25CLElBQUksTUFBTSxDQUFDO1FBQ1gsSUFBSSxDQUFDO1lBQ0gsTUFBTSxHQUFHLE1BQU0sSUFBSSxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFFLEVBQUU7Z0JBQzdDLDhEQUE4RDtnQkFDOUQsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxNQUEwQixFQUFFLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7WUFDN0YsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDO1FBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQztZQUNaLE1BQU0sRUFBRSxDQUFDO1FBQ1gsQ0FBQztnQkFBUyxDQUFDO1lBQ1QsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDdEIsQ0FBQztRQUNELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFRCxZQUFZLENBQUMsTUFBTTtRQUNqQixJQUFJLE1BQU0sRUFBRSxDQUFDO1lBQ1gsT0FBTyxPQUFPLE1BQU0sRUFBRSxDQUFDO1FBQ3pCLENBQUM7UUFDRCxPQUFPLGFBQWEsQ0FBQztJQUN2QixDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQzsrR0E5Q1UsdUJBQXVCO21HQUF2Qix1QkFBdUIsZ1ZBQ3ZCLGdCQUFnQixnRENqQzdCLHM2QkFnQ0E7OzRGREFhLHVCQUF1QjtrQkFKbkMsU0FBUzsrQkFDRSxxQkFBcUI7OEJBSWlCLE9BQU87c0JBQXRELFNBQVM7dUJBQUMsZ0JBQWdCLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUNyQyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBvcG92ZXJEaXJlY3RpdmUgfSBmcm9tICduZ3gtYm9vdHN0cmFwL3BvcG92ZXInO1xuaW1wb3J0IHsgU3RhdHVzVHlwZSB9IGZyb20gJy4uL2NvbW1vbi9zdGF0dXMubW9kZWwnO1xuaW1wb3J0IHsgZ2V0dGV4dCB9IGZyb20gJy4uL2kxOG4vZ2V0dGV4dCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUG9wb3ZlckNvbmZpcm1CdXR0b25zIHtcbiAgLyoqXG4gICAqIFRoZSBsYWJlbCBvZiB0aGUgYnV0dG9uXG4gICAqL1xuICBsYWJlbDogc3RyaW5nO1xuICAvKipcbiAgICogV2hpY2ggYWN0aW9uIHRvIHBlcmZvcm0uXG4gICAqL1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBhY3Rpb246ICgpID0+IFByb21pc2U8YW55PjtcbiAgLyoqXG4gICAqIFRoZSBzdGF0dXMgY2xhc3MgYXR0YWNoZWQgdG8gdGhlIGJ1dHRvbi5cbiAgICovXG4gIHN0YXR1cz86IFN0YXR1c1R5cGUgfCAncHJpbWFyeScgfCAnZGVmYXVsdCc7XG59XG5cbi8qKlxuICogQSBjb21wb25lbnQgdG8gc2hvdyBhIHBvcG92ZXIgcmlnaHQgbmV4dCB0byB0aGVcbiAqIHVzZXIgYWN0aW9uLiBBZGQgdGhpcyBjb21wb25lbnQgd2hlcmUgdGhlIGNvbmZpcm0gbW9kYWxcbiAqIHNob3VsZCBiZSBzaG93biBhbmQgdG9nZ2xlIGlzT3BlbiB0byBkaXNwbGF5IGl0LiBZb3VcbiAqIGNhbiB1c2UgYGF3YWl0IGlzU2hvdygpYCB0byB3YWl0IGZvciBhIHJlc3VsdCBvbiB0aGVcbiAqIGNsaWNrIGFjdGlvbi5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LXBvcG92ZXItY29uZmlybScsXG4gIHRlbXBsYXRlVXJsOiAnLi9wb3BvdmVyLWNvbmZpcm0uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFBvcG92ZXJDb25maXJtQ29tcG9uZW50IHtcbiAgQFZpZXdDaGlsZChQb3BvdmVyRGlyZWN0aXZlLCB7IHN0YXRpYzogZmFsc2UgfSkgcG9wb3ZlcjogUG9wb3ZlckRpcmVjdGl2ZTtcbiAgQElucHV0KCkgYnV0dG9uczogUG9wb3ZlckNvbmZpcm1CdXR0b25zW10gPSBbXG4gICAgeyBsYWJlbDogZ2V0dGV4dCgnY2FuY2VsJyksIGFjdGlvbjogKCkgPT4gUHJvbWlzZS5yZWplY3QoKSB9XG4gIF07XG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZztcbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgaXNPcGVuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGNvbnRhaW5lckNsYXNzID0gJyc7XG4gIEBJbnB1dCgpIHBsYWNlbWVudCA9ICdyaWdodCc7XG4gIEBJbnB1dCgpIG91dHNpZGVDbGljayA9IGZhbHNlO1xuICBASW5wdXQoKSBhZGFwdGl2ZVBvc2l0aW9uID0gZmFsc2U7XG4gIEBJbnB1dCgpIGNvbnRhaW5lciA9ICdib2R5JztcblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBjbGljazogKGFjdGlvbjogKCkgPT4gUHJvbWlzZTxhbnk+KSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBTaG93IHRoZSBwb3BvdmVyLiBXYWl0IHVudGlsIGFuIGFjdGlvbiBpcyBwZXJmb3JtZWQgb24gaXQuXG4gICAqL1xuICBhc3luYyBzaG93KGJ1dHRvbnM/OiBQb3BvdmVyQ29uZmlybUJ1dHRvbnNbXSkge1xuICAgIHRoaXMuYnV0dG9ucyA9IGJ1dHRvbnMgfHwgdGhpcy5idXR0b25zO1xuICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcbiAgICBsZXQgcmVzdWx0O1xuICAgIHRyeSB7XG4gICAgICByZXN1bHQgPSBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gICAgICAgIHJldHVybiAodGhpcy5jbGljayA9IChhY3Rpb246ICgpID0+IFByb21pc2U8YW55PikgPT4gYWN0aW9uKCkudGhlbihyZXNvbHZlKS5jYXRjaChyZWplY3QpKTtcbiAgICAgIH0pO1xuICAgIH0gY2F0Y2ggKGV4KSB7XG4gICAgICB0aHJvdyBleDtcbiAgICB9IGZpbmFsbHkge1xuICAgICAgdGhpcy5pc09wZW4gPSBmYWxzZTtcbiAgICB9XG4gICAgcmV0dXJuIHJlc3VsdDtcbiAgfVxuXG4gIGJ1dHRvblN0YXR1cyhzdGF0dXMpIHtcbiAgICBpZiAoc3RhdHVzKSB7XG4gICAgICByZXR1cm4gYGJ0bi0ke3N0YXR1c31gO1xuICAgIH1cbiAgICByZXR1cm4gJ2J0bi1kZWZhdWx0JztcbiAgfVxuXG4gIGhhbmRsZU91dHNpZGVDbGljaygpIHtcbiAgICB0aGlzLmNsaWNrKCgpID0+IFByb21pc2UucmVqZWN0KCkpO1xuICB9XG59XG4iLCI8ZGl2XG4gIFtjbGFzc109XCJjb250YWluZXJDbGFzc1wiXG4gIFtwb3BvdmVyVGl0bGVdPVwidGl0bGUgfCB0cmFuc2xhdGVcIlxuICBbcG9wb3Zlcl09XCJwb3BvdmVyXCJcbiAgW2lzT3Blbl09XCJpc09wZW5cIlxuICBbY29udGFpbmVyXT1cImNvbnRhaW5lclwiXG4gIFtwbGFjZW1lbnRdPVwicGxhY2VtZW50XCJcbiAgW291dHNpZGVDbGlja109XCJvdXRzaWRlQ2xpY2tcIlxuICAob25IaWRkZW4pPVwiaGFuZGxlT3V0c2lkZUNsaWNrKClcIlxuICB0cmlnZ2Vycz1cIlwiXG4gIFthZGFwdGl2ZVBvc2l0aW9uXT1cImFkYXB0aXZlUG9zaXRpb25cIlxuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjcG9wb3Zlcj5cbiAgPHA+XG4gICAge3sgbWVzc2FnZSB8IHRyYW5zbGF0ZSB9fVxuICA8L3A+XG4gIDxkaXYgY2xhc3M9XCJwb3BvdmVyLWZvb3RlciBkLWZsZXggZ2FwLTE2IGZsZXgtd3JhcCBhLWktY2VudGVyXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYnV0dG9uIG9mIGJ1dHRvbnNcIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9XCJidG4gYnRuLXNtIG0tbC0wXCJcbiAgICAgICAgdGl0bGU9XCJ7eyBidXR0b24ubGFiZWwgfCB0cmFuc2xhdGUgfX1cIlxuICAgICAgICBbYXR0ci5kYXRhLWN5XT1cIidwb3BvdmVyLWNvbmZpcm0tLScgKyAoYnV0dG9uLmxhYmVsIHwgdHJhbnNsYXRlKVwiXG4gICAgICAgIFtuZ0NsYXNzXT1cImJ1dHRvblN0YXR1cyhidXR0b24uc3RhdHVzKVwiXG4gICAgICAgIChjbGljayk9XCJjbGljayhidXR0b24uYWN0aW9uKVwiXG4gICAgICA+XG4gICAgICAgIHt7IGJ1dHRvbi5sYWJlbCB8IHRyYW5zbGF0ZSB9fVxuICAgICAgPC9idXR0b24+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==