@postnord/pn-marketweb-components 4.0.3 → 4.0.4-test

package/dist/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.js

@@ -1,262 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { PnLevelUpService } from "../pn-level-up.service";
-export class PnLevelUpModal {
-    constructor() {
-        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 is() { return "pn-level-up-modal"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pn-level-up-modal.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pn-level-up-modal.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "open": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'open' | 'close'",
-                    "resolved": "\"close\" | \"open\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "open",
-                "reflect": true
-            },
-            "endpoint": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "endpoint",
-                "reflect": false
-            },
-            "instructionPhoneLineOne": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "instruction-phone-line-one",
-                "reflect": false
-            },
-            "instructionPhoneLineTwo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "instruction-phone-line-two",
-                "reflect": false
-            },
-            "instructionPhoneLineThree": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "instruction-phone-line-three",
-                "reflect": false
-            },
-            "headingText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "heading-text",
-                "reflect": false
-            },
-            "outdatedQRMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "outdated-q-r-message",
-                "reflect": false
-            },
-            "expiresInMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "expires-in-message",
-                "reflect": false
-            },
-            "system": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DeviceType",
-                    "resolved": "\"android\" | \"ios\" | \"web\"",
-                    "references": {
-                        "DeviceType": {
-                            "location": "import",
-                            "path": "../types",
-                            "id": "src/components/widgets/pn-level-up/types.ts::DeviceType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "system",
-                "reflect": false
-            },
-            "qrAriaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "qr-aria-label",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "openModalToggle": {},
-            "isLoading": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "updateOpen"
-            }];
-    }
-}
-//# sourceMappingURL=pn-level-up-modal.js.map

package/dist/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pn-level-up-modal.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["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}"]}

package/dist/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.js

@@ -1,31 +0,0 @@
-import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
-import docs from "./pn-level-up-modal-docs.json";
-const { argTypes, textContent } = createDocumentation(docs);
-const meta = {
-    title: 'Components/Widgets/Level up modal',
-    parameters: {
-        actions: {},
-        docs: {
-            description: {
-                story: textContent
-            }
-        }
-    },
-    args: {
-        open: 'open',
-        instructionPhoneLineOne: 'Open your BankID app',
-        instructionPhoneLineTwo: 'Click on the QR button in the app',
-        instructionPhoneLineThree: 'Scan the QR code',
-        headingText: 'Level up with BankID',
-        endpoint: 'https://se-integration.postnord.com',
-        outdatedQRMessage: 'The QR has expired',
-        expiresInMessage: 'Expires in'
-    },
-    argTypes,
-};
-export default meta;
-export const LevelUpModal = {
-    name: 'pn-level-up-modal',
-    render: (args) => createComponent('pn-level-up-modal', args),
-};
-//# sourceMappingURL=pn-level-up-modal.stories.js.map

package/dist/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pn-level-up-modal.stories.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAoC;IAC5C,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACV,OAAO,EAAE,EACR;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACN,IAAI,EAAE,MAAM;QACZ,uBAAuB,EAAE,sBAAsB;QAC/C,uBAAuB,EAAE,mCAAmC;QAC5D,yBAAyB,EAAE,kBAAkB;QAC7C,WAAW,EAAE,sBAAsB;QACnC,QAAQ,EAAE,qCAAqC;QAC/C,iBAAiB,EAAE,oBAAoB;QACvC,gBAAgB,EAAE,YAAY;KAC7B;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,mBAAmB,EAAE,IAAI,CAAC;CAC7D,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-level-up-modal-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnLevelUpModalElement> = {\n  title: 'Components/Widgets/Level up modal',\n  parameters: {\n    actions: {\n    },\n    docs: {\n      description: {\n        story: textContent\n      }\n    }\n  },\n  args: {\n  open: 'open',\n  instructionPhoneLineOne: 'Open your BankID app',\n  instructionPhoneLineTwo: 'Click on the QR button in the app',\n  instructionPhoneLineThree: 'Scan the QR code',\n  headingText: 'Level up with BankID',\n  endpoint: 'https://se-integration.postnord.com',\n  outdatedQRMessage: 'The QR has expired',\n  expiresInMessage: 'Expires in'\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnLevelUpModalElement>;\n\nexport default meta;\n\nexport const LevelUpModal: Story = {\n  name: 'pn-level-up-modal',\n  render: (args) => createComponent('pn-level-up-modal', args),\n};\n"]}

package/dist/collection/components/widgets/pn-level-up/pn-level-up.css

@@ -1,114 +0,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;
-  }
-}
-
-: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;
-  }
-}