@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -12,70 +12,119 @@ import { uuidv4 } from "../../../index";
  * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.
  *
  * @slot - This is the default slot, where the `option` elements go.
+ * @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}
  *
  * @nativeChange Use the `change` event to listen to changes on the select element.
  */
 export class PnSelect {
     id = `pn-select-${uuidv4()}`;
-    idHelpertext = `${this.id}-text`;
-    select;
+    idHelper = `${this.id}-text`;
+    idError = `${this.id}-error`;
     mo;
     hostElement;
     /** Label placed above the select. */
     label;
     /** Display a helper text underneath the select. */
     helpertext;
-    /** Select HTML id */
-    selectId = this.id;
-    /** Display an icon to the left of the select input. */
-    icon;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact = false;
-    /** HTML select name. @category HTML */
+    /** HTML select name. @category Native attributes */
     name;
-    /** HTML form name. @category HTML */
+    /** HTML form name. @category Native attributes */
     form;
-    /** HTML autocomplete. @category HTML */
+    /** HTML autocomplete. @category Native attributes */
     autocomplete;
-    /**
-     * Set the select as required.
-     * @category Validation
-     */
+    /** Set the select as required. @category Native attributes */
     required = false;
-    /**
-     * Disable the select.
-     * @category Validation
-     */
+    /** Disable the select. @category Native attributes */
     disabled = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Display an icon to the left of the select input. @category Features */
+    icon;
+    /** Trigger the invalid state. @category Features */
+    invalid = false;
+    /** Display an error message and trigger the invalid state. @category Features */
+    error;
+    /** Set a custom ID for the select. @since v7.25.0 @category HTML attributes */
+    pnId;
     /**
-     * Trigger the invalid state.
-     * @category Validation
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
      */
-    invalid = false;
+    pnAriaLabel;
     /**
-     * Display an error message and trigger the invalid state.
-     * @category Validation
+     * 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
      */
-    error;
-    componentDidLoad() {
-        if (this.mo)
-            this.mo.disconnect();
+    pnAriaLabelledby;
+    /** Set a custom ID for the select. @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId;
+    handleId() {
+        this.idHelper = `${this.getId()}-text`;
+        this.idError = `${this.getId()}-error`;
+    }
+    connectedCallback() {
         this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
         this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    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();
+    }
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
     }
-    hasMessage() {
-        return !!this.helpertext || !!this.error;
+    hideError() {
+        return !this.hasErrorMessage();
+    }
+    getId() {
+        return this.pnId || this.selectId || 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() {
         if (!this.label)
             return null;
-        return (h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
+        return (h("label", { htmlFor: this.getId(), class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
     }
     render() {
-        return (h(Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
+        return (h(Host, { key: 'dfd4d3814426a88b975bd86948c7ac2207255f4b' }, h("div", { key: '5423289d1771840d08ab1de18ab3af4a31cb98f1', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '164933a196821353cf7ca31d6d12b65a84da012a', class: "pn-select-input" }, this.icon && h("pn-icon", { key: 'da732b9152cba5035039a9761f38471d5885ddb1', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: '3370ffc0f4f6de399762bf5d854433020830ff2e', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: '2a31f44242dd230d68c8d10ed461aeb25f8ec231', id: this.getId(), class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-compact": this.compact }, h("slot", { key: '8130b7ac6969e2fa0c801e0b10a47e97cf6505bf' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'c2167ea78e00914296efd758d044a9ea24e428da', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), h("p", { key: '528f5a13255b52009b6b291eff57a164b3650f07', id: this.idHelper, class: "pn-select-text", hidden: this.hideHelpertext() }, h("span", { key: '0a802a236cef453ef78783a051b29ccfd0efd997' }, this.helpertext), h("slot", { key: 'b23ef510ec48ac499ab6c589d0be1b71517a9496', name: "helpertext" })), h("p", { key: '026c3978d58c24193731048373e83510002dd116', id: this.idError, class: "pn-select-text", role: "alert", hidden: this.hideError() }, h("span", { key: 'b8724dfc973607a0f4776aa40846c2c86c33c8af' }, this.error), h("slot", { key: '90b29ba6d58e629783c4c8264c9aeaf3d84ffce8', name: "error" })))));
     }
     static get is() { return "pn-select"; }
     static get originalStyleUrls() {
@@ -98,8 +147,8 @@ export class PnSelect {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Label placed above the select."
@@ -128,7 +177,7 @@ export class PnSelect {
                 "reflect": false,
                 "attribute": "helpertext"
             },
-            "selectId": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -139,16 +188,40 @@ export class PnSelect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Select HTML id"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML select name."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "select-id",
-                "defaultValue": "this.id"
+                "attribute": "name"
             },
-            "icon": {
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML form name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            },
+            "autocomplete": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -157,15 +230,64 @@ export class PnSelect {
                     "references": {}
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "HTML autocomplete."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Display an icon to the left of the select input."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the select as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "compact": {
                 "type": "boolean",
@@ -181,6 +303,9 @@ export class PnSelect {
                     "tags": [{
                             "name": "since",
                             "text": "v7.21.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
                         }],
                     "text": "Use the compact label variant."
                 },
@@ -190,7 +315,7 @@ export class PnSelect {
                 "attribute": "compact",
                 "defaultValue": "false"
             },
-            "name": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -199,42 +324,43 @@ export class PnSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML"
+                            "text": "Features"
                         }],
-                    "text": "HTML select name."
+                    "text": "Display an icon to the left of the select input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "icon"
             },
-            "form": {
-                "type": "string",
+            "invalid": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML"
+                            "text": "Features"
                         }],
-                    "text": "HTML form name."
+                    "text": "Trigger the invalid state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "form"
+                "attribute": "invalid",
+                "defaultValue": "false"
             },
-            "autocomplete": {
+            "error": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -243,89 +369,95 @@ export class PnSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML"
+                            "text": "Features"
                         }],
-                    "text": "HTML autocomplete."
+                    "text": "Display an error message and trigger the invalid state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "autocomplete"
+                "attribute": "error"
             },
-            "required": {
-                "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": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the select as required."
+                    "text": "Set a custom ID for the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
+                "attribute": "pn-id"
             },
-            "disabled": {
-                "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": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Disable the select."
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "pn-aria-label"
             },
-            "invalid": {
-                "type": "boolean",
+            "pnAriaLabelledby": {
+                "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": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Trigger the invalid state."
+                    "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": "invalid",
-                "defaultValue": "false"
+                "attribute": "pn-aria-labelledby"
             },
-            "error": {
+            "selectId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -337,17 +469,32 @@ export class PnSelect {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Display an error message and trigger the invalid state."
+                    "text": "Set a custom ID for the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error"
+                "attribute": "select-id"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selectId",
+                "methodName": "handleId"
+            }, {
+                "propName": "pnId",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }];
+    }
 }

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

@@ -64,9 +64,13 @@ pn-textarea .pn-textarea-text {
   display: flex;
   flex-direction: column;
   gap: 0.25em;
+  text-align: left;
+}
+pn-textarea .pn-textarea-text[role=alert] {
+  color: #a70707;
 }
-pn-textarea .pn-textarea-text > pn-icon {
-  margin-right: 0.25em;
+pn-textarea .pn-textarea-text[hidden] {
+  display: none;
 }
 pn-textarea .pn-textarea-element {
   width: 100%;
@@ -200,9 +204,6 @@ pn-textarea .pn-textarea[data-error] > .pn-textarea-element:-webkit-autofill, pn
   -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
   -webkit-text-fill-color: #2d2013;
 }
-pn-textarea .pn-textarea[data-error] > .pn-textarea-text[role=alert] {
-  color: #a70707;
-}
 pn-textarea .pn-textarea[data-resize] > .pn-textarea-element {
   resize: vertical;
 }