angular-confirmation-popover
Version:
An angular 15.0+ bootstrap confirmation popover
23 lines • 10.3 kB
JavaScript
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./confirmation-popover-window-options.provider";
import * as i2 from "@angular/common";
import * as i3 from "./focus.directive";
/**
* @internal
*/
export class ConfirmationPopoverWindowComponent {
constructor(options) {
this.options = options;
}
ngAfterViewInit() {
this.options.onAfterViewInit();
}
}
ConfirmationPopoverWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfirmationPopoverWindowComponent, deps: [{ token: i1.ConfirmationPopoverWindowOptions }], target: i0.ɵɵFactoryTarget.Component });
ConfirmationPopoverWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ConfirmationPopoverWindowComponent, selector: "mwl-confirmation-popover-window", ngImport: i0, template: "<ng-template #defaultTemplate let-options=\"options\">\n <div\n [ngClass]=\"[\n 'popover',\n options.placement,\n 'popover-' + options.placement,\n 'bs-popover-' + options.placement,\n options.popoverClass\n ]\"\n >\n <div class=\"popover-arrow arrow\"></div>\n <h3\n class=\"popover-title popover-header\"\n [innerHTML]=\"options.popoverTitle\"\n ></h3>\n <div class=\"popover-content popover-body\">\n <p [innerHTML]=\"options.popoverMessage\"></p>\n <div\n class=\"confirm-btns\"\n [class.confirm-btns-reversed]=\"options.reverseButtonOrder\"\n >\n <div class=\"confirm-btn-container\" *ngIf=\"!options.hideCancelButton\">\n <button\n type=\"button\"\n [mwlFocus]=\"options.focusButton === 'cancel'\"\n [class]=\"'btn btn-block btn-' + options.cancelButtonType\"\n (click)=\"options.onCancel({ clickEvent: $event })\"\n [innerHtml]=\"options.cancelText\"\n ></button>\n </div>\n <div class=\"confirm-btn-container\" *ngIf=\"!options.hideConfirmButton\">\n <button\n type=\"button\"\n [mwlFocus]=\"options.focusButton === 'confirm'\"\n [class]=\"'btn btn-block btn-' + options.confirmButtonType\"\n (click)=\"options.onConfirm({ clickEvent: $event })\"\n [innerHtml]=\"options.confirmText\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template\n [ngTemplateOutlet]=\"options.customTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{ options: options }\"\n>\n</ng-template>\n", styles: [".popover{display:block}.bs-popover-top .arrow,.bs-popover-bottom .arrow{left:50%}.bs-popover-left .arrow,.bs-popover-right .arrow{top:calc(50% - 8px)}.btn{transition:none}.confirm-btns{display:flex;justify-content:space-around}.confirm-btn-container{flex-basis:50%}.confirm-btn-container:not(:first-child){margin-left:4px}.confirm-btn-container:not(:last-child){margin-right:4px}.confirm-btns-reversed{flex-direction:row-reverse}.confirm-btns-reversed .confirm-btn-container:not(:first-child){margin-right:4px;margin-left:0}.confirm-btns-reversed .confirm-btn-container:not(:last-child){margin-right:0;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FocusDirective, selector: "[mwlFocus]", inputs: ["mwlFocus"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfirmationPopoverWindowComponent, decorators: [{
type: Component,
args: [{ selector: 'mwl-confirmation-popover-window', template: "<ng-template #defaultTemplate let-options=\"options\">\n <div\n [ngClass]=\"[\n 'popover',\n options.placement,\n 'popover-' + options.placement,\n 'bs-popover-' + options.placement,\n options.popoverClass\n ]\"\n >\n <div class=\"popover-arrow arrow\"></div>\n <h3\n class=\"popover-title popover-header\"\n [innerHTML]=\"options.popoverTitle\"\n ></h3>\n <div class=\"popover-content popover-body\">\n <p [innerHTML]=\"options.popoverMessage\"></p>\n <div\n class=\"confirm-btns\"\n [class.confirm-btns-reversed]=\"options.reverseButtonOrder\"\n >\n <div class=\"confirm-btn-container\" *ngIf=\"!options.hideCancelButton\">\n <button\n type=\"button\"\n [mwlFocus]=\"options.focusButton === 'cancel'\"\n [class]=\"'btn btn-block btn-' + options.cancelButtonType\"\n (click)=\"options.onCancel({ clickEvent: $event })\"\n [innerHtml]=\"options.cancelText\"\n ></button>\n </div>\n <div class=\"confirm-btn-container\" *ngIf=\"!options.hideConfirmButton\">\n <button\n type=\"button\"\n [mwlFocus]=\"options.focusButton === 'confirm'\"\n [class]=\"'btn btn-block btn-' + options.confirmButtonType\"\n (click)=\"options.onConfirm({ clickEvent: $event })\"\n [innerHtml]=\"options.confirmText\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template\n [ngTemplateOutlet]=\"options.customTemplate || defaultTemplate\"\n [ngTemplateOutletContext]=\"{ options: options }\"\n>\n</ng-template>\n", styles: [".popover{display:block}.bs-popover-top .arrow,.bs-popover-bottom .arrow{left:50%}.bs-popover-left .arrow,.bs-popover-right .arrow{top:calc(50% - 8px)}.btn{transition:none}.confirm-btns{display:flex;justify-content:space-around}.confirm-btn-container{flex-basis:50%}.confirm-btn-container:not(:first-child){margin-left:4px}.confirm-btn-container:not(:last-child){margin-right:4px}.confirm-btns-reversed{flex-direction:row-reverse}.confirm-btns-reversed .confirm-btn-container:not(:first-child){margin-right:4px;margin-left:0}.confirm-btns-reversed .confirm-btn-container:not(:last-child){margin-right:0;margin-left:4px}\n"] }]
}], ctorParameters: function () { return [{ type: i1.ConfirmationPopoverWindowOptions }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlybWF0aW9uLXBvcG92ZXItd2luZG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29uZmlybWF0aW9uLXBvcG92ZXIvc3JjL2xpYi9jb25maXJtYXRpb24tcG9wb3Zlci13aW5kb3cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1jb25maXJtYXRpb24tcG9wb3Zlci9zcmMvbGliL2NvbmZpcm1hdGlvbi1wb3BvdmVyLXdpbmRvdy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFHekQ7O0dBRUc7QUFNSCxNQUFNLE9BQU8sa0NBQWtDO0lBQzdDLFlBQW1CLE9BQXlDO1FBQXpDLFlBQU8sR0FBUCxPQUFPLENBQWtDO0lBQUcsQ0FBQztJQUVoRSxlQUFlO1FBQ2IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUNqQyxDQUFDOzsrSEFMVSxrQ0FBa0M7bUhBQWxDLGtDQUFrQyx1RUNYL0MsbXBEQWdEQTsyRkRyQ2Esa0NBQWtDO2tCQUw5QyxTQUFTOytCQUNFLGlDQUFpQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQWZ0ZXJWaWV3SW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29uZmlybWF0aW9uUG9wb3ZlcldpbmRvd09wdGlvbnMgfSBmcm9tICcuL2NvbmZpcm1hdGlvbi1wb3BvdmVyLXdpbmRvdy1vcHRpb25zLnByb3ZpZGVyJztcblxuLyoqXG4gKiBAaW50ZXJuYWxcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXdsLWNvbmZpcm1hdGlvbi1wb3BvdmVyLXdpbmRvdycsXG4gIHN0eWxlVXJsczogWycuL2NvbmZpcm1hdGlvbi1wb3BvdmVyLXdpbmRvdy5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vY29uZmlybWF0aW9uLXBvcG92ZXItd2luZG93LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgQ29uZmlybWF0aW9uUG9wb3ZlcldpbmRvd0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBjb25zdHJ1Y3RvcihwdWJsaWMgb3B0aW9uczogQ29uZmlybWF0aW9uUG9wb3ZlcldpbmRvd09wdGlvbnMpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMub3B0aW9ucy5vbkFmdGVyVmlld0luaXQoKTtcbiAgfVxufVxuIiwiPG5nLXRlbXBsYXRlICNkZWZhdWx0VGVtcGxhdGUgbGV0LW9wdGlvbnM9XCJvcHRpb25zXCI+XG4gIDxkaXZcbiAgICBbbmdDbGFzc109XCJbXG4gICAgICAncG9wb3ZlcicsXG4gICAgICBvcHRpb25zLnBsYWNlbWVudCxcbiAgICAgICdwb3BvdmVyLScgKyBvcHRpb25zLnBsYWNlbWVudCxcbiAgICAgICdicy1wb3BvdmVyLScgKyBvcHRpb25zLnBsYWNlbWVudCxcbiAgICAgIG9wdGlvbnMucG9wb3ZlckNsYXNzXG4gICAgXVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwicG9wb3Zlci1hcnJvdyBhcnJvd1wiPjwvZGl2PlxuICAgIDxoM1xuICAgICAgY2xhc3M9XCJwb3BvdmVyLXRpdGxlIHBvcG92ZXItaGVhZGVyXCJcbiAgICAgIFtpbm5lckhUTUxdPVwib3B0aW9ucy5wb3BvdmVyVGl0bGVcIlxuICAgID48L2gzPlxuICAgIDxkaXYgY2xhc3M9XCJwb3BvdmVyLWNvbnRlbnQgcG9wb3Zlci1ib2R5XCI+XG4gICAgICA8cCBbaW5uZXJIVE1MXT1cIm9wdGlvbnMucG9wb3Zlck1lc3NhZ2VcIj48L3A+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiY29uZmlybS1idG5zXCJcbiAgICAgICAgW2NsYXNzLmNvbmZpcm0tYnRucy1yZXZlcnNlZF09XCJvcHRpb25zLnJldmVyc2VCdXR0b25PcmRlclwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb25maXJtLWJ0bi1jb250YWluZXJcIiAqbmdJZj1cIiFvcHRpb25zLmhpZGVDYW5jZWxCdXR0b25cIj5cbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIFttd2xGb2N1c109XCJvcHRpb25zLmZvY3VzQnV0dG9uID09PSAnY2FuY2VsJ1wiXG4gICAgICAgICAgICBbY2xhc3NdPVwiJ2J0biBidG4tYmxvY2sgYnRuLScgKyBvcHRpb25zLmNhbmNlbEJ1dHRvblR5cGVcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm9wdGlvbnMub25DYW5jZWwoeyBjbGlja0V2ZW50OiAkZXZlbnQgfSlcIlxuICAgICAgICAgICAgW2lubmVySHRtbF09XCJvcHRpb25zLmNhbmNlbFRleHRcIlxuICAgICAgICAgID48L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb25maXJtLWJ0bi1jb250YWluZXJcIiAqbmdJZj1cIiFvcHRpb25zLmhpZGVDb25maXJtQnV0dG9uXCI+XG4gICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICBbbXdsRm9jdXNdPVwib3B0aW9ucy5mb2N1c0J1dHRvbiA9PT0gJ2NvbmZpcm0nXCJcbiAgICAgICAgICAgIFtjbGFzc109XCInYnRuIGJ0bi1ibG9jayBidG4tJyArIG9wdGlvbnMuY29uZmlybUJ1dHRvblR5cGVcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm9wdGlvbnMub25Db25maXJtKHsgY2xpY2tFdmVudDogJGV2ZW50IH0pXCJcbiAgICAgICAgICAgIFtpbm5lckh0bWxdPVwib3B0aW9ucy5jb25maXJtVGV4dFwiXG4gICAgICAgICAgPjwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG48bmctdGVtcGxhdGVcbiAgW25nVGVtcGxhdGVPdXRsZXRdPVwib3B0aW9ucy5jdXN0b21UZW1wbGF0ZSB8fCBkZWZhdWx0VGVtcGxhdGVcIlxuICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyBvcHRpb25zOiBvcHRpb25zIH1cIlxuPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==