@postnord/pn-marketweb-components 4.0.4-test2 → 4.0.4

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.js

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+import QRCode from "qrcode";
+export class QrCodeGenerator {
+    constructor() {
+        this.url = undefined;
+        this.countdownSeconds = -1;
+        this.outdatedMessage = undefined;
+        this.expiresInMessage = undefined;
+        this.updateCodeEverySecond = true;
+        this.ariaLabel = undefined;
+        this.remainingSeconds = undefined;
+        this.isOutdated = false;
+        this.isFullscreen = false;
+    }
+    canvasRef;
+    timer;
+    urlWithSegment;
+    gray900 = '#2d2013';
+    blackHex = '#000';
+    whiteHex = '#fff';
+    componentWillLoad() {
+        this.urlWithSegment = this.url + '#';
+        this.remainingSeconds = this.countdownSeconds;
+    }
+    componentDidLoad() {
+        this.generateQRCode();
+        if (this.countdownSeconds !== -1) {
+            this.startCountdown();
+        }
+    }
+    generateQRCode(urlSegment = '') {
+        if (this.url && this.canvasRef) {
+            this.urlWithSegment += urlSegment;
+            QRCode.toCanvas(this.canvasRef, this.urlWithSegment, {
+                width: 200,
+                color: {
+                    dark: this.isOutdated ? this.gray900 : this.blackHex,
+                    light: this.isOutdated ? this.gray900 : this.whiteHex,
+                },
+            }, error => {
+                if (error)
+                    console.error(error);
+            });
+        }
+    }
+    startCountdown() {
+        this.timer = setInterval(() => {
+            if (this.remainingSeconds > 0) {
+                this.remainingSeconds--;
+                this.generateQRCode('p');
+            }
+            else {
+                clearInterval(this.timer);
+                this.isOutdated = true;
+                this.generateQRCode();
+            }
+        }, 1000);
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    render() {
+        return (h("div", { key: 'e0bc37a181c7787812bbd052877cf1c0ecffe4c9' }, h("button", { key: '6486b7b7e94493ba8cf32d6cef7e9224c119a8ea', class: "qr-button__wrapper", "aria-label": this.ariaLabel }, h("canvas", { key: 'e66b827b3a7b92b3cf250e73b0dade3675fad9b7', class: this.isOutdated ? 'outdated' : '', ref: el => (this.canvasRef = el) })), this.countdownSeconds !== -1 && h("div", { key: '122ba7328a26fb6116ffc5b6c9b3a4cdcc24b8a2', class: "timer" }, this.isOutdated && h("span", { key: 'da1c41fe27834b3fdfcc08f456ab0f53e13a9a12', class: "outdated-message" }, this.outdatedMessage), !this.isOutdated && this.expiresInMessage && h("span", { key: 'c6515a6aa7491e02267f82f55abac7388ed68d15' }, this.expiresInMessage, " ", this.remainingSeconds))));
+    }
+    static get is() { return "pn-qr-code-generator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-qr-code-generator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-qr-code-generator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "countdownSeconds": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "countdown-seconds",
+                "reflect": false,
+                "defaultValue": "-1"
+            },
+            "outdatedMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "outdated-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
+            },
+            "updateCodeEverySecond": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "update-code-every-second",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "aria-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "remainingSeconds": {},
+            "isOutdated": {},
+            "isFullscreen": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "url",
+                "methodName": "generateQRCode"
+            }];
+    }
+}
+//# sourceMappingURL=pn-qr-code-generator.js.map

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-qr-code-generator.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-qr-code-generator/pn-qr-code-generator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h } from '@stencil/core';\nimport QRCode from 'qrcode';\n\n@Component({\n  tag: 'pn-qr-code-generator',\n  styleUrl: 'pn-qr-code-generator.scss'\n})\nexport class QrCodeGenerator {\n  @Prop() url: string;\n  @Prop() countdownSeconds: number = -1;\n  @Prop() outdatedMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() updateCodeEverySecond: boolean = true;\n  @Prop() ariaLabel: string;\n\n  @State() remainingSeconds: number;\n  @State() isOutdated: boolean = false;\n  @State() isFullscreen: boolean = false;\n\n  private canvasRef: HTMLCanvasElement;\n  private timer: any;\n  private urlWithSegment: string;\n\n  private readonly gray900: string = '#2d2013';\n  private readonly blackHex: string = '#000';\n  private readonly whiteHex: string = '#fff';\n\n  componentWillLoad() {\n    this.urlWithSegment = this.url + '#';\n    this.remainingSeconds = this.countdownSeconds;\n  }\n\n  componentDidLoad() {\n    this.generateQRCode();\n    if (this.countdownSeconds !== -1) {\n      this.startCountdown();\n    }\n  }\n\n  @Watch('url')\n  generateQRCode(urlSegment: string = '') {\n    if (this.url && this.canvasRef) {\n      this.urlWithSegment += urlSegment;\n      QRCode.toCanvas(this.canvasRef, this.urlWithSegment, {\n        width: 200,\n        color: {\n          dark: this.isOutdated ? this.gray900 : this.blackHex,\n          light: this.isOutdated ? this.gray900 : this.whiteHex,\n        },\n      }, error => {\n        if (error) console.error(error);\n      });\n    }\n  }\n\n  startCountdown() {\n    this.timer = setInterval(() => {\n      if (this.remainingSeconds > 0) {\n        this.remainingSeconds--;\n        this.generateQRCode('p');\n      } else {\n        clearInterval(this.timer);\n        this.isOutdated = true;\n        this.generateQRCode();\n      }\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.timer);\n  }\n\n  render() {\n    return (\n      <div>\n        <button class=\"qr-button__wrapper\" aria-label={this.ariaLabel}>\n          <canvas\n            class={this.isOutdated ? 'outdated' : ''}\n            ref={el => (this.canvasRef = el)}>\n          </canvas>\n        </button>\n          {this.countdownSeconds !== -1 && <div class=\"timer\">\n            {this.isOutdated && <span class=\"outdated-message\">{this.outdatedMessage}</span>}\n            {!this.isOutdated && this.expiresInMessage && <span>{this.expiresInMessage} {this.remainingSeconds}</span>}\n          </div>}\n      </div>\n    );\n  }\n}"]}

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.js

@@ -0,0 +1,29 @@
+import { createDocumentation, createComponent } from "../../../globals/documentation/story";
+import docs from "./pn-qr-code-generator-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Widgets/Qr code generator',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent
+            }
+        }
+    },
+    args: {
+        url: 'https://se-integration.postnord.com',
+        countdownSeconds: 30,
+        outdatedMessage: 'The QR has expired',
+        expiresInMessage: 'Expires in',
+        updateCodeEverySecond: true,
+        ariaLabel: 'QR Code Generator'
+    },
+    argTypes,
+};
+export default meta;
+export const QrCodeGenerator = {
+    name: 'pn-qr-code-generator',
+    render: (args) => createComponent('pn-qr-code-generator', args),
+};
+//# sourceMappingURL=pn-qr-code-generator.stories.js.map

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-qr-code-generator.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,kCAAkC,CAAC;AAEpD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAuC;IAC/C,KAAK,EAAE,sCAAsC;IAC7C,UAAU,EAAE;QACV,OAAO,EAAE,EACR;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACF,GAAG,EAAE,qCAAqC;QAC1C,gBAAgB,EAAE,EAAE;QACpB,eAAe,EAAE,oBAAoB;QACrC,gBAAgB,EAAE,YAAY;QAC9B,qBAAqB,EAAE,IAAI;QAC3B,SAAS,EAAE,mBAAmB;KACjC;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,sBAAsB,EAAE,IAAI,CAAC;CAChE,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-qr-code-generator-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnQrCodeGeneratorElement> = {\n  title: 'Components/Widgets/Qr code generator',\n  parameters: {\n    actions: {\n    },\n    docs: {\n      description: {\n        story: textContent\n      }\n    }\n  },\n  args: {\n      url: 'https://se-integration.postnord.com',\n      countdownSeconds: 30,\n      outdatedMessage: 'The QR has expired',\n      expiresInMessage: 'Expires in',\n      updateCodeEverySecond: true,\n      ariaLabel: 'QR Code Generator'\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnQrCodeGeneratorElement>;\n\nexport default meta;\n\nexport const QrCodeGenerator: Story = {\n  name: 'pn-qr-code-generator',\n  render: (args) => createComponent('pn-qr-code-generator', args),\n};\n"]}

package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-usp-promoter {
   width: 80%;
 }

package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.js

@@ -25,7 +25,7 @@ export class PnUspPromoter {
             rightAlign ? "usp-promoter--right-align" : "",
         ].join(' ');
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-        return (h(Host, { key: '264c4f6da6ddee9569089074fc08ccf9e5c371ba' }, h("div", { key: 'c832ef39dcfece93643964f6994c91c79f7f8ea0', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '41f8995ae12546fd008a8eec5b5de0a9482d3312', class: "usp-promoter__content" }, h("slot", { key: '3a967323a69ec83ed03d619ba6a2fa9115fa2a90', name: "illustration" }), h("div", { key: 'ed9bcfb59255d8369b41386b834b773b8aad3a71', class: "usp-promoter__content-wrapper" }, h("h2", { key: '58eb3a2d9650920070c25a65e699d21cfba8b118', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '08fc4b8dcc49746a699033c7ad1009ade8d46e71' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '9452a7544e7255842331591f1d9178018c594524', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: 'd1eee8f90dd6280de590e288ac7f11beb1aa5dd1', name: "app-store" }), h("slot", { key: 'cf45783c7d093218e4aeb5707da2b742225a4594', name: "usp-buttons" }))))));
+        return (h(Host, { key: '23494c6ed3177f63b9cf483eaf28ae62c4050797' }, h("div", { key: '84cec740776a5f787933b6f7a8734ba00f898a71', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '77d56ad9982b8e8d2459c881a797cd5fa3c51519', class: "usp-promoter__content" }, h("slot", { key: '3b0ddfeaec6ce47329f5a2d64df978f8779de532', name: "illustration" }), h("div", { key: '072080f41f6531333d154499c1b63d3822e3cdbb', class: "usp-promoter__content-wrapper" }, h("h2", { key: 'd09398e7a54f7a1a6a44ab1ede3aaac7a6e00261', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '48f98ffcce6c0c6b2b6cf8bb754b84d414fedb8c' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '3f0abe6fcd83e31ffa2ab932027b14f9c1e7c439', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: '54fa5a5072c8897dd6ae7c216b2c5d7ad1d6a2b6', name: "app-store" }), h("slot", { key: '0bad1abdc12f5108a62f723136c764214bcc6143', name: "usp-buttons" }))))));
     }
     static get is() { return "pn-usp-promoter"; }
     static get originalStyleUrls() {

package/collection/globals/HeadingTag.js

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/collection/globals/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/globals/types.ts"],"names":[],"mappings":"","sourcesContent":["export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport interface PnButton {\n  content: string;\n  class?: string;\n  appearance?: string;\n  variant?: string;\n  small?: boolean;\n  loading?: boolean;\n  icon?: string;\n  leftIcon?: boolean;\n  tooltip?: string;\n  href?: string;\n  rel?: string;\n  download?: string;\n  form?: string;\n  buttonId?: string;\n  customAttribute?: string;\n  arialabel?: string;\n  iconOnly?: boolean;\n}\n"]}

package/collection/utils/utils.js

@@ -1,4 +1,15 @@
 export function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+export function isLocalStorageAvailable() {
+    try {
+        const testKey = '__storage_test__';
+        localStorage.setItem(testKey, testKey);
+        localStorage.removeItem(testKey);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+}
 //# sourceMappingURL=utils.js.map

package/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,IAAI,CAAC;QACH,MAAM,OAAO,GAAG,kBAAkB,CAAC;QACnC,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACvC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function isLocalStorageAvailable(): boolean {\n  try {\n    const testKey = '__storage_test__';\n    localStorage.setItem(testKey, testKey);\n    localStorage.removeItem(testKey);\n    return true;\n  } catch (error) {\n    return false;\n  }\n}\n"]}