@postnord/pn-marketweb-components 4.2.2 → 4.2.4

package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js

@@ -0,0 +1,360 @@
+import { arrow_right } from "pn-design-assets/pn-assets/icons";
+import { createComponent, createDocumentation, } from "../../../globals/documentation/story";
+import docs from "./pn-versa-card-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Cards/Versa card',
+    parameters: {
+        docs: { description: { story: textContent } },
+    },
+    args: {
+        // Wrapper sizing
+        size: 'onequarterwidth',
+        // Content props
+        label: 'Example label',
+        heading: 'Example heading',
+        headingLevel: 'h3',
+        preamble: 'Example preamble',
+        imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',
+        imageAlt: 'Versa card image',
+        // Slot content (optional)
+        rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.</p>',
+        ctaHtml: `<pn-button class="pn-button" appearance="light" target="_blank" href="google.com"> Read More </pn-button> <a class="versa-card-cta-link-animated"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,
+        // Modifier props (Stencil @Prop)        
+        hasImageCover: false,
+        imageGrow: false,
+        horizontal: false,
+        imgAlignment: 'left',
+        roundImage: false,
+        center: false,
+        alignMiddle: false,
+        cardColor: 'white',
+        opacity: 85,
+    },
+    argTypes: {
+        ...argTypes,
+        // Slots
+        rteHtml: { control: 'text', description: 'Injected into slot="rte".' },
+        ctaHtml: { control: 'text', description: 'Injected into slot="cta".' },
+        imageSrc: { control: 'text', description: 'Image URL for the image slot.' },
+        imageAlt: { control: 'text', description: 'Alt text for the image slot.' },
+        // Wrapper sizing
+        size: {
+            control: 'radio',
+            options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],
+            description: 'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',
+        },
+        // Story-only data attribute
+        cardColor: {
+            control: { type: 'select' },
+            options: [
+                'none',
+                'white',
+                'blue25',
+                'blue50',
+                'blue400',
+                'blue900',
+                'coral25',
+                'coral50',
+                'green25',
+                'green50',
+            ],
+            description: 'Sets the data-card-color attribute on pn-versa-card.',
+        },
+        opacity: {
+            control: { type: 'range', min: 0, max: 100, step: 5 },
+        },
+        imgAlignment: {
+            control: 'select',
+            options: ['left', 'right'],
+            description: 'Sets the image to the right side of the card.',
+        },
+        roundImage: {
+            control: 'boolean',
+            description: 'Adds rounded image styling to the card.',
+        },
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            description: 'Sets the heading level for the card heading.',
+        },
+        transparentBackground: {
+            control: 'boolean',
+            description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',
+        },
+    },
+};
+export default meta;
+function buildCard(args) {
+    const { rteHtml, ctaHtml, size: _size, cardColor, ...componentArgs } = args;
+    const { imageSrc, imageAlt, } = args;
+    const el = createComponent('pn-versa-card', componentArgs);
+    if (cardColor) {
+        if (cardColor === 'none') {
+            el.setAttribute('data-card-color', '');
+        }
+        else {
+            el.setAttribute('data-card-color', cardColor);
+        }
+    }
+    if (rteHtml?.trim()) {
+        const rte = document.createElement('div');
+        rte.slot = 'rte';
+        rte.innerHTML = rteHtml;
+        el.appendChild(rte);
+    }
+    if (ctaHtml?.trim()) {
+        const cta = document.createElement('div');
+        cta.slot = 'cta';
+        cta.innerHTML = ctaHtml;
+        el.appendChild(cta);
+    }
+    if (imageSrc) {
+        const media = document.createElement('div');
+        media.slot = 'image';
+        const picture = document.createElement('picture');
+        const img = document.createElement('img');
+        img.src = imageSrc;
+        if (imageAlt) {
+            img.alt = imageAlt;
+        }
+        picture.appendChild(img);
+        media.appendChild(picture);
+        el.appendChild(media);
+    }
+    return el;
+}
+/**
+ * One card, constrained by wrapper class, and centered on the page.
+ */
+function renderCenteredQuarter(args) {
+    const wrapper = document.createElement('div');
+    if (args.size && args.size !== 'default') {
+        wrapper.className = args.size;
+    }
+    wrapper.style.marginInline = 'auto';
+    wrapper.style.display = 'block';
+    wrapper.style.maxWidth = '420px';
+    wrapper.appendChild(buildCard(args));
+    return wrapper;
+}
+function renderCenteredRow(items, size, columns) {
+    const wrapper = document.createElement('div');
+    if (size !== 'default') {
+        wrapper.className = size;
+    }
+    wrapper.style.display = 'flex';
+    wrapper.style.justifyContent = 'center';
+    wrapper.style.width = '100%';
+    wrapper.style.height = '100%';
+    const row = document.createElement('div');
+    row.style.display = 'flex';
+    row.style.gap = '24px';
+    row.style.alignItems = 'stretch';
+    row.style.height = '100%';
+    items.forEach((item) => {
+        const col = document.createElement('div');
+        col.style.flex = `0 1 ${100 / columns}%`;
+        col.style.display = 'flex';
+        const card = buildCard(item);
+        card.style.flex = '1';
+        col.appendChild(card);
+        row.appendChild(col);
+    });
+    wrapper.appendChild(row);
+    return wrapper;
+}
+/* -----------------------------
+   Stories
+--------------------------------*/
+export const OneCardCenteredQuarterPlayGround = {
+    name: 'Playground (all controls enabled, for testing purposes)',
+    render: (args) => renderCenteredRow([
+        {
+            ...args,
+            rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',
+        },
+    ], 'onethirdwidth', 1),
+    parameters: {
+        controls: {
+            exclude: [],
+        },
+    },
+};
+export const OneCardCenteredQuarterDefault = {
+    name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',
+    render: (args) => renderCenteredQuarter(args),
+    args: {
+        label: 'Test',
+        heading: 'Heading',
+        preamble: 'Here goes the preamble for this block',
+        rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',
+        ctaHtml: `<pn-button class="btn btn-secondary">Click me</pn-button>`,
+        cardColor: 'blue25',
+    },
+    parameters: {
+        controls: {
+            include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],
+        },
+    },
+};
+export const OneCardRoundedImage = {
+    name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',
+    render: (args) => renderCenteredQuarter(args),
+    args: {
+        roundImage: true,
+        center: false,
+        label: 'Test',
+        heading: 'Heading',
+        preamble: 'Here goes the preamble for this block',
+        rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',
+    },
+    parameters: {
+        controls: {
+            include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],
+        },
+    },
+};
+export const OneCardCenteredQuarterImageCoverText = {
+    name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',
+    render: (args) => renderCenteredQuarter(args),
+    args: {
+        hasImageCover: true,
+        label: 'Test',
+        heading: 'Heading',
+        preamble: 'Here goes the preamble for this block',
+        rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',
+        ctaHtml: `<pn-button class="btn btn-secondary">Click me</pn-button> <a target="_blank" href="google.com" class= "versa-card-cta-link-animated" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,
+        cardColor: 'blue25',
+    },
+    parameters: {
+        controls: {
+            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],
+        },
+    },
+};
+export const ThreeCardsCenteredQuarter = {
+    name: 'Three cards, centered, with background and image (for layout testing)',
+    parameters: {
+        controls: {
+            include: ['imageSrc'],
+        },
+    },
+    render: (args) => renderCenteredRow([
+        {
+            ...args,
+            cardColor: 'blue25',
+            label: 'Card 1',
+            rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',
+        },
+        {
+            ...args,
+            label: 'Card 2',
+            heading: 'I am a card with no modifier',
+        },
+        {
+            ...args,
+            hasImageCover: true,
+            preamble: '',
+            heading: '',
+            label: '',
+            rteHtml: '',
+            ctaHtml: '',
+        },
+    ], 'onethirdwidth', 3),
+};
+export const TwoCardsHorizontalAlignMiddle = {
+    name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',
+    parameters: {
+        controls: {
+            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],
+        },
+    },
+    render: (args) => renderCenteredRow([
+        {
+            ...args,
+            cardColor: 'blue25',
+            horizontal: true,
+            alignMiddle: true,
+            rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',
+        },
+        {
+            ...args,
+            preamble: '',
+            center: true,
+            roundImage: true,
+            horizontal: false,
+            alignMiddle: true,
+            rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',
+            ctaHtml: `<pn-button class="btn btn-secondary">Click me</pn-button> <a target="_blank" href="google.com" class= "versa-card-cta-link-animated" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,
+        },
+    ], 'halfwidth', 1),
+};
+export const OneCardCenteredQuarterDefaultHorizontal = {
+    name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',
+    parameters: {
+        controls: {
+            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],
+        },
+    },
+    render: (args) => renderCenteredRow([
+        {
+            ...args,
+            horizontal: true,
+            rteHtml: '<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',
+            ctaHtml: `<pn-button class="btn btn-primary">Click me</pn-button> <a target="_blank" href="google.com" class=""> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,
+        },
+    ], 'halfwidth', 1),
+};
+export const OneCardCenteredQuarterTransparentBackground = {
+    name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',
+    parameters: {
+        controls: {
+            include: [
+                'hasBg',
+                'transparentBackground',
+                'label',
+                'heading',
+                'preamble',
+                'imageSrc',
+                'imageAlt',
+                'imgAlignment',
+                'roundImage',
+                'cardColor',
+            ],
+        },
+    },
+    render: (args) => {
+        const wrapper = document.createElement('div');
+        wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';
+        wrapper.style.padding = '64px 0';
+        const row = renderCenteredRow([
+            {
+                ...args,
+                horizontal: true,
+                rteHtml: `
+                        <p>This card demonstrates a <strong>10% transparent background</strong>.
+                        The gradient behind the card should be visible through the background.</p>
+                    `,
+                ctaHtml: `
+                        <pn-button class="btn btn-primary">Click me</pn-button>
+                        <a target="_blank" href="https://google.com">
+                            Read More <pn-icon icon='${arrow_right}'></pn-icon>
+                        </a>
+                    `,
+            },
+        ], 'halfwidth', 1);
+        wrapper.appendChild(row);
+        return wrapper;
+    },
+    args: {
+        transparentBackground: true,
+        label: 'Story demo',
+        heading: 'Transparent background card',
+        preamble: 'The card background is slightly transparent while content remains opaque.',
+        imgAlignment: 'left',
+        roundImage: false,
+        cardColor: 'white',
+    },
+};
+//# sourceMappingURL=pn-versa-card.stories.js.map

package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-versa-card.stories.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { arrow_right } from 'pn-design-assets/pn-assets/icons';\n\nimport {\n    createComponent,\n    createDocumentation,\n} from '@/globals/documentation/story';\nimport type {\n    Meta,\n    StoryObj,\n} from '@storybook/web-components';\n\nimport docs from './pn-versa-card-docs.json';\n\ntype VersaSize = 'default' | 'halfwidth' | 'onethirdwidth' | 'onequarterwidth';\ntype CardColor = 'white' | 'blue25' | 'business' | 'blue50' | 'blue400' | 'blue900' | 'coral25' | 'coral50' | 'green25' | 'green50' | 'none';\n\ntype VersaCardStoryArgs = Omit<Partial<HTMLPnVersaCardElement>, 'theme'> & {\n    /**\n     * Wrapper-only sizing (because SCSS targets `.halfwidth .pn-versa-card-hasBg { ... }`)\n     */\n    size?: VersaSize;\n\n    /** RTE slot content (simulates CMS output) */\n    rteHtml?: string;\n\n    /** CTA slot content (simulates CMS output) */\n    ctaHtml?: string;\n\n    /** Story-only attribute mapped to data-card-color */\n    cardColor?: CardColor;\n\n    imageSrc?: string;\n    imageAlt?: string;\n};\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<VersaCardStoryArgs> = {\n    title: 'Components/Cards/Versa card',\n    parameters: {\n        docs: { description: { story: textContent } },\n    },\n    args: {\n        // Wrapper sizing\n        size: 'onequarterwidth',\n\n        // Content props\n        label: 'Example label',\n        heading: 'Example heading',\n        headingLevel: 'h3',\n        preamble: 'Example preamble',\n        imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',\n        imageAlt: 'Versa card image',\n\n        // Slot content (optional)\n        rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit.</p>',\n        ctaHtml: `<pn-button class=\"pn-button\" appearance=\"light\" target=\"_blank\" href=\"google.com\"> Read More </pn-button> <a class=\"versa-card-cta-link-animated\"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,\n\n        // Modifier props (Stencil @Prop)        \n        hasImageCover: false,\n        imageGrow: false,\n        horizontal: false,\n        imgAlignment: 'left',\n        roundImage: false,\n        center: false,\n        alignMiddle: false,\n        cardColor: 'white',\n        opacity: 85,\n    },\n    argTypes: {\n        ...argTypes,\n\n        // Slots\n        rteHtml: { control: 'text', description: 'Injected into slot=\"rte\".' },\n        ctaHtml: { control: 'text', description: 'Injected into slot=\"cta\".' },\n        imageSrc: { control: 'text', description: 'Image URL for the image slot.' },\n        imageAlt: { control: 'text', description: 'Alt text for the image slot.' },\n\n        // Wrapper sizing\n        size: {\n            control: 'radio',\n            options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],\n            description:\n                'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',\n        },\n\n        // Story-only data attribute\n        cardColor: {\n            control: { type: 'select' },\n            options: [\n                'none',\n                'white',\n                'blue25',\n                'blue50',\n                'blue400',\n                'blue900',\n                'coral25',\n                'coral50',\n                'green25',\n                'green50',\n            ],\n            description: 'Sets the data-card-color attribute on pn-versa-card.',\n        },\n\n        opacity: {\n            control: { type: 'range', min: 0, max: 100, step: 5 },\n        },\n        imgAlignment: {\n            control: 'select',\n            options: ['left', 'right'],\n            description: 'Sets the image to the right side of the card.',\n        },\n        roundImage: {\n            control: 'boolean',\n            description: 'Adds rounded image styling to the card.',\n        },\n\n        headingLevel: {\n            control: 'select',\n            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n            description: 'Sets the heading level for the card heading.',\n        },\n        transparentBackground: {\n            control: 'boolean',\n            description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',\n        },\n    },\n};\n\nexport default meta;\ntype Story = StoryObj<VersaCardStoryArgs>;\n\nfunction buildCard(args: VersaCardStoryArgs) {\n    const {\n        rteHtml,\n        ctaHtml,\n        size: _size,\n        cardColor,\n        ...componentArgs\n    } = args;\n\n    const { imageSrc,\n        imageAlt, } = args;\n\n    const el = createComponent('pn-versa-card', componentArgs) as HTMLElement;\n\n    if (cardColor) {\n        if (cardColor === 'none') {\n            el.setAttribute('data-card-color', '');\n        } else {\n            el.setAttribute('data-card-color', cardColor);\n        }\n    }\n\n    if (rteHtml?.trim()) {\n        const rte = document.createElement('div');\n        rte.slot = 'rte';\n        rte.innerHTML = rteHtml;\n        el.appendChild(rte);\n    }\n\n    if (ctaHtml?.trim()) {\n        const cta = document.createElement('div');\n        cta.slot = 'cta';\n        cta.innerHTML = ctaHtml;\n        el.appendChild(cta);\n    }\n\n    if (imageSrc) {\n        const media = document.createElement('div');\n        media.slot = 'image';\n\n        const picture = document.createElement('picture');\n        const img = document.createElement('img');\n        img.src = imageSrc;\n\n        if (imageAlt) {\n            img.alt = imageAlt;\n        }\n\n        picture.appendChild(img);\n        media.appendChild(picture);\n        el.appendChild(media);\n    }\n\n    return el;\n}\n\n/**\n * One card, constrained by wrapper class, and centered on the page.\n */\nfunction renderCenteredQuarter(args: VersaCardStoryArgs) {\n    const wrapper = document.createElement('div');\n\n    if (args.size && args.size !== 'default') {\n        wrapper.className = args.size;\n    }\n\n    wrapper.style.marginInline = 'auto';\n    wrapper.style.display = 'block';\n    wrapper.style.maxWidth = '420px';\n\n    wrapper.appendChild(buildCard(args));\n    return wrapper;\n}\n\nfunction renderCenteredRow(\n    items: VersaCardStoryArgs[],\n    size: VersaSize,\n    columns: number,\n) {\n    const wrapper = document.createElement('div');\n\n    if (size !== 'default') {\n        wrapper.className = size;\n    }\n\n    wrapper.style.display = 'flex';\n    wrapper.style.justifyContent = 'center';\n    wrapper.style.width = '100%';\n    wrapper.style.height = '100%';\n\n    const row = document.createElement('div');\n    row.style.display = 'flex';\n    row.style.gap = '24px';\n    row.style.alignItems = 'stretch';\n    row.style.height = '100%';\n\n    items.forEach((item) => {\n        const col = document.createElement('div');\n        col.style.flex = `0 1 ${100 / columns}%`;\n        col.style.display = 'flex';\n\n        const card = buildCard(item);\n        card.style.flex = '1';\n\n        col.appendChild(card);\n        row.appendChild(col);\n    });\n\n    wrapper.appendChild(row);\n    return wrapper;\n}\n\n/* -----------------------------\n   Stories\n--------------------------------*/\n\nexport const OneCardCenteredQuarterPlayGround: Story = {\n    name: 'Playground (all controls enabled, for testing purposes)',\n    render: (args) =>\n        renderCenteredRow(\n            [\n                {\n                    ...args,\n                    rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',\n                },\n            ],\n            'onethirdwidth',\n            1,\n        ),\n    parameters: {\n        controls: {\n            exclude: [],\n        },\n    },\n};\n\nexport const OneCardCenteredQuarterDefault: Story = {\n    name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n    render: (args) => renderCenteredQuarter(args),\n    args: {\n        label: 'Test',\n        heading: 'Heading',\n        preamble: 'Here goes the preamble for this block',\n        rteHtml:\n            '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n        ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button>`,\n        cardColor: 'blue25',\n    },\n    parameters: {\n        controls: {\n            include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],\n        },\n    },\n};\n\nexport const OneCardRoundedImage: Story = {\n    name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',\n    render: (args) => renderCenteredQuarter(args),\n    args: {\n        roundImage: true,\n        center: false,\n        label: 'Test',\n        heading: 'Heading',\n        preamble: 'Here goes the preamble for this block',\n        rteHtml:\n            '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n    },\n    parameters: {\n        controls: {\n            include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],\n        },\n    },\n};\n\n\nexport const OneCardCenteredQuarterImageCoverText: Story = {\n    name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n    render: (args) => renderCenteredQuarter(args),\n    args: {\n        hasImageCover: true,\n        label: 'Test',\n        heading: 'Heading',\n        preamble: 'Here goes the preamble for this block',\n        rteHtml:\n            '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n        ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n        cardColor: 'blue25',\n    },\n    parameters: {\n        controls: {\n            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],\n        },\n    },\n};\n\nexport const ThreeCardsCenteredQuarter: Story = {\n    name: 'Three cards, centered, with background and image (for layout testing)',\n    parameters: {\n        controls: {\n            include: ['imageSrc'],\n        },\n    },\n    render: (args) =>\n        renderCenteredRow(\n            [\n                {\n                    ...args,\n\n                    cardColor: 'blue25',\n                    label: 'Card 1',\n                    rteHtml:\n                        '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n                },\n                {\n                    ...args,\n                    label: 'Card 2',\n                    heading: 'I am a card with no modifier',\n\n                },\n                {\n                    ...args,\n                    hasImageCover: true,\n                    preamble: '',\n                    heading: '',\n                    label: '',\n                    rteHtml: '',\n                    ctaHtml: '',\n                },\n            ],\n            'onethirdwidth',\n            3,\n        ),\n};\n\nexport const TwoCardsHorizontalAlignMiddle: Story = {\n    name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',\n    parameters: {\n        controls: {\n            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n        },\n    },\n    render: (args) =>\n        renderCenteredRow(\n            [\n                {\n                    ...args,\n                    cardColor: 'blue25',\n                    horizontal: true,\n                    alignMiddle: true,\n                    rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',\n\n                },\n                {\n                    ...args,\n                    preamble: '',\n                    center: true,\n                    roundImage: true,\n                    horizontal: false,\n                    alignMiddle: true,\n                    rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',\n                    ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n                },\n            ],\n            'halfwidth',\n            1,\n        ),\n};\n\nexport const OneCardCenteredQuarterDefaultHorizontal: Story = {\n    name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',\n    parameters: {\n        controls: {\n            include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n        },\n    },\n    render: (args) =>\n        renderCenteredRow(\n            [\n                {\n                    ...args,\n                    horizontal: true,\n                    rteHtml:\n                        '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n                    ctaHtml: `<pn-button class=\"btn btn-primary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class=\"\"> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,\n                },\n            ],\n            'halfwidth',\n            1,\n        ),\n};\n\n\nexport const OneCardCenteredQuarterTransparentBackground: Story = {\n    name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',\n    parameters: {\n        controls: {\n            include: [\n                'hasBg',\n                'transparentBackground',\n                'label',\n                'heading',\n                'preamble',\n                'imageSrc',\n                'imageAlt',\n                'imgAlignment',\n                'roundImage',\n                'cardColor',\n            ],\n        },\n    },\n    render: (args) => {\n        const wrapper = document.createElement('div');\n\n        wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';\n        wrapper.style.padding = '64px 0';\n\n        const row = renderCenteredRow(\n            [\n                {\n                    ...args,\n                    horizontal: true,\n                    rteHtml: `\n                        <p>This card demonstrates a <strong>10% transparent background</strong>.\n                        The gradient behind the card should be visible through the background.</p>\n                    `,\n                    ctaHtml: `\n                        <pn-button class=\"btn btn-primary\">Click me</pn-button>\n                        <a target=\"_blank\" href=\"https://google.com\">\n                            Read More <pn-icon icon='${arrow_right}'></pn-icon>\n                        </a>\n                    `,\n                },\n            ],\n            'halfwidth',\n            1,\n        );\n\n        wrapper.appendChild(row);\n\n        return wrapper;\n    },\n\n    args: {\n        transparentBackground: true,\n        label: 'Story demo',\n        heading: 'Transparent background card',\n        preamble: 'The card background is slightly transparent while content remains opaque.',\n        imgAlignment: 'left',\n        roundImage: false,\n        cardColor: 'white',\n    },\n};"]}

package/collection/components/charts/pn-chart/pn-chart.js

@@ -42,7 +42,7 @@ export class PnChart {
         this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data, this.numberOfSetsGreaterThanOne));
     }
     render() {
-        return (h(Host, { key: '9f6a915eca5ae80c2a9480976f08c81e5b70d824' }, h("div", { key: 'a0652b45298fdd319abcb79a80edab1146778685', class: "chart-wrapper" }, h("canvas", { key: '5f14dfdfdd2fef79261be72fc58efc02c3bfa7b5', id: "chart-canvas", class: "pnChart" }))));
+        return (h(Host, { key: '9f34e03c80c36bbe89f2407290a4d343164ac71f' }, h("div", { key: '7f61a11f9685fdacf6e984f8d4d4a907a17f4a43', class: "chart-wrapper" }, h("canvas", { key: '1483c145b02848fb2bd5e06efd9261eede6eafb0', id: "chart-canvas", class: "pnChart" }))));
     }
     static get is() { return "pn-chart"; }
     static get originalStyleUrls() {

package/collection/components/charts/pn-charts-card/pn-charts-card.js

@@ -19,9 +19,9 @@ export class PnChartsCard {
         return null;
     };
     render() {
-        return (h(Host, { key: '6f733408b55d43315de16b39f2ca0cb48cad1a10' }, h("slot", { key: '47962ca07bd4ab85bf72ee27f3e56d96fd02936d', name: "clickable-block-wrapper" }), h("div", { key: '96e09155b42f594c6866262b81b68c07c5b194ca', class: "pn-charts-card__wrapper" }, this.header &&
-            (h("div", { key: 'c578bbaacd00e4963b2678b2e01b70c5033ab573', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("h2", { key: '1efbdcebf15c7af69b72219e5cd21b26873d8c69', class: "pn-charts-card__heading" }, this.header), h("div", { key: '0591981bd49e82a510aeda2b986e3711672a997e', class: "pn-charts-card__heading__highlight" }, this.highlight))), h("div", { key: 'e35bde7b730cb7a41eb1d7eff4454010bdb666ae', class: "pn-charts-card__content__wrapper" }, h("slot", { key: '908090196e4f205b347fc13309b3dd06b1de168c', name: "chart" }), h("div", { key: 'd546186e8244af382ac220514aa7edf5eecb033a', class: "pn-charts-card__text__container" }, this.header &&
-            (h("div", { key: '123ff886ddad4911522385a01f43db2787928cc9', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("h2", { key: '5f02a104d719cfc5c785c2ce40ee389c4e8c3a66', class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { key: '050bc7518f8e0afcefcedfbe529286b778650cb8', class: "pn-charts-card__heading__highlight" }, this.highlight))), h("span", { key: 'dd21c533f436b8c3b3755a3de80fa759800f122e', class: "pn-charts-card__preamble" }, this.preamble), h("div", { key: '2442b29c8f74de7001698d6fb431420b53e3345d', class: "pn-charts-card__text__wrapper" }, h("div", { key: '9f98181d22c1e2448d5af89e79904b459b059af6', class: "pn-charts-card__source" }, h("label", { key: '9634730f55c11cca03ec1505dcd5977b70e72e74' }, this.label), this.source ? h("p", { class: "pn-chart-card__text__heading" }, this.source) : null, this.showCtaLinkText())))))));
+        return (h(Host, { key: '932e9396a6f2d92296f7d3891d30c8b239f7c505' }, h("slot", { key: 'f7b2cee3fbb752529007d357977367b75d7d92dc', name: "clickable-block-wrapper" }), h("div", { key: '4e41ef800cd83f9655498dc003cc475adf94be74', class: "pn-charts-card__wrapper" }, this.header &&
+            (h("div", { key: '887b87722b03a88b437e1fb8f08cd5b96a22d801', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("h2", { key: '7e42eed995b18e6e35420bc7164e2292c0ad8bad', class: "pn-charts-card__heading" }, this.header), h("div", { key: '2e5d4bfc48f85dca46a8a686ecc74c53fbea7f43', class: "pn-charts-card__heading__highlight" }, this.highlight))), h("div", { key: 'e6afaecfbff9546b65f23d063d78d2bd85fa577c', class: "pn-charts-card__content__wrapper" }, h("slot", { key: '9f648bbfba9338cadbdabf6045a4ed19a0575a99', name: "chart" }), h("div", { key: 'df43a6c84b8d990ac7ce92daea524c93427684ad', class: "pn-charts-card__text__container" }, this.header &&
+            (h("div", { key: 'fad6bbcd1d3588f580f55aeb0852acd8522e696e', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("h2", { key: 'db90f01327a55f0acffaeb11be0839b348dc3854', class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { key: 'e08e7589c11ed25b8d0b2986e2e940a24d4f911e', class: "pn-charts-card__heading__highlight" }, this.highlight))), h("span", { key: '75d76421250f366755f17f0e42217d88fb6155fd', class: "pn-charts-card__preamble" }, this.preamble), h("div", { key: 'b54eea882f8f9d8b3934dda3fdcae18d76f938ce', class: "pn-charts-card__text__wrapper" }, h("div", { key: '5696594a4b9eec838d7bedfc515e11f2d95b3268', class: "pn-charts-card__source" }, h("label", { key: '1364ed359aa0bc1ab99d06a560cb3d03e3a0fede' }, this.label), this.source ? h("p", { class: "pn-chart-card__text__heading" }, this.source) : null, this.showCtaLinkText())))))));
     }
     static get is() { return "pn-charts-card"; }
     static get originalStyleUrls() {

package/collection/components/cta/pn-cta-block/pn-cta-block.js

@@ -13,8 +13,8 @@ export class PnCtaBlock {
     render() {
         const hasImage = this.hostElement.querySelector('[slot="illustration"]');
         const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
-        return (h(Host, { key: 'cd97d60c2c61e127f2e4deacab39fb7f773694ea' }, h("div", { key: 'b01ea2ef995dae9d741d1da0f5119ab612ade54a', "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
-            h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), h("div", { key: '2b94493d618cabd0205e5cecfd105cec3a695528', class: "cta-block__content" }, (this.heading) ? h("h2", { class: "cta-block__heading" }, this.heading) : null, (this.bodyText) ? h("p", { class: "cta-block__text" }, this.bodyText) : null), (hasButtons ?
+        return (h(Host, { key: '8b2108e0a03e9545be40625634ab9557d868b812' }, h("div", { key: '53a19992a4c642703476963faa81dae31783f3e7', "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
+            h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), h("div", { key: '6dbd1b2f7318308ed374582ca50638453a834b73', class: "cta-block__content" }, (this.heading) ? h("h2", { class: "cta-block__heading" }, this.heading) : null, (this.bodyText) ? h("p", { class: "cta-block__text" }, this.bodyText) : null), (hasButtons ?
             h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
     }
     static get is() { return "pn-cta-block"; }

package/collection/components/cta/pn-parcel-tracker/pn-parcel-tracker.js

@@ -15,7 +15,7 @@ export class PnSpotlight {
         this.currentWidth = event.target.innerWidth;
     }
     render() {
-        return (h(Host, { key: '1175ee79bdd43c697cff71530375a02bc7608382' }, h("div", { key: '7d5059b7384060cf1937c45341b01998ec1220d7', class: "pn-parcel-tracker__container" }, h("form", { key: '3a416b4c483e99a953c715e16f3f3ea83591570a', method: "GET", action: this.formActionUrl }, h("h3", { key: '832541b313250e8960f93298f5c6e90e5af405c8', class: "pn-parcel-tracker__container__heading" }, this.heading), h("pn-marketweb-input", { key: '73b2290a2ec9427faf6110ef97a2df0f5c7bd51f', name: this.inputName, placeholder: this.placeholder }), h("pn-button", { key: '1f99b01aba200dc0e863058d9df9ff3bd015f959', type: "submit", icon: search, tooltip: this.currentWidth < 412 ? this.buttonLabel : null }, this.currentWidth >= 412 && this.buttonLabel)))));
+        return (h(Host, { key: '9e19eb36a77777d651f61085a8552f9aa8310b79' }, h("div", { key: '73ef3e4cda0a382e79270e2c43f4ddaa8bcd4414', class: "pn-parcel-tracker__container" }, h("form", { key: '66349ff229bb9d7cca1982a72a1fa300166d1631', method: "GET", action: this.formActionUrl }, h("h3", { key: 'eabf93412d1df20d5cc99a74e30337378d43b37a', class: "pn-parcel-tracker__container__heading" }, this.heading), h("pn-marketweb-input", { key: 'e8dab573ff27b488160181f803fe97207e0ab330', name: this.inputName, placeholder: this.placeholder }), h("pn-button", { key: '43c41a32db482f094659fe055d22b143d8af0e17', type: "submit", icon: search, tooltip: this.currentWidth < 412 ? this.buttonLabel : null }, this.currentWidth >= 412 && this.buttonLabel)))));
     }
     static get is() { return "pn-parcel-tracker"; }
     static get originalStyleUrls() {

package/collection/components/cta/pn-quick-cta/pn-quick-cta.js

@@ -6,7 +6,7 @@ export class PnQuickCta {
     }
     hostElement;
     render() {
-        return (h(Host, { key: 'ab5954c7894705ca1d6faeb541b63ef9a28ce39e' }, h("div", { key: '2fe82eb368e7c6f13a1e541e54f4f2679b99ed20', class: "quick-cta__content" }, this.heading && h("h2", { key: '7f766e4fb92eaa1e9ecc5ae90ec850dd80348585', class: "quick-cta__content__heading" }, this.heading), h("p", { key: '1ac42d8d5d8c4995d5122b1f1fa68b42915b18b9', class: "quick-cta__content__preamble" }, this.preamble), h("slot", { key: '85be5b2684e761d02886325cd7b3b55a01dbacb4', name: "quick-cta-cta" }))));
+        return (h(Host, { key: '0bcb4363f2719183b49ddbe16a2b4a4f73cb1833' }, h("div", { key: 'd0cad8249fb1f6f2bcfc42f5996f7749ef8eb829', class: "quick-cta__content" }, this.heading && h("h2", { key: 'a48140c8941a10038bda1da2895a85e74815ac99', class: "quick-cta__content__heading" }, this.heading), h("p", { key: '406a9a8ce995e35e09df5a4514a5ee10507cd537', class: "quick-cta__content__preamble" }, this.preamble), h("slot", { key: '075922f329090b5ca955bae2112c4197ae08135a', name: "quick-cta-cta" }))));
     }
     static get is() { return "pn-quick-cta"; }
     static get originalStyleUrls() {

package/collection/components/cta/pn-share/pn-share-item.js

@@ -6,7 +6,7 @@ export class PnShareItem {
     }
     hostElement;
     render() {
-        return (h(Host, { key: '91e29d95c93de36f6874abf2122f38d931d539f1' }, h("div", { key: 'ee1a46c97cdda226d697983e9a05c03d205c0997', class: "pn-share-item__container" }, h("a", { key: 'dd417980b984ec45a783f73fd0f3353010e9efe4', href: `${this.link}` }, h("slot", { key: 'c84b5b9f86a2a707eaa65f80dd5f02ca65c3b512', name: "icon" }), " ", this.text))));
+        return (h(Host, { key: '4e1cea876f61c710df92104b45e50ba66cf0b623' }, h("div", { key: '0e6aed22f766bcb4f1f6eb84f36e3d4ba440e37a', class: "pn-share-item__container" }, h("a", { key: '563a048cf8a4b6050bf3db2a6621ae0743b298eb', href: `${this.link}` }, h("slot", { key: 'e5376f9ccd073b93adb746c88631f574185a6854', name: "icon" }), " ", this.text))));
     }
     static get is() { return "pn-share-item"; }
     static get originalStyleUrls() {

package/collection/components/cta/pn-share/pn-share.js

@@ -27,7 +27,7 @@ export class PnShare {
         this.setTranslations();
     }
     render() {
-        return (h(Host, { key: '64fc418773ad1694c97c3cead91687668d4d0a7d' }, h("div", { key: 'dedd71bce2dae6d868ea070c85fbb086f72d9ec8', class: "pn-share__container" }, h("h3", { key: 'a442ce3dcd201e1b9a1079ffc39b140b70e32f78', class: "pn-share__heading" }, this.i18n.sharelabel, ":"), h("div", { key: '88042477f52053ef2a839ad5b24d11c939a1ff06', class: "pn-share__items" }, SHARE_URLS.map(platform => {
+        return (h(Host, { key: '87c86e64bc6e31b8ecb1f172005dc1fa2b2a821a' }, h("div", { key: 'b0ae9877a73c5b2a67a6fc03e91cae21062df823', class: "pn-share__container" }, h("h3", { key: 'b410f35c7a3e20951b6795c886e755d4c9cc6337', class: "pn-share__heading" }, this.i18n.sharelabel, ":"), h("div", { key: 'e5b84fdc21fb4fcd5de996f55ef2b689d3385f80', class: "pn-share__items" }, SHARE_URLS.map(platform => {
             return (h("pn-share-item", { link: `${platform.url}${this.link}`, text: platform.text }, h("pn-icon", { slot: "icon", icon: platform.platform })));
         })))));
     }

package/collection/components/cta/pn-spotlight/pn-spotlight.js

@@ -12,7 +12,7 @@ export class PnSpotlight {
         this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });
     }
     render() {
-        return (h(Host, { key: 'b1d831c63742021f8f180473beb71b44b1665447' }, h("div", { key: '8abd3c2d5cd4e17675124cbabc971420e6be2960', class: "pn-spotlight__container" }, h("slot", { key: '456fc111a6dbd235c087c6991bf517189cc08033', name: "mobile-heading" }), h("div", { key: '84ee92f9b62e61981149c298fa20708b09e6ffa4', class: `pn-spotlight__container__wrapper ${this.addDynamic}` }, h("div", { key: '00e67b61996c7c9265652d7ff6d0cc29aaa3a685', class: "pn-spotlight__container__wrapper__content" }, h("div", { key: 'c417b1c80cd9518f9eb2620f1211d972f4da5c24', class: "pn-spotlight__container__wrapper__content__ball" }), h("slot", { key: '48817e2a5cb6d5c485be0485f4364fe9bef33742', name: "content" }))))));
+        return (h(Host, { key: 'ec938ca8e73e29c04d713fff497da4d57bd25de2' }, h("div", { key: '8ca6ff6b0027bed2c5c369e127c474a1cb0246e8', class: "pn-spotlight__container" }, h("slot", { key: 'efc788918cc0d68450f77484ed5c6379a8243b6a', name: "mobile-heading" }), h("div", { key: 'accea01d45fce0d3685430eee037e17a3c1786bd', class: `pn-spotlight__container__wrapper ${this.addDynamic}` }, h("div", { key: '1fd54fb9bdab12397824b92dbb307227a4f0f120', class: "pn-spotlight__container__wrapper__content" }, h("div", { key: '36331f2de4f9be557e70660353356c5a629f0776', class: "pn-spotlight__container__wrapper__content__ball" }), h("slot", { key: '3e56d7906daa1af24db9be615975c33b53d82968', name: "content" }))))));
     }
     static get is() { return "pn-spotlight"; }
     static get originalStyleUrls() {

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js

@@ -34,7 +34,7 @@ export class PnStatsInfoData {
         }
     }
     render() {
-        return (h(Host, { key: '76ba8987c10c1134632d1d14e835e2d151e40d7d' }, h("div", { key: 'cfca356710ab65efc3332390b9ff2c9d6e90543f', class: "pn-stats-info-data__container" }, h("div", { key: 'fca178d07e51036cb8b63e064686572588069304', class: "pn-stats-info-data__container__content" }, h("div", { key: '2bd549f1408aec0487e7cb7e0498141685e2d18c', class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), this.unit && h("div", { key: '1c8913969b0eed7e98e6045c7b6320d6a6391517', class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { key: 'e7c7f90a4661fbe22600946d8343e1d98e5cfaec', class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
+        return (h(Host, { key: 'a1341a3318a51adb8a170b773f9109110bca65c6' }, h("div", { key: 'e7c94b94b3cf2b1c7fd4c05f953ca537ec17153c', class: "pn-stats-info-data__container" }, h("div", { key: '391ad615fa5930728fb3a7baece08d3636c90820', class: "pn-stats-info-data__container__content" }, h("div", { key: 'a54130470a7c195f2789c440167022d9eafbee42', class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), this.unit && h("div", { key: '0aa67825205280a82b65f8f650203bcbe9318ded', class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { key: '14bd4ef96a6d6be6591dbcb314c395a016e9ad9c', class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
     }
     componentDidRender() {
         const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js

@@ -12,7 +12,7 @@ export class PnStatsInfo {
             this.myParsedArray = JSON.parse(newValue);
     }
     render() {
-        return (h(Host, { key: '4040f13125e6100df1801a6545f681050617409a' }, h("div", { key: '51ca98b16eac1402169c0045a3b8e93f530013c5', class: "pn-stats-info__container" }, h("div", { key: 'c441538ce4df1ca3eb1d1893e4977bc3db2399f5', class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { key: '78445b4b79e02216ab51987b9161784549d256bf', class: "pn-stats-info-image-container" }, h("slot", { key: '28368b7e52b6ccf527b7adf4e9d8f3a5d49c6b39', name: "illustration" })), h("div", { key: '2b49c7774f9859db711fb0c064183e9d3be4585d', class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, this.heading && h("h3", { key: '53d122a0f95dabd687dc71a494872651bab5652f', class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { key: '79557faeb6e29b21d69cf08809faa3bb6d2e18ef', class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
+        return (h(Host, { key: 'c0e816e4c281e81f243b88a2ccc7cb3f82e6d2a2' }, h("div", { key: '666152f5223cde318b12d55b4175b7622be3cb23', class: "pn-stats-info__container" }, h("div", { key: '29a902e1b93a94f9428fdf341eaba640177d4f14', class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { key: 'b25c11b6e98bc2b36ea9859fa63903b0b3df18aa', class: "pn-stats-info-image-container" }, h("slot", { key: '368b94a4c51905e322b47d3ab064021005470d82', name: "illustration" })), h("div", { key: 'cea4df0e76ca50601b32f94a9ca3a3beb2bd8b09', class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, this.heading && h("h3", { key: '1e58ffbdfe93b320aee779751f05d49f9d2d1064', class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { key: 'dbc3c69b74be499f991159ebcd5eeb515a54f509', class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
             this.myParsedArray.map((stats, index) => {
                 return (h("pn-stats-info-data", { index: index, startValue: stats.startValue, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration, format: stats.format, formatStyle: stats.formatStyle }));
             }))))));

package/collection/components/input/pn-address-autofill/pn-address-autofill.js

@@ -242,7 +242,7 @@ export class PnAddressAutofill {
         return str1;
     }
     render() {
-        return (h(Host, { key: '6e09c78bcd1117bbcdbcec1fc65444772636036d', class: "pn-address-autofill" }, this._postalCodeProps?.postalCodeCityLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel + ' ' + this.postalCodeRequiredLabel}`))) : null, h("div", { key: '8f5a0760096e3618436b7554a6a5c89c1b0bab0a', class: "input-container-row" }, h("pn-input", { key: '2490a7c926f9c693cf67dabbd60e56297aee44aa', type: "number", name: this._postalCodeProps?.postalCodeInputName, required: this._postalCodeProps?.postalCodeInputRequired, placeholder: this._postalCodeProps?.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: this._postalCodeProps?.postalCodeInputHelpertext }), h("pn-input", { key: '49bc2fdedb78d9ce11c973bd0d2ab127603ab148', type: "text", name: this._cityProps?.cityInputName, disabled: true, value: this.city, placeholder: this._cityProps?.cityInputPlaceholder, autocomplete: "off", helpertext: this._cityProps?.cityInputHelpertext })), this._streetAddressProps?.streetAddressNumberLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel + ' ' + this.streetRequiredLabel}`))) : null, h("div", { key: 'fed64c4457c27593bf6a22dea066f029fcd4a53d', class: "input-container-row" }, h("pn-input", { key: '7d7667465f4cad869cf8274158611aa32b7a8975', type: "text", name: this._streetAddressProps?.streetAddressInputName, required: this._streetAddressProps?.streetAddressInputRequired, value: this.streetAddress, placeholder: this._streetAddressProps?.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: this._streetAddressProps?.streetAddressInputHelpertext, disabled: this.isLoading }), h("pn-input", { key: '8bc6498685c92de3e53034dcf4fe7078e171e41f', type: "text", name: this._streetNumberProps?.streetNumberInputName, required: this._streetNumberProps?.streetNumberInputRequired, value: this.streetNumber, placeholder: this._streetNumberProps?.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: this._streetNumberProps?.streetNumberInputHelpertext, disabled: this.isLoading })), (!this.validAddress && this.streetAddressInputField.value && this.streetNumberInputField.value) ? (h("div", { class: "toast-container" }, h("pn-toast", { text: this.addressNotFoundError ?? this.translation.addressNotFound, appearance: "warning", icon: alert_exclamation_circle }))) : null));
+        return (h(Host, { key: '43ca8acceb3c02a3a12a6c4da9ae4e4b12853709', class: "pn-address-autofill" }, this._postalCodeProps?.postalCodeCityLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel + ' ' + this.postalCodeRequiredLabel}`))) : null, h("div", { key: '4c61dd29dc1b53a71ab04f79a405bda5323764ab', class: "input-container-row" }, h("pn-input", { key: 'fd0baf1681bc21da522310f1233e693aa3f490cf', type: "number", name: this._postalCodeProps?.postalCodeInputName, required: this._postalCodeProps?.postalCodeInputRequired, placeholder: this._postalCodeProps?.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: this._postalCodeProps?.postalCodeInputHelpertext }), h("pn-input", { key: 'daa23faa30b9b48969b3f58e09ef6fe29a1f666d', type: "text", name: this._cityProps?.cityInputName, disabled: true, value: this.city, placeholder: this._cityProps?.cityInputPlaceholder, autocomplete: "off", helpertext: this._cityProps?.cityInputHelpertext })), this._streetAddressProps?.streetAddressNumberLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel + ' ' + this.streetRequiredLabel}`))) : null, h("div", { key: 'da8ef7b1eeca53ccbb926260acd2df79b395ee64', class: "input-container-row" }, h("pn-input", { key: 'cfd025d69b0901885da50d5dd7a763171ff96318', type: "text", name: this._streetAddressProps?.streetAddressInputName, required: this._streetAddressProps?.streetAddressInputRequired, value: this.streetAddress, placeholder: this._streetAddressProps?.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: this._streetAddressProps?.streetAddressInputHelpertext, disabled: this.isLoading }), h("pn-input", { key: 'f9da42b0af3c7726686393ce1f161ac30d93a8b3', type: "text", name: this._streetNumberProps?.streetNumberInputName, required: this._streetNumberProps?.streetNumberInputRequired, value: this.streetNumber, placeholder: this._streetNumberProps?.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: this._streetNumberProps?.streetNumberInputHelpertext, disabled: this.isLoading })), (!this.validAddress && this.streetAddressInputField.value && this.streetNumberInputField.value) ? (h("div", { class: "toast-container" }, h("pn-toast", { text: this.addressNotFoundError ?? this.translation.addressNotFound, appearance: "warning", icon: alert_exclamation_circle }))) : null));
     }
     static get is() { return "pn-address-autofill"; }
     static get originalStyleUrls() {

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.js

@@ -26,7 +26,7 @@ export class PnBonusProgressbarLevel {
         return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
     }
     render() {
-        return (h(Host, { key: '17dea66cc0b3d8ba52533a05d1879ad441dadc39', style: { left: `${this.visualpercentage}%` } }, h("div", { key: '8037ab85d591c3fef10b6c54767be99e3acdc512', class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { key: 'fe23e4451775abe17c0c0b3dab1ba4ed66225b53', class: "progressbar-level-value" }, this.formatValue())));
+        return (h(Host, { key: '00b80f6a445e99d2ba395fcef54e4138c4485d53', style: { left: `${this.visualpercentage}%` } }, h("div", { key: '4a04a5b11d281fb92b94ea0dfb423df01a59b1f4', class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { key: 'de57ec39c15545fb1e854f9c2a9540c49885676e', class: "progressbar-level-value" }, this.formatValue())));
     }
     static get is() { return "pn-bonus-progressbar-level"; }
     static get originalStyleUrls() {

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar.js

@@ -78,7 +78,7 @@ export class PnBonusProgressbar {
         }
     }
     render() {
-        return (h(Host, { key: '89103fc6287e71d9ac12c7bcbb284959c0ea64bd' }, h("div", { key: '9a0b60180dc43681d5f5e1b7376435afb583765e', class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { icon: this.icon, small: "false", color: this.iconColor() }))) : ({}), h("div", { key: '97f7f703387b719ab11ca555e5f46de0a38b0dcf', class: "bonusprogressbar-top-heading" }, h("h4", { key: '8127659ee7221eec13123fd0e07c1871a132fdf9', class: "bonusprogressbar-top-headline" }, this.heading, " ", h("strong", { key: '5883c56d6aa717e654634e4232e768e76b5f8236', class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext) : null)), h("div", { key: '9ca7943f007cfb8bf63c1c64032140ae158bed85', class: "bonusprogressbar-wrapper" }, h("progress", { key: 'db618cbeb83e9e6459c2db90da1806952b2b98b3', class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("slot", { key: '6954cfff8a350a37528f0529d1158b79b9abe499' }))));
+        return (h(Host, { key: '0c2800a5ff59a29a2932257f625a86ec8217ab78' }, h("div", { key: 'd53c24cd81f61b5b71e8065b423108e70b37228e', class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { icon: this.icon, small: "false", color: this.iconColor() }))) : ({}), h("div", { key: '4bf2dd629ee729f680f75e0bdb25d60ab29463cb', class: "bonusprogressbar-top-heading" }, h("h4", { key: 'c23baca714b75a70374c164c4af5fee0ac3df1a8', class: "bonusprogressbar-top-headline" }, this.heading, " ", h("strong", { key: 'aecfe379324384f06b23c648de1f902a6f233f62', class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext) : null)), h("div", { key: 'c4186c08abbf122d0895f030a836b5adbd4b4a6c', class: "bonusprogressbar-wrapper" }, h("progress", { key: '043df984daf3c135d4248c67e62d83ee4e1ea978', class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("slot", { key: 'adc85d4228cbbc28aa2846b78f753660cd7e366a' }))));
     }
     static get is() { return "pn-bonus-progressbar"; }
     static get originalStyleUrls() {

package/collection/components/input/pn-choice-button/pn-choice-button.js

@@ -26,7 +26,7 @@ export class PnChoiceButton {
         }
     }
     render() {
-        return (h(Host, { key: 'ee8c0f187d6ef73fb0686269fef381f272ae0d7e' }, h("input", { key: '3849a4c37e9182114136854f445fbf0af6852c9c', type: this.type, id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { key: '5aab99882ff06ac9d8583e6d0c7034cc611a0d0f', htmlFor: this.choiceid, class: "pn-choice-button" }, h("slot", { key: 'f42d62b727b8c570712cf95d0d20f96dd5707de6' }))));
+        return (h(Host, { key: 'a1a97f024a1817a0833541650309056b8d4765ea' }, h("input", { key: '028965fc99719face3b99d28e64915a089f5f6f9', type: this.type, id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { key: '372c83ee394b81b038300bdc19f8cccd15f14e48', htmlFor: this.choiceid, class: "pn-choice-button" }, h("slot", { key: '92fd81e2908be7d4eebc81c5c3676340bb596cee' }))));
     }
     static get is() { return "pn-choice-button"; }
     static get originalStyleUrls() {