ngx-slice-kit/esm2020/lib/modals/popup/popup.component.mjs

[](https://badge.fury.io/js/ngx-slice-kit)

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "../../buttons/button/button.component";
export class PopupComponent {
    constructor() {
        this.id = 1000;
        this.ok = 'Ok';
        this.cancel = 'Cancel';
        this.closed = new EventEmitter();
    }
    onSuccess(bool) {
        this.closed.emit(bool);
    }
    ngOnDestroy() {
        this.closed.complete();
    }
}
PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PopupComponent, selector: "sdk-popup", inputs: { id: "id", title: "title", message: "message", ok: "ok", cancel: "cancel" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"sdk-popup-wrap\" [style.zIndex]=\"id\">\n    <div class=\"sdk-popup-backdrop\" (click)=\"onSuccess(false)\"></div>\n    <div class=\"sdk-popup-content\">\n        <header>\n            <h3 class=\"sdk-h3\">{{title}}</h3>\n        </header>\n        <section>\n            <p>{{message}}</p>\n        </section>\n        <footer>\n            <button sdk-base-button (click)=\"onSuccess(true)\">{{ok}}</button>\n            <button sdk-base-button color=\"regular\" (click)=\"onSuccess(false)\">{{cancel}}</button>\n        </footer>\n    </div>\n</div>\n", styles: [".flex,.flex-row,.flex-row-reverse,.flex-column,.sdk-popup-wrap .sdk-popup-content,.sdk-popup-wrap,.flex-column-reverse{position:relative;display:flex}.flex-row{position:relative;display:flex;flex-direction:row}.flex-row-reverse{position:relative;display:flex;flex-direction:row-reverse}.flex-column,.sdk-popup-wrap .sdk-popup-content,.sdk-popup-wrap{position:relative;display:flex;flex-direction:column}.flex-column-reverse{position:relative;display:flex;flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.layout-center-center,.sdk-popup-wrap{align-content:center;align-items:center;justify-content:center}.layout-center-start{align-content:flex-start;align-items:flex-start;justify-content:center}.layout-center-end{align-content:flex-end;align-items:flex-end;justify-content:center}.layout-center-stretch{align-content:stretch;align-items:stretch;justify-content:center}.layout-space-around-center{align-content:center;align-items:center;justify-content:space-around}.layout-space-around-start{align-content:flex-start;align-items:flex-start;justify-content:space-around}.layout-space-around-end{align-content:flex-end;align-items:flex-end;justify-content:space-around}.layout-space-around-stretch{align-content:stretch;align-items:stretch;justify-content:space-around}.layout-space-between-center{align-content:center;align-items:center;justify-content:space-between}.layout-space-between-start{align-content:flex-start;align-items:flex-start;justify-content:space-between}.layout-space-between-end{align-content:flex-end;align-items:flex-end;justify-content:space-between}.layout-space-between-stretch{align-content:stretch;align-items:stretch;justify-content:space-between}.layout-start-center{align-content:center;align-items:center;justify-content:flex-start}.layout-start-start,.sdk-popup-wrap .sdk-popup-content{align-content:flex-start;align-items:flex-start;justify-content:flex-start}.layout-start-end{align-content:flex-end;align-items:flex-end;justify-content:flex-start}.layout-start-stretch{align-content:stretch;align-items:stretch;justify-content:flex-start}.layout-end-center{align-content:center;align-items:center;justify-content:flex-end}.layout-end-start{align-content:flex-start;align-items:flex-start;justify-content:flex-end}.layout-end-end{align-content:flex-end;align-items:flex-end;justify-content:flex-end}.layout-end-stretch{align-content:stretch;align-items:stretch;justify-content:flex-end}.flex-grow-1,.sdk-popup-wrap section{flex:1}.flex-grow-2{flex:2}.flex-grow-3{flex:3}.flex-grow-4{flex:4}.flex-grow-5{flex:5}.flex-grow-6{flex:6}.flex-grow-7{flex:7}.flex-grow-8{flex:8}.flex-grow-9{flex:9}.flex-grow-10{flex:10}.flex-grow-11{flex:11}.flex-grow-12{flex:12}.sdk-xs-1{width:100%}.sdk-xs-2{width:50%}.sdk-xs-3{width:33.3333333333%}.sdk-xs-4{width:25%}.sdk-xm-1{width:100%}.sdk-xm-2{width:50%}.sdk-xm-3{width:33.3333333333%}.sdk-xm-4{width:25%}.sdk-xl-1{width:100%}.sdk-xl-2{width:50%}.sdk-xl-3{width:33.3333333333%}.sdk-xl-4{width:25%}@media screen and (max-width: 1024px){.flex-row{flex-wrap:wrap}.sdk-xl-2,.sdk-xl-3,.sdk-xm-2{width:100%}.sdk-xl-4,.sdk-xm-3{width:50%}.sdk-xm-4{width:33.3333333333%}}@media screen and (max-width: 675.84px){.sdk-xl-4,.sdk-xm-3,.sdk-xs-2{width:100%}.sdk-xm-4,.sdk-xs-3{width:50%}.sdk-xs-4{width:33.3333333333%}}@media screen and (max-width: 512px){.sdk-xm-4,.sdk-xs-3{width:100%}.sdk-xs-4{width:50%}}@keyframes openPopup{0%{transform:scale(.5) translateY(100px);opacity:0}}.sdk-popup-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100%;height:100%;overflow:hidden}.sdk-popup-wrap .sdk-popup-container{position:relative;z-index:1;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}.sdk-popup-wrap .sdk-popup-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;background:rgba(21,21,21,.6);animation:opacity .2s}.sdk-popup-wrap .sdk-popup-content{z-index:2;min-width:320px;max-width:80%;margin:64px 0;animation:openPopup .3s;background-color:var(--background);border-radius:8px}.sdk-popup-wrap .sdk-popup-content section{white-space:pre-wrap}.sdk-popup-wrap header{padding:16px}.sdk-popup-wrap section{padding:16px}.sdk-popup-wrap footer{display:flex;padding:16px}.sdk-popup-wrap footer button:first-of-type{margin-right:16px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "[sdk-base-button], [sdk-flat-button], [sdk-raised-button], [sdk-stroked-button], [sdk-round-button], [sdk-icon-button]", inputs: ["color", "size", "small", "disabled"] }], animations: [
        trigger('state', [
            state('opened', style({ transform: 'translateY(0%)' })),
            state('void, closed', style({ transform: 'translateY(100%)', opacity: 0 })),
            transition('* => *', animate('300ms ease-in')),
        ])
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PopupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sdk-popup', animations: [
                        trigger('state', [
                            state('opened', style({ transform: 'translateY(0%)' })),
                            state('void, closed', style({ transform: 'translateY(100%)', opacity: 0 })),
                            transition('* => *', animate('300ms ease-in')),
                        ])
                    ], template: "<div class=\"sdk-popup-wrap\" [style.zIndex]=\"id\">\n    <div class=\"sdk-popup-backdrop\" (click)=\"onSuccess(false)\"></div>\n    <div class=\"sdk-popup-content\">\n        <header>\n            <h3 class=\"sdk-h3\">{{title}}</h3>\n        </header>\n        <section>\n            <p>{{message}}</p>\n        </section>\n        <footer>\n            <button sdk-base-button (click)=\"onSuccess(true)\">{{ok}}</button>\n            <button sdk-base-button color=\"regular\" (click)=\"onSuccess(false)\">{{cancel}}</button>\n        </footer>\n    </div>\n</div>\n", styles: [".flex,.flex-row,.flex-row-reverse,.flex-column,.sdk-popup-wrap .sdk-popup-content,.sdk-popup-wrap,.flex-column-reverse{position:relative;display:flex}.flex-row{position:relative;display:flex;flex-direction:row}.flex-row-reverse{position:relative;display:flex;flex-direction:row-reverse}.flex-column,.sdk-popup-wrap .sdk-popup-content,.sdk-popup-wrap{position:relative;display:flex;flex-direction:column}.flex-column-reverse{position:relative;display:flex;flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.layout-center-center,.sdk-popup-wrap{align-content:center;align-items:center;justify-content:center}.layout-center-start{align-content:flex-start;align-items:flex-start;justify-content:center}.layout-center-end{align-content:flex-end;align-items:flex-end;justify-content:center}.layout-center-stretch{align-content:stretch;align-items:stretch;justify-content:center}.layout-space-around-center{align-content:center;align-items:center;justify-content:space-around}.layout-space-around-start{align-content:flex-start;align-items:flex-start;justify-content:space-around}.layout-space-around-end{align-content:flex-end;align-items:flex-end;justify-content:space-around}.layout-space-around-stretch{align-content:stretch;align-items:stretch;justify-content:space-around}.layout-space-between-center{align-content:center;align-items:center;justify-content:space-between}.layout-space-between-start{align-content:flex-start;align-items:flex-start;justify-content:space-between}.layout-space-between-end{align-content:flex-end;align-items:flex-end;justify-content:space-between}.layout-space-between-stretch{align-content:stretch;align-items:stretch;justify-content:space-between}.layout-start-center{align-content:center;align-items:center;justify-content:flex-start}.layout-start-start,.sdk-popup-wrap .sdk-popup-content{align-content:flex-start;align-items:flex-start;justify-content:flex-start}.layout-start-end{align-content:flex-end;align-items:flex-end;justify-content:flex-start}.layout-start-stretch{align-content:stretch;align-items:stretch;justify-content:flex-start}.layout-end-center{align-content:center;align-items:center;justify-content:flex-end}.layout-end-start{align-content:flex-start;align-items:flex-start;justify-content:flex-end}.layout-end-end{align-content:flex-end;align-items:flex-end;justify-content:flex-end}.layout-end-stretch{align-content:stretch;align-items:stretch;justify-content:flex-end}.flex-grow-1,.sdk-popup-wrap section{flex:1}.flex-grow-2{flex:2}.flex-grow-3{flex:3}.flex-grow-4{flex:4}.flex-grow-5{flex:5}.flex-grow-6{flex:6}.flex-grow-7{flex:7}.flex-grow-8{flex:8}.flex-grow-9{flex:9}.flex-grow-10{flex:10}.flex-grow-11{flex:11}.flex-grow-12{flex:12}.sdk-xs-1{width:100%}.sdk-xs-2{width:50%}.sdk-xs-3{width:33.3333333333%}.sdk-xs-4{width:25%}.sdk-xm-1{width:100%}.sdk-xm-2{width:50%}.sdk-xm-3{width:33.3333333333%}.sdk-xm-4{width:25%}.sdk-xl-1{width:100%}.sdk-xl-2{width:50%}.sdk-xl-3{width:33.3333333333%}.sdk-xl-4{width:25%}@media screen and (max-width: 1024px){.flex-row{flex-wrap:wrap}.sdk-xl-2,.sdk-xl-3,.sdk-xm-2{width:100%}.sdk-xl-4,.sdk-xm-3{width:50%}.sdk-xm-4{width:33.3333333333%}}@media screen and (max-width: 675.84px){.sdk-xl-4,.sdk-xm-3,.sdk-xs-2{width:100%}.sdk-xm-4,.sdk-xs-3{width:50%}.sdk-xs-4{width:33.3333333333%}}@media screen and (max-width: 512px){.sdk-xm-4,.sdk-xs-3{width:100%}.sdk-xs-4{width:50%}}@keyframes openPopup{0%{transform:scale(.5) translateY(100px);opacity:0}}.sdk-popup-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100%;height:100%;overflow:hidden}.sdk-popup-wrap .sdk-popup-container{position:relative;z-index:1;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}.sdk-popup-wrap .sdk-popup-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;background:rgba(21,21,21,.6);animation:opacity .2s}.sdk-popup-wrap .sdk-popup-content{z-index:2;min-width:320px;max-width:80%;margin:64px 0;animation:openPopup .3s;background-color:var(--background);border-radius:8px}.sdk-popup-wrap .sdk-popup-content section{white-space:pre-wrap}.sdk-popup-wrap header{padding:16px}.sdk-popup-wrap section{padding:16px}.sdk-popup-wrap footer{display:flex;padding:16px}.sdk-popup-wrap footer button:first-of-type{margin-right:16px}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                type: Input
            }], title: [{
                type: Input
            }], message: [{
                type: Input
            }], ok: [{
                type: Input
            }], cancel: [{
                type: Input
            }], closed: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZ3gtc2xpY2Uta2l0L3NyYy9saWIvbW9kYWxzL3BvcHVwL3BvcHVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL21vZGFscy9wb3B1cC9wb3B1cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQWNqRixNQUFNLE9BQU8sY0FBYztJQWF2QjtRQVhnQixPQUFFLEdBQVcsSUFBSSxDQUFDO1FBR2xCLE9BQUUsR0FBRyxJQUFJLENBQUM7UUFDVixXQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ2pCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBTzdDLENBQUM7SUFMTSxTQUFTLENBQUMsSUFBYTtRQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBS00sV0FBVztRQUNkLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQzs7MkdBbEJRLGNBQWM7K0ZBQWQsY0FBYyxzS0NmM0IseWpCQWVBLHE5SURSZ0I7UUFDUixPQUFPLENBQUMsT0FBTyxFQUFFO1lBQ2IsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsZ0JBQWdCLEVBQUMsQ0FBQyxDQUFDO1lBQ3JELEtBQUssQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLGtCQUFrQixFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO1lBQ3pFLFVBQVUsQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLGVBQWUsQ0FBQyxDQUFDO1NBQ2pELENBQUM7S0FDTDsyRkFFUSxjQUFjO2tCQVoxQixTQUFTOytCQUNJLFdBQVcsY0FHVDt3QkFDUixPQUFPLENBQUMsT0FBTyxFQUFFOzRCQUNiLEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLGdCQUFnQixFQUFDLENBQUMsQ0FBQzs0QkFDckQsS0FBSyxDQUFDLGNBQWMsRUFBRSxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7NEJBQ3pFLFVBQVUsQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLGVBQWUsQ0FBQyxDQUFDO3lCQUNqRCxDQUFDO3FCQUNMOzBFQUllLEVBQUU7c0JBQWpCLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQUNVLEVBQUU7c0JBQWpCLEtBQUs7Z0JBQ1UsTUFBTTtzQkFBckIsS0FBSztnQkFDVyxNQUFNO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RrLXBvcHVwJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcG9wdXAuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3BvcHVwLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgYW5pbWF0aW9uczogW1xuICAgICAgICB0cmlnZ2VyKCdzdGF0ZScsIFtcbiAgICAgICAgICAgIHN0YXRlKCdvcGVuZWQnLCBzdHlsZSh7dHJhbnNmb3JtOiAndHJhbnNsYXRlWSgwJSknfSkpLFxuICAgICAgICAgICAgc3RhdGUoJ3ZvaWQsIGNsb3NlZCcsIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDEwMCUpJywgb3BhY2l0eTogMH0pKSxcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJyogPT4gKicsIGFuaW1hdGUoJzMwMG1zIGVhc2UtaW4nKSksXG4gICAgICAgIF0pXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBQb3B1cENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG5cbiAgICBASW5wdXQoKSBwdWJsaWMgaWQ6IG51bWJlciA9IDEwMDA7XG4gICAgQElucHV0KCkgcHVibGljIHRpdGxlO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBtZXNzYWdlO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBvayA9ICdPayc7XG4gICAgQElucHV0KCkgcHVibGljIGNhbmNlbCA9ICdDYW5jZWwnO1xuICAgIEBPdXRwdXQoKSBwdWJsaWMgY2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgcHVibGljIG9uU3VjY2Vzcyhib29sOiBib29sZWFuKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY2xvc2VkLmVtaXQoYm9vbCk7XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNsb3NlZC5jb21wbGV0ZSgpO1xuICAgIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInNkay1wb3B1cC13cmFwXCIgW3N0eWxlLnpJbmRleF09XCJpZFwiPlxuICAgIDxkaXYgY2xhc3M9XCJzZGstcG9wdXAtYmFja2Ryb3BcIiAoY2xpY2spPVwib25TdWNjZXNzKGZhbHNlKVwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzZGstcG9wdXAtY29udGVudFwiPlxuICAgICAgICA8aGVhZGVyPlxuICAgICAgICAgICAgPGgzIGNsYXNzPVwic2RrLWgzXCI+e3t0aXRsZX19PC9oMz5cbiAgICAgICAgPC9oZWFkZXI+XG4gICAgICAgIDxzZWN0aW9uPlxuICAgICAgICAgICAgPHA+e3ttZXNzYWdlfX08L3A+XG4gICAgICAgIDwvc2VjdGlvbj5cbiAgICAgICAgPGZvb3Rlcj5cbiAgICAgICAgICAgIDxidXR0b24gc2RrLWJhc2UtYnV0dG9uIChjbGljayk9XCJvblN1Y2Nlc3ModHJ1ZSlcIj57e29rfX08L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b24gc2RrLWJhc2UtYnV0dG9uIGNvbG9yPVwicmVndWxhclwiIChjbGljayk9XCJvblN1Y2Nlc3MoZmFsc2UpXCI+e3tjYW5jZWx9fTwvYnV0dG9uPlxuICAgICAgICA8L2Zvb3Rlcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19