@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/components/pn-level-up-modal2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { F as FetchHelper } from './FetchHelper.js';
 import { L as LocalStorageService } from './LocalStorageService.js';
 import { d as defineCustomElement$1 } from './pn-qr-code-generator2.js';
@@ -73,6 +73,7 @@ const PnLevelUpModal = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal ext
     constructor() {
         super();
         this.__registerHost();
+        this.modalToggle = createEvent(this, "modalToggle", 7);
         this.open = undefined;
         this.endpoint = undefined;
         this.instructionPhoneLineOne = undefined;
@@ -83,9 +84,10 @@ const PnLevelUpModal = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal ext
         this.expiresInMessage = undefined;
         this.system = undefined;
         this.qrAriaLabel = undefined;
-        this.openModalToggle = undefined;
+        this.openModalToggle = false;
         this.isLoading = true;
     }
+    modalToggle;
     _bankIDUrl;
     _levelupService;
     _levelUpModal;
@@ -105,7 +107,7 @@ const PnLevelUpModal = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal ext
         });
     };
     updateOpen() {
-        if (this.open === 'open') {
+        if (this.open === true) {
             this.handleOpen();
             this.openModalToggle = true;
             if (this._levelUpModal) {
@@ -123,15 +125,19 @@ const PnLevelUpModal = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal ext
         await this.updateBankIDUrl();
     };
     render() {
-        return (h(Host, { key: '0431f6d5caf8183d3e1c432a3ad663fa8648b1b4' }, h("pn-modal", { key: 'bb6f2be2f52908943154e99c02e7c3f7b9e648b6', ref: el => this._levelUpModal = el, open: this.openModalToggle, class: "level-up-phone-modal", "allow-overflow": 'true', label: this.headingText }, this.isLoading ?
-            (h("pn-spinner", { light: "false", size: "1.5" })) : (h("div", { class: "modal-content-container" }, h("div", { class: "modal-content-qr" }, 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 })), h("div", { class: "modal-content-list" }, h("ol", null, this.instructionPhoneLineOne && h("li", null, this.instructionPhoneLineOne), this.instructionPhoneLineTwo && h("li", null, this.instructionPhoneLineTwo), this.instructionPhoneLineThree && h("li", null, this.instructionPhoneLineThree))))))));
+        return (h(Host, { key: 'f996683c88b86b1d0b64818f1fbe515130bc2f0f' }, h("pn-modal", { key: 'c4bc3f8043dcb432acc49c9042a5351292b6f2c9', 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 ?
+            (h("pn-spinner", { light: "false", size: "1.5" })) : (h("div", { class: "modal-content-container" }, h("div", { class: "modal-content-qr" }, this.openModalToggle && (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 }))), h("div", { class: "modal-content-list" }, h("ol", null, this.instructionPhoneLineOne && h("li", null, this.instructionPhoneLineOne), this.instructionPhoneLineTwo && h("li", null, this.instructionPhoneLineTwo), this.instructionPhoneLineThree && h("li", null, this.instructionPhoneLineThree))))))));
     }
     static get watchers() { return {
         "open": ["updateOpen"]
     }; }
     static get style() { return PnLevelUpModalStyle0; }
 }, [0, "pn-level-up-modal", {
-        "open": [513],
+        "open": [516],
         "endpoint": [1],
         "instructionPhoneLineOne": [1, "instruction-phone-line-one"],
         "instructionPhoneLineTwo": [1, "instruction-phone-line-two"],

package/components/pn-level-up-modal2.js.map

@@ -1 +1 @@
-{"file":"pn-level-up-modal2.js","mappings":"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","names":[],"sources":["src/components/widgets/pn-level-up/pn-level-up.service.ts","src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.scss?tag=pn-level-up-modal","src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.tsx"],"sourcesContent":["import { FetchHelper } from '@/globals/FetchHelper';\nimport { LevelUpAuthorizeParameters, LevelUpAuthResponse, LevelUpTokenGrantParameters, LevelUpTokenGrantResponse } from './pn-level-up.models';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\n\nexport class PnLevelUpService {\n  private readonly _endpoint;\n  private readonly _levelupAuthorizePath = `/api/levelup/level-up-authorize`;\n  private readonly _levelupTokenGrantPath = `/api/levelup/level-up-token-grant`;\n  private readonly levelupLocalStorageKey = 'levelup';\n  \n  private fetchHelper = new FetchHelper('PnLevelUpService');\n  private _storage: LocalStorageService = new LocalStorageService();\n\n  constructor(endpoint: string) {\n    this._endpoint = this.formatEndpoint(endpoint);\n  }\n\n  public newLevelupUser() {\n    let threeMinutesInMilliseconds = 180000;\n    this._storage.set(this.levelupLocalStorageKey, { expire: Date.now() + threeMinutesInMilliseconds });\n  }\n\n  public async levelupAuthorize(system: string, defaultReturn: LevelUpAuthResponse) : Promise<LevelUpAuthResponse> {\n    if (!system) {\n      return defaultReturn;\n    }\n\n    let model: LevelUpAuthorizeParameters = {\n      system: system\n    };\n\n    const fetchUrl = this._endpoint + this._levelupAuthorizePath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<LevelUpAuthResponse>(data, defaultReturn);\n  }\n  \n  public async levelupTokenGrant(id: string, loopSeconds: string, defaultReturn: LevelUpTokenGrantResponse) : Promise<LevelUpTokenGrantResponse> {\n    if (!id) {\n      return defaultReturn;\n    }\n\n    let model: LevelUpTokenGrantParameters = {\n      id: id,\n      loopSeconds: loopSeconds\n    };\n\n    const fetchUrl = this._endpoint + this._levelupTokenGrantPath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<LevelUpTokenGrantResponse>(data, defaultReturn);\n  }\n  \n  private formatEndpoint(endpoint: string) : string {\n    return endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;\n  }\n\n  private handleResponse<T>(data : any, defaultReturn : any, checkForArray: boolean = false) {\n    if (!data) {\n      return defaultReturn;\n    }\n\n    let parsedData = JSON.parse(data) as T;\n    if (!parsedData || checkForArray && !Array.isArray(parsedData)) {\n      return defaultReturn;\n    }\n\n    return parsedData;\n  }\n  \n  private getRequestInit(model: any, method: string = 'POST', mode: RequestMode = 'cors', contentTypes: string = 'application/json'): RequestInit {\n    return {\n      mode: mode,\n      method: method,\n      headers: \n      {\n        'Content-Type': contentTypes,\n        'CustomValidateAntiForgeryToken': \"0111000001101110011000110110000101110100\"\n      },\n      body: JSON.stringify(model)\n    };\n  }\n}","@import \"../../../../globals/main.scss\";\n\npn-level-up-modal {\n    .pn-modal-header {\n        z-index: 0;\n    }\n\n    .pn-modal {\n        max-width: 63.1rem;\n\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            max-height: 100%;\n        }\n    }\n\n    .level-up-computer-modal .pn-modal-content .modal-content {\n        justify-self: center;\n        display: flex;\n        flex-wrap: wrap;\n        flex-direction: column;\n        gap: 2em;\n        margin: 2em;\n        width: max-content;\n        align-content: space-around;\n    }\n\n    .pn-modal-label {\n        margin: 2.2rem 0;\n\n        @media screen and (max-width: $min-width-md) {\n            justify-self: center;\n        }\n    }\n\n    .level-up-phone-modal .pn-modal-content {\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            align-content: center;\n            align-items: center;\n        }\n        \n        pn-spinner {\n            justify-self: center;\n        }\n\n        .modal-content-container {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            gap: 1em;\n\n            @media screen and (max-width: $min-width-md) {\n                flex-direction: column;\n            }\n        }\n\n        .modal-content-list {\n            ol {\n                font-size: 1.8rem;\n                line-height: 1.6;\n                margin-left: 2rem;\n                padding-left: 2rem;\n            }\n\n            li {\n                margin-bottom: 1rem;\n            }\n\n            @media screen and (max-width: $min-width-md) {\n                ol {\n                    font-size: 1.6rem;\n                }\n            }\n        }\n    }\n}","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\nimport { DeviceType } from '../types';\nimport { PnLevelUpService } from '../pn-level-up.service';\n\n@Component({\n  tag: 'pn-level-up-modal',\n  styleUrl: 'pn-level-up-modal.scss',\n})\n\nexport class PnLevelUpModal {\n  @Prop({ reflect: true }) open: 'open' | 'close';\n  @Prop() endpoint: string;\n  @Prop() instructionPhoneLineOne: string;\n  @Prop() instructionPhoneLineTwo: string;\n  @Prop() instructionPhoneLineThree: string;\n  @Prop() headingText: string;\n  @Prop() outdatedQRMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() system: DeviceType;\n  @Prop() qrAriaLabel: string;\n\n  @State() private openModalToggle: boolean;\n  @State() private isLoading: boolean = true;\n\n  private _bankIDUrl: string;\n  private _levelupService: PnLevelUpService;\n  private _levelUpModal: HTMLElement;\n  \n  componentWillLoad() { \n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this.updateOpen();\n  }\n\n  private updateBankIDUrl = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this.system, null);\n    this.isLoading = false;\n    this._bankIDUrl = authResponse.url;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if(response.code === 200) {\n        this._levelupService.newLevelupUser();\n      }\n    });\n  }\n\n  @Watch('open')\n  updateOpen () {\n    if (this.open === 'open') {\n      this.handleOpen();\n      this.openModalToggle = true;\n      if (this._levelUpModal) {\n        if ((this._levelUpModal as any).open === true) {\n          (this._levelUpModal as any).open = false;\n        }\n        (this._levelUpModal as any).open = true;\n      }\n    }\n    else {\n      this.openModalToggle = false;\n    }\n  }\n\n  private handleOpen = async () => {\n    await this.updateBankIDUrl();\n  }\n\n  render() {\n    return (\n      <Host>\n        <pn-modal\n          ref={el => this._levelUpModal = el as HTMLElement}\n          open={this.openModalToggle}\n          class=\"level-up-phone-modal\"\n          allow-overflow='true'\n          label={this.headingText}>\n          {this.isLoading ?\n            (<pn-spinner light=\"false\" size=\"1.5\"></pn-spinner>) : (\n              <div class=\"modal-content-container\">\n                <div class=\"modal-content-qr\">\n                  <pn-qr-code-generator\n                    url={this._bankIDUrl}\n                    countdown-seconds=\"30\"\n                    outdated-message={this.outdatedQRMessage}\n                    expires-in-message={this.expiresInMessage}\n                    update-code-every-second={true}\n                    aria-label={this.qrAriaLabel}>\n                  </pn-qr-code-generator>\n                </div>\n                <div class=\"modal-content-list\">\n                  <ol>\n                    {this.instructionPhoneLineOne && <li>{this.instructionPhoneLineOne}</li>}\n                    {this.instructionPhoneLineTwo && <li>{this.instructionPhoneLineTwo}</li>}\n                    {this.instructionPhoneLineThree && <li>{this.instructionPhoneLineThree}</li>}\n                  </ol>\n                </div>\n              </div>\n            )}\n        </pn-modal>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"pn-level-up-modal2.js","mappings":"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","names":[],"sources":["src/components/widgets/pn-level-up/pn-level-up.service.ts","src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.scss?tag=pn-level-up-modal","src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.tsx"],"sourcesContent":["import { FetchHelper } from '@/globals/FetchHelper';\nimport { LevelUpAuthorizeParameters, LevelUpAuthResponse, LevelUpTokenGrantParameters, LevelUpTokenGrantResponse } from './pn-level-up.models';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\n\nexport class PnLevelUpService {\n  private readonly _endpoint;\n  private readonly _levelupAuthorizePath = `/api/levelup/level-up-authorize`;\n  private readonly _levelupTokenGrantPath = `/api/levelup/level-up-token-grant`;\n  private readonly levelupLocalStorageKey = 'levelup';\n  \n  private fetchHelper = new FetchHelper('PnLevelUpService');\n  private _storage: LocalStorageService = new LocalStorageService();\n\n  constructor(endpoint: string) {\n    this._endpoint = this.formatEndpoint(endpoint);\n  }\n\n  public newLevelupUser() {\n    let threeMinutesInMilliseconds = 180000;\n    this._storage.set(this.levelupLocalStorageKey, { expire: Date.now() + threeMinutesInMilliseconds });\n  }\n\n  public async levelupAuthorize(system: string, defaultReturn: LevelUpAuthResponse) : Promise<LevelUpAuthResponse> {\n    if (!system) {\n      return defaultReturn;\n    }\n\n    let model: LevelUpAuthorizeParameters = {\n      system: system\n    };\n\n    const fetchUrl = this._endpoint + this._levelupAuthorizePath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<LevelUpAuthResponse>(data, defaultReturn);\n  }\n  \n  public async levelupTokenGrant(id: string, loopSeconds: string, defaultReturn: LevelUpTokenGrantResponse) : Promise<LevelUpTokenGrantResponse> {\n    if (!id) {\n      return defaultReturn;\n    }\n\n    let model: LevelUpTokenGrantParameters = {\n      id: id,\n      loopSeconds: loopSeconds\n    };\n\n    const fetchUrl = this._endpoint + this._levelupTokenGrantPath;\n    const data = (await this.fetchHelper.fetchJson(\n      fetchUrl,\n      this.getRequestInit(model),\n      false,\n    )) as string;\n\n    return this.handleResponse<LevelUpTokenGrantResponse>(data, defaultReturn);\n  }\n  \n  private formatEndpoint(endpoint: string) : string {\n    return endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;\n  }\n\n  private handleResponse<T>(data : any, defaultReturn : any, checkForArray: boolean = false) {\n    if (!data) {\n      return defaultReturn;\n    }\n\n    let parsedData = JSON.parse(data) as T;\n    if (!parsedData || checkForArray && !Array.isArray(parsedData)) {\n      return defaultReturn;\n    }\n\n    return parsedData;\n  }\n  \n  private getRequestInit(model: any, method: string = 'POST', mode: RequestMode = 'cors', contentTypes: string = 'application/json'): RequestInit {\n    return {\n      mode: mode,\n      method: method,\n      headers: \n      {\n        'Content-Type': contentTypes,\n        'CustomValidateAntiForgeryToken': \"0111000001101110011000110110000101110100\"\n      },\n      body: JSON.stringify(model)\n    };\n  }\n}","@import \"../../../../globals/main.scss\";\n\npn-level-up-modal {\n    .pn-modal-header {\n        z-index: 0;\n    }\n\n    .pn-modal {\n        max-width: 63.1rem;\n\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            max-height: 100%;\n        }\n    }\n\n    .level-up-computer-modal .pn-modal-content .modal-content {\n        justify-self: center;\n        display: flex;\n        flex-wrap: wrap;\n        flex-direction: column;\n        gap: 2em;\n        margin: 2em;\n        width: max-content;\n        align-content: space-around;\n    }\n\n    .pn-modal-label {\n        margin: 2.2rem 0;\n\n        @media screen and (max-width: $min-width-md) {\n            justify-self: center;\n        }\n    }\n\n    .level-up-phone-modal .pn-modal-content {\n        @media screen and (max-width: $min-width-md) {\n            height: 100%;\n            align-content: center;\n            align-items: center;\n        }\n        \n        pn-spinner {\n            justify-self: center;\n        }\n\n        .modal-content-container {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            gap: 1em;\n\n            @media screen and (max-width: $min-width-md) {\n                flex-direction: column;\n            }\n        }\n\n        .modal-content-list {\n            ol {\n                font-size: 1.8rem;\n                line-height: 1.6;\n                margin-left: 2rem;\n                padding-left: 2rem;\n            }\n\n            li {\n                margin-bottom: 1rem;\n            }\n\n            @media screen and (max-width: $min-width-md) {\n                ol {\n                    font-size: 1.6rem;\n                }\n            }\n        }\n    }\n}","import { Component, Host, Prop, h, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { DeviceType } from '../types';\nimport { PnLevelUpService } from '../pn-level-up.service';\n\n@Component({\n  tag: 'pn-level-up-modal',\n  styleUrl: 'pn-level-up-modal.scss',\n})\n\nexport class PnLevelUpModal {\n  @Prop({ reflect: true }) open: boolean;\n  @Prop() endpoint: string;\n  @Prop() instructionPhoneLineOne: string;\n  @Prop() instructionPhoneLineTwo: string;\n  @Prop() instructionPhoneLineThree: string;\n  @Prop() headingText: string;\n  @Prop() outdatedQRMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() system: DeviceType;\n  @Prop() qrAriaLabel: string;\n\n  @State() private openModalToggle: boolean = false;\n  @State() private isLoading: boolean = true;\n  @Event({ eventName: 'modalToggle', bubbles: true, composed: true }) modalToggle: EventEmitter<boolean>;\n\n  private _bankIDUrl: string;\n  private _levelupService: PnLevelUpService;\n  private _levelUpModal: HTMLElement;\n\n  componentWillLoad() {\n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this.updateOpen();\n  }\n\n  private updateBankIDUrl = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this.system, null);\n    this.isLoading = false;\n    this._bankIDUrl = authResponse.url;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if (response.code === 200) {\n        this._levelupService.newLevelupUser();\n      }\n    });\n  }\n\n  @Watch('open')\n  updateOpen () {\n    if (this.open === true) {\n      this.handleOpen();\n      this.openModalToggle = true;\n      if (this._levelUpModal) {\n        if ((this._levelUpModal as any).open === true) {\n          (this._levelUpModal as any).open = false;\n        }\n        (this._levelUpModal as any).open = true;\n      }\n    }\n    else {\n      this.openModalToggle = false;\n    }\n  }\n\n  private handleOpen = async () => {\n    await this.updateBankIDUrl();\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <pn-modal\n          ref={el => this._levelUpModal = el as HTMLElement}\n          open={this.open}\n          class=\"level-up-phone-modal\"\n          allow-overflow='true'\n          label={this.headingText}\n          onModalToggle={(ev: CustomEvent<boolean | { open: boolean }>) => {\n            const detail = ev.detail as any;\n            const isOpen = typeof detail === 'boolean' ? detail : !!detail?.open;\n            this.openModalToggle = isOpen;\n          }}>\n          {this.isLoading ?\n            (<pn-spinner light=\"false\" size=\"1.5\"></pn-spinner>) : (\n              <div class=\"modal-content-container\">\n                <div class=\"modal-content-qr\">\n                  {this.openModalToggle && (\n                    <pn-qr-code-generator\n                      url={this._bankIDUrl}\n                      countdown-seconds=\"30\"\n                      outdated-message={this.outdatedQRMessage}\n                      expires-in-message={this.expiresInMessage}\n                      update-code-every-second={true}\n                      aria-label={this.qrAriaLabel}>\n                    </pn-qr-code-generator>\n                  )}\n                </div>\n                <div class=\"modal-content-list\">\n                  <ol>\n                    {this.instructionPhoneLineOne && <li>{this.instructionPhoneLineOne}</li>}\n                    {this.instructionPhoneLineTwo && <li>{this.instructionPhoneLineTwo}</li>}\n                    {this.instructionPhoneLineThree && <li>{this.instructionPhoneLineThree}</li>}\n                  </ol>\n                </div>\n              </div>\n            )}\n        </pn-modal>\n      </Host>\n    );\n  }\n}"],"version":3}

package/components/pn-level-up.js

@@ -37,6 +37,7 @@ const PnLevelUp$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTM
         this.isRecentLeveledUp = false;
         this.errorMessage = undefined;
     }
+    showModal = false;
     _android = 'android';
     _ios = 'ios';
     _web = 'web';
@@ -44,6 +45,7 @@ const PnLevelUp$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTM
     _system;
     _levelupService;
     _storage = new LocalStorageService();
+    modal;
     componentWillLoad() {
         if (!this.isLeveledUp) {
             this.checkRecentLevelUp();
@@ -78,12 +80,12 @@ const PnLevelUp$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTM
         });
     };
     openModal() {
-        let levelUpModal = document.getElementsByTagName('pn-level-up-modal')[0];
-        let openAttributeValue = levelUpModal.getAttribute('open');
-        if (openAttributeValue === 'open') {
-            levelUpModal.setAttribute('open', 'close');
+        if (this.showModal) {
+            this.modal.setAttribute('open', 'false');
+            this.showModal = false;
         }
-        levelUpModal.setAttribute('open', 'open');
+        this.modal.setAttribute('open', 'true');
+        this.showModal = true;
     }
     renderWebButtonOptions() {
         return (h("div", { class: "cta", role: "group" }, this.webModalContinueOtherDeviceLabel &&
@@ -124,9 +126,9 @@ const PnLevelUp$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTM
     }
     render() {
         const headingId = 'pn-level-up-heading';
-        return (h(Host, { key: 'f48ec4a1e559a8967176b29c1229f0e9db250ee0' }, this.isLeveledUp || this.isRecentLeveledUp
+        return (h(Host, { key: '0c6b3d3b8f1035d811582b8fa42fe1bfa7d24ea3' }, this.isLeveledUp || this.isRecentLeveledUp
             ? (this.presentResult())
-            : (h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { class: "content" }, this.heading && (h(HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && h("pn-toast", { key: 'a6f9a66b2a8d9007a8aed5e7f07a34f19f3c31b5', text: this.errorMessage, appearance: 'warning' }), h("pn-level-up-modal", { key: '73cafdd318db53a36a048b6b237234c443466a91', open: 'close', 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 })));
+            : (h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { class: "content" }, this.heading && (h(HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && h("pn-toast", { key: '0dc87efccbedaf752f62c7abcf4d6261f268d467', text: this.errorMessage, appearance: 'warning' }), h("pn-level-up-modal", { key: '2a7d8f973cee89c27a22f21da209a1927e5ee0e5', 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 })));
     }
     static get style() { return PnLevelUpStyle0; }
 }, [0, "pn-level-up", {

package/components/pn-level-up.js.map

@@ -1 +1 @@
-{"file":"pn-level-up.js","mappings":"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","names":["PnLevelUp"],"sources":["node_modules/pn-design-assets/pn-assets/icons/bankid.js","src/components/widgets/pn-level-up/pn-level-up.scss?tag=pn-level-up","src/components/widgets/pn-level-up/pn-level-up.tsx"],"sourcesContent":["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>';\nexport const bankid = icon;\n","@import '../../../globals/main.scss';\n\n:root {\n    --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\npn-level-up {\n    .pn-level-up {\n        background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n        color: $gray900;\n        display: flex;\n        flex-direction: column-reverse;\n        max-width: 100%;\n        padding: clamp(2rem, 5vw, 5rem);\n\n        .heading {\n            font-size: clamp(2rem, 4vw, 3rem);\n            font-weight: 700;\n            margin-bottom: 1rem;\n        }\n\n        .preamble {\n            font-size: clamp(1rem, 4vw, 1.6rem);\n            margin-top: var(--usp-preamble-margin);\n            margin-bottom: var(--usp-preamble-margin);\n        }\n\n        .cta {\n            display: flex;\n            font-size: clamp(1rem, 4vw, 1.6rem);\n            flex-direction: column;\n            gap: clamp(1rem, 4vw, 1.2rem);\n        }\n\n        .image-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 2rem;\n\n            .graphics {\n                --pn-width: #{$graphicsWidth} !important;\n                --pn-height: #{$graphicsWidth} !important;\n            }\n\n            .image {\n                border-radius: 50%;\n                width: 20rem;\n                height: 20rem;\n                object-fit: cover;\n            }\n        }\n\n        @media (min-width: $min-width-md) {\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n\n            .content {\n                max-width: 70%;\n            }\n\n            .cta {\n                flex-direction: row;\n                gap: clamp(2rem, 3vw, 3rem);\n                padding: 0;\n            }\n\n            .image-container {\n                margin-bottom: 0;\n\n                .graphics {\n                    --pn-width: #{$graphicsWidthMd};\n                    --pn-height: #{$graphicsWidthMd};\n                }\n            }\n        }\n\n        @media (min-width: $min-width-xl) {\n            max-width: $max-width-xl;\n            margin: 0 auto;\n\n            .image-container {\n                .graphics {\n                    --pn-width: #{$graphicsWidthXl};\n                    --pn-height: #{$graphicsWidthXl};\n                }\n            }\n        }\n\n        @media (min-width: $min-width-xxl) {\n            max-width: $max-width-xxl;\n\n            .image-container {\n                .graphics {\n                    --pn-width: #{$graphicsWidthXxl};\n                    --pn-height: #{$graphicsWidthXxl};\n                }\n            }\n        }\n    }\n}","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h, State } from '@stencil/core';\nimport { bankid } from 'pn-design-assets/pn-assets/icons.js';\nimport { DeviceType } from './types';\nimport { PnLevelUpService } from './pn-level-up.service';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\n\n@Component({\n  tag: 'pn-level-up',\n  styleUrl: 'pn-level-up.scss'\n})\nexport class PnLevelUp {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n  @Prop() endpoint: string;\n  @Prop() webModalContinueOtherDeviceLabel: string;\n  @Prop() webModalContinueThisDeviceLabel: string;\n  @Prop() mobileModalContinueThisDeviceLabel: string;\n  @Prop() mobileModalContinueOtherDeviceLabel: string;\n  @Prop() modalInstructionPhoneLineOne: string;\n  @Prop() modalInstructionPhoneLineTwo: string;\n  @Prop() modalInstructionPhoneLineThree: string;\n  @Prop() modalHeadingText: string;\n  @Prop() modalOutdatedQRMessage: string;\n  @Prop() modalExpiresInMessage: string;\n  @Prop() qrAriaLabel: string;\n  @Prop() leveledupMessage: string;\n  @Prop() isLeveledUp: boolean = false;\n\n  @State() private isLoading: boolean = false;\n  @State() private isRecentLeveledUp: boolean = false;\n  @State() private errorMessage: string;\n\n  private readonly _android: DeviceType = 'android';\n  private readonly _ios: DeviceType = 'ios';\n  private readonly _web: DeviceType = 'web';\n  private readonly levelupLocalStorageKey = 'levelup';\n\n  private _system: DeviceType;\n  private _levelupService: PnLevelUpService;\n  private _storage: LocalStorageService = new LocalStorageService();\n\n  componentWillLoad() {\n    if (!this.isLeveledUp) {\n      this.checkRecentLevelUp();\n    }\n\n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this._system = this.getDeviceType();\n  }\n\n  getDeviceType(): DeviceType {\n    const userAgent = navigator.userAgent;\n    \n    if (/android/i.test(userAgent)) {\n      return this._android;\n    }\n    \n    if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {\n      return this._ios;\n    }\n    \n    return this._web;\n  }\n\n  private openLocalApp = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this._system, null)\n    window.location.href = authResponse.url;\n    this.isLoading = false;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if (response.code === 200) {\n        this._levelupService.newLevelupUser();\n        this.isRecentLeveledUp = true;\n        this.errorMessage = null;\n      }\n      else {\n        this.errorMessage = response.customMessage;\n      }\n    });\n  }\n\n  private openModal() {\n    let levelUpModal = document.getElementsByTagName('pn-level-up-modal')[0];\n    let openAttributeValue = levelUpModal.getAttribute('open');\n\n    if (openAttributeValue === 'open') {\n      levelUpModal.setAttribute('open', 'close');\n    }\n\n    levelUpModal.setAttribute('open', 'open');\n  }\n\n  private renderWebButtonOptions() {\n    return ( \n      <div class=\"cta\" role=\"group\">\n        {this.webModalContinueOtherDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='default'\n          label={this.webModalContinueOtherDeviceLabel}\n          onClick={() => this.openModal()}>\n        </pn-button>}\n        {this.webModalContinueThisDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='light'\n          variant='outlined'\n          label={this.webModalContinueThisDeviceLabel}\n          onClick={() => this.openLocalApp()}\n          loading={this.isLoading}>\n        </pn-button>}\n      </div>);\n  }\n\n  private renderMobileButtonOptions() {\n    return (\n      <div class=\"cta\" role=\"group\">\n        {this.mobileModalContinueThisDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='default'\n          label={this.mobileModalContinueThisDeviceLabel}\n          onClick={() => this.openLocalApp()}\n          loading={this.isLoading}>\n        </pn-button>}\n        {this.mobileModalContinueOtherDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='light'\n          variant='outlined'\n          label={this.mobileModalContinueOtherDeviceLabel}\n          onClick={() => this.openModal()}>\n        </pn-button>}\n      </div>);\n  }\n\n  private presentResult() {\n    if (this.isLeveledUp) {\n      return null;\n    }\n\n    return (<pn-toast text={this.leveledupMessage} appearance='success'></pn-toast>);\n  }\n\n  private checkRecentLevelUp() {\n    let levelupStorage = this._storage.get(this.levelupLocalStorageKey);\n    if (levelupStorage === null) {\n      this.isRecentLeveledUp = false;\n    }\n    else if (levelupStorage.expire > Date.now()) {\n      this.isRecentLeveledUp = true;\n    }\n    else {\n      this._storage.remove(this.levelupLocalStorageKey);\n      this.isRecentLeveledUp = false;\n    }\n  }\n\n  private get hasButtonTexts(): boolean {\n    if (this._system === this._web) {\n      return Boolean(this.webModalContinueOtherDeviceLabel) && Boolean(this.webModalContinueThisDeviceLabel);\n    }\n    else {\n      return Boolean(this.mobileModalContinueOtherDeviceLabel) && Boolean(this.mobileModalContinueThisDeviceLabel);\n    }\n  }\n\n  render() {\n    const headingId = 'pn-level-up-heading';\n    return (\n      <Host>\n        {this.isLeveledUp || this.isRecentLeveledUp \n        ? (this.presentResult()) \n        : (<div class=\"pn-level-up\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n            <div class=\"content\">\n              {this.heading && (\n                <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                  {this.heading}\n                </HeadingTag>\n              )}\n              {this.preamble && (\n                <div class=\"preamble\">\n                  {this.preamble}\n                </div>\n              )}\n              {this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions()}\n              {this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()}\n            </div>\n            <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n              {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            </div>\n          </div>\n        )}\n        {this.errorMessage && <pn-toast text={this.errorMessage} appearance='warning'></pn-toast>}\n        <pn-level-up-modal\n          open='close'\n          endpoint={this.endpoint}\n          instruction-phone-line-one={this.modalInstructionPhoneLineOne}\n          instruction-phone-line-two={this.modalInstructionPhoneLineTwo}\n          instruction-phone-line-three={this.modalInstructionPhoneLineThree}\n          heading-text={this.modalHeadingText}\n          outdated-q-r-message={this.modalOutdatedQRMessage}\n          expires-in-message={this.modalExpiresInMessage}\n          qr-aria-label={this.qrAriaLabel}\n          system={this._android}>\n        </pn-level-up-modal>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"pn-level-up.js","mappings":"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","names":["PnLevelUp"],"sources":["node_modules/pn-design-assets/pn-assets/icons/bankid.js","src/components/widgets/pn-level-up/pn-level-up.scss?tag=pn-level-up","src/components/widgets/pn-level-up/pn-level-up.tsx"],"sourcesContent":["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>';\nexport const bankid = icon;\n","@import '../../../globals/main.scss';\n\n:root {\n    --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\npn-level-up {\n    .pn-level-up {\n        background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n        color: $gray900;\n        display: flex;\n        flex-direction: column-reverse;\n        max-width: 100%;\n        padding: clamp(2rem, 5vw, 5rem);\n\n        .heading {\n            font-size: clamp(2rem, 4vw, 3rem);\n            font-weight: 700;\n            margin-bottom: 1rem;\n        }\n\n        .preamble {\n            font-size: clamp(1rem, 4vw, 1.6rem);\n            margin-top: var(--usp-preamble-margin);\n            margin-bottom: var(--usp-preamble-margin);\n        }\n\n        .cta {\n            display: flex;\n            font-size: clamp(1rem, 4vw, 1.6rem);\n            flex-direction: column;\n            gap: clamp(1rem, 4vw, 1.2rem);\n        }\n\n        .image-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 2rem;\n\n            .graphics {\n                --pn-width: #{$graphicsWidth} !important;\n                --pn-height: #{$graphicsWidth} !important;\n            }\n\n            .image {\n                border-radius: 50%;\n                width: 20rem;\n                height: 20rem;\n                object-fit: cover;\n            }\n        }\n\n        @media (min-width: $min-width-md) {\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n\n            .content {\n                max-width: 70%;\n            }\n\n            .cta {\n                flex-direction: row;\n                gap: clamp(2rem, 3vw, 3rem);\n                padding: 0;\n            }\n\n            .image-container {\n                margin-bottom: 0;\n\n                .graphics {\n                    --pn-width: #{$graphicsWidthMd};\n                    --pn-height: #{$graphicsWidthMd};\n                }\n            }\n        }\n\n        @media (min-width: $min-width-xl) {\n            max-width: $max-width-xl;\n            margin: 0 auto;\n\n            .image-container {\n                .graphics {\n                    --pn-width: #{$graphicsWidthXl};\n                    --pn-height: #{$graphicsWidthXl};\n                }\n            }\n        }\n\n        @media (min-width: $min-width-xxl) {\n            max-width: $max-width-xxl;\n\n            .image-container {\n                .graphics {\n                    --pn-width: #{$graphicsWidthXxl};\n                    --pn-height: #{$graphicsWidthXxl};\n                }\n            }\n        }\n    }\n}","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h, State } from '@stencil/core';\nimport { bankid } from 'pn-design-assets/pn-assets/icons.js';\nimport { DeviceType } from './types';\nimport { PnLevelUpService } from './pn-level-up.service';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\n\n@Component({\n  tag: 'pn-level-up',\n  styleUrl: 'pn-level-up.scss'\n})\nexport class PnLevelUp {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n  @Prop() endpoint: string;\n  @Prop() webModalContinueOtherDeviceLabel: string;\n  @Prop() webModalContinueThisDeviceLabel: string;\n  @Prop() mobileModalContinueThisDeviceLabel: string;\n  @Prop() mobileModalContinueOtherDeviceLabel: string;\n  @Prop() modalInstructionPhoneLineOne: string;\n  @Prop() modalInstructionPhoneLineTwo: string;\n  @Prop() modalInstructionPhoneLineThree: string;\n  @Prop() modalHeadingText: string;\n  @Prop() modalOutdatedQRMessage: string;\n  @Prop() modalExpiresInMessage: string;\n  @Prop() qrAriaLabel: string;\n  @Prop() leveledupMessage: string;\n  @Prop() isLeveledUp: boolean = false;\n\n  @State() private isLoading: boolean = false;\n  @State() private isRecentLeveledUp: boolean = false;\n  @State() private errorMessage: string;\n  private showModal: boolean = false;\n\n  private readonly _android: DeviceType = 'android';\n  private readonly _ios: DeviceType = 'ios';\n  private readonly _web: DeviceType = 'web';\n  private readonly levelupLocalStorageKey = 'levelup';\n\n  private _system: DeviceType;\n  private _levelupService: PnLevelUpService;\n  private _storage: LocalStorageService = new LocalStorageService();\n  private modal: HTMLElement;\n\n  componentWillLoad() {\n    if (!this.isLeveledUp) {\n      this.checkRecentLevelUp();\n    }\n\n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this._system = this.getDeviceType();\n  }\n\n  getDeviceType(): DeviceType {\n    const userAgent = navigator.userAgent;\n    \n    if (/android/i.test(userAgent)) {\n      return this._android;\n    }\n    \n    if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {\n      return this._ios;\n    }\n    \n    return this._web;\n  }\n\n  private openLocalApp = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this._system, null)\n    window.location.href = authResponse.url;\n    this.isLoading = false;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if (response.code === 200) {\n        this._levelupService.newLevelupUser();\n        this.isRecentLeveledUp = true;\n        this.errorMessage = null;\n      }\n      else {\n        this.errorMessage = response.customMessage;\n      }\n    });\n  }\n\n  private openModal() {\n      if (this.showModal) {\n        this.modal.setAttribute('open', 'false');\n        this.showModal = false;\n      } \n        this.modal.setAttribute('open', 'true');\n        this.showModal = true;\n  }\n\n  private renderWebButtonOptions() {\n    return ( \n      <div class=\"cta\" role=\"group\">\n        {this.webModalContinueOtherDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='default'\n          label={this.webModalContinueOtherDeviceLabel}\n          onClick={() => this.openModal()}>\n        </pn-button>}\n        {this.webModalContinueThisDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='light'\n          variant='outlined'\n          label={this.webModalContinueThisDeviceLabel}\n          onClick={() => this.openLocalApp()}\n          loading={this.isLoading}>\n        </pn-button>}\n      </div>);\n  }\n\n  private renderMobileButtonOptions() {\n    return (\n      <div class=\"cta\" role=\"group\">\n        {this.mobileModalContinueThisDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='default'\n          label={this.mobileModalContinueThisDeviceLabel}\n          onClick={() => this.openLocalApp()}\n          loading={this.isLoading}>\n        </pn-button>}\n        {this.mobileModalContinueOtherDeviceLabel &&\n        <pn-button\n          icon={bankid}\n          left-icon='true'\n          appearance='light'\n          variant='outlined'\n          label={this.mobileModalContinueOtherDeviceLabel}\n          onClick={() => this.openModal()}>\n        </pn-button>}\n      </div>);\n  }\n\n  private presentResult() {\n    if (this.isLeveledUp) {\n      return null;\n    }\n\n    return (<pn-toast text={this.leveledupMessage} appearance='success'></pn-toast>);\n  }\n\n  private checkRecentLevelUp() {\n    let levelupStorage = this._storage.get(this.levelupLocalStorageKey);\n    if (levelupStorage === null) {\n      this.isRecentLeveledUp = false;\n    }\n    else if (levelupStorage.expire > Date.now()) {\n      this.isRecentLeveledUp = true;\n    }\n    else {\n      this._storage.remove(this.levelupLocalStorageKey);\n      this.isRecentLeveledUp = false;\n    }\n  }\n\n  private get hasButtonTexts(): boolean {\n    if (this._system === this._web) {\n      return Boolean(this.webModalContinueOtherDeviceLabel) && Boolean(this.webModalContinueThisDeviceLabel);\n    }\n    else {\n      return Boolean(this.mobileModalContinueOtherDeviceLabel) && Boolean(this.mobileModalContinueThisDeviceLabel);\n    }\n  }\n\n  render() {\n    const headingId = 'pn-level-up-heading';\n    return (\n      <Host>\n        {this.isLeveledUp || this.isRecentLeveledUp \n        ? (this.presentResult()) \n        : (<div class=\"pn-level-up\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n            <div class=\"content\">\n              {this.heading && (\n                <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                  {this.heading}\n                </HeadingTag>\n              )}\n              {this.preamble && (\n                <div class=\"preamble\">\n                  {this.preamble}\n                </div>\n              )}\n              {this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions()}\n              {this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()}\n            </div>\n            <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n              {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            </div>\n          </div>\n        )}\n        {this.errorMessage && <pn-toast text={this.errorMessage} appearance='warning'></pn-toast>}\n        <pn-level-up-modal\n          ref={el => this.modal = el as HTMLElement}\n          open={false}\n          endpoint={this.endpoint}\n          instruction-phone-line-one={this.modalInstructionPhoneLineOne}\n          instruction-phone-line-two={this.modalInstructionPhoneLineTwo}\n          instruction-phone-line-three={this.modalInstructionPhoneLineThree}\n          heading-text={this.modalHeadingText}\n          outdated-q-r-message={this.modalOutdatedQRMessage}\n          expires-in-message={this.modalExpiresInMessage}\n          qr-aria-label={this.qrAriaLabel}\n          system={this._android}>\n        </pn-level-up-modal>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/components/pn-qr-code-generator2.js

@@ -2887,14 +2887,33 @@ const QrCodeGenerator = /*@__PURE__*/ proxyCustomElement(class QrCodeGenerator e
     gray900 = '#2d2013';
     blackHex = '#000';
     whiteHex = '#fff';
+    connectedCallback() {
+        this.isOutdated = false;
+        if (this.timer == null) {
+            this.generateQRCode();
+            if (this.countdownSeconds !== -1) {
+                requestAnimationFrame(() => {
+                    this.startCountdown();
+                });
+            }
+        }
+    }
     componentWillLoad() {
         this.urlWithSegment = this.url + '#';
         this.remainingSeconds = this.countdownSeconds;
+        if (this.timer != null) {
+            this.resetCountdown();
+        }
     }
-    componentDidLoad() {
-        this.generateQRCode();
-        if (this.countdownSeconds !== -1) {
-            this.startCountdown();
+    disconnectedCallback() {
+        this.resetCountdown();
+    }
+    resetCountdown() {
+        if (this.timer !== null) {
+            this.remainingSeconds = this.countdownSeconds;
+            clearInterval(this.timer);
+            this.timer = null;
+            return;
         }
     }
     generateQRCode(urlSegment = '') {
@@ -2925,11 +2944,8 @@ const QrCodeGenerator = /*@__PURE__*/ proxyCustomElement(class QrCodeGenerator e
             }
         }, 1000);
     }
-    disconnectedCallback() {
-        clearInterval(this.timer);
-    }
     render() {
-        return (h("div", { key: 'e0bc37a181c7787812bbd052877cf1c0ecffe4c9' }, h("button", { key: '6486b7b7e94493ba8cf32d6cef7e9224c119a8ea', class: "qr-button__wrapper", "aria-label": this.ariaLabel }, h("canvas", { key: 'e66b827b3a7b92b3cf250e73b0dade3675fad9b7', class: this.isOutdated ? 'outdated' : '', ref: el => (this.canvasRef = el) })), this.countdownSeconds !== -1 && h("div", { key: '122ba7328a26fb6116ffc5b6c9b3a4cdcc24b8a2', class: "timer" }, this.isOutdated && h("span", { key: 'da1c41fe27834b3fdfcc08f456ab0f53e13a9a12', class: "outdated-message" }, this.outdatedMessage), !this.isOutdated && this.expiresInMessage && h("span", { key: 'c6515a6aa7491e02267f82f55abac7388ed68d15' }, this.expiresInMessage, " ", this.remainingSeconds))));
+        return (h("div", { key: 'e5b9bef49f102baf00ff2638d1aacda0fb3d49c4' }, h("button", { key: 'ba1c2a070481c2eee9a4d23bd41e17e23158610c', class: "qr-button__wrapper", "aria-label": this.ariaLabel }, h("canvas", { key: '50c30caabfcf98666a6cd5c0aaf83934cfbbf3d5', class: this.isOutdated ? 'outdated' : '', ref: el => (this.canvasRef = el) })), this.countdownSeconds !== -1 && h("div", { key: 'dfcb33c704376bbe087e20737118325fae4eb6d8', class: "timer" }, this.isOutdated && h("span", { key: '617d0795c50621394aa0a8edc32c76ba004824da', class: "outdated-message" }, this.outdatedMessage), !this.isOutdated && this.expiresInMessage && h("span", { key: '0ff4b37fe905149f20432819889f64f4296f136c' }, this.expiresInMessage, " ", this.remainingSeconds))));
     }
     static get watchers() { return {
         "url": ["generateQRCode"]