import { Component, Input, EventEmitter, Output, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SmileyDialogInlineComponent {
    handleKeyboardEvent(event) {
        if (event.key === 'Escape') {
            this.smileyCloseEmitter({});
        }
    }
    constructor() {
        this.action = new EventEmitter();
        this.closeSmiley = new EventEmitter();
    }
    ngOnInit() {
        setTimeout(() => {
            this.smileyCloseEmitter();
        }, 5000);
    }
    actionEmitter(event) {
        this.action.emit(event?.id);
    }
    smileyCloseEmitter(event) {
        this.closeSmiley.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: { message: "message", actionButtons: "actionButtons" }, outputs: { action: "action", closeSmiley: "closeSmiley" }, host: { listeners: { "window:keyup": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"vx-smiley-popup\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"vx-smiley-container vx-text-center\">\n      <div class=\"vx-smiley\">\n          <div class=\"vx-smiley-circle happy\">\n              <div class=\"vx-smiley-circle-inner\">\n                  <div class=\"eyes\">\n                      <div class=\"eye\"></div>\n                      <div class=\"eye\"></div>\n                  </div>\n                  <div class=\"mouth\"></div>\n              </div>\n          </div>\n      </div>\n      <h3>{{ message }}</h3>\n      <div class=\"successSmilyButton\">\n        <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n          {{ button?.buttonText }}\n        </button>\n      </div>\n  </div>\n</div>\n<!-- active -->\n<!-- <div class=\"workflow-smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"workflow-smiley-container\">\n    <div class=\"smiley-inner\">\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmileyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n  </div>\n</div> -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vx-smiley-popup{position:absolute;inset:0;background:#fff;z-index:9;display:flex;justify-content:center;align-items:center}.vx-smiley-popup .close{color:#161b2f;font-size:22px;position:absolute;top:8px;right:8px;z-index:10;background:none;border:none;padding:0;cursor:pointer;width:auto!important;min-width:auto}button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:11px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px 12px;width:auto!important;height:32px;cursor:pointer;text-transform:uppercase;min-width:168px}button.blue-btn{background:#1e5dd3;color:#fff}.vx-smiley-container{width:550px;position:relative;z-index:10}.vx-smiley-container .vx-smiley{display:block;width:500px;height:250px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 24px}.vx-smiley-container .vx-smiley:before{position:absolute;background:#ffedc5;width:40px;height:40px;content:\"\";border-radius:50%;top:70px;right:135px}.vx-smiley-container .vx-smiley:after{position:absolute;background:#ffbf15;width:25px;height:25px;border-radius:50%;content:\"\";top:150px;left:130px}.vx-smiley-container .vx-smiley-circle{background:#ffd83d;border-radius:100%;padding:24px;position:relative;width:185px;height:185px;margin:0 auto;box-shadow:inset -16px -10px #f4c337}.vx-smiley-container .vx-smiley-circle:before{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:85px;left:-46px}.vx-smiley-container .vx-smiley-circle:after{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:79px;left:-40px}.vx-smiley-container .vx-smiley-circle-inner{height:105px;width:110px;margin:0 auto}.vx-smiley-container .vx-smiley-circle-inner .eyes{width:110px;margin:20px auto 0;box-sizing:border-box;padding:0 4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes:before{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:2px;right:-9px}.vx-smiley-container .vx-smiley-circle-inner .eyes:after{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:8px;right:-15px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye{width:30px;height:30px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:before{position:absolute;width:8px;height:8px;content:\"\";background:#ffe9b0;border-radius:50%;top:6px;left:1px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-16px;left:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.vx-smiley-container .vx-smiley-circle-inner .mouth{border-radius:100px;height:76px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .mouth:before{width:94px;height:94px;position:absolute;opacity:0;bottom:-508px;left:-6px;background:#ffd83d;content:\"\";border-radius:46px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle.happy .eyes .eye{height:30px;margin-top:0;animation:wink 3s infinite}.vx-smiley-container .vx-smiley-circle.happy .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .eyes .eye{animation:wink2 3s infinite}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:before{top:-42px;right:-48px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:after{top:-36px;right:-54px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth{width:80px;height:38px;border-radius:100px 100px 0 0;top:50px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth:before{width:80px;height:70px;background:#ffd83d;content:\"\";bottom:-42px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px;padding:0 40px}.vx-smiley-container .successSmilyButton{margin:0 auto;width:245px}.vx-smiley-container .successSmilyButton button{width:245px!important;height:36px;display:block;background:#fff;border:1px solid #F1F1F1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}.vx-smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;border:1px solid #1E5DD3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes wink2{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmileyDialogInlineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-smiley-dialog-inline', template: "<div class=\"vx-smiley-popup\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"vx-smiley-container vx-text-center\">\n      <div class=\"vx-smiley\">\n          <div class=\"vx-smiley-circle happy\">\n              <div class=\"vx-smiley-circle-inner\">\n                  <div class=\"eyes\">\n                      <div class=\"eye\"></div>\n                      <div class=\"eye\"></div>\n                  </div>\n                  <div class=\"mouth\"></div>\n              </div>\n          </div>\n      </div>\n      <h3>{{ message }}</h3>\n      <div class=\"successSmilyButton\">\n        <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n          {{ button?.buttonText }}\n        </button>\n      </div>\n  </div>\n</div>\n<!-- active -->\n<!-- <div class=\"workflow-smiley-popup active\">\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\n    <i class=\"icons\">&#xe93f;</i>\n  </button>\n  <div class=\"workflow-smiley-container\">\n    <div class=\"smiley-inner\">\n      <div class=\"smiley-circle active\">\n        <div class=\"smiley-circle-inner\">\n          <div class=\"eyes\">\n            <div class=\"eye\"></div>\n            <div class=\"eye\"></div>\n          </div>\n          <div class=\"mouth\"></div>\n        </div>\n      </div>\n    </div>\n    <h3>{{ message }}</h3>\n    <div class=\"successSmileyButton\">\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\n        {{ button?.buttonText }}\n      </button>\n    </div>\n  </div>\n</div> -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vx-smiley-popup{position:absolute;inset:0;background:#fff;z-index:9;display:flex;justify-content:center;align-items:center}.vx-smiley-popup .close{color:#161b2f;font-size:22px;position:absolute;top:8px;right:8px;z-index:10;background:none;border:none;padding:0;cursor:pointer;width:auto!important;min-width:auto}button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:11px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px 12px;width:auto!important;height:32px;cursor:pointer;text-transform:uppercase;min-width:168px}button.blue-btn{background:#1e5dd3;color:#fff}.vx-smiley-container{width:550px;position:relative;z-index:10}.vx-smiley-container .vx-smiley{display:block;width:500px;height:250px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 24px}.vx-smiley-container .vx-smiley:before{position:absolute;background:#ffedc5;width:40px;height:40px;content:\"\";border-radius:50%;top:70px;right:135px}.vx-smiley-container .vx-smiley:after{position:absolute;background:#ffbf15;width:25px;height:25px;border-radius:50%;content:\"\";top:150px;left:130px}.vx-smiley-container .vx-smiley-circle{background:#ffd83d;border-radius:100%;padding:24px;position:relative;width:185px;height:185px;margin:0 auto;box-shadow:inset -16px -10px #f4c337}.vx-smiley-container .vx-smiley-circle:before{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:85px;left:-46px}.vx-smiley-container .vx-smiley-circle:after{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:79px;left:-40px}.vx-smiley-container .vx-smiley-circle-inner{height:105px;width:110px;margin:0 auto}.vx-smiley-container .vx-smiley-circle-inner .eyes{width:110px;margin:20px auto 0;box-sizing:border-box;padding:0 4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes:before{width:4px;height:16px;background:#ffbf15;position:absolute;content:\"\";top:2px;right:-9px}.vx-smiley-container .vx-smiley-circle-inner .eyes:after{width:16px;height:4px;background:#ffbf15;position:absolute;content:\"\";top:8px;right:-15px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye{width:30px;height:30px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:before{position:absolute;width:8px;height:8px;content:\"\";background:#ffe9b0;border-radius:50%;top:6px;left:1px}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-16px;left:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.vx-smiley-container .vx-smiley-circle-inner .mouth{border-radius:100px;height:76px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle-inner .mouth:before{width:94px;height:94px;position:absolute;opacity:0;bottom:-508px;left:-6px;background:#ffd83d;content:\"\";border-radius:46px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container .vx-smiley-circle.happy .eyes .eye{height:30px;margin-top:0;animation:wink 3s infinite}.vx-smiley-container .vx-smiley-circle.happy .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .eyes .eye{animation:wink2 3s infinite}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:before{top:-42px;right:-48px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .eyes:after{top:-36px;right:-54px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth{width:80px;height:38px;border-radius:100px 100px 0 0;top:50px}.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth:before{width:80px;height:70px;background:#ffd83d;content:\"\";bottom:-42px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.vx-smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px;padding:0 40px}.vx-smiley-container .successSmilyButton{margin:0 auto;width:245px}.vx-smiley-container .successSmilyButton button{width:245px!important;height:36px;display:block;background:#fff;border:1px solid #F1F1F1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}.vx-smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;border:1px solid #1E5DD3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-radius:100px;height:10%;width:40%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-radius:0 0 100px 100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes wink2{0%{height:30px;margin-top:0}10%{height:30px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:30px;margin-top:0}to{height:30px;margin-top:0}}@keyframes move-angry-head{0%{transform:translate(0)}20%{transform:translate(-20%)}40%{transform:translate(15%)}60%{transform:translate(-10%)}80%{transform:translate(5%)}to{transform:translate(0)}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
                type: Input
            }], actionButtons: [{
                type: Input
            }], action: [{
                type: Output
            }], closeSmiley: [{
                type: Output
            }], handleKeyboardEvent: [{
                type: HostListener,
                args: ['window:keyup', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 