@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/components/pn-language-selector-option2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const pnLanguageSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#ffffff;color:#005d92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0d234b;text-decoration:underline;box-shadow:none;background-color:#f3f2f2;color:#005d92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005d92}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
+const pnLanguageSelectorOptionCss = "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-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-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#ffffff;color:#005d92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0d234b;text-decoration:underline;box-shadow:none;background-color:#f3f2f2;color:#005d92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005d92}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
 const PnLanguageSelectorOptionStyle0 = pnLanguageSelectorOptionCss;
 
 const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelectorOption extends HTMLElement {
@@ -31,7 +31,7 @@ const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class Pnlangua
         }
     }
     render() {
-        return (h(Host, { key: 'ae250a767da3c3d1abcc4ff296f3873357431ce1', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
+        return (h(Host, { key: 'f24941e75c88762e6e8830663ab344efca028dc7', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
     }
     static get style() { return PnLanguageSelectorOptionStyle0; }
 }, [0, "pn-language-selector-option", {

package/components/pn-language-selector-option2.js.map

@@ -1 +1 @@
-{"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,8uDAA8uD,CAAC;AACnxD,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\npn-language-selector-option {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.languageselector-button,\n.languageselector-link {\n  width: 100%;\n  padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n  display: flex;\n  align-items: center;\n  position: relative;\n  text-decoration: none;\n  border: 0;\n  cursor: pointer;\n  background-color: $white;\n  color: $blue700;\n  font-size: 1.6rem;\n  font-weight: bold;\n  border-radius: 0;\n  &:hover,\n  &:focus,\n  &:active {\n    color: $blue900;\n    text-decoration: underline;\n    box-shadow: none;\n    background-color: $gray50;\n    color: $blue700;\n    outline: none;\n  }\n}\n\n.languageselector-itemtext {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n  background: #fff;\n  border: 0.1em solid $gray200;\n  border-radius: 50%;\n  height: 1.5em;\n  width: 1.5em;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition:\n    border 0.2s ease-in-out,\n    background-color 0.2s ease-in-out,\n    box-shadow 0.1s;\n  cursor: pointer;\n\n  &:focus > &,\n  &:active > & {\n    box-shadow:\n      0 0 0 0.1rem white,\n      0 0 0 0.3rem $blue700;\n  }\n  &:hover > & {\n    border: 0.1rem solid $blue700;\n    background: $blue50;\n  }\n  [selected='true'] & {\n    border: 0.1rem solid $blue700;\n  }\n}\n\n.languageselector-radio-inner {\n  transform: scale(0);\n  height: 1em;\n  width: 1em;\n  background-color: $blue700;\n  border-radius: 50%;\n  transform-origin: center center;\n  transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n  [selected='true'] & {\n    transform: scale(1);\n  }\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n  tag: 'pn-language-selector-option',\n  styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n  /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n  @Prop() name: string = '';\n  @Prop() code: string = '';\n  @Prop() url: string = '';\n  @Prop() selected: boolean = false;\n  @Prop() currentLanguage: string;\n\n  private spanEl!: HTMLElement;\n\n  @Event() setCurrentLanguage: EventEmitter;\n  onOptionClick() {\n    const currentlanguage: LanguageSelectorOption = {\n      name: this.name,\n      code: this.code,\n      url: this.url,\n      current: true,\n    };\n    this.setCurrentLanguage.emit(currentlanguage);\n  }\n\n  componentDidLoad() {\n    if (this.spanEl) {\n      this.spanEl.setAttribute(\"xml:lang\", this.code);\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n        {!this.url ? (\n          <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n            <span class=\"languageselector-radio-outer\">\n              <span class=\"languageselector-radio-inner\"></span>\n            </span>\n            <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n              {this.name} - {this.code}\n            </span>\n          </button>\n        ) : (\n          <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n            <span class=\"languageselector-radio-outer\">\n              <span class=\"languageselector-radio-inner\"></span>\n            </span>\n            <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n              {this.name} - {this.code}\n            </span>\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,g4EAAg4E,CAAC;AACr6E,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\npn-language-selector-option {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.languageselector-button,\n.languageselector-link {\n  width: 100%;\n  padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n  display: flex;\n  align-items: center;\n  position: relative;\n  text-decoration: none;\n  border: 0;\n  cursor: pointer;\n  background-color: $white;\n  color: $blue700;\n  font-size: 1.6rem;\n  font-weight: bold;\n  border-radius: 0;\n  &:hover,\n  &:focus,\n  &:active {\n    color: $blue900;\n    text-decoration: underline;\n    box-shadow: none;\n    background-color: $gray50;\n    color: $blue700;\n    outline: none;\n  }\n}\n\n.languageselector-itemtext {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n  background: #fff;\n  border: 0.1em solid $gray200;\n  border-radius: 50%;\n  height: 1.5em;\n  width: 1.5em;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition:\n    border 0.2s ease-in-out,\n    background-color 0.2s ease-in-out,\n    box-shadow 0.1s;\n  cursor: pointer;\n\n  &:focus > &,\n  &:active > & {\n    box-shadow:\n      0 0 0 0.1rem white,\n      0 0 0 0.3rem $blue700;\n  }\n  &:hover > & {\n    border: 0.1rem solid $blue700;\n    background: $blue50;\n  }\n  [selected='true'] & {\n    border: 0.1rem solid $blue700;\n  }\n}\n\n.languageselector-radio-inner {\n  transform: scale(0);\n  height: 1em;\n  width: 1em;\n  background-color: $blue700;\n  border-radius: 50%;\n  transform-origin: center center;\n  transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n  [selected='true'] & {\n    transform: scale(1);\n  }\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n  tag: 'pn-language-selector-option',\n  styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n  /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n  @Prop() name: string = '';\n  @Prop() code: string = '';\n  @Prop() url: string = '';\n  @Prop() selected: boolean = false;\n  @Prop() currentLanguage: string;\n\n  private spanEl!: HTMLElement;\n\n  @Event() setCurrentLanguage: EventEmitter;\n  onOptionClick() {\n    const currentlanguage: LanguageSelectorOption = {\n      name: this.name,\n      code: this.code,\n      url: this.url,\n      current: true,\n    };\n    this.setCurrentLanguage.emit(currentlanguage);\n  }\n\n  componentDidLoad() {\n    if (this.spanEl) {\n      this.spanEl.setAttribute(\"xml:lang\", this.code);\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n        {!this.url ? (\n          <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n            <span class=\"languageselector-radio-outer\">\n              <span class=\"languageselector-radio-inner\"></span>\n            </span>\n            <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n              {this.name} - {this.code}\n            </span>\n          </button>\n        ) : (\n          <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n            <span class=\"languageselector-radio-outer\">\n              <span class=\"languageselector-radio-inner\"></span>\n            </span>\n            <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n              {this.name} - {this.code}\n            </span>\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-language-selector2.js

@@ -51,7 +51,7 @@ const translations = {
     },
 };
 
-const pnLanguageSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#ffffff;color:#005d92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0d234b;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:flex;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
+const pnLanguageSelectorCss = "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-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-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#ffffff;color:#005d92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0d234b;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:flex;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
 const PnLanguageSelectorStyle0 = pnLanguageSelectorCss;
 
 const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelector extends HTMLElement {
@@ -136,7 +136,7 @@ const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSele
         });
     }
     render() {
-        return (h(Host, { key: 'f91e9ba30c8927915229c61c1ba43f598f1dafdb', value: this.value }, h("pn-button-dropdown", { key: '97cbfbd22d92977dd9bddf0927d45ccfd27dff06', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '4563758488a5db6ac9d14fefc1581638385874fa', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: 'f81995ae5607fae035177b9c342de30230d9c3ac', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'ae2d0dc93918a3a2817c5848ae2bb2b90fb72736', class: "languageselector-list", role: "list" }, h("slot", { key: 'da75dde68e3c72cab5161e745555df47d39374fc' }))))));
+        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: '2dffb2112ec6a67af450c1e3471fbe6f1183b1ad', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '40f9c5ea57162c02d64d12249eabd96184d6d506', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
     }
     static get watchers() { return {
         "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]

package/components/pn-language-selector2.js.map

@@ -1 +1 @@
-{"file":"pn-language-selector2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.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=\"M4.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n  'sv': {\n    heading: 'Språk',\n  },\n  'en': {\n    heading: 'Language',\n  },\n  'da': {\n    heading: 'Sprog',\n  },\n  'no': {\n    heading: 'Språk',\n  },\n  'fi': {\n    heading: 'Kieli',\n  },\n  'de': {\n    heading: 'Sprache',\n  },\n  'zh': {\n    heading: '语言',\n  },\n  'fr': {\n    heading: 'Langue',\n  },\n  'es': {\n    heading: 'Idioma',\n  },\n  'nl': {\n    heading: 'Spraak',\n  },\n  'it': {\n    heading: 'Idioma',\n  },\n  'tr': {\n    heading: 'Dil',\n  },\n  'pl': {\n    heading: 'Język',\n  },\n  'pt': {\n    heading: 'Linguagem',\n  },\n  'pt-BR': {\n    heading: 'Linguagem',\n  },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\npn-language-selector {\n  max-height: 5.2rem;\n}\n.languageselector {\n  position: relative;\n}\n\n.languageselector-togglebtn {\n  cursor: pointer;\n  border: 0;\n  padding: 0.64rem 0;\n  background-color: $white;\n  color: $blue700;\n  font-size: 1.6rem;\n  &:hover,\n  &:focus,\n  &:active {\n    color: $blue900;\n    text-decoration: underline;\n  }\n  svg {\n    width: 1.9rem;\n    height: 1.9rem;\n  }\n}\n\n.languageselector-nav {\n}\n\n.languageselector-title {\n  padding: 0.8rem 1.6rem;\n  display: flex;\n  align-items: center;\n}\n\n.languageselector-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n","import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-language-selector',\n  styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n  @Element() hostElement: HTMLElement;\n  /* Current language code  */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @State() selectedLanguageName = '';\n  @State() options: LanguageSelectorOption[] = [];\n  @State() i18n: LanguageSelectori18n;\n\n  // Events\n  @Event() setLanguage: EventEmitter;\n\n  componentWillLoad() {\n    this.setInitialSelectedLanguageName();\n    this.setTranslations();\n  }\n\n  componentDidLoad() {\n    this.initialize();\n  }\n\n  initialize() {\n    this.setSelectedLanguageName();\n    this.addEventBindingsToOptions();\n  }\n\n  setInitialSelectedLanguageName() {\n    if (!window.Intl || !this.value) {\n      return;\n    }\n    const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n    if (!langs) {\n      return;\n    }\n    const languageName = langs.of(this.value);\n    if (!languageName) {\n      return;\n    }\n    this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n  }\n\n  addEventBindingsToOptions() {\n    const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n    options.map((option: HTMLElement) => {\n      option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n        this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n      });\n      // Bind event listener for when a user change language\n      option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n        this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n      });\n    });\n  }\n\n  @Watch('value')\n  setSelectedLanguageName() {\n    const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n    options.map((option: HTMLElement) => {\n      // Set current label of language selector\n      if (option.getAttribute('code') == this.value) {\n        //  || option.getAttribute(\"selected\") == \"true\"\n        this.selectedLanguageName = option.getAttribute('name');\n      }\n    });\n  }\n\n  onSetCurrentLanguage(option: LanguageSelectorOption) {\n    this.value = option.code;\n    this.selectedLanguageName = option.name;\n    this.setLanguage.emit(this.value);\n  }\n\n  @Watch('value')\n  setTranslations() {\n    if (translations[this.value]) {\n      this.i18n = translations[this.value] as LanguageSelectori18n;\n    }\n  }\n\n  @Watch('value')\n  onValueChange() {\n    const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n    components.forEach(component => {\n      // Pass values as props into slotted components\n      // component.setAttribute(\"current-language\", this.value);\n      const isSelected = (component.getAttribute('code') === this.value) + '';\n      if (component.getAttribute('selected') + '' !== isSelected) {\n        component.setAttribute('selected', isSelected);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host value={this.value}>\n        <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\">\n          <div class=\"languageselector-nav\" aria-label={this.i18n.heading}>\n            <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n            <div class=\"languageselector-list\" role=\"list\">\n              <slot />\n            </div>\n          </div>\n        </pn-button-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-language-selector2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.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=\"M4.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n  'sv': {\n    heading: 'Språk',\n  },\n  'en': {\n    heading: 'Language',\n  },\n  'da': {\n    heading: 'Sprog',\n  },\n  'no': {\n    heading: 'Språk',\n  },\n  'fi': {\n    heading: 'Kieli',\n  },\n  'de': {\n    heading: 'Sprache',\n  },\n  'zh': {\n    heading: '语言',\n  },\n  'fr': {\n    heading: 'Langue',\n  },\n  'es': {\n    heading: 'Idioma',\n  },\n  'nl': {\n    heading: 'Spraak',\n  },\n  'it': {\n    heading: 'Idioma',\n  },\n  'tr': {\n    heading: 'Dil',\n  },\n  'pl': {\n    heading: 'Język',\n  },\n  'pt': {\n    heading: 'Linguagem',\n  },\n  'pt-BR': {\n    heading: 'Linguagem',\n  },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\npn-language-selector {\n  max-height: 5.2rem;\n}\n.languageselector {\n  position: relative;\n}\n\n.languageselector-togglebtn {\n  cursor: pointer;\n  border: 0;\n  padding: 0.64rem 0;\n  background-color: $white;\n  color: $blue700;\n  font-size: 1.6rem;\n  &:hover,\n  &:focus,\n  &:active {\n    color: $blue900;\n    text-decoration: underline;\n  }\n  svg {\n    width: 1.9rem;\n    height: 1.9rem;\n  }\n}\n\n.languageselector-nav {\n}\n\n.languageselector-title {\n  padding: 0.8rem 1.6rem;\n  display: flex;\n  align-items: center;\n}\n\n.languageselector-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n","import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-language-selector',\n  styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n  @Element() hostElement: HTMLElement;\n  /* Current language code  */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @State() selectedLanguageName = '';\n  @State() options: LanguageSelectorOption[] = [];\n  @State() i18n: LanguageSelectori18n;\n\n  // Events\n  @Event() setLanguage: EventEmitter;\n\n  componentWillLoad() {\n    this.setInitialSelectedLanguageName();\n    this.setTranslations();\n  }\n\n  componentDidLoad() {\n    this.initialize();\n  }\n\n  initialize() {\n    this.setSelectedLanguageName();\n    this.addEventBindingsToOptions();\n  }\n\n  setInitialSelectedLanguageName() {\n    if (!window.Intl || !this.value) {\n      return;\n    }\n    const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n    if (!langs) {\n      return;\n    }\n    const languageName = langs.of(this.value);\n    if (!languageName) {\n      return;\n    }\n    this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n  }\n\n  addEventBindingsToOptions() {\n    const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n    options.map((option: HTMLElement) => {\n      option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n        this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n      });\n      // Bind event listener for when a user change language\n      option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n        this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n      });\n    });\n  }\n\n  @Watch('value')\n  setSelectedLanguageName() {\n    const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n    options.map((option: HTMLElement) => {\n      // Set current label of language selector\n      if (option.getAttribute('code') == this.value) {\n        //  || option.getAttribute(\"selected\") == \"true\"\n        this.selectedLanguageName = option.getAttribute('name');\n      }\n    });\n  }\n\n  onSetCurrentLanguage(option: LanguageSelectorOption) {\n    this.value = option.code;\n    this.selectedLanguageName = option.name;\n    this.setLanguage.emit(this.value);\n  }\n\n  @Watch('value')\n  setTranslations() {\n    if (translations[this.value]) {\n      this.i18n = translations[this.value] as LanguageSelectori18n;\n    }\n  }\n\n  @Watch('value')\n  onValueChange() {\n    const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n    components.forEach(component => {\n      // Pass values as props into slotted components\n      // component.setAttribute(\"current-language\", this.value);\n      const isSelected = (component.getAttribute('code') === this.value) + '';\n      if (component.getAttribute('selected') + '' !== isSelected) {\n        component.setAttribute('selected', isSelected);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host value={this.value}>\n        <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\">\n          <div class=\"languageselector-nav\" aria-label={this.i18n.heading}>\n            <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n            <div class=\"languageselector-list\" role=\"list\">\n              <slot />\n            </div>\n          </div>\n        </pn-button-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-level-up-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnLevelUpModal extends Components.PnLevelUpModal, HTMLElement {}
+export const PnLevelUpModal: {
+    prototype: PnLevelUpModal;
+    new (): PnLevelUpModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { a as PnLevelUpModal$1, d as defineCustomElement$1 } from './pn-level-up-modal2.js';
+
+const PnLevelUpModal = PnLevelUpModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnLevelUpModal, defineCustomElement };
+
+//# sourceMappingURL=pn-level-up-modal.js.map

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

@@ -0,0 +1 @@
+{"file":"pn-level-up-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,170 @@
+import { proxyCustomElement, HTMLElement, 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';
+
+class PnLevelUpService {
+    _endpoint;
+    _levelupAuthorizePath = `/api/levelup/level-up-authorize`;
+    _levelupTokenGrantPath = `/api/levelup/level-up-token-grant`;
+    levelupLocalStorageKey = 'levelup';
+    fetchHelper = new FetchHelper('PnLevelUpService');
+    _storage = new LocalStorageService();
+    constructor(endpoint) {
+        this._endpoint = this.formatEndpoint(endpoint);
+    }
+    newLevelupUser() {
+        let threeMinutesInMilliseconds = 180000;
+        this._storage.set(this.levelupLocalStorageKey, { expire: Date.now() + threeMinutesInMilliseconds });
+    }
+    async levelupAuthorize(system, defaultReturn) {
+        if (!system) {
+            return defaultReturn;
+        }
+        let model = {
+            system: system
+        };
+        const fetchUrl = this._endpoint + this._levelupAuthorizePath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return this.handleResponse(data, defaultReturn);
+    }
+    async levelupTokenGrant(id, loopSeconds, defaultReturn) {
+        if (!id) {
+            return defaultReturn;
+        }
+        let model = {
+            id: id,
+            loopSeconds: loopSeconds
+        };
+        const fetchUrl = this._endpoint + this._levelupTokenGrantPath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return this.handleResponse(data, defaultReturn);
+    }
+    formatEndpoint(endpoint) {
+        return endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;
+    }
+    handleResponse(data, defaultReturn, checkForArray = false) {
+        if (!data) {
+            return defaultReturn;
+        }
+        let parsedData = JSON.parse(data);
+        if (!parsedData || checkForArray && !Array.isArray(parsedData)) {
+            return defaultReturn;
+        }
+        return parsedData;
+    }
+    getRequestInit(model, method = 'POST', mode = 'cors', contentTypes = 'application/json') {
+        return {
+            mode: mode,
+            method: method,
+            headers: {
+                'Content-Type': contentTypes,
+                'CustomValidateAntiForgeryToken': "0111000001101110011000110110000101110100"
+            },
+            body: JSON.stringify(model)
+        };
+    }
+}
+
+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 = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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 = undefined;
+        this.isLoading = true;
+    }
+    _bankIDUrl;
+    _levelupService;
+    _levelUpModal;
+    componentWillLoad() {
+        this._levelupService = new 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 === 'open') {
+            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 (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))))))));
+    }
+    static get watchers() { return {
+        "open": ["updateOpen"]
+    }; }
+    static get style() { return PnLevelUpModalStyle0; }
+}, [0, "pn-level-up-modal", {
+        "open": [513],
+        "endpoint": [1],
+        "instructionPhoneLineOne": [1, "instruction-phone-line-one"],
+        "instructionPhoneLineTwo": [1, "instruction-phone-line-two"],
+        "instructionPhoneLineThree": [1, "instruction-phone-line-three"],
+        "headingText": [1, "heading-text"],
+        "outdatedQRMessage": [1, "outdated-q-r-message"],
+        "expiresInMessage": [1, "expires-in-message"],
+        "system": [1],
+        "qrAriaLabel": [1, "qr-aria-label"],
+        "openModalToggle": [32],
+        "isLoading": [32]
+    }, undefined, {
+        "open": ["updateOpen"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-level-up-modal", "pn-qr-code-generator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-level-up-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnLevelUpModal);
+            }
+            break;
+        case "pn-qr-code-generator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PnLevelUpService as P, PnLevelUpModal as a, defineCustomElement as d };
+
+//# sourceMappingURL=pn-level-up-modal2.js.map

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

@@ -0,0 +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}

package/components/pn-level-up.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnLevelUp extends Components.PnLevelUp, HTMLElement {}
+export const PnLevelUp: {
+    prototype: PnLevelUp;
+    new (): PnLevelUp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-level-up.js

@@ -0,0 +1,185 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeadingTag } from './HeadingTag.js';
+import { P as PnLevelUpService, d as defineCustomElement$3 } from './pn-level-up-modal2.js';
+import { L as LocalStorageService } from './LocalStorageService.js';
+import { d as defineCustomElement$2 } from './pn-qr-code-generator2.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$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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;
+    }
+    _android = 'android';
+    _ios = 'ios';
+    _web = 'web';
+    levelupLocalStorageKey = 'levelup';
+    _system;
+    _levelupService;
+    _storage = new LocalStorageService();
+    componentWillLoad() {
+        if (!this.isLeveledUp) {
+            this.checkRecentLevelUp();
+        }
+        this._levelupService = new 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() {
+        let levelUpModal = document.getElementsByTagName('pn-level-up-modal')[0];
+        let openAttributeValue = levelUpModal.getAttribute('open');
+        if (openAttributeValue === 'open') {
+            levelUpModal.setAttribute('open', 'close');
+        }
+        levelUpModal.setAttribute('open', 'open');
+    }
+    renderWebButtonOptions() {
+        return (h("div", { class: "cta", role: "group" }, this.webModalContinueOtherDeviceLabel &&
+            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.webModalContinueOtherDeviceLabel, onClick: () => this.openModal() }), this.webModalContinueThisDeviceLabel &&
+            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'light', variant: 'outlined', label: this.webModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading })));
+    }
+    renderMobileButtonOptions() {
+        return (h("div", { class: "cta", role: "group" }, this.mobileModalContinueThisDeviceLabel &&
+            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.mobileModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading }), this.mobileModalContinueOtherDeviceLabel &&
+            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 (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 (h(Host, { key: 'f48ec4a1e559a8967176b29c1229f0e9db250ee0' }, 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 })));
+    }
+    static get style() { return PnLevelUpStyle0; }
+}, [0, "pn-level-up", {
+        "heading": [1],
+        "headingLevel": [8, "heading-level"],
+        "preamble": [1],
+        "imageUrl": [1, "image-url"],
+        "imageAltText": [1, "image-alt-text"],
+        "endpoint": [1],
+        "webModalContinueOtherDeviceLabel": [1, "web-modal-continue-other-device-label"],
+        "webModalContinueThisDeviceLabel": [1, "web-modal-continue-this-device-label"],
+        "mobileModalContinueThisDeviceLabel": [1, "mobile-modal-continue-this-device-label"],
+        "mobileModalContinueOtherDeviceLabel": [1, "mobile-modal-continue-other-device-label"],
+        "modalInstructionPhoneLineOne": [1, "modal-instruction-phone-line-one"],
+        "modalInstructionPhoneLineTwo": [1, "modal-instruction-phone-line-two"],
+        "modalInstructionPhoneLineThree": [1, "modal-instruction-phone-line-three"],
+        "modalHeadingText": [1, "modal-heading-text"],
+        "modalOutdatedQRMessage": [1, "modal-outdated-q-r-message"],
+        "modalExpiresInMessage": [1, "modal-expires-in-message"],
+        "qrAriaLabel": [1, "qr-aria-label"],
+        "leveledupMessage": [1, "leveledup-message"],
+        "isLeveledUp": [4, "is-leveled-up"],
+        "isLoading": [32],
+        "isRecentLeveledUp": [32],
+        "errorMessage": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-level-up", "pn-level-up-modal", "pn-qr-code-generator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-level-up":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnLevelUp$1);
+            }
+            break;
+        case "pn-level-up-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pn-qr-code-generator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PnLevelUp = PnLevelUp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnLevelUp, defineCustomElement };
+
+//# sourceMappingURL=pn-level-up.js.map

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

@@ -0,0 +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}