@postnord/pn-marketweb-components 4.3.6 → 4.3.8

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.js

@@ -13,25 +13,30 @@ export class PnSegment {
     hostElement;
     /** The segment label, same as the slot. @since v7.7.0 */
     label;
-    /** The segment controller name. */
-    name;
-    /** The segment value. */
+    /** The segment value. @category Native attributes */
     value;
+    /** The segment controller name. @category Native attributes */
+    name;
+    /** Disable the segment. @since v7.7.0 @category Native attributes */
+    disabled = false;
     /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
     selected = false;
-    /** A unique HTML id. */
-    segmentid = this.id;
-    /** The SVG content of the icon you want. */
+    /** The SVG content of the icon you want. @category Features */
     icon;
-    /** Disable the segment. @since v7.7.0 */
-    disabled = false;
+    /** Set a custom ID for the segment. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /** Set a custom ID for the segment. @deprecated Use `pn-id` instead. @category HTML attributes */
+    segmentid;
     /** This event is used by the `pn-segmented-control` component. Do not use manually. */
     segmentHover;
     handleHover(mouse) {
         this.segmentHover.emit(mouse);
     }
+    getId() {
+        return this.pnId || this.segmentid || this.id;
+    }
     render() {
-        return (h(Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
+        return (h(Host, { key: 'c1ca80ac494bc4b75dea79723d12650d18c47e98', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: 'c3bdb057f6ecb46a0a343da3c54331375a6c0e35', class: "pn-segment", id: this.getId(), name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '06f7c91d9440c867a98642246a7ef9c958f2eb1b', htmlFor: this.getId(), class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'caf831966dd81f60ac72f2c3a18ca1afd085d07c', icon: this.icon, color: "blue700" }), h("span", { key: '0d14699fcadef37bcb33d43464db9e5217d0d202', class: "pn-segment-text" }, this.label, h("slot", { key: '7e7398bba9a088764e844dc7856aec2ec325161b' })))));
     }
     static get is() { return "pn-segment"; }
     static get originalStyleUrls() {
@@ -68,7 +73,7 @@ export class PnSegment {
                 "reflect": false,
                 "attribute": "label"
             },
-            "name": {
+            "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -79,15 +84,18 @@ export class PnSegment {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The segment controller name."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The segment value."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "value"
             },
-            "value": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -98,13 +106,42 @@ export class PnSegment {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The segment value."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The segment controller name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.7.0"
+                        }, {
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the segment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
@@ -129,7 +166,7 @@ export class PnSegment {
                 "attribute": "selected",
                 "defaultValue": "false"
             },
-            "segmentid": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -138,18 +175,20 @@ export class PnSegment {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "A unique HTML id."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "The SVG content of the icon you want."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "segmentid",
-                "defaultValue": "this.id"
+                "attribute": "icon"
             },
-            "icon": {
+            "pnId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -160,36 +199,44 @@ export class PnSegment {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The SVG content of the icon you want."
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the segment."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "pn-id"
             },
-            "disabled": {
-                "type": "boolean",
+            "segmentid": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.7.0"
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
                         }],
-                    "text": "Disable the segment."
+                    "text": "Set a custom ID for the segment."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "segmentid"
             }
         };
     }

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

@@ -64,6 +64,17 @@ pn-select .pn-select-icon {
   border-radius: 50%;
   background-color: transparent;
 }
+pn-select .pn-select-icon .pn-icon-svg {
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  pn-select .pn-select-icon .pn-icon-svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 pn-select .pn-select-icon[data-default] {
   right: 1em;
 }
@@ -79,17 +90,6 @@ pn-select .pn-select-icon[data-error] {
 pn-select .pn-select-icon[data-error] ~ .pn-select-element {
   padding-right: 5.5em;
 }
-pn-select .pn-select-icon > .pn-icon-svg {
-  transition-property: transform;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-}
-@media (prefers-reduced-motion: reduce) {
-  pn-select .pn-select-icon > .pn-icon-svg {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 pn-select .pn-select-element {
   cursor: pointer;
   -webkit-appearance: none;
@@ -166,8 +166,12 @@ pn-select .pn-select-element:disabled {
   color: #5e554a;
   background-color: #f3f2f2;
   border-color: #f3f2f2;
+  pointer-events: none;
+}
+pn-select .pn-select-element:disabled:hover {
+  background-color: #f3f2f2;
 }
-pn-select .pn-select-element[data-placeholder] {
+pn-select .pn-select-element:has(option[value=""]:checked) {
   color: #5e554a;
   font-weight: normal;
 }
@@ -179,7 +183,7 @@ pn-select .pn-select-no-results {
   margin: 0;
   padding: 0.75em;
 }
-pn-select .pn-select-helper {
+pn-select .pn-select-text {
   color: #5e554a;
   font-size: 0.875em;
   font-weight: 400;
@@ -188,7 +192,7 @@ pn-select .pn-select-helper {
   flex-direction: column;
   gap: 0.25em;
 }
-pn-select .pn-select-helper[role=alert] {
+pn-select .pn-select-text[role=alert] {
   color: #a70707;
 }
 pn-select .pn-select[data-error] > .pn-select-label {