npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1186) hide show

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.js ADDED Viewed

@@ -0,0 +1,269 @@
+import { HeadingTag } from "../../../globals/HeadingTag";
+import { Host, h } from "@stencil/core";
+export class PnUspSimple {
+    constructor() {
+        this.heading = undefined;
+        this.headingLevel = 'h2';
+        this.preamble = undefined;
+        this.ctaButtonsLabel = undefined;
+        this.primaryButtonText = undefined;
+        this.primaryButtonUrl = undefined;
+        this.primaryButtonIconSvg = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.pnIllustrationSvg = undefined;
+        this.imageUrl = undefined;
+        this.imageAltText = undefined;
+    }
+    get hasPrimaryButton() {
+        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
+    }
+    get hasSecondaryButton() {
+        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
+    }
+    renderButton(props, isPrimary) {
+        const buttonType = isPrimary ? 'primary' : 'secondary';
+        return (h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
+    }
+    render() {
+        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
+        const headingId = 'usp-heading';
+        return (h(Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (h(HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
+            this.renderButton({
+                text: this.primaryButtonText,
+                url: this.primaryButtonUrl,
+                iconSvg: this.primaryButtonIconSvg,
+            }, true), this.hasSecondaryButton &&
+            this.renderButton({
+                text: this.secondaryButtonText,
+                url: this.secondaryButtonUrl,
+            }, false)))), h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
+    }
+    static get is() { return "pn-usp-simple"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-usp-simple.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-usp-simple.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "HeadingLevel",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "@/components",
+                            "id": "src/components.d.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            },
+            "preamble": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "preamble",
+                "reflect": false
+            },
+            "ctaButtonsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "cta-buttons-label",
+                "reflect": false
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-text",
+                "reflect": false
+            },
+            "primaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-url",
+                "reflect": false
+            },
+            "primaryButtonIconSvg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-icon-svg",
+                "reflect": false
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-button-text",
+                "reflect": false
+            },
+            "secondaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-button-url",
+                "reflect": false
+            },
+            "pnIllustrationSvg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pn-illustration-svg",
+                "reflect": false
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-url",
+                "reflect": false
+            },
+            "imageAltText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-alt-text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=pn-usp-simple.js.map

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pn-usp-simple.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n text: string;\n url: string;\n iconSvg?: string;\n}\n\n@Component({\n tag: 'pn-usp-simple',\n styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n @Prop() heading?: string;\n @Prop() headingLevel: HeadingLevel = 'h2';\n @Prop() preamble?: string;\n @Prop() ctaButtonsLabel?: string;\n @Prop() primaryButtonText?: string;\n @Prop() primaryButtonUrl?: string;\n @Prop() primaryButtonIconSvg?: string;\n @Prop() secondaryButtonText?: string;\n @Prop() secondaryButtonUrl?: string;\n @Prop() pnIllustrationSvg?: string;\n @Prop() imageUrl?: string;\n @Prop() imageAltText?: string;\n\n private get hasPrimaryButton(): boolean {\n return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n }\n\n private get hasSecondaryButton(): boolean {\n return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n }\n\n private renderButton(props: ButtonProps, isPrimary: boolean) {\n const buttonType = isPrimary ? 'primary' : 'secondary';\n return (\n <pn-button\n icon={props.iconSvg}\n left-icon={Boolean(props.iconSvg)}\n href={props.url}\n class=\"btn\"\n data-button-type={buttonType}\n appearance={isPrimary ? 'default' : 'light'}\n >\n {props.text}\n </pn-button>\n );\n }\n\n render() {\n const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n const headingId = 'usp-heading';\n\n return (\n <Host>\n <div class=\"pn-usp-simple\" 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\n {this.preamble && (\n <div class=\"preamble\">\n {this.preamble}\n </div>\n )}\n\n {hasButtons && (\n <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n {this.hasPrimaryButton &&\n this.renderButton(\n {\n text: this.primaryButtonText!,\n url: this.primaryButtonUrl!,\n iconSvg: this.primaryButtonIconSvg,\n },\n true,\n )}\n {this.hasSecondaryButton &&\n this.renderButton(\n {\n text: this.secondaryButtonText!,\n url: this.secondaryButtonUrl!,\n },\n false,\n )}\n </div>\n )}\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 {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js ADDED Viewed

@@ -0,0 +1,63 @@
+import { createDocumentation, createComponent } from "../../../globals/documentation/story";
+import docs from "./pn-usp-simple-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Widgets/Usp Simple',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent,
+            },
+        },
+    },
+    args: {
+        heading: 'Verify your address to find more packages',
+        headingLevel: 'h2',
+        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
+        primaryButtonText: 'Identify with BankID',
+        primaryButtonUrl: '#',
+        primaryButtonIconSvg: '<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>',
+        secondaryButtonText: 'Cancel',
+        secondaryButtonUrl: '#',
+        pnIllustrationSvg: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#globe-hand_svg__a)"><path fill="#8EDDF9" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/><path fill="#0D234B" d="M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533"/><path fill="#0D234B" d="M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09"/><path fill="#005D92" d="M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609"/><path fill="#00A0D6" d="M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377"/><path fill="#F06365" d="m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z"/><path fill="#FFC8A3" d="M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021"/><path fill="#0D234B" d="M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305"/><path fill="#FFC8A3" d="M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z"/><path fill="#FFF1E3" d="M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z"/><path fill="#fff" d="M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z"/><path fill="#fff" d="M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z"/><path fill="#fff" d="M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z"/><path fill="#FBC2C1" d="m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z"/><path fill="#500715" d="m75.664 44.238-1.846-1.5 1.023 11.026.823.839z"/><path fill="#000" d="M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z"/><path fill="#fff" d="M107.19 38.294H75.174v46.899h32.016z"/><path fill="#F3F2F2" d="M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227"/><path fill="#F3F2F2" d="M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227"/><path fill="#005D92" d="M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422"/><path fill="#8EDDF9" d="M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464"/><path fill="#00A0D6" d="M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z"/><path fill="#8EDDF9" d="M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z"/><path fill="#E0F8FF" d="M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096"/><path fill="#FBC2C1" d="m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797"/><path fill="#500715" d="M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012"/><path fill="#FBC2C1" d="m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z"/><path fill="#500715" d="M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13"/><path fill="#500715" d="m102.18 94.215-11.339-2.021h10.499z"/></g><defs><clipPath id="globe-hand_svg__a"><path fill="#fff" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/></clipPath></defs></svg>',
+    },
+    argTypes,
+};
+export default meta;
+export const UspSimple = {
+    name: 'Simple USP with CTA and Illustration',
+    render: args => createComponent('pn-usp-simple', args),
+};
+export const UspSimpleIllustration = {
+    name: 'Simple USP with Illustration',
+    render: UspSimple.render,
+    args: {
+        heading: 'Verify your address to find more packages',
+        headingLevel: 'h2',
+        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
+        primaryButtonText: 'Identify with BankID',
+        primaryButtonUrl: '#',
+        primaryButtonIconSvg: '<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>',
+        secondaryButtonText: 'Not now',
+        secondaryButtonUrl: '#',
+        pnIllustrationSvg: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#globe-hand_svg__a)"><path fill="#8EDDF9" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/><path fill="#0D234B" d="M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533"/><path fill="#0D234B" d="M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09"/><path fill="#005D92" d="M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609"/><path fill="#00A0D6" d="M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377"/><path fill="#F06365" d="m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z"/><path fill="#FFC8A3" d="M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021"/><path fill="#0D234B" d="M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305"/><path fill="#FFC8A3" d="M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z"/><path fill="#FFF1E3" d="M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z"/><path fill="#fff" d="M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z"/><path fill="#fff" d="M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z"/><path fill="#fff" d="M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z"/><path fill="#FBC2C1" d="m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z"/><path fill="#500715" d="m75.664 44.238-1.846-1.5 1.023 11.026.823.839z"/><path fill="#000" d="M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z"/><path fill="#fff" d="M107.19 38.294H75.174v46.899h32.016z"/><path fill="#F3F2F2" d="M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227"/><path fill="#F3F2F2" d="M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227"/><path fill="#005D92" d="M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422"/><path fill="#8EDDF9" d="M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464"/><path fill="#00A0D6" d="M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z"/><path fill="#8EDDF9" d="M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z"/><path fill="#E0F8FF" d="M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096"/><path fill="#FBC2C1" d="m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797"/><path fill="#500715" d="M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012"/><path fill="#FBC2C1" d="m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z"/><path fill="#500715" d="M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13"/><path fill="#500715" d="m102.18 94.215-11.339-2.021h10.499z"/></g><defs><clipPath id="globe-hand_svg__a"><path fill="#fff" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/></clipPath></defs></svg>',
+    },
+};
+export const UspSimpleImage = {
+    name: 'Simple USP with Image',
+    render: UspSimple.render,
+    args: {
+        heading: 'Verify your address to find more packages',
+        headingLevel: 'h2',
+        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
+        primaryButtonText: 'Identify with BankID',
+        primaryButtonUrl: '#',
+        primaryButtonIconSvg: '<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>',
+        secondaryButtonText: 'Not now',
+        secondaryButtonUrl: '#',
+        imageUrl: 'https://picsum.photos/id/101/200/200',
+        imageAltText: 'Alt Text',
+    },
+};
+//# sourceMappingURL=pn-usp-simple.stories.js.map

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pn-usp-simple.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-usp-simple/pn-usp-simple.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,+BAA+B;IACtC,UAAU,EAAE;QACV,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,QAAQ;QAC7B,kBAAkB,EAAE,GAAG;QACvB,iBAAiB,EACf,w8NAAw8N;KAC38N;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE,sCAAsC;IAC5C,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE,8BAA8B;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,GAAG;QACvB,iBAAiB,EACf,w8NAAw8N;KAC38N;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,uBAAuB;IAC7B,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,GAAG;QACvB,QAAQ,EAAE,sCAAsC;QAChD,YAAY,EAAE,UAAU;KACzB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-usp-simple-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnUspSimpleElement> = {\n title: 'Components/Widgets/Usp Simple',\n parameters: {\n actions: {},\n docs: {\n description: {\n story: textContent,\n },\n },\n },\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<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>',\n secondaryButtonText: 'Cancel',\n secondaryButtonUrl: '#',\n pnIllustrationSvg:\n '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#globe-hand_svg__a)\"><path fill=\"#8EDDF9\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/><path fill=\"#0D234B\" d=\"M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533\"/><path fill=\"#0D234B\" d=\"M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09\"/><path fill=\"#005D92\" d=\"M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609\"/><path fill=\"#00A0D6\" d=\"M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377\"/><path fill=\"#F06365\" d=\"m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z\"/><path fill=\"#FFC8A3\" d=\"M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021\"/><path fill=\"#0D234B\" d=\"M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305\"/><path fill=\"#FFC8A3\" d=\"M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z\"/><path fill=\"#FFF1E3\" d=\"M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z\"/><path fill=\"#fff\" d=\"M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z\"/><path fill=\"#fff\" d=\"M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z\"/><path fill=\"#fff\" d=\"M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z\"/><path fill=\"#FBC2C1\" d=\"m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z\"/><path fill=\"#500715\" d=\"m75.664 44.238-1.846-1.5 1.023 11.026.823.839z\"/><path fill=\"#000\" d=\"M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z\"/><path fill=\"#fff\" d=\"M107.19 38.294H75.174v46.899h32.016z\"/><path fill=\"#F3F2F2\" d=\"M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227\"/><path fill=\"#F3F2F2\" d=\"M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227\"/><path fill=\"#005D92\" d=\"M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422\"/><path fill=\"#8EDDF9\" d=\"M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464\"/><path fill=\"#00A0D6\" d=\"M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z\"/><path fill=\"#8EDDF9\" d=\"M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z\"/><path fill=\"#E0F8FF\" d=\"M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096\"/><path fill=\"#FBC2C1\" d=\"m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797\"/><path fill=\"#500715\" d=\"M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012\"/><path fill=\"#FBC2C1\" d=\"m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z\"/><path fill=\"#500715\" d=\"M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13\"/><path fill=\"#500715\" d=\"m102.18 94.215-11.339-2.021h10.499z\"/></g><defs><clipPath id=\"globe-hand_svg__a\"><path fill=\"#fff\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/></clipPath></defs></svg>',\n },\n argTypes,\n};\n\ntype Story = StoryObj<HTMLPnUspSimpleElement>;\n\nexport default meta;\n\nexport const UspSimple: Story = {\n name: 'Simple USP with CTA and Illustration',\n render: args => createComponent('pn-usp-simple', args),\n};\n\nexport const UspSimpleIllustration: Story = {\n name: 'Simple USP with Illustration',\n render: UspSimple.render,\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<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>',\n secondaryButtonText: 'Not now',\n secondaryButtonUrl: '#',\n pnIllustrationSvg:\n '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#globe-hand_svg__a)\"><path fill=\"#8EDDF9\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/><path fill=\"#0D234B\" d=\"M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533\"/><path fill=\"#0D234B\" d=\"M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09\"/><path fill=\"#005D92\" d=\"M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609\"/><path fill=\"#00A0D6\" d=\"M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377\"/><path fill=\"#F06365\" d=\"m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z\"/><path fill=\"#FFC8A3\" d=\"M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021\"/><path fill=\"#0D234B\" d=\"M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305\"/><path fill=\"#FFC8A3\" d=\"M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z\"/><path fill=\"#FFF1E3\" d=\"M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z\"/><path fill=\"#fff\" d=\"M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z\"/><path fill=\"#fff\" d=\"M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z\"/><path fill=\"#fff\" d=\"M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z\"/><path fill=\"#FBC2C1\" d=\"m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z\"/><path fill=\"#500715\" d=\"m75.664 44.238-1.846-1.5 1.023 11.026.823.839z\"/><path fill=\"#000\" d=\"M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z\"/><path fill=\"#fff\" d=\"M107.19 38.294H75.174v46.899h32.016z\"/><path fill=\"#F3F2F2\" d=\"M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227\"/><path fill=\"#F3F2F2\" d=\"M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227\"/><path fill=\"#005D92\" d=\"M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422\"/><path fill=\"#8EDDF9\" d=\"M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464\"/><path fill=\"#00A0D6\" d=\"M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z\"/><path fill=\"#8EDDF9\" d=\"M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z\"/><path fill=\"#E0F8FF\" d=\"M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096\"/><path fill=\"#FBC2C1\" d=\"m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797\"/><path fill=\"#500715\" d=\"M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012\"/><path fill=\"#FBC2C1\" d=\"m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z\"/><path fill=\"#500715\" d=\"M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13\"/><path fill=\"#500715\" d=\"m102.18 94.215-11.339-2.021h10.499z\"/></g><defs><clipPath id=\"globe-hand_svg__a\"><path fill=\"#fff\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/></clipPath></defs></svg>',\n },\n};\n\nexport const UspSimpleImage: Story = {\n name: 'Simple USP with Image',\n render: UspSimple.render,\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<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>',\n secondaryButtonText: 'Not now',\n secondaryButtonUrl: '#',\n imageUrl: 'https://picsum.photos/id/101/200/200',\n imageAltText: 'Alt Text',\n },\n};\n"]}

package/collection/globals/HeadingTag.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-export const HeadingTag = ({ heading, level, cssClass, additionalProps }) => {
+export const HeadingTag = ({ level, id, cssClass, additionalProps }, children) => {
     const Tag = level;
-    return (h(Tag, { className: cssClass, ...additionalProps }, heading));
+    return h(Tag, { id: id, className: cssClass, ...additionalProps, innerHTML: children });
 };
 //# sourceMappingURL=HeadingTag.js.map

package/collection/globals/HeadingTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeadingTag.js","sourceRoot":"","sources":["../../src/globals/HeadingTag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AASvD,MAAM,CAAC,MAAM,UAAU,GAAyC,CAAC,EAAE,~~OAAO~~,EAAE,~~KAAK~~,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,EAAE;~~IAChH~~,MAAM,GAAG,GAAG,KAAK,CAAC;IAElB,OAAO,~~CACL,~~EAAC,GAAG,IAAC,SAAS,EAAE,QAAQ,KAAM,eAAe,~~IAC1C~~,~~OAAO~~,~~CACJ~~,~~CACP~~,CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\n\ninterface HeadingTagProps {\n ~~heading~~: string;\n ~~level:~~ string;\n cssClass?: string;\n additionalProps?: { [key: string]: string };\n}\n\nexport const HeadingTag: FunctionalComponent<HeadingTagProps> = ({ ~~heading~~, ~~level~~, cssClass, additionalProps }) => {\n const Tag = level;\n\n return ~~(\n~~ <Tag className={cssClass} {...additionalProps}~~>\n~~ {~~heading~~}~~\n </~~Tag>\n ~~);\n~~};\n"]}
1	+ {"version":3,"file":"HeadingTag.js","sourceRoot":"","sources":["../../src/globals/HeadingTag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AASvD,MAAM,CAAC,MAAM,UAAU,GAAyC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,QAAQ,EAAE,EAAE;IACrH,MAAM,GAAG,GAAG,KAAK,CAAC;IAElB,OAAO,EAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,KAAM,eAAe,EAAE,SAAS,EAAE,QAAQ,GAAQ,CAAC;AAC5F,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\n\ninterface HeadingTagProps {\n level: string;\n id?: string;\n cssClass?: string;\n additionalProps?: { [key: string]: string };\n}\n\nexport const HeadingTag: FunctionalComponent<HeadingTagProps> = ({ level, id, cssClass, additionalProps }, children) => {\n const Tag = level;\n\n return <Tag id={id} className={cssClass} {...additionalProps} innerHTML={children}></Tag>;\n};\n"]}

package/collection/globals/LocalStorageService.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { isLocalStorageAvailable } from "../utils/utils";
+export class LocalStorageService {
+    available;
+    constructor() {
+        this.available = isLocalStorageAvailable();
+    }
+    get(key) {
+        if (!this.available)
+            return null;
+        try {
+            const item = localStorage.getItem(key);
+            return item ? JSON.parse(item) : null;
+        }
+        catch (error) {
+            console.warn(`Error getting item ${key} from localStorage:`, error);
+            return null;
+        }
+    }
+    set(key, value) {
+        if (!this.available)
+            return;
+        try {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (error) {
+            console.warn(`Error setting item ${key} in localStorage:`, error);
+        }
+    }
+    remove(key) {
+        if (!this.available)
+            return;
+        try {
+            localStorage.removeItem(key);
+        }
+        catch (error) {
+            console.warn(`Error removing item ${key} from localStorage:`, error);
+        }
+    }
+    clear() {
+        if (!this.available)
+            return;
+        try {
+            localStorage.clear();
+        }
+        catch (error) {
+            console.warn('Error clearing localStorage:', error);
+        }
+    }
+}
+//# sourceMappingURL=LocalStorageService.js.map

package/collection/globals/LocalStorageService.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LocalStorageService.js","sourceRoot":"","sources":["../../src/globals/LocalStorageService.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AASxD,MAAM,OAAO,mBAAmB;IACtB,SAAS,CAAU;IAE3B;QACE,IAAI,CAAC,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAC7C,CAAC;IAEM,GAAG,CAAC,GAAW;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC;QAEjC,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACvC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACxC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;YACpE,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAEM,GAAG,CAAC,GAAW,EAAE,KAAU;QAChC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC;YACH,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACnD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAAG,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAEM,MAAM,CAAC,GAAW;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC;YACH,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,uBAAuB,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC;YACH,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;CACF","sourcesContent":["import { isLocalStorageAvailable } from \"@/utils/utils\";\n\nexport interface StorageService {\n get(key: string): any | null;\n set(key: string, value: any): void;\n remove(key: string): void;\n clear(): void;\n}\n\nexport class LocalStorageService implements StorageService {\n private available: boolean;\n\n constructor() {\n this.available = isLocalStorageAvailable();\n }\n\n public get(key: string): any | null {\n if (!this.available) return null;\n\n try {\n const item = localStorage.getItem(key);\n return item ? JSON.parse(item) : null;\n } catch (error) {\n console.warn(`Error getting item ${key} from localStorage:`, error);\n return null;\n }\n }\n\n public set(key: string, value: any): void {\n if (!this.available) return;\n\n try {\n localStorage.setItem(key, JSON.stringify(value));\n } catch (error) {\n console.warn(`Error setting item ${key} in localStorage:`, error);\n }\n }\n\n public remove(key: string): void {\n if (!this.available) return;\n\n try {\n localStorage.removeItem(key);\n } catch (error) {\n console.warn(`Error removing item ${key} from localStorage:`, error);\n }\n }\n\n public clear(): void {\n if (!this.available) return;\n\n try {\n localStorage.clear();\n } catch (error) {\n console.warn('Error clearing localStorage:', error);\n }\n }\n}\n\n"]}

package/collection/globals/ScreensizeDetect.js ADDED Viewed

@@ -0,0 +1,80 @@
+export const DEFAULT_BREAKPOINTS = {
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1025,
+};
+export class ScreenWidth {
+    static instance;
+    breakpoints;
+    callbacks;
+    resizeTimeout;
+    constructor() {
+        this.breakpoints = DEFAULT_BREAKPOINTS;
+        this.callbacks = new Set();
+        this.initializeListeners();
+    }
+    static getInstance() {
+        if (!ScreenWidth.instance) {
+            ScreenWidth.instance = new ScreenWidth();
+        }
+        return ScreenWidth.instance;
+    }
+    setBreakpoints(breakpoints) {
+        this.breakpoints = { ...this.breakpoints, ...breakpoints };
+        this.notifyListeners();
+    }
+    getWidth() {
+        if (typeof window === 'undefined')
+            return 0;
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
+    }
+    isTouch() {
+        if (typeof window === 'undefined')
+            return false;
+        return ('ontouchstart' in window ||
+            navigator.maxTouchPoints > 0 ||
+            // @ts-ignore - Some browsers might not have msMaxTouchPoints
+            navigator.msMaxTouchPoints > 0);
+    }
+    getScreenSize(width) {
+        if (width < this.breakpoints.mobile)
+            return 'mobile';
+        if (width < this.breakpoints.tablet)
+            return 'tablet';
+        return 'desktop';
+    }
+    getScreenInfo() {
+        const width = this.getWidth();
+        return {
+            width,
+            size: this.getScreenSize(width),
+            isTouch: this.isTouch(),
+        };
+    }
+    initializeListeners() {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            if (this.resizeTimeout) {
+                window.clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                this.notifyListeners();
+            }, 250);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+    }
+    notifyListeners() {
+        const info = this.getScreenInfo();
+        this.callbacks.forEach(callback => callback(info));
+    }
+    subscribe(callback) {
+        this.callbacks.add(callback);
+        callback(this.getScreenInfo()); // Initial call
+        return () => {
+            this.callbacks.delete(callback);
+        };
+    }
+}
+//# sourceMappingURL=ScreensizeDetect.js.map

package/collection/globals/ScreensizeDetect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ScreensizeDetect.js","sourceRoot":"","sources":["../../src/globals/ScreensizeDetect.ts"],"names":[],"mappings":"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","sourcesContent":["interface Breakpoints {\n mobile: number;\n tablet: number;\n desktop: number;\n}\n\ntype ScreenSize = 'mobile' | 'tablet' | 'desktop';\n\nexport interface ScreenWidthInfo {\n width: number;\n size: ScreenSize;\n isTouch: boolean;\n}\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n mobile: 768,\n tablet: 1024,\n desktop: 1025,\n};\n\nexport class ScreenWidth {\n private static instance: ScreenWidth;\n private breakpoints: Breakpoints;\n private callbacks: Set<(info: ScreenWidthInfo) => void>;\n private resizeTimeout?: number;\n\n private constructor() {\n this.breakpoints = DEFAULT_BREAKPOINTS;\n this.callbacks = new Set();\n this.initializeListeners();\n }\n\n public static getInstance(): ScreenWidth {\n if (!ScreenWidth.instance) {\n ScreenWidth.instance = new ScreenWidth();\n }\n return ScreenWidth.instance;\n }\n\n public setBreakpoints(breakpoints: Partial<Breakpoints>): void {\n this.breakpoints = { ...this.breakpoints, ...breakpoints };\n this.notifyListeners();\n }\n\n private getWidth(): number {\n if (typeof window === 'undefined') return 0;\n\n return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;\n }\n\n private isTouch(): boolean {\n if (typeof window === 'undefined') return false;\n\n return (\n 'ontouchstart' in window ||\n navigator.maxTouchPoints > 0 ||\n // @ts-ignore - Some browsers might not have msMaxTouchPoints\n navigator.msMaxTouchPoints > 0\n );\n }\n\n private getScreenSize(width: number): ScreenSize {\n if (width < this.breakpoints.mobile) return 'mobile';\n if (width < this.breakpoints.tablet) return 'tablet';\n return 'desktop';\n }\n\n public getScreenInfo(): ScreenWidthInfo {\n const width = this.getWidth();\n return {\n width,\n size: this.getScreenSize(width),\n isTouch: this.isTouch(),\n };\n }\n\n private initializeListeners(): void {\n if (typeof window === 'undefined') return;\n\n const handleResize = () => {\n if (this.resizeTimeout) {\n window.clearTimeout(this.resizeTimeout);\n }\n\n this.resizeTimeout = window.setTimeout(() => {\n this.notifyListeners();\n }, 250);\n };\n\n window.addEventListener('resize', handleResize);\n window.addEventListener('orientationchange', handleResize);\n }\n\n private notifyListeners(): void {\n const info = this.getScreenInfo();\n this.callbacks.forEach(callback => callback(info));\n }\n\n public subscribe(callback: (info: ScreenWidthInfo) => void): () => void {\n this.callbacks.add(callback);\n callback(this.getScreenInfo()); // Initial call\n\n return () => {\n this.callbacks.delete(callback);\n };\n }\n}\n"]}

package/collection/globals/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=types.js.map