import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ConfirmationAlertComponent {
    constructor() {
        this.message = '';
        this.config = { isVisible: false, isRedAlert: false };
        this.action = new EventEmitter();
    }
    ngOnInit() {
    }
    actionTaken(evt) {
        this.action.emit({ action: evt, payload: this.config });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationAlertComponent, selector: "app-confirmation-alert", inputs: { message: "message", config: "config" }, outputs: { action: "action" }, ngImport: i0, template: "<!-- <p>confirmation-alert works!</p> -->\n<div class=\"confirmation-alert\" [class.warning-color]=\"config?.isRedAlert\">\n    <div class=\"confirmation-alert-top\" >\n        <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n        </span>\n        <p class=\"text\" *ngIf=\"message\">{{message}}</p>\n    </div>\n    <div class=\"confirmation-alert-bottom\">\n        <p class=\"message\">Are you sure you would like to proceed?</p>\n        <div class=\"button-group\">\n          <ng-container *ngIf=\"false\">\n            <button class=\"outline\" type=\"button\" (click)=\"actionTaken('NO')\">NO</button>\n            <button class=\"fill\" type=\"button\" (click)=\"actionTaken('YES')\">Yes</button>\n          </ng-container>\n          <ng-container >\n            <button class=\"fill\" type=\"button\" (click)=\"actionTaken('NO')\">NO</button>\n            <button class=\"outline\" type=\"button\" (click)=\"actionTaken('YES')\">Yes</button>\n          </ng-container>\n\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.confirmation-alert{display:block;position:absolute;z-index:1;right:0;bottom:0;left:0;background:#161b2f}.confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px}.confirmation-alert.warning-color{background-color:#eb2424}.confirmation-alert.warning-color .confirmation-alert-bottom{border-top:1px solid #ffffff60;background-color:#eb2424}.confirmation-alert.warning-color .confirmation-alert-bottom button.fill{color:#eb2424}.confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.confirmation-alert span.icon-block i{color:#eb2424;font-size:12px}.confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.confirmation-alert-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;background:#282e48}.confirmation-alert-bottom .button-group{display:flex}.confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.confirmation-alert button+button{margin-left:4px}.confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationAlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-confirmation-alert', template: "<!-- <p>confirmation-alert works!</p> -->\n<div class=\"confirmation-alert\" [class.warning-color]=\"config?.isRedAlert\">\n    <div class=\"confirmation-alert-top\" >\n        <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n        </span>\n        <p class=\"text\" *ngIf=\"message\">{{message}}</p>\n    </div>\n    <div class=\"confirmation-alert-bottom\">\n        <p class=\"message\">Are you sure you would like to proceed?</p>\n        <div class=\"button-group\">\n          <ng-container *ngIf=\"false\">\n            <button class=\"outline\" type=\"button\" (click)=\"actionTaken('NO')\">NO</button>\n            <button class=\"fill\" type=\"button\" (click)=\"actionTaken('YES')\">Yes</button>\n          </ng-container>\n          <ng-container >\n            <button class=\"fill\" type=\"button\" (click)=\"actionTaken('NO')\">NO</button>\n            <button class=\"outline\" type=\"button\" (click)=\"actionTaken('YES')\">Yes</button>\n          </ng-container>\n\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.confirmation-alert{display:block;position:absolute;z-index:1;right:0;bottom:0;left:0;background:#161b2f}.confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px}.confirmation-alert.warning-color{background-color:#eb2424}.confirmation-alert.warning-color .confirmation-alert-bottom{border-top:1px solid #ffffff60;background-color:#eb2424}.confirmation-alert.warning-color .confirmation-alert-bottom button.fill{color:#eb2424}.confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.confirmation-alert span.icon-block i{color:#eb2424;font-size:12px}.confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.confirmation-alert-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;background:#282e48}.confirmation-alert-bottom .button-group{display:flex}.confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.confirmation-alert button+button{margin-left:4px}.confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
                type: Input
            }], config: [{
                type: Input
            }], action: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlybWF0aW9uLWFsZXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL2NvbmZpcm1hdGlvbi1hbGVydC9jb25maXJtYXRpb24tYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdngtd29ya2Zsb3ctZW5naW5lL3NyYy9saWIvY29uZmlybWF0aW9uLWFsZXJ0L2NvbmZpcm1hdGlvbi1hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFRL0UsTUFBTSxPQUFPLDBCQUEwQjtJQUlyQztRQUhTLFlBQU8sR0FBRyxFQUFFLENBQUM7UUFDYixXQUFNLEdBQXNCLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFDLENBQUM7UUFDakUsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFDM0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVELFdBQVcsQ0FBQyxHQUFRO1FBQ2xCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUMsTUFBTSxFQUFFLEdBQUcsRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBQyxDQUFDLENBQUM7SUFDeEQsQ0FBQzsrR0FYVSwwQkFBMEI7bUdBQTFCLDBCQUEwQiwrSUNSdkMsdWhDQXNCTTs7NEZEZE8sMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNFLHdCQUF3QjswRUFLekIsT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25maXJtYXRpb25BbGVydCB9IGZyb20gJy4uL2ludGVyZmFjZXMvY29uZmlybWF0aW9uLWFsZXJ0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWNvbmZpcm1hdGlvbi1hbGVydCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jb25maXJtYXRpb24tYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jb25maXJtYXRpb24tYWxlcnQuY29tcG9uZW50Lmxlc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDb25maXJtYXRpb25BbGVydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG1lc3NhZ2UgPSAnJztcbiAgQElucHV0KCkgY29uZmlnOiBDb25maXJtYXRpb25BbGVydCA9IHtpc1Zpc2libGU6IGZhbHNlLCBpc1JlZEFsZXJ0OiBmYWxzZX07XG4gIEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG4gIGFjdGlvblRha2VuKGV2dDogYW55KXtcbiAgICB0aGlzLmFjdGlvbi5lbWl0KHthY3Rpb246IGV2dCwgcGF5bG9hZDogdGhpcy5jb25maWd9KTtcbiAgfVxufVxuIiwiPCEtLSA8cD5jb25maXJtYXRpb24tYWxlcnQgd29ya3MhPC9wPiAtLT5cbjxkaXYgY2xhc3M9XCJjb25maXJtYXRpb24tYWxlcnRcIiBbY2xhc3Mud2FybmluZy1jb2xvcl09XCJjb25maWc/LmlzUmVkQWxlcnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY29uZmlybWF0aW9uLWFsZXJ0LXRvcFwiID5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJpY29uLWJsb2NrXCI+XG4gICAgICAgICAgICA8aSBjbGFzcz1cImljb25zXCI+JiN4ZTkzMDs8L2k+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0XCIgKm5nSWY9XCJtZXNzYWdlXCI+e3ttZXNzYWdlfX08L3A+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImNvbmZpcm1hdGlvbi1hbGVydC1ib3R0b21cIj5cbiAgICAgICAgPHAgY2xhc3M9XCJtZXNzYWdlXCI+QXJlIHlvdSBzdXJlIHlvdSB3b3VsZCBsaWtlIHRvIHByb2NlZWQ/PC9wPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnV0dG9uLWdyb3VwXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZhbHNlXCI+XG4gICAgICAgICAgICA8YnV0dG9uIGNsYXNzPVwib3V0bGluZVwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiYWN0aW9uVGFrZW4oJ05PJylcIj5OTzwvYnV0dG9uPlxuICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImZpbGxcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cImFjdGlvblRha2VuKCdZRVMnKVwiPlllczwvYnV0dG9uPlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgPlxuICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImZpbGxcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cImFjdGlvblRha2VuKCdOTycpXCI+Tk88L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJvdXRsaW5lXCIgdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJhY3Rpb25UYWtlbignWUVTJylcIj5ZZXM8L2J1dHRvbj5cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==