@postnord/pn-marketweb-components 4.3.5 → 4.3.7

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

@@ -20,6 +20,8 @@ pn-radio-button .pn-radio-label {
 pn-radio-button .pn-radio-helpertext {
   color: #5e554a;
   margin: 0 0 0.5em 0;
+  display: flex;
+  flex-direction: column;
 }
 pn-radio-button .pn-radio-helpertext:last-child {
   margin: 0;
@@ -229,7 +231,7 @@ pn-radio-button > input[type=radio]:disabled + .pn-radio[data-tile] {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-radio-button > input[type=radio]:disabled + .pn-radio[data-tile] > pn-icon > .pn-icon-svg path {
+pn-radio-button > input[type=radio]:disabled + .pn-radio[data-tile] > pn-icon .pn-icon-svg path {
   fill: #5e554a;
 }
 pn-radio-button > input[type=radio]:disabled + .pn-radio[data-tile] > .pn-radio-content > .pn-radio-label {

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

@@ -29,20 +29,16 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
     label;
     /** This adds an optional helpertext under the label. */
     helpertext;
-    /** This will be emitted on change and input events. */
+    /** This will be emitted on change and input events. @category Native attributes */
     value;
-    /** The name of the radio group. */
+    /** The name of the radio group. @category Native attributes */
     name;
-    /** Check the radio. */
+    /** Programmatically check the input. @category Native attributes */
     checked = false;
-    /** A unique HTML ID for the radio. */
-    radioid = this.id;
-    /** Set the radio as required. @category State */
+    /** Set the radio as required. @category Native attributes */
     required = false;
-    /** Disable the radio. @category State */
+    /** Disable the radio. @category Native attributes */
     disabled = false;
-    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. @category State */
-    invalid = false;
     /**
      * Turn the radio into a clickable tile. A border and padding is added.
      *
@@ -50,7 +46,7 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
      * An exception is made when using the `tile` + `expand` props together,
      * which allows you to use interactive elements.
      *
-     * @category Tile
+     * @category Features
      */
     tile = false;
     /**
@@ -60,17 +56,44 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
      * The prop `tile` must be used at the same time.
      * @see {@link tile}
      * @since v7.17.0
-     * @category Tile
+     * @category Features
      */
     expand = false;
     /**
      * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
      * @see {@link tile}
-     * @category Tile
+     * @category Features
      */
     icon = null;
+    /**
+     * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
+     * @category Features
+     */
+    invalid = false;
+    /** A unique HTML ID for the radio. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /**
+     * A unique HTML ID for the radio.
+     * @deprecated Use `pn-id` instead.
+     * @category HTML attributes
+     */
+    radioid;
     handleId() {
-        this.idHelpertext = `${this.radioid}-helpertext`;
+        this.idHelpertext = `${this.getId()}-helpertext`;
     }
     handleChecked(checked) {
         this.checked = checked ?? this.radioInput.checked;
@@ -96,12 +119,20 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
         if (isSameRadioGroup)
             this.checked = isSameRadio;
     }
-    componentWillLoad() {
-        this.handleId();
-    }
+    /**
+     * This is the same as the native `change` event, but without bubbling.
+     * This is useful when you want to listen to the event directly on the `pn-radio-button` element without
+     * having to worry about catching events from nested pn-radio-buttons.
+     *
+     * @since v7.25.0
+     **/
+    pnRadioChange;
     componentDidLoad() {
         requestAnimationFrame(() => this.displayContent() && this.checked && this.openDropdown(this.contentArea));
     }
+    getId() {
+        return this.pnId || this.radioid || this.id;
+    }
     uncheckOtherRadios() {
         if (!this.name)
             return;
@@ -128,8 +159,14 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
     displayContent() {
         return this.tile && this.expand;
     }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     render() {
-        return (h(Host, { key: 'f386b0de0377d3dbe6891a2396d32b91a808d53c' }, h("input", { key: '189e352a198275f4dbd733425166e9cb2ed417ef', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: '710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '2d6bd1b03ee6565b88773c60a529ae2c5be89ffd', class: "pn-radio-button" }, h("div", { key: '8b15488acb65132b2498d361d320bb804af793de', class: "pn-radio-outer" }, h("div", { key: '64ebbe9b4d18f158a43bb5d82116ef4b19325ca1', class: "pn-radio-inner" }))), h("p", { key: '3b5ed02eeae60cff45b3b4999055c6d853a6c22f', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'd5f3c5f59630407a45cc48fcb26e60fe7419c73c', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: 'd4329417f178f6e7bcff365a1c051ebaa51b0447', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2', name: "helpertext" })), h("slot", { key: 'edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7' })), this.displayIcon() && h("pn-icon", { key: 'b9cd0ab07c691020efe39e8bb6ec39d02d5be826', icon: this.icon, color: "gray900" }), h("div", { key: '89655e67304498950e11c0388fddbbde350239a1', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'eeebaf7c0b1fe8327810faec62877888cb6ff95d', class: "pn-radio-area" }, h("slot", { key: 'c997ee7e8ef719ff4b830df30a414cea637a54ff', name: "content" }))))));
+        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" }))))));
     }
     static get is() { return "pn-radio-button"; }
     static get originalStyleUrls() {
@@ -193,7 +230,10 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "This will be emitted on change and input events."
                 },
                 "getter": false,
@@ -212,7 +252,10 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "The name of the radio group."
                 },
                 "getter": false,
@@ -231,8 +274,11 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Check the radio."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Programmatically check the input."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,27 +286,30 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "attribute": "checked",
                 "defaultValue": "false"
             },
-            "radioid": {
-                "type": "string",
+            "required": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "A unique HTML ID for the radio."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the radio as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "radioid",
-                "defaultValue": "this.id"
+                "attribute": "required",
+                "defaultValue": "false"
             },
-            "required": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -273,17 +322,17 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the radio as required."
+                    "text": "Disable the radio."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "tile": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -296,17 +345,17 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Disable the radio."
+                    "text": "Turn the radio into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "tile",
                 "defaultValue": "false"
             },
-            "invalid": {
+            "expand": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -318,18 +367,50 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "see",
+                            "text": "{@link tile }"
+                        }, {
+                            "name": "since",
+                            "text": "v7.17.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio."
+                    "text": "Allow the radio to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "expand",
                 "defaultValue": "false"
             },
-            "tile": {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "{@link tile }"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "null"
+            },
+            "invalid": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -342,46 +423,67 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Tile"
+                            "text": "Features"
                         }],
-                    "text": "Turn the radio into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
+                    "text": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tile",
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
-            "expand": {
-                "type": "boolean",
+            "pnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "see",
-                            "text": "{@link tile }"
+                            "name": "since",
+                            "text": "v7.25.0"
                         }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "A unique HTML ID for the radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            },
+            "pnAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
                             "name": "since",
-                            "text": "v7.17.0"
+                            "text": "v7.25.0"
                         }, {
                             "name": "category",
-                            "text": "Tile"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Allow the radio to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "expand",
-                "defaultValue": "false"
+                "attribute": "pn-aria-label"
             },
-            "icon": {
+            "pnAriaLabelledby": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -393,27 +495,85 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "see",
-                            "text": "{@link tile }"
+                            "name": "since",
+                            "text": "v7.25.0"
                         }, {
                             "name": "category",
-                            "text": "Tile"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work."
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon",
-                "defaultValue": "null"
+                "attribute": "pn-aria-labelledby"
+            },
+            "radioid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "A unique HTML ID for the radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radioid"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pnRadioChange",
+                "name": "pnRadioChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }],
+                    "text": "This is the same as the native `change` event, but without bubbling.\nThis is useful when you want to listen to the event directly on the `pn-radio-button` element without\nhaving to worry about catching events from nested pn-radio-buttons."
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                }
+            }];
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
                 "propName": "radioid",
                 "methodName": "handleId"
+            }, {
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }, {
                 "propName": "checked",
                 "methodName": "handleChecked"

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

@@ -49,6 +49,9 @@ pn-range .pn-range-header {
   flex: 1 1 100%;
   width: 100%;
 }
+pn-range .pn-range-header:empty {
+  display: none;
+}
 pn-range .pn-range-label {
   cursor: pointer;
   display: flex;