'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');
const pnLevelUp_service = require('./pn-level-up.service-0e8e67c2.js');
require('./FetchHelper-2d4c697c.js');
require('./LocalStorageService-e1ee3fac.js');

const pnLevelUpModalCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-level-up-modal .pn-modal-header{z-index:0}pn-level-up-modal .pn-modal{max-width:63.1rem}@media screen and (max-width: 768px){pn-level-up-modal .pn-modal{height:100%;max-height:100%}}pn-level-up-modal .level-up-computer-modal .pn-modal-content .modal-content{justify-self:center;display:flex;flex-wrap:wrap;flex-direction:column;gap:2em;margin:2em;width:max-content;align-content:space-around}pn-level-up-modal .pn-modal-label{margin:2.2rem 0}@media screen and (max-width: 768px){pn-level-up-modal .pn-modal-label{justify-self:center}}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content{height:100%;align-content:center;align-items:center}}pn-level-up-modal .level-up-phone-modal .pn-modal-content pn-spinner{justify-self:center}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container{display:flex;flex-direction:row;align-items:center;gap:1em}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container{flex-direction:column}}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol{font-size:1.8rem;line-height:1.6;margin-left:2rem;padding-left:2rem}pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list li{margin-bottom:1rem}@media screen and (max-width: 768px){pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol{font-size:1.6rem}}";
const PnLevelUpModalStyle0 = pnLevelUpModalCss;

const PnLevelUpModal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.modalToggle = index.createEvent(this, "modalToggle", 7);
        this.open = undefined;
        this.endpoint = undefined;
        this.instructionPhoneLineOne = undefined;
        this.instructionPhoneLineTwo = undefined;
        this.instructionPhoneLineThree = undefined;
        this.headingText = undefined;
        this.outdatedQRMessage = undefined;
        this.expiresInMessage = undefined;
        this.system = undefined;
        this.qrAriaLabel = undefined;
        this.openModalToggle = false;
        this.isLoading = true;
    }
    modalToggle;
    _bankIDUrl;
    _levelupService;
    _levelUpModal;
    componentWillLoad() {
        this._levelupService = new pnLevelUp_service.PnLevelUpService(this.endpoint);
        this.updateOpen();
    }
    updateBankIDUrl = async () => {
        this.isLoading = true;
        let authResponse = await this._levelupService.levelupAuthorize(this.system, null);
        this.isLoading = false;
        this._bankIDUrl = authResponse.url;
        await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {
            if (response.code === 200) {
                this._levelupService.newLevelupUser();
            }
        });
    };
    updateOpen() {
        if (this.open === true) {
            this.handleOpen();
            this.openModalToggle = true;
            if (this._levelUpModal) {
                if (this._levelUpModal.open === true) {
                    this._levelUpModal.open = false;
                }
                this._levelUpModal.open = true;
            }
        }
        else {
            this.openModalToggle = false;
        }
    }
    handleOpen = async () => {
        await this.updateBankIDUrl();
    };
    render() {
        return (index.h(index.Host, { key: '76e1a218f3727ecb7c4ed3031431c9f2396e16f4' }, index.h("pn-modal", { key: '1070592e01333d07085da839772bd89e9bff6f55', ref: el => this._levelUpModal = el, open: this.open, class: "level-up-phone-modal", "allow-overflow": 'true', label: this.headingText, onModalToggle: (ev) => {
                const detail = ev.detail;
                const isOpen = typeof detail === 'boolean' ? detail : !!detail?.open;
                this.openModalToggle = isOpen;
            } }, this.isLoading ?
            (index.h("pn-spinner", { light: "false", size: "1.5" })) : (index.h("div", { class: "modal-content-container" }, index.h("div", { class: "modal-content-qr" }, this.openModalToggle && (index.h("pn-qr-code-generator", { url: this._bankIDUrl, "countdown-seconds": "30", "outdated-message": this.outdatedQRMessage, "expires-in-message": this.expiresInMessage, "update-code-every-second": true, "aria-label": this.qrAriaLabel }))), index.h("div", { class: "modal-content-list" }, index.h("ol", null, this.instructionPhoneLineOne && index.h("li", null, this.instructionPhoneLineOne), this.instructionPhoneLineTwo && index.h("li", null, this.instructionPhoneLineTwo), this.instructionPhoneLineThree && index.h("li", null, this.instructionPhoneLineThree))))))));
    }
    static get watchers() { return {
        "open": ["updateOpen"]
    }; }
};
PnLevelUpModal.style = PnLevelUpModalStyle0;

exports.pn_level_up_modal = PnLevelUpModal;

//# sourceMappingURL=pn-level-up-modal.cjs.entry.js.map