@postnord/pn-marketweb-components 4.3.6 → 4.3.7

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

@@ -9,75 +9,129 @@ import { uuidv4 } from "../../../globals/helpers";
  * This means you can use native events to listen to the input.
  *
  * @nativeInput Use the `input` event to listen to content being modified by the user.
+ *
+ * @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
+ * @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
  */
 export class PnTextarea {
     id = `pn-textarea-${uuidv4()}`;
     idHelper = `${this.id}-text`;
+    idError = `${this.id}-error`;
     hostElement;
     /** The label describing the textarea. */
     label;
-    /** The textarea content, do not provide slotted content. */
-    value = '';
     /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
     helpertext;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact = false;
-    /** A unique ID connecting the element to the label. @category HTML Textarea */
-    textareaid = this.id;
-    /** HTML name. @category HTML Textarea */
+    /** The textarea content, do not provide slotted content. @category Native attributes */
+    value = '';
+    /** HTML name. @category Native attributes */
     name;
-    /** Set the associated form. @category HTML Textarea*/
+    /** Placeholder for the textarea. @category Native attributes */
+    placeholder;
+    /** Set the associated form. @category Native attributes */
     form;
-    /** Set the row count for the textarea. @category HTML Textarea */
+    /** Set the row count for the textarea. @category Native attributes */
     rows = 2;
-    /** Set the col count for the textarea. @category HTML Textarea */
+    /** Set the col count for the textarea. @category Native attributes */
     cols = 20;
-    /** Set the wrap control. @category HTML Textarea */
+    /** Set the wrap control. @category Native attributes */
     wrap = 'soft';
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength;
-    /** Allow the browser to autocomplete the textarea. @category HTML Textarea */
+    /** Allow the browser to autocomplete the textarea. @category Native attributes */
     autocomplete = 'off';
-    /** Allow the browser to spellcheck the textarea. @category HTML Textarea */
+    /** Allow the browser to spellcheck the textarea. @category Native attributes */
     spellcheck = false;
-    /** Placeholder for the textarea. @category HTML Textarea */
-    placeholder;
-    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
+    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category Native attributes */
     resize = false;
-    /** Make the textarea required. @category HTML Textarea */
+    /** Make the textarea required. @category Native attributes */
     required = false;
-    /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
+    /** Disable the textarea. @category Native attributes */
+    disabled = false;
+    /** Make the textarea readonly. @category Native attributes */
+    readonly = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Set the textarea as `valid`, will make the Label and focus rings green. @category Features */
     valid = false;
-    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
+    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category Features */
     invalid = false;
-    /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
+    /** Same as `invalid`, but will display the string as an error message under the textarea. @category Features */
     error;
-    /** Disable the textarea. @category State */
-    disabled = false;
-    /** Make the textarea readonly. @category State */
-    readonly = false;
+    /** Set a custom ID for the textarea. @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;
+    /** Set a custom ID for the textarea. @deprecated Use `pn-id` instead. @category HTML attributes */
+    textareaid;
     handleId() {
-        if (this.textareaid !== this.id)
-            this.idHelper = `${this.getId()}-helper`;
+        this.idHelper = `${this.getId()}-helpertext`;
+        this.idError = `${this.getId()}-error`;
     }
     setVal(event) {
         const value = event.target.value;
         this.value = value;
     }
+    hasHelperText() {
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
+    }
+    /** If any `error` text is present, either via prop/slot. */
+    hasErrorMessage() {
+        return this.error?.length > 0 || this.checkSlottedError();
+    }
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
     hasError() {
-        return this.invalid || !!this.error;
+        return this.hasErrorMessage() || this.invalid || this.checkSlottedError();
     }
-    hasMessage() {
-        return !!(this.helpertext?.length || this.error?.length);
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
     }
     getId() {
-        return this.textareaid || this.id;
+        return this.pnId || this.textareaid || this.id;
+    }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
+    getAriaDescribedby() {
+        const list = [];
+        if (this.hasErrorMessage())
+            list.push(this.idError);
+        else if (this.hasHelperText())
+            list.push(this.idHelper);
+        return list.length ? list.join(' ') : null;
     }
     renderLabel() {
         return (h("label", { class: "pn-textarea-label", htmlFor: this.getId(), "data-compact": this.compact }, h("span", null, this.label), this.maxlength >= 1 && h("span", null, `${this.value?.length || 0}/${this.maxlength}`)));
     }
     render() {
-        return (h(Host, { key: '890e6c29daa489bdf44588c91457e71172e40dae' }, h("div", { key: 'c35d279a237c2411faebd0823d3a03f8212c54d0', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), h("textarea", { key: 'f2358babec0d5eb02e1d3ba5c21c33998e9582b3', class: "pn-textarea-element", id: this.getId(), name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, maxlength: this.maxlength, value: this.value, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), this.hasMessage() && (h("p", { key: 'ccdaed7f958b1ef07da159973690ddd86be791f3', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '62d9b78ed5370629548e67001689b3d14d40deaa' }, this.error || this.helpertext))))));
+        return (h(Host, { key: '30ea927b4d57c041164f7ccfd052121d3723591b' }, h("div", { key: '2c927468a5159cd2544af2bd351df2b45a5abf55', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), h("textarea", { key: '2f933bd8e3477c3f7010d676f4fde0f49e2ebc9e', class: "pn-textarea-element", id: this.getId(), value: this.value, name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), h("p", { key: '368de1a346ca5161b8e6da6170453cd68605e92c', id: this.idHelper, class: "pn-textarea-text", hidden: this.hideHelpertext() }, h("span", { key: '055d5ea03484c61e64bb674bad2a8bc5bffb253e' }, this.helpertext), h("slot", { key: '3782f2b397e46f3dd8e0d4253b1071b1d98ffb65', name: "helpertext" })), h("p", { key: '7a092d28df13950e4fba9e4df46c8e6176a70ae3', id: this.idError, class: "pn-textarea-text", role: "alert", hidden: this.hideError() }, h("span", { key: '49ef6664c21f2a4281dd8f8919cfa0d66d7554fb' }, this.error), h("slot", { key: '51819bfeff00a85706a4c60de35926e65e3cd22d', name: "error" })))));
     }
     static get is() { return "pn-textarea"; }
     static get originalStyleUrls() {
@@ -100,8 +154,8 @@ export class PnTextarea {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label describing the textarea."
@@ -111,26 +165,6 @@ export class PnTextarea {
                 "reflect": false,
                 "attribute": "label"
             },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The textarea content, do not provide slotted content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
             "helpertext": {
                 "type": "string",
                 "mutable": false,
@@ -150,30 +184,30 @@ export class PnTextarea {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "compact": {
-                "type": "boolean",
-                "mutable": false,
+            "value": {
+                "type": "string",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.21.0"
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Use the compact label variant."
+                    "text": "The textarea content, do not provide slotted content."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "compact",
-                "defaultValue": "false"
+                "attribute": "value",
+                "defaultValue": "''"
             },
-            "textareaid": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -186,17 +220,16 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
-                    "text": "A unique ID connecting the element to the label."
+                    "text": "HTML name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "textareaid",
-                "defaultValue": "this.id"
+                "attribute": "name"
             },
-            "name": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -209,14 +242,14 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
-                    "text": "HTML name."
+                    "text": "Placeholder for the textarea."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "placeholder"
             },
             "form": {
                 "type": "string",
@@ -231,7 +264,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the associated form."
                 },
@@ -253,7 +286,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the row count for the textarea."
                 },
@@ -276,7 +309,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the col count for the textarea."
                 },
@@ -299,7 +332,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the wrap control."
                 },
@@ -322,7 +355,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "The maximum number of characters the user should be able to add, also adds a visible counter."
                 },
@@ -344,7 +377,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Allow the browser to autocomplete the textarea."
                 },
@@ -367,7 +400,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
                     "text": "Allow the browser to spellcheck the textarea."
                 },
@@ -377,12 +410,12 @@ export class PnTextarea {
                 "attribute": "spellcheck",
                 "defaultValue": "false"
             },
-            "placeholder": {
-                "type": "string",
+            "resize": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -390,16 +423,17 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
-                    "text": "Placeholder for the textarea."
+                    "text": "Allow the user to resize the textarea vertically. Handle width in your own layout."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder"
+                "attribute": "resize",
+                "defaultValue": "false"
             },
-            "resize": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -412,17 +446,17 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
-                    "text": "Allow the user to resize the textarea vertically. Handle width in your own layout."
+                    "text": "Make the textarea required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "resize",
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "required": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -435,14 +469,63 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML Textarea"
+                            "text": "Native attributes"
                         }],
-                    "text": "Make the textarea required."
+                    "text": "Disable the textarea."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Make the textarea readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Use the compact label variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
                 "defaultValue": "false"
             },
             "valid": {
@@ -458,7 +541,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
                     "text": "Set the textarea as `valid`, will make the Label and focus rings green."
                 },
@@ -481,7 +564,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
                     "text": "Set the textarea as `invalid`, will make the Label and focus rings red."
                 },
@@ -504,7 +587,7 @@ export class PnTextarea {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
                     "text": "Same as `invalid`, but will display the string as an error message under the textarea."
                 },
@@ -513,51 +596,105 @@ export class PnTextarea {
                 "reflect": false,
                 "attribute": "error"
             },
-            "disabled": {
-                "type": "boolean",
+            "pnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Disable the textarea."
+                    "text": "Set a custom ID for the textarea."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "pn-id"
             },
-            "readonly": {
-                "type": "boolean",
+            "pnAriaLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Make the textarea readonly."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
+                "attribute": "pn-aria-label"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "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": "pn-aria-labelledby"
+            },
+            "textareaid": {
+                "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": "Set a custom ID for the textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textareaid"
             }
         };
     }
@@ -565,6 +702,9 @@ export class PnTextarea {
     static get watchers() {
         return [{
                 "propName": "textareaid",
+                "methodName": "handleId"
+            }, {
+                "propName": "pnId",
                 "methodName": "handleId",
                 "handlerOptions": {
                     "immediate": true

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

@@ -105,6 +105,10 @@ pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked ~ .p
 }
 pn-toggle-switch .pn-toggle-button[data-loading] pn-spinner {
   opacity: 1;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
 }
 pn-toggle-switch .pn-toggle-bg {
   position: absolute;
@@ -137,6 +141,7 @@ pn-toggle-switch .pn-toggle-circle {
   box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   padding: 0.25em;
+  transform: translateX(0%);
   transition-property: transform, background-color;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
@@ -147,9 +152,6 @@ pn-toggle-switch .pn-toggle-circle {
     transition-delay: 0s;
   }
 }
-pn-toggle-switch .pn-toggle-circle {
-  transform: translateX(0%);
-}
 pn-toggle-switch .pn-toggle-element {
   position: absolute;
   z-index: 3;