@postnord/pn-marketweb-components 3.5.3 → 4.0.0

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}

package/components/pn-line-shape.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnLineShapeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-line-shape .pn-line-shape__container{display:flex}pn-line-shape .pn-line-shape__line{border-style:solid;border-width:0.4rem;border-radius:1.6rem;border-color:#00a0d6}pn-line-shape .pn-line-shape__dot{width:0.8rem;border-style:solid;border-width:0.4rem;border-radius:1.6rem;height:0.8rem;border-color:#00a0d6}pn-line-shape[slot=horizontal-line] .pn-line-shape__container{flex-direction:row;flex-wrap:nowrap;width:100%;gap:0.8rem;padding:2.4rem 0}pn-line-shape[slot=horizontal-line] .pn-line-shape__line{height:0.8rem;width:100%}pn-line-shape[slot=vertical-line] .pn-line-shape__container{height:100%;flex-direction:column;gap:0.8rem;padding:0.8rem 0.5rem}pn-line-shape[slot=vertical-line] .pn-line-shape__line{height:100%;width:0.8rem}";
+const pnLineShapeCss = "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-line-shape .pn-line-shape__container{display:flex}pn-line-shape .pn-line-shape__line{border-style:solid;border-width:0.4rem;border-radius:1.6rem;border-color:#00a0d6}pn-line-shape .pn-line-shape__dot{width:0.8rem;border-style:solid;border-width:0.4rem;border-radius:1.6rem;height:0.8rem;border-color:#00a0d6}pn-line-shape[slot=horizontal-line] .pn-line-shape__container{flex-direction:row;flex-wrap:nowrap;width:100%;gap:0.8rem;padding:2.4rem 0}pn-line-shape[slot=horizontal-line] .pn-line-shape__line{height:0.8rem;width:100%}pn-line-shape[slot=vertical-line] .pn-line-shape__container{height:100%;flex-direction:column;gap:0.8rem;padding:0.8rem 0.5rem}pn-line-shape[slot=vertical-line] .pn-line-shape__line{height:100%;width:0.8rem}";
 const PnLineShapeStyle0 = pnLineShapeCss;
 
 const PnLineShape$1 = /*@__PURE__*/ proxyCustomElement(class PnLineShape extends HTMLElement {

package/components/pn-line-shape.js.map

@@ -1 +1 @@
-{"file":"pn-line-shape.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kzBAAkzB,CAAC;AAC10B,0BAAe,cAAc;;MCKhBA,aAAW;;;;;;;IAItB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU,EAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["PnLineShape"],"sources":["src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.scss?tag=pn-line-shape","src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"sourcesContent":["@import '../../../../globals/main';\n\npn-line-shape {\n  .pn-line-shape__container {\n    display: flex;\n  }\n\n  .pn-line-shape__line {\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n\n    border-color: $blue400;\n  }\n\n  .pn-line-shape__dot {\n    width: 0.8rem;\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n    height: 0.8rem;\n    border-color: $blue400;\n  }\n}\n\npn-line-shape[slot='horizontal-line'] {\n  .pn-line-shape__container {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 100%;\n    gap: 0.8rem;\n    padding: 2.4rem 0;\n  }\n\n  .pn-line-shape__line {\n    height: 0.8rem;\n    width: 100%;\n  }\n  .pn-line-shape__dot {\n  }\n}\n\npn-line-shape[slot='vertical-line'] {\n  .pn-line-shape__container {\n    height: 100%;\n    flex-direction: column;\n    gap: 0.8rem;\n    padding: 0.8rem 0.5rem;\n  }\n\n  .pn-line-shape__line {\n    height: 100%;\n    width: 0.8rem;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pn-line-shape',\n  styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n  @Element() hostElement: HTMLElement;\n  //props\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-line-shape__container\">\n          <canvas class=\"pn-line-shape__line\"></canvas>\n          <canvas class=\"pn-line-shape__dot\"></canvas>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-line-shape.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2nCAA2nC,CAAC;AACnpC,0BAAe,cAAc;;MCKhBA,aAAW;;;;;;;IAItB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU,EAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["PnLineShape"],"sources":["src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.scss?tag=pn-line-shape","src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"sourcesContent":["@import '../../../../globals/main';\n\npn-line-shape {\n  .pn-line-shape__container {\n    display: flex;\n  }\n\n  .pn-line-shape__line {\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n\n    border-color: $blue400;\n  }\n\n  .pn-line-shape__dot {\n    width: 0.8rem;\n    border-style: solid;\n    border-width: 0.4rem;\n    border-radius: 1.6rem;\n    height: 0.8rem;\n    border-color: $blue400;\n  }\n}\n\npn-line-shape[slot='horizontal-line'] {\n  .pn-line-shape__container {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 100%;\n    gap: 0.8rem;\n    padding: 2.4rem 0;\n  }\n\n  .pn-line-shape__line {\n    height: 0.8rem;\n    width: 100%;\n  }\n  .pn-line-shape__dot {\n  }\n}\n\npn-line-shape[slot='vertical-line'] {\n  .pn-line-shape__container {\n    height: 100%;\n    flex-direction: column;\n    gap: 0.8rem;\n    padding: 0.8rem 0.5rem;\n  }\n\n  .pn-line-shape__line {\n    height: 100%;\n    width: 0.8rem;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pn-line-shape',\n  styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n  @Element() hostElement: HTMLElement;\n  //props\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-line-shape__container\">\n          <canvas class=\"pn-line-shape__line\"></canvas>\n          <canvas class=\"pn-line-shape__dot\"></canvas>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-link-list.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnLinkListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-link-list .link-list__header{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005d92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);left:0}pn-link-list .link-list__container::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2d2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#ffffff;border:0.1rem solid #d3cecb;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#fff}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005d92}pn-link-list [slot=linklist] li>a:active{background-color:#0d234b}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005d92;outline-offset:2px}pn-link-list .link-list__button{display:flex;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005d92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
+const pnLinkListCss = "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-link-list .link-list__header{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005d92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);left:0}pn-link-list .link-list__container::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2d2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#ffffff;border:0.1rem solid #d3cecb;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#fff}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005d92}pn-link-list [slot=linklist] li>a:active{background-color:#0d234b}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005d92;outline-offset:2px}pn-link-list .link-list__button{display:flex;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005d92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
 const PnLinkListStyle0 = pnLinkListCss;
 
 const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class PnLinkList extends HTMLElement {
@@ -51,7 +51,7 @@ const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class PnLinkList extends H
         }
     };
     render() {
-        return (h(Host, { key: '0cfb80f2de46eeae8943f13868ca744c54974a09' }, (this.heading || this.preamble) && (h("div", { key: 'a396fea209035c911b5f545919ae1b1c9ff77e79', class: "link-list__header" }, this.heading && h("h2", { key: 'fbf8d3282fe16b7acc4b1568357e1db099597262', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: '06ee3ced935e335782f258a214b76de728978481', class: "link-list__preamble" }, this.preamble))), h("div", { key: 'c5a5d02539b7c687d4024d8ef97c68a16f9c8227', class: "link-list" }, h("div", { key: '7e77c23f6c72c0fe9ce14d39aef88223c4af00a4', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: 'd0948943177059f1aa66f079574a02a7a23ee79b', class: "link-list__scrollable" }, h("slot", { key: '52c2ed2c68dc45f5ee0c75b986f84183a9bc7dc5', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
+        return (h(Host, { key: '294904b3412b9e53557ec4d9f2743de25c646e21' }, (this.heading || this.preamble) && (h("div", { key: 'e51721d8f30bd637fb872bceaf3e63d63cf60faa', class: "link-list__header" }, this.heading && h("h2", { key: 'e7fab15c721d47c6baea3b7d2ddec452e2448445', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: 'd631a6a3c6e239e9325064f936bb9e3a216659d9', class: "link-list__preamble" }, this.preamble))), h("div", { key: '1337466d68dbccb1183ffb864cd36cdbf1af3017', class: "link-list" }, h("div", { key: '5934a9b4c3c4846f5988c2cbf20e8c268d6970a9', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: 'ae387d9591953a3867d22633c245931d215a1ccb', class: "link-list__scrollable" }, h("slot", { key: '2548751e6d2161de5236694e32fde16d2140fd88', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
     }
     static get style() { return PnLinkListStyle0; }
 }, [4, "pn-link-list", {

package/components/pn-link-list.js.map

@@ -1 +1 @@
-{"file":"pn-link-list.js","mappings":"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","names":["PnLinkList"],"sources":["src/components/widgets/pn-link-list/pn-link-list.scss?tag=pn-link-list","src/components/widgets/pn-link-list/pn-link-list.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-link-list {\n  .link-list__header {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0.8rem;\n  }\n\n  .link-list__heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $max-width-xl) {\n      font-size: 3.2rem;\n    }\n  }\n\n  .link-list__preamble {\n    max-width: 85rem;\n    text-align: center;\n    margin-bottom: 0;\n\n    @media screen and (min-width: $max-width-xl) {\n      text-wrap: balance;\n    }\n  }\n\n  .link-list {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n\n    margin: 0;\n    margin-bottom: 2.4rem;\n    padding: 0;\n  }\n\n  .link-list__container {\n    overflow-x: auto;\n    text-align: center;\n    white-space: nowrap;\n\n    &.link-list__active {\n      a,\n      li,\n      ul {\n        cursor: grab;\n        cursor: -webkit-grab;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      height: 0.4rem;\n      margin-top: 2rem;\n      -webkit-appearance: none;\n\n      @media screen and (min-width: $min-width-md) {\n        height: 0.6rem;\n      }\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background: $blue700;\n      border-radius: 2rem;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #d3cecb;\n      border-radius: 2rem;\n      width: 100%;\n      margin: 0 5rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin: 0 10rem;\n      }\n\n      @media screen and (min-width: $max-width-xl) {\n        margin: 0 15rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        margin: 0 20rem;\n      }\n    }\n\n    &::-webkit-resizer {\n      display: none;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      height: 85%;\n      width: 10%;\n    }\n\n    &::before {\n      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      left: 0;\n    }\n\n    &::after {\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      right: 0;\n    }\n  }\n\n  .link-list__scrollable {\n    display: inline-block;\n    padding: 2rem 0 1rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 0.5rem 2rem 1rem;\n    }\n  }\n\n  [slot='linklist'] {\n    ul {\n      display: flex;\n      list-style: none;\n      margin: 0;\n      padding: 0 1.6rem;\n    }\n\n    li {\n      & > a {\n        display: block;\n        color: $gray900;\n        font-size: 1.4rem;\n        font-weight: 500;\n        line-height: 140%;\n        text-decoration: none;\n        cursor: pointer;\n\n        background-color: $white;\n        border: 0.1rem solid $gray200;\n        border-radius: 0.8rem;\n        margin: 0 0.8rem;\n        padding: 1rem;\n\n        @media screen and (min-width: 1410px) {\n          font-size: 1.6rem;\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n          color: #fff;\n        }\n\n        &:hover,\n        &:focus {\n          background-color: $blue700;\n        }\n\n        &:active {\n          background-color: $blue900;\n        }\n\n        &:focus {\n          outline: 2px solid $blue700;\n          outline-offset: 2px;\n        }\n      }\n    }\n  }\n\n  .link-list__button {\n    display: flex;\n    justify-content: center;\n  }\n\n  @-moz-document url-prefix() {\n    .link-list__container {\n      scrollbar-color: $blue700 #d3cecb;\n    }\n\n    .link-list__scrollable {\n      padding: 0.5rem 2rem 2rem;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'pn-link-list',\n  styleUrl: 'pn-link-list.scss',\n})\nexport class PnLinkList {\n  @Prop() heading: string = null;\n  @Prop() label: string = null;\n  @Prop() preamble: string = null;\n  @Prop() url: string = null;\n  @Prop() showMoreLabel: string = null;\n  @Prop() showMoreUrl: string = null;\n\n  private slider: HTMLElement = null;\n  private isDragging = false;\n  private startX = 0;\n  private scrollLeft = 0;\n\n  componentDidLoad() {\n    this.slider = document.querySelector('.link-list__container') as HTMLElement;\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    const target = e.target as HTMLElement;\n\n    const isContainerClick = target.classList.contains('link-list__container');\n    const isLinkClick = target.tagName === 'A';\n\n    if (isContainerClick || isLinkClick) {\n      this.isDragging = true;\n      this.slider?.classList.add('link-list__active');\n      this.startX = e.pageX - this.slider?.offsetLeft;\n      this.scrollLeft = this.slider?.scrollLeft;\n\n      if (isLinkClick) {\n        e.preventDefault();\n      }\n    }\n  };\n\n  private handleMouseLeave = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (this.isDragging) {\n      const x = e.pageX - this.slider?.offsetLeft;\n      const move = (x - this.startX) * 2;\n      this.slider.scrollLeft = this.scrollLeft - move;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        {(this.heading || this.preamble) && (\n          <div class=\"link-list__header\">\n            {this.heading && <h2 class=\"link-list__heading\">{this.heading}</h2>}\n            {this.preamble && <p class=\"link-list__preamble\">{this.preamble}</p>}\n          </div>\n        )}\n        <div class=\"link-list\">\n          <div\n            class=\"link-list__container\"\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n          >\n            <div class=\"link-list__scrollable\">\n              <slot name=\"linklist\" />\n            </div>\n          </div>\n        </div>\n        {this.showMoreUrl ? (\n          <div class=\"link-list__button\">\n            <pn-button appearance=\"light\" href={this.showMoreUrl}>\n              {this.showMoreLabel}\n            </pn-button>{' '}\n          </div>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-link-list.js","mappings":"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","names":["PnLinkList"],"sources":["src/components/widgets/pn-link-list/pn-link-list.scss?tag=pn-link-list","src/components/widgets/pn-link-list/pn-link-list.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-link-list {\n  .link-list__header {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0.8rem;\n  }\n\n  .link-list__heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $max-width-xl) {\n      font-size: 3.2rem;\n    }\n  }\n\n  .link-list__preamble {\n    max-width: 85rem;\n    text-align: center;\n    margin-bottom: 0;\n\n    @media screen and (min-width: $max-width-xl) {\n      text-wrap: balance;\n    }\n  }\n\n  .link-list {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n\n    margin: 0;\n    margin-bottom: 2.4rem;\n    padding: 0;\n  }\n\n  .link-list__container {\n    overflow-x: auto;\n    text-align: center;\n    white-space: nowrap;\n\n    &.link-list__active {\n      a,\n      li,\n      ul {\n        cursor: grab;\n        cursor: -webkit-grab;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      height: 0.4rem;\n      margin-top: 2rem;\n      -webkit-appearance: none;\n\n      @media screen and (min-width: $min-width-md) {\n        height: 0.6rem;\n      }\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background: $blue700;\n      border-radius: 2rem;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #d3cecb;\n      border-radius: 2rem;\n      width: 100%;\n      margin: 0 5rem;\n\n      @media screen and (min-width: $min-width-md) {\n        margin: 0 10rem;\n      }\n\n      @media screen and (min-width: $max-width-xl) {\n        margin: 0 15rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        margin: 0 20rem;\n      }\n    }\n\n    &::-webkit-resizer {\n      display: none;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      height: 85%;\n      width: 10%;\n    }\n\n    &::before {\n      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      left: 0;\n    }\n\n    &::after {\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 95%);\n      right: 0;\n    }\n  }\n\n  .link-list__scrollable {\n    display: inline-block;\n    padding: 2rem 0 1rem;\n\n    @media screen and (min-width: $min-width-lg) {\n      padding: 0.5rem 2rem 1rem;\n    }\n  }\n\n  [slot='linklist'] {\n    ul {\n      display: flex;\n      list-style: none;\n      margin: 0;\n      padding: 0 1.6rem;\n    }\n\n    li {\n      & > a {\n        display: block;\n        color: $gray900;\n        font-size: 1.4rem;\n        font-weight: 500;\n        line-height: 140%;\n        text-decoration: none;\n        cursor: pointer;\n\n        background-color: $white;\n        border: 0.1rem solid $gray200;\n        border-radius: 0.8rem;\n        margin: 0 0.8rem;\n        padding: 1rem;\n\n        @media screen and (min-width: 1410px) {\n          font-size: 1.6rem;\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n          color: #fff;\n        }\n\n        &:hover,\n        &:focus {\n          background-color: $blue700;\n        }\n\n        &:active {\n          background-color: $blue900;\n        }\n\n        &:focus {\n          outline: 2px solid $blue700;\n          outline-offset: 2px;\n        }\n      }\n    }\n  }\n\n  .link-list__button {\n    display: flex;\n    justify-content: center;\n  }\n\n  @-moz-document url-prefix() {\n    .link-list__container {\n      scrollbar-color: $blue700 #d3cecb;\n    }\n\n    .link-list__scrollable {\n      padding: 0.5rem 2rem 2rem;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'pn-link-list',\n  styleUrl: 'pn-link-list.scss',\n})\nexport class PnLinkList {\n  @Prop() heading: string = null;\n  @Prop() label: string = null;\n  @Prop() preamble: string = null;\n  @Prop() url: string = null;\n  @Prop() showMoreLabel: string = null;\n  @Prop() showMoreUrl: string = null;\n\n  private slider: HTMLElement = null;\n  private isDragging = false;\n  private startX = 0;\n  private scrollLeft = 0;\n\n  componentDidLoad() {\n    this.slider = document.querySelector('.link-list__container') as HTMLElement;\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    const target = e.target as HTMLElement;\n\n    const isContainerClick = target.classList.contains('link-list__container');\n    const isLinkClick = target.tagName === 'A';\n\n    if (isContainerClick || isLinkClick) {\n      this.isDragging = true;\n      this.slider?.classList.add('link-list__active');\n      this.startX = e.pageX - this.slider?.offsetLeft;\n      this.scrollLeft = this.slider?.scrollLeft;\n\n      if (isLinkClick) {\n        e.preventDefault();\n      }\n    }\n  };\n\n  private handleMouseLeave = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n    this.slider?.classList.remove('link-list__active');\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (this.isDragging) {\n      const x = e.pageX - this.slider?.offsetLeft;\n      const move = (x - this.startX) * 2;\n      this.slider.scrollLeft = this.scrollLeft - move;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        {(this.heading || this.preamble) && (\n          <div class=\"link-list__header\">\n            {this.heading && <h2 class=\"link-list__heading\">{this.heading}</h2>}\n            {this.preamble && <p class=\"link-list__preamble\">{this.preamble}</p>}\n          </div>\n        )}\n        <div class=\"link-list\">\n          <div\n            class=\"link-list__container\"\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n          >\n            <div class=\"link-list__scrollable\">\n              <slot name=\"linklist\" />\n            </div>\n          </div>\n        </div>\n        {this.showMoreUrl ? (\n          <div class=\"link-list__button\">\n            <pn-button appearance=\"light\" href={this.showMoreUrl}>\n              {this.showMoreLabel}\n            </pn-button>{' '}\n          </div>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-mainnav-level2.js

@@ -3,7 +3,7 @@ import { o as onChange, s as state } from './pn-mainnav-store.js';
 import { a as arrow_left } from './arrow_left.js';
 import { d as defineCustomElement$1 } from './pn-mainnav-link2.js';
 
-const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#ffffff;z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005d92;text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005d92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
+const pnMainnavLevelCss = "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-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#ffffff;z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005d92;text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005d92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
 const PnMainnavLevelStyle0 = pnMainnavLevelCss;
 
 const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel extends HTMLElement {
@@ -75,10 +75,10 @@ const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel ext
         state.currentLevel = this.level;
     }
     render() {
-        return (h(Host, { key: '958273aebbba919ab0d6ee0433e52458e8f02154', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        return (h(Host, { key: '9180729eeb1dcc992e511bd17d22e10ed4b199c4', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                 state.openLevel = '';
                 state.currentLevel = 1;
-            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '735b57f1186701a77f96afdef6fb764c9a340047', name: "top" }), h("slot", { key: '9c3a1c428914201857e0f18400338c16cd7c6735' }), h("slot", { key: '216b4e06d42804bbfa299d6793ee321435eeb804', name: "additional" }), h("slot", { key: '09bae4c5d31896ede61403fef0488688330c6cd1', name: "footer" })));
+            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '36c7b3d76ed1a3fcbaa70309d0cf08c1fcc3127e', name: "top" }), h("slot", { key: '23bddc8fbbad8faa5543953305685f37b85f64d4' }), h("slot", { key: '7e7072650fe7e5634281fcd4669c776deb99870b', name: "additional" }), h("slot", { key: 'c309dc0f87c9ba0c24d4d1948fdc72ad5097eca1', name: "footer" })));
     }
     static get watchers() { return {
         "label": ["setState"],