@postnord/pn-marketweb-components 4.3.6 → 4.3.7

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

@@ -20,36 +20,41 @@ pn-fieldset .pn-fieldset-legend {
   line-height: 1.4;
   padding: 0;
 }
-pn-fieldset .pn-fieldset-helpertext {
+pn-fieldset .pn-fieldset-message {
   color: #5e554a;
-  margin: 0;
-}
-pn-fieldset .pn-fieldset-items {
-  padding: 0.75em 0;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0.25em 0 0 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75em;
+  gap: 0.25em;
+}
+pn-fieldset .pn-fieldset-message[hidden] {
+  display: none;
 }
-pn-fieldset .pn-fieldset-message-wrapper {
+pn-fieldset .pn-fieldset-error {
   display: flex;
-  gap: 0.75em;
-  color: #2d2013;
-  line-height: 1.4;
-  font-weight: 400;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0.25em;
 }
-pn-fieldset .pn-fieldset-message-wrapper[hidden] {
+pn-fieldset .pn-fieldset-error[hidden] {
   display: none;
 }
-pn-fieldset .pn-fieldset-message {
-  margin: 0;
+pn-fieldset .pn-fieldset-error > .pn-fieldset-message {
+  color: #a70707;
+}
+pn-fieldset .pn-fieldset-items {
+  padding: 0.75em 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
 }
 pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-legend,
-pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-helpertext,
 pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-message-wrapper {
   color: #a70707;
 }
 pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-legend > pn-icon .pn-icon-svg > path,
-pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-helpertext > pn-icon .pn-icon-svg > path,
 pn-fieldset .pn-fieldset[aria-invalid=true] > .pn-fieldset-message-wrapper > pn-icon .pn-icon-svg > path {
   fill: #a70707;
 }

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

@@ -8,6 +8,10 @@ import { alert_exclamation_circle, alert_info_circle } from "pn-design-assets/pn
 /**
  * The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
  * However, you may include any type of input such as textareas, toggles and selects.
+ *
+ * @slot - Default slot is the content of the fieldset, where you can add your inputs.
+ * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element. {@since v7.25.0}
+ * @slot error - Use this slot to add custom HTML inside of the `error` element. {@since v7.25.0}
  */
 export class PnFieldset {
     mo;
@@ -21,53 +25,56 @@ export class PnFieldset {
     legend;
     /** Text message underneath the legend for more instruction or hints on how to fill in controls correctly. */
     helpertext;
-    /** Give the fieldset a custom HTML id. */
-    fieldsetId = this.id;
+    /** Give the fieldset a HTML name. @category Native attributes */
+    name;
     /**
      * The id of the form you want the fieldset to be part of.
      * If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
+     * @category Native attributes
      */
     form;
-    /** Give the fieldset a HTML name. */
-    name;
-    /** Disable all of the inputs inside of the fieldset. */
+    /** Disable all of the inputs inside of the fieldset. @category Native attributes */
     disabled = false;
-    /** Set the fieldset as `invalid`, will add red error styles. */
+    /** Set the fieldset as `invalid`, will add red error styles. @category Features */
     invalid = false;
-    /** Error message, applies warning styles and icon. */
+    /** Error message, applies warning styles and icon. @category Features */
     error;
+    /** Set a custom ID for the fieldset. @since v7.25.0 @category HTML attributes  */
+    pnId = this.id;
+    /** Set a custom ID for the fieldset. @deprecated Use `pn-id` instead. @category HTML attributes */
+    fieldsetId = this.id;
     handleId() {
-        this.idHelpertext = `${this.fieldsetId}-helpertext`;
+        this.idHelpertext = `${this.getId()}-helpertext`;
     }
-    componentWillLoad() {
-        this.handleId();
+    connectedCallback() {
+        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
-    componentDidLoad() {
+    disconnectedCallback() {
         if (this.mo)
             this.mo.disconnect();
-        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
-        this.mo.observe(this.hostElement.querySelector('.pn-fieldset'), { childList: true, subtree: true });
     }
-    componentDidRender() {
-        /**
-         * Stencil has a known problem about rendering the `form` attribute.
-         * Setting it via setAttribute solves it for now.
-         * https://github.com/ionic-team/stencil/issues/2703
-         **/
-        if (this.form) {
-            this.hostElement.querySelector('fieldset')?.setAttribute('form', this.form);
-        }
+    getId() {
+        return this.pnId || this.fieldsetId || this.id;
+    }
+    hasHelpertext() {
+        const helpertextSlot = this.hostElement.querySelector('[slot="helpertext"]');
+        return !!this.helpertext || helpertextSlot?.textContent?.trim().length > 0;
     }
     hasError() {
-        return this.invalid || !!this.error;
+        const errorSlot = this.hostElement.querySelector('[slot="error"]');
+        return !!this.error || errorSlot?.textContent?.trim().length > 0;
+    }
+    isInvalid() {
+        return this.invalid || this.hasError();
     }
-    getSymbol() {
+    getIcon() {
         if (this.disabled)
             return alert_info_circle;
         return alert_exclamation_circle;
     }
     render() {
-        return (h(Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
+        return (h(Host, { key: '908a403f3fb8b4779393f4ca0a4f17f518ba53a7' }, h("fieldset", { key: '97b321f776944a0d27f1b1096a967b2c9d9c9fcd', id: this.getId(), name: this.name, form: this.form, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.hasHelpertext() ? this.idHelpertext : undefined, "aria-invalid": this.isInvalid().toString() }, h("legend", { key: 'a230416f33f787624f90977054c6492f1516dba6', class: "pn-fieldset-legend" }, this.legend), h("p", { key: '6911c6e63588c36bc0e314d7b3c8b81df2282579', id: this.idHelpertext, class: "pn-fieldset-message", hidden: !this.hasHelpertext() }, h("span", { key: '3370e13a7cf93741a4aa76880533b11c320aea03' }, this.helpertext), h("slot", { key: '0365489d121f3fcfa1211e3c2dcf2881f849940d', name: "helpertext" })), h("div", { key: '23d806e61d39d509ad07f0f68c002a1962332bf4', class: "pn-fieldset-items" }, h("slot", { key: 'a2ead121001e5f751f779957fbbb44716e64274c' })), h("div", { key: '075c709c13a8363be1b1a0b661e3621419a69333', class: "pn-fieldset-error", role: "alert", hidden: !this.hasError() }, h("pn-icon", { key: '0c4e969436033de98814135853e51388862e0812', icon: this.getIcon(), color: "warning" }), h("p", { key: 'd94095bee0a7e4fdc3962db9666dd4ffba7dfa50', class: "pn-fieldset-message" }, h("span", { key: '0c3808a66242f11afdc1ea5053517e965eeb3a93' }, this.error), h("slot", { key: 'ad9604de305ce00ef164cc999562707e923bdd83', name: "error" }))))));
     }
     static get is() { return "pn-fieldset"; }
     static get originalStyleUrls() {
@@ -120,7 +127,7 @@ export class PnFieldset {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "fieldsetId": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -129,16 +136,18 @@ export class PnFieldset {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Give the fieldset a custom HTML id."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Give the fieldset a HTML name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "fieldset-id",
-                "defaultValue": "this.id"
+                "attribute": "name"
             },
             "form": {
                 "type": "string",
@@ -151,7 +160,10 @@ export class PnFieldset {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "The id of the form you want the fieldset to be part of.\nIf you want the inputs inside to be associated with a specific form, you need to set on those elements directly."
                 },
                 "getter": false,
@@ -159,25 +171,6 @@ export class PnFieldset {
                 "reflect": false,
                 "attribute": "form"
             },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Give the fieldset a HTML name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -189,7 +182,10 @@ export class PnFieldset {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "Disable all of the inputs inside of the fieldset."
                 },
                 "getter": false,
@@ -209,7 +205,10 @@ export class PnFieldset {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
                     "text": "Set the fieldset as `invalid`, will add red error styles."
                 },
                 "getter": false,
@@ -229,13 +228,68 @@ export class PnFieldset {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
                     "text": "Error message, applies warning styles and icon."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "error"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the fieldset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id",
+                "defaultValue": "this.id"
+            },
+            "fieldsetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the fieldset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fieldset-id",
+                "defaultValue": "this.id"
             }
         };
     }
@@ -244,6 +298,12 @@ export class PnFieldset {
         return [{
                 "propName": "fieldsetId",
                 "methodName": "handleId"
+            }, {
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
 }

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

@@ -1,8 +1,14 @@
 /* Global utility variables */
 /* Input styles */
 /* Transition variables */
-pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container {
-  background-color: #e0f8ff;
+pn-file-upload .pn-file-upload {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+pn-file-upload .pn-file-upload-container {
+  position: relative;
 }
 pn-file-upload .pn-file-upload-input {
   position: absolute;
@@ -17,42 +23,30 @@ pn-file-upload .pn-file-upload-input {
 pn-file-upload .pn-file-upload-input:hover {
   cursor: pointer;
 }
-pn-file-upload .pn-file-upload-input:hover + .pn-dropzone-inner {
+pn-file-upload .pn-file-upload-input:hover + .pn-file-upload-dropzone {
   border-color: #005d92;
   background-color: #e0f8ff;
 }
-pn-file-upload .pn-file-upload-input:focus-visible + .pn-dropzone-inner {
+pn-file-upload .pn-file-upload-input:focus-visible + .pn-file-upload-dropzone {
   border-color: #005d92;
   outline-color: #005d92;
 }
 pn-file-upload .pn-file-upload-input:disabled {
   pointer-events: none;
 }
-pn-file-upload .pn-file-upload-input:disabled + .pn-dropzone-inner {
+pn-file-upload .pn-file-upload-input:disabled + .pn-file-upload-dropzone {
   pointer-events: none;
   background-color: #f3f2f2;
   border-color: #2d2013;
 }
-pn-file-upload .pn-file-upload-input:disabled + .pn-dropzone-inner .headline a {
-  color: #5e554a;
-}
-pn-file-upload .pn-file-upload-input:disabled + .pn-dropzone-inner .pn-icon-svg path {
+pn-file-upload .pn-file-upload-input:disabled + .pn-file-upload-dropzone .pn-icon-svg path {
   fill: #5e554a;
 }
-pn-file-upload .pn-file-upload-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-pn-file-upload .pn-file-upload-container .pn-dropzone-container {
-  position: relative;
-}
-pn-file-upload .pn-file-upload-container .pn-dropzone-inner {
+pn-file-upload .pn-file-upload-dropzone {
   position: relative;
   text-align: center;
   overflow: hidden;
-  padding: 2.5em;
+  padding: clamp(1em, 5vw, 2.5em);
   border: 0.0625em #969087 dashed;
   border-radius: 0.5em;
   display: flex;
@@ -66,12 +60,12 @@ pn-file-upload .pn-file-upload-container .pn-dropzone-inner {
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
 @media (prefers-reduced-motion: reduce) {
-  pn-file-upload .pn-file-upload-container .pn-dropzone-inner {
+  pn-file-upload .pn-file-upload-dropzone {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-pn-file-upload .pn-file-upload-container .pn-dropzone-inner .pn-ripple {
+pn-file-upload .pn-file-upload-dropzone .pn-ripple {
   animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
   position: absolute;
   border-radius: 50%;
@@ -87,21 +81,21 @@ pn-file-upload .pn-file-upload-container .pn-dropzone-inner .pn-ripple {
     opacity: 0;
   }
 }
-pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-hover] {
+pn-file-upload .pn-file-upload-dropzone[data-hover] {
   background-color: #e0f8ff;
   border-color: #005d92;
 }
-pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-invalid] {
+pn-file-upload .pn-file-upload-dropzone[data-invalid] {
   border-color: #a70707;
 }
-pn-file-upload .pn-file-upload-container .pn-dropzone-inner .pn-file-upload-dropzone {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5em;
+pn-file-upload .pn-file-upload-title {
+  color: #2d2013;
+}
+pn-file-upload .pn-file-upload-subtitle {
+  color: #5e554a;
+  font-size: 0.75em;
 }
-pn-file-upload .files-list {
+pn-file-upload .pn-file-upload-files {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -109,11 +103,7 @@ pn-file-upload .files-list {
   flex-direction: column;
   gap: 1em;
 }
-pn-file-upload .files-list .filename {
-  font-weight: 400;
-  font-size: 0.75em;
-}
-pn-file-upload .files-list .files-list-item {
+pn-file-upload .pn-file-upload-file {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -123,30 +113,27 @@ pn-file-upload .files-list .files-list-item {
   padding: 1em;
   border-radius: 0.5em;
 }
-pn-file-upload .files-list .files-list-item .file-list-item-title {
+pn-file-upload .pn-file-upload-file-title {
   display: flex;
   align-items: center;
   gap: 0.5em;
-  margin-right: 0.5em;
-}
-pn-file-upload .files-list .files-list-item > pn-progress-bar {
-  margin-right: 25em;
   flex: 1;
+  margin-right: 0.5em;
 }
-pn-file-upload .files-list .files-list-item.files-list-item-error {
-  color: #a70707;
-  background-color: #fdefee;
+pn-file-upload .pn-file-upload-file-name {
+  font-weight: 400;
+  font-size: 0.75em;
 }
-pn-file-upload .files-list .files-list-item-text-error {
+pn-file-upload .pn-file-upload-file-error {
   color: #a70707;
   font-size: 0.875em;
   font-weight: 300;
   margin-top: 0.25em;
 }
-pn-file-upload .pn-file-upload-title {
-  color: #2d2013;
+pn-file-upload .pn-file-upload-file[data-error] {
+  color: #a70707;
+  background-color: #fdefee;
 }
-pn-file-upload .pn-file-upload-subtitle {
-  color: #5e554a;
-  font-size: 0.75em;
+pn-file-upload .pn-file-upload-file pn-progress-bar {
+  flex: 1;
 }