@postnord/pn-marketweb-components 4.4.0 → 4.5.1

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-skeleton-loader/pn-skeleton-loader.js

@@ -0,0 +1,291 @@
+/*!
+ * Built with Stencil
+ * By PostNord.
+ */
+import { h, Host } from "@stencil/core";
+/** Display a skeleton loader placeholder to indicate content is loading. */
+export class PnSkeletonLoader {
+    /** The skeleton shape to render.
+     */
+    type = 'box';
+    /** Custom width (CSS value). Overrides type default.
+     */
+    width;
+    /** Custom height (CSS value). Overrides type default.
+     */
+    height;
+    /** Custom border-radius (CSS value). Overrides type default.
+     */
+    borderRadius;
+    /** Small size variant for type="chip".
+     */
+    small = false;
+    /** Large size variant for type="chip".
+     */
+    large = false;
+    /** Number of lines for type="paragraph" or body rows for type="table". Does not do anything for other types. Default is 3.
+     */
+    lines = 3;
+    /** When true, masks slotted content with shimmer instead of rendering a skeleton shape. The slotted content keeps its layout but text and images are hidden behind the shimmer effect.
+     */
+    automatic = false;
+    /** When true, hides the skeleton. For automatic mode, the slotted content is shown without masking.
+     */
+    hide = false;
+    getStyle() {
+        const style = {};
+        if (this.width)
+            style['width'] = this.width;
+        if (this.height)
+            style['height'] = this.height;
+        if (this.borderRadius)
+            style['border-radius'] = this.borderRadius;
+        return style;
+    }
+    renderParagraph() {
+        const rows = [];
+        for (let i = 0; i < this.lines; i++) {
+            const isLast = i === this.lines - 1;
+            rows.push(h("div", { class: "pn-skeleton-loader-line", style: isLast ? { width: '75%' } : undefined }));
+        }
+        return rows;
+    }
+    renderTable() {
+        const rows = [];
+        for (let i = 0; i < this.lines; i++) {
+            rows.push(h("div", { class: "pn-skeleton-loader-table-row" }));
+        }
+        return rows;
+    }
+    render() {
+        const style = this.getStyle();
+        if (this.automatic) {
+            return (h(Host, null, h("div", { class: {
+                    'pn-skeleton-loader--automatic': !this.hide,
+                }, role: !this.hide ? 'status' : undefined, "aria-busy": !this.hide ? 'true' : undefined, "aria-label": !this.hide ? 'Loading' : undefined }, h("slot", null))));
+        }
+        if (this.hide) {
+            return h(Host, { style: { display: 'none' } });
+        }
+        if (this.type === 'paragraph') {
+            return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--paragraph", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, this.renderParagraph())));
+        }
+        if (this.type === 'table') {
+            return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--table", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-table-header" }), this.renderTable())));
+        }
+        if (this.type === 'card') {
+            return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--card", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-card-image" }), h("div", { class: "pn-skeleton-loader-card-content" }, this.renderParagraph()))));
+        }
+        if (this.type === 'tile') {
+            return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--tile", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-tile-circle" }), h("div", { class: "pn-skeleton-loader-tile-content" }, h("div", { class: "pn-skeleton-loader-line" }), h("div", { class: "pn-skeleton-loader-line", style: { width: '75%' } })))));
+        }
+        if (this.type === 'header') {
+            return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--header", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-header-back" }), h("div", { class: "pn-skeleton-loader-header-heading" }), h("div", { class: "pn-skeleton-loader-header-subheading" }))));
+        }
+        const classes = {
+            'pn-skeleton-loader': true,
+            [`pn-skeleton-loader--${this.type}`]: true,
+            'pn-skeleton-loader--small': this.small,
+            'pn-skeleton-loader--large': this.large,
+        };
+        return (h(Host, null, h("div", { class: classes, style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" })));
+    }
+    static get is() { return "pn-skeleton-loader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-skeleton-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-skeleton-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PnSkeletonLoaderType",
+                    "resolved": "\"avatar\" | \"box\" | \"button\" | \"card\" | \"chip\" | \"header\" | \"input\" | \"paragraph\" | \"table\" | \"text\" | \"tile\"",
+                    "references": {
+                        "PnSkeletonLoaderType": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-components/web-components/src/components/feedback/pn-skeleton-loader/pn-skeleton-loader.tsx",
+                            "id": "src/components/feedback/pn-skeleton-loader/pn-skeleton-loader.tsx::PnSkeletonLoaderType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The skeleton shape to render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'box'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom width (CSS value). Overrides type default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom height (CSS value). Overrides type default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom border-radius (CSS value). Overrides type default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius"
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Small size variant for type=\"chip\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "small",
+                "defaultValue": "false"
+            },
+            "large": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Large size variant for type=\"chip\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "large",
+                "defaultValue": "false"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of lines for type=\"paragraph\" or body rows for type=\"table\". Does not do anything for other types. Default is 3."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "3"
+            },
+            "automatic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, masks slotted content with shimmer instead of rendering a skeleton shape. The slotted content keeps its layout but text and images are hidden behind the shimmer effect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "automatic",
+                "defaultValue": "false"
+            },
+            "hide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, hides the skeleton. For automatic mode, the slotted content is shown without masking."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-input-chip/pn-input-chip.css

@@ -0,0 +1,109 @@
+/* Global utility variables */
+/* Input styles */
+/* Transition variables */
+pn-input-chip {
+  display: inline-block;
+}
+
+pn-input-chip .pn-input-chip {
+  position: relative;
+  font-size: 1em;
+  font-weight: 500;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: 0.5em 0.5em 0.5em 1em;
+  border: 0.0625em solid #969087;
+  border-radius: 0.5em;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition-property: border-color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-input-chip .pn-input-chip {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+pn-input-chip .pn-input-chip {
+  outline: 0.2rem solid transparent;
+  outline-offset: 0.2rem;
+}
+pn-input-chip .pn-input-chip[data-icon] {
+  padding-left: 0.75em;
+}
+pn-input-chip .pn-input-chip[data-icon][data-small] {
+  padding-left: 0.5em;
+}
+pn-input-chip .pn-input-chip[data-icon][data-large] {
+  padding-left: 1em;
+}
+pn-input-chip .pn-input-chip[data-small] {
+  padding: 0.25em 0.25em 0.25em 0.75em;
+}
+pn-input-chip .pn-input-chip[data-small] .pn-input-chip-label {
+  line-height: 1.25em;
+  font-size: 0.875em;
+}
+pn-input-chip .pn-input-chip[data-large] {
+  padding: 0.6875em 0.6875em 0.6875em 1.25em;
+}
+pn-input-chip .pn-input-chip:hover {
+  background-color: #effbff;
+  border-color: #005d92;
+}
+pn-input-chip .pn-input-chip:hover .pn-input-chip-label {
+  color: #005d92;
+}
+pn-input-chip .pn-input-chip:hover .pn-input-chip-icon .pn-icon-svg path {
+  fill: #005d92;
+}
+pn-input-chip .pn-input-chip:focus-visible {
+  outline-color: #005d92;
+  border-color: #005d92;
+}
+pn-input-chip .pn-input-chip:active {
+  background-color: #e0f8ff;
+  border-color: #005d92;
+}
+pn-input-chip .pn-input-chip:active .pn-input-chip-label {
+  color: #0d234b;
+}
+pn-input-chip .pn-input-chip:active .pn-input-chip-icon .pn-icon-svg path {
+  fill: #0d234b;
+}
+pn-input-chip .pn-input-chip:disabled {
+  background-color: #f3f2f2;
+  border-color: #f3f2f2;
+  cursor: not-allowed;
+}
+pn-input-chip .pn-input-chip:disabled .pn-input-chip-label {
+  color: #5e554a;
+  margin-right: 0.5em;
+}
+pn-input-chip .pn-input-chip:disabled .pn-input-chip-icon .pn-icon-svg path {
+  fill: #5e554a;
+}
+pn-input-chip .pn-input-chip-icon {
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+}
+pn-input-chip .pn-input-chip-label {
+  color: #005d92;
+  line-height: 1.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+pn-input-chip .pn-input-chip-close {
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-input-chip/pn-input-chip.js

@@ -0,0 +1,232 @@
+/*!
+ * Built with Stencil
+ * By PostNord.
+ */
+import { h, Host } from "@stencil/core";
+import { close_small } from "pn-design-assets/pn-assets/icons";
+import { uuidv4 } from "../../../globals/helpers";
+/**
+ * The `pn-input-chip` represents a confirmed user input value that can be removed.
+ * It is visually similar to the `pn-choice-chip` but its only action is deletion.
+ * Clicking anywhere on the chip removes it.
+ */
+export class PnInputChip {
+    id = `pn-input-chip-${uuidv4()}`;
+    /** The chip label text. */
+    label;
+    /** Optional value identifier emitted with the delete event. @category Native attributes */
+    value;
+    /** Add a leading icon to the chip. @category Features */
+    icon;
+    /** Use the small size for the input chip. @category Features */
+    small = false;
+    /** Use the large size for the input chip. @category Features */
+    large = false;
+    /** Disable the chip. When disabled, the chip is not interactive. @category Native attributes */
+    disabled = false;
+    /** Emitted when the chip is clicked (removed). */
+    pnDelete;
+    /**
+     * A unique HTML ID for the input chip.
+     * @category HTML attributes
+     */
+    pnId;
+    handleDelete = () => {
+        if (!this.disabled) {
+            this.pnDelete.emit({ label: this.label, value: this.value });
+        }
+    };
+    getId() {
+        return this.pnId || this.id;
+    }
+    render() {
+        return (h(Host, { key: '38bf6d618ac176e63fc2da44b20aa45b744c3ff8' }, h("button", { key: '43a8fa2b75eedefef49ce8881c72e86cf1323486', type: "button", class: "pn-input-chip", id: this.getId(), "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large, disabled: this.disabled, "aria-label": `Remove ${this.label}`, onClick: this.handleDelete }, !!this.icon && h("pn-icon", { key: '53b015eba2c0a074febc78089bcdefc9cb799ad1', class: "pn-input-chip-icon", icon: this.icon }), h("span", { key: '0baa4ef7ebe84ac5102f295c02ad3f0e08a6516e', class: "pn-input-chip-label" }, this.label), !this.disabled && h("pn-icon", { key: '320c04a05bb38411734a77c085bd536c29296423', color: "blue700", icon: close_small }))));
+    }
+    static get is() { return "pn-input-chip"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-input-chip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-input-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The chip label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Optional value identifier emitted with the delete event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Add a leading icon to the chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Use the small size for the input chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "small",
+                "defaultValue": "false"
+            },
+            "large": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Use the large size for the input chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "large",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the chip. When disabled, the chip is not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "A unique HTML ID for the input chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pnDelete",
+                "name": "pnDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the chip is clicked (removed)."
+                },
+                "complexType": {
+                    "original": "{ label: string; value?: string }",
+                    "resolved": "{ label: string; value?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/pn-multiselect.js

@@ -646,7 +646,7 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
         return (h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, h("span", null, this.label), !!this.optionsChecked()?.length && (h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
     }
     render() {
-        return (h(Host, { key: '326b1351c1600920a89b49a4ca04fb48af112bb7' }, h("fieldset", { key: '069b0689d499ad99b65f29597cc3968a47a3fc86', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: '0a96f922421c6a1adb664714ec0d593cfdf950e5', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '3c6cadb7ff3dbc67fb8bab786133d64ad330c5d7', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '20bb5b6b273bea94903648a3465e14cf8dad2f77', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '905179f50885d27bc7f41df667be93731dd5e4be', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.getId(), class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '635d97c6b8f780e6bd6daab225a97d1057b4bf0d', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '77e9862561cd9ed80c5aa1b386ae772476a34e76', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.getId(), "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '28092398e64c04af103142d8f459579eb2b70a1b', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), h("p", { key: '17d396f1b3175b502ce8d54c6ec059588bbe8128', id: this.idHelper, class: "pn-multiselect-text", hidden: this.hideHelpertext() }, h("span", { key: '693ba0a687b9b9766249e6703d0252beeeb762e9' }, this.helpertext), h("slot", { key: 'a70b1dff00b4ec936461f73354ebe18ce1a0a0c1', name: "helpertext" })), h("p", { key: '94c44db96a270fd7d3180c6dfddb53a46e85c2aa', id: this.idError, class: "pn-multiselect-text", role: "alert", hidden: this.hideError() }, h("span", { key: '0297ed1e18f374c0c3f0909a1ee5685b75c73a7c' }, this.error), h("slot", { key: '9c545b960d440978e46858b69ac86ad0112510c7', name: "error" })), this.search && this.renderChips(), h("slot", { key: '9551563c6a72fa6e06ce473eadbc73a0428b551e' }), this.search && (h("p", { key: '96863325f57e613f0272d652e05a70e1c5c35dde', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '21b84e0522ca16702a9ccabb071d30c0317631ef' }, this.srMessage))))));
+        return (h(Host, { key: 'a0ecbc763c7fe2e742a2737a13ccb25049ca5d2c' }, h("fieldset", { key: 'e34a6c4a098b8509985300c6101f28810a2624e5', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: '4af7e657d83cd4eb9d1f7aef7c41e91c204e8b49', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'f5d0ab6e61dfac0c19a3ba86230c3da6e14efde5', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '2bb3a5906b9624c14b912dae42ab0f266be28708', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '40bf05bdcdfc7d20d11c7d463863727e5d6aff2e', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.getId(), class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: 'cb667952d2f8c5d2d651781f15ff74b6b775e042', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '94b05fea39ded60eab60763fdb84a9b711ae8162', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.getId(), "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: 'eeaafee94ca176871092ceeb80d963fccc31dcec', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), h("p", { key: '2b769d32ed6692b99a19c125c5177eb375095e68', id: this.idHelper, class: "pn-multiselect-text", hidden: this.hideHelpertext() }, h("span", { key: 'dc43a1985211d85923e3085d44cb2b368e2582a4' }, this.helpertext), h("slot", { key: 'f0f4cd86c528644a133f7c9db51251a77265e15f', name: "helpertext" })), h("p", { key: '718171d4d2c510d70c562a188ef25eacf60ea039', id: this.idError, class: "pn-multiselect-text", role: "alert", hidden: this.hideError() }, h("span", { key: '2b0cfd1042189fb60d96e3d43001f3ff6794cb4e' }, this.error), h("slot", { key: 'e381d819a3de5c550816309f097ae37c713b604e', name: "error" })), this.search && this.renderChips(), h("slot", { key: '6f7731063585b04cc851a5790ec77fff209baa03' }), this.search && (h("p", { key: 'f4df41d21ebc5219a86fbc90947285635df86d13', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '6d24d915b81ef53a1eb210d3c7d0a85184ea1e88' }, this.srMessage))))));
     }
     static get is() { return "pn-multiselect"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-radio-button/pn-radio-button.js

@@ -166,7 +166,7 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
         return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
     }
     render() {
-        return (h(Host, { key: '4cc4729921eef5f9076bb2b3ce409d105c37e7fc' }, h("input", { key: '5081a5a1be4ebd3bfeca8559c3973b60e6257f6c', type: "radio", id: this.getId(), class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, onChange: event => this.pnRadioChange.emit(event), ref: el => (this.radioInput = el) }), h("div", { key: 'a933fc7fe850449df7c3c94ee387fa882b905fac', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '83f27a39013bd0674d1155aced4258da5c2cba58', class: "pn-radio-button" }, h("div", { key: 'fab4f7fbe57a2e9ae9c7cae444c2d603b23b6acb', class: "pn-radio-outer" }, h("div", { key: 'd672da19315841a7e1a46ada320739d8ced84a93', class: "pn-radio-inner" }))), h("div", { key: 'e863aa9e7396ccead7fed2227bbee45ca96c2187', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: '221ea43c549af80b6b8c54fc611b0b48fe709f17', htmlFor: this.getId(), class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("p", { key: '9a1cc75ef224d5d6830c35ee20742a14ef2268ba', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'fb77032b6ce781fbc45bc9a5914b7c64b6cb3fd5', name: "helpertext" })), h("slot", { key: '73d298a9ef742031d83de42b737f5a6289ec692d' })), this.displayIcon() && h("pn-icon", { key: '8850771543bb69709196805cb46096bd706d32f7', icon: this.icon, color: "gray900" }), h("div", { key: '9ac6ed23cc447f4f7ed1bd0ab5311a211fc2f25d', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'b952ea9f31572a6d5933f3ea3342283aaf9901e4', class: "pn-radio-area" }, h("slot", { key: '41e31f73b12b07ae647ccf89abcac486e5820592', name: "content" }))))));
+        return (h(Host, { key: '52305f6cf3826500739510f0cf1fd0ab2abc7dc2' }, h("input", { key: 'cc4f799fb58073ca59af798601d70baf88263aca', type: "radio", id: this.getId(), class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, onChange: event => this.pnRadioChange.emit(event), ref: el => (this.radioInput = el) }), h("div", { key: '05e2a10face9b2ca1b0ced1f6f38f1173f15d1c0', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: 'b5274e03c47ac3d53103af945b3e8ce211eec827', class: "pn-radio-button" }, h("div", { key: '1f4a592f7d243312e00259f67ce60836a449f42d', class: "pn-radio-outer" }, h("div", { key: '05cb629b8c45724c6831271a40620ba5ec6e66ef', class: "pn-radio-inner" }))), h("div", { key: 'a91835bcaa01888fd2a2b1b768def02203b58038', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'c11016410fd25dbb3288640ef5f239553991f0f8', htmlFor: this.getId(), class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("p", { key: '6d4d46978e2a4f326af1558c4c6dd04c3c29956b', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '3167af1f4d47e1a9c8010bc9316b32c5499f66ee', name: "helpertext" })), h("slot", { key: '1a4b466d8a8ba4e06ae96977e33fad1c502d5ea2' })), this.displayIcon() && h("pn-icon", { key: '67f80f5c1db91e7310cf5baefdf6f3c346c83397', icon: this.icon, color: "gray900" }), h("div", { key: 'e296239a734c33c40035b489d79b1edf44f1a2b7', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'f6245b5b2c9611da4b59a3fdb3047fe8365f1678', class: "pn-radio-area" }, h("slot", { key: 'b985712da1ea4504025d17cc507588f14d9ebfff', name: "content" }))))));
     }
     static get is() { return "pn-radio-button"; }
     static get originalStyleUrls() {