'use strict';

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

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

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06" clip-rule="evenodd"/></svg>';
const bankid = icon;

const pnLevelUpCss = "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}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}pn-level-up .pn-level-up{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}pn-level-up .pn-level-up .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}pn-level-up .pn-level-up .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}pn-level-up .pn-level-up .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem)}pn-level-up .pn-level-up .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}pn-level-up .pn-level-up .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}pn-level-up .pn-level-up .image-container .image{border-radius:50%;width:20rem;height:20rem;object-fit:cover}@media (min-width: 768px){pn-level-up .pn-level-up{flex-direction:row;align-items:center;justify-content:space-between}pn-level-up .pn-level-up .content{max-width:70%}pn-level-up .pn-level-up .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}pn-level-up .pn-level-up .image-container{margin-bottom:0}pn-level-up .pn-level-up .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){pn-level-up .pn-level-up{max-width:1140px;margin:0 auto}pn-level-up .pn-level-up .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){pn-level-up .pn-level-up{max-width:1440px}pn-level-up .pn-level-up .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";
const PnLevelUpStyle0 = pnLevelUpCss;

const PnLevelUp = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.heading = undefined;
        this.headingLevel = 'h2';
        this.preamble = undefined;
        this.imageUrl = undefined;
        this.imageAltText = undefined;
        this.endpoint = undefined;
        this.webModalContinueOtherDeviceLabel = undefined;
        this.webModalContinueThisDeviceLabel = undefined;
        this.mobileModalContinueThisDeviceLabel = undefined;
        this.mobileModalContinueOtherDeviceLabel = undefined;
        this.modalInstructionPhoneLineOne = undefined;
        this.modalInstructionPhoneLineTwo = undefined;
        this.modalInstructionPhoneLineThree = undefined;
        this.modalHeadingText = undefined;
        this.modalOutdatedQRMessage = undefined;
        this.modalExpiresInMessage = undefined;
        this.qrAriaLabel = undefined;
        this.leveledupMessage = undefined;
        this.isLeveledUp = false;
        this.isLoading = false;
        this.isRecentLeveledUp = false;
        this.errorMessage = undefined;
    }
    showModal = false;
    _android = 'android';
    _ios = 'ios';
    _web = 'web';
    levelupLocalStorageKey = 'levelup';
    _system;
    _levelupService;
    _storage = new LocalStorageService.LocalStorageService();
    modal;
    componentWillLoad() {
        if (!this.isLeveledUp) {
            this.checkRecentLevelUp();
        }
        this._levelupService = new pnLevelUp_service.PnLevelUpService(this.endpoint);
        this._system = this.getDeviceType();
    }
    getDeviceType() {
        const userAgent = navigator.userAgent;
        if (/android/i.test(userAgent)) {
            return this._android;
        }
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return this._ios;
        }
        return this._web;
    }
    openLocalApp = async () => {
        this.isLoading = true;
        let authResponse = await this._levelupService.levelupAuthorize(this._system, null);
        window.location.href = authResponse.url;
        this.isLoading = false;
        await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {
            if (response.code === 200) {
                this._levelupService.newLevelupUser();
                this.isRecentLeveledUp = true;
                this.errorMessage = null;
            }
            else {
                this.errorMessage = response.customMessage;
            }
        });
    };
    openModal() {
        if (this.showModal) {
            this.modal.setAttribute('open', 'false');
            this.showModal = false;
        }
        this.modal.setAttribute('open', 'true');
        this.showModal = true;
    }
    renderWebButtonOptions() {
        return (index.h("div", { class: "cta", role: "group" }, this.webModalContinueOtherDeviceLabel &&
            index.h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.webModalContinueOtherDeviceLabel, onClick: () => this.openModal() }), this.webModalContinueThisDeviceLabel &&
            index.h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'light', variant: 'outlined', label: this.webModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading })));
    }
    renderMobileButtonOptions() {
        return (index.h("div", { class: "cta", role: "group" }, this.mobileModalContinueThisDeviceLabel &&
            index.h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.mobileModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading }), this.mobileModalContinueOtherDeviceLabel &&
            index.h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'light', variant: 'outlined', label: this.mobileModalContinueOtherDeviceLabel, onClick: () => this.openModal() })));
    }
    presentResult() {
        if (this.isLeveledUp) {
            return null;
        }
        return (index.h("pn-toast", { text: this.leveledupMessage, appearance: 'success' }));
    }
    checkRecentLevelUp() {
        let levelupStorage = this._storage.get(this.levelupLocalStorageKey);
        if (levelupStorage === null) {
            this.isRecentLeveledUp = false;
        }
        else if (levelupStorage.expire > Date.now()) {
            this.isRecentLeveledUp = true;
        }
        else {
            this._storage.remove(this.levelupLocalStorageKey);
            this.isRecentLeveledUp = false;
        }
    }
    get hasButtonTexts() {
        if (this._system === this._web) {
            return Boolean(this.webModalContinueOtherDeviceLabel) && Boolean(this.webModalContinueThisDeviceLabel);
        }
        else {
            return Boolean(this.mobileModalContinueOtherDeviceLabel) && Boolean(this.mobileModalContinueThisDeviceLabel);
        }
    }
    render() {
        const headingId = 'pn-level-up-heading';
        return (index.h(index.Host, { key: '25c4c9496efe071ba3c2970b03efa02feb8db58c' }, this.isLeveledUp || this.isRecentLeveledUp
            ? (this.presentResult())
            : (index.h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, index.h("div", { class: "content" }, this.heading && (index.h(HeadingTag.HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (index.h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), index.h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && index.h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && index.h("pn-toast", { key: '345b539923dca4d060f40aff186aeee7d3a94891', text: this.errorMessage, appearance: 'warning' }), index.h("pn-level-up-modal", { key: 'b54cf4b905d8db6af721d7d4cd3040f4dba6cbc0', ref: el => this.modal = el, open: false, endpoint: this.endpoint, "instruction-phone-line-one": this.modalInstructionPhoneLineOne, "instruction-phone-line-two": this.modalInstructionPhoneLineTwo, "instruction-phone-line-three": this.modalInstructionPhoneLineThree, "heading-text": this.modalHeadingText, "outdated-q-r-message": this.modalOutdatedQRMessage, "expires-in-message": this.modalExpiresInMessage, "qr-aria-label": this.qrAriaLabel, system: this._android })));
    }
};
PnLevelUp.style = PnLevelUpStyle0;

exports.pn_level_up = PnLevelUp;

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