@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js

@@ -0,0 +1,610 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot default - Content to be placed inside the select element.
+ * @slot leading-input - Content to be placed before the select input, within the select container.
+ * @slot before-input - Content to be placed before the select input, outside the select container.
+ * @slot after-input - Content to be placed after the select input, outside the select container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldselect {
+    constructor() {
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the change event on the select element. This method is used to
+         * update the value property when the selected options change. It is also
+         * used to emit the selectChanged event when the selected value changes.
+         * @param {Event} event - The change event on the select element.
+         * @emits selectChanged
+         */
+        this.handleSelectChange = (event) => {
+            const select = event.target;
+            let selectedValues = Array.from(select.selectedOptions).map(option => option.value);
+            if (!this.multiple) {
+                selectedValues = selectedValues.slice(0, 1);
+            }
+            this.value = this.multiple
+                ? selectedValues.join(', ')
+                : selectedValues[0] || '';
+            this.valueChanged.emit(this.value);
+            // Update form value
+            this.setFormValue();
+        };
+        /**
+         * Handles focus when the select container is clicked.
+         */
+        this.handleSelectContainerClick = () => {
+            if (!this.internalReadonly && this.selectElement) {
+                this.selectElement.focus();
+            }
+        };
+        this.computedDisplayValue = '';
+        this.internalReadonly = false;
+        this.message = undefined;
+        this.validation = undefined;
+        this.selectId = uuidv4();
+        this.label = undefined;
+        this.description = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.multiple = false;
+        this.value = '';
+        this.displayValue = false;
+    }
+    componentWillRender() {
+        this.updateDisplayValue(); // Ensure display value is updated before render
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Updates the display value when the value property changes. This watcher is
+     * used to update the display value when the selected value changes. This is
+     * necessary for readonly select fields to display the selected value.
+     * @internal This watcher is not intended to be called outside of the component.
+     * @param {string} newValue - The new value of the select field.
+     */
+    updateDisplayValueWatcher(newValue) {
+        this.updateDisplayValue();
+        if (this.selectElement) {
+            const selectedValues = newValue.split(',').map(val => val.trim());
+            const options = this.selectElement.options;
+            if (options) {
+                Array.from(options).forEach(option => {
+                    option.selected = this.multiple
+                        ? selectedValues.includes(option.value)
+                        : option.value === selectedValues[0];
+                });
+                if (!this.multiple) {
+                    this.selectElement.value = newValue; // Only set when not multiple
+                }
+            }
+            else {
+                this.selectElement.value = selectedValues[0] || '';
+            }
+        }
+        // Update form value
+        this.setFormValue();
+    }
+    /**
+     * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.
+     * @param {boolean} newValue - The new value of displayValue.
+     */
+    handleDisplayValueChange(newValue) {
+        this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true
+        if (this.readonly) {
+            this.internalReadonly = true;
+        }
+    }
+    /**
+     * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.
+     * @param {boolean} newValue - The new value of readonly.
+     */
+    handleReadonlyChange(newValue) {
+        this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true
+        if (this.displayValue) {
+            this.internalReadonly = true;
+        }
+    }
+    /**
+     * Updates the display value of the select field. This method is used to
+     * update the display value when the selected value changes. This is necessary
+     * for readonly select fields to display the selected value. This method is
+     * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher
+     * watcher.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    updateDisplayValue() {
+        if (this.internalReadonly && !this.displayValue) {
+            if (this.multiple) {
+                const selectedLabels = this.value
+                    .split(',')
+                    .map(key => key.trim())
+                    .map(key => this.getLabelFromId(key) || '')
+                    .filter(label => label !== '');
+                this.computedDisplayValue = selectedLabels.join(', ') || '';
+            }
+            else {
+                this.computedDisplayValue = this.getLabelFromId(this.value) || '';
+            }
+        }
+        else if (this.internalReadonly && this.displayValue) {
+            this.computedDisplayValue = this.value || '';
+        }
+    }
+    /**
+     * Retrieves the label from the <option> elements based on the provided key (value).
+     * This method uses the id or value attribute directly from the <select> options.
+     * @param {string} key - The key (value) for which to find the corresponding label.
+     * @returns {string} The label if found; otherwise, an empty string.
+     */
+    getLabelFromId(key) {
+        this.ensureSelectElement();
+        if (!this.selectElement) {
+            return '';
+        }
+        // Cache the option list
+        const options = this.selectElement.options;
+        if (options) {
+            const option = Array.from(options).find(option => option.value === key);
+            return option ? option.textContent.trim() || '' : '';
+        }
+        else {
+            return '';
+        }
+    }
+    /**
+     * Sets the value of the form element for form submission. This method is
+     * called when the selected value changes or when the value property is set.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    setFormValue() {
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Ensures the select element is available. This method is used to ensure
+     * the select element is available before attempting to access it.
+     * @internal This method is not intended to be called outside of the component.
+     */
+    ensureSelectElement() {
+        if (!this.selectElement) {
+            this.selectElement = this.el.querySelector('select');
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that is called before the component is rendered. This is
+     * where the internal state is set up before rendering occurs.
+     */
+    componentWillLoad() {
+        // Set internalReadonly based on the readonly prop
+        this.internalReadonly = this.readonly;
+        // Ensure internalReadonly is true if displayValue is true during loading
+        if (this.displayValue) {
+            this.internalReadonly = true;
+        }
+        if ('attachInternals' in this.el) {
+            this.internals = this.el.attachInternals();
+        }
+        else {
+            // Fallback logic for browsers without attachInternals support
+            this.internals = {
+                setFormValue: (value) => {
+                    const formElement = this.el.closest('form');
+                    if (formElement) {
+                        const input = document.createElement('input');
+                        input.type = 'hidden';
+                        input.name = this.name;
+                        input.value = value;
+                        formElement.appendChild(input);
+                    }
+                },
+            };
+        }
+        // Initialize value as an empty string if multiple is true
+        if (this.multiple && typeof this.value !== 'string') {
+            this.value = '';
+        }
+    }
+    /**
+     * Lifecycle method that is called after the component has been rendered.
+     * This is where the display value is updated and the initial select element's
+     * state is set.
+     */
+    componentDidLoad() {
+        this.updateDisplayValue();
+        if (this.selectElement) {
+            // Only set the value for single selection, skip for multiple
+            if (!this.multiple) {
+                this.selectElement.value = this.value;
+            }
+            const selectedValues = this.multiple
+                ? this.value.split(',').map(v => v.trim())
+                : [this.value];
+            const options = this.selectElement.options;
+            if (options) {
+                Array.from(options).forEach(option => {
+                    option.selected = this.multiple
+                        ? selectedValues.includes(option.value)
+                        : option.value === selectedValues[0];
+                });
+            }
+            else {
+                // Handle case where there are no options
+                this.selectElement.value = selectedValues[0] || '';
+            }
+        }
+        // Set the initial form value
+        this.setFormValue();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDERING
+    /**
+     * The render method creates the HTML structure for the component, including
+     * the label, select element, and any error or description messages. It also
+     * applies the appropriate CSS classes based on the readonly state and
+     * displayValue prop. This method is called when the component is rendered.
+     * @returns {HTMLStencilElement} The HTML element to render.
+     */
+    render() {
+        return (h(Host, { key: 'b610d79592893cf82b0ef164f833cc033f43416d' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a8232954b2230c8b44d2aadba0aba5cfd71813b5', htmlFor: this.selectId }, h("slot", { key: '457157a4cc3dece0363f13ec6c7d3357505e69f8', name: "label" }, this.label))), h("div", { key: '39b1f61586fb2e5784dba297f5f1080d5f9ab560', class: "select-wrapper" }, h("slot", { key: '9ba008fe7250f95e0158e7b0cb530ae565d6bc7f', name: "before-input" }), h("div", { key: 'e2b0b254fc64d5c33cd0252469fbf9024b6735b2', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '9b8158bb110cecc1bd8dd37082b813a1231d7392', name: "leading-input" }), this.internalReadonly && (h("input", { key: '65163fd120b753358bf45aa731be03e1291473c2', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+                ? `${this.selectId}-error`
+                : `${this.selectId}-description` })), h("select", { key: '5f38318e3c073e9514c9bd3d429455fc7657b783', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                ? `${this.selectId}-error`
+                : `${this.selectId}-description` }, h("slot", { key: 'c8f9b54cd6d88603070e34748b8115ae8ccfd522' })), this.internalReadonly && (h("nv-icon", { key: 'bc0151f125212a1044768a3110982cef8da0b26e', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: 'e0883e47712cfc57746ca4167df0924ad1501e57', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '085c0833541a4ff6e6fbbf3350e4fc4ae570e0ec', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '436a1faa2b2d6d651f32556f1d69c6e6b9bdb318', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c734be03a4741a2dd03406997874cf6044954214', class: "description", id: `${this.selectId}-description` }, h("slot", { key: 'dd91d274fd97401a0dbf9b5f68fe23670b2ccf02', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '45998c6f7ecf2ee9a63c566e1f8826d1e321779c', class: "error-description", id: `${this.selectId}-error` }, h("slot", { key: '807d57d77f557d4f0d920df6ec914c2c559e4431', name: "error-description" }, this.errorDescription)))));
+    }
+    static get is() { return "nv-fieldselect"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use description instead."
+                        }],
+                    "text": "Message defines a 'hint ' message for the Select Field."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "validation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use errorDescription and set the error prop instead."
+                        }],
+                    "text": "Add the message to the validation state."
+                },
+                "attribute": "validation",
+                "reflect": false
+            },
+            "selectId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the select element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                },
+                "attribute": "select-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets you define the text that explains what users should choose in the\nselect field. It\u2019s a crucial element for making forms clear and\nuser-friendly."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the select field. This is\nwhere you can clarify what users should choose or provide additional\ninstructions, making the form easier to fill out correctly."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the name attribute of the select field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the selected data in form submissions. It should be\nunique within the form to avoid conflicts"
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled prop lets you turn off the select field so that users can\u2019t\nchoose something. When disabled, the field is grayed out and won\u2019t respond to\nclicks or touches."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the select field\u2019s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won\u2019t be\nable to change or delete anything."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the select field as required, ensuring that the user must fill it out\nbefore submitting the form."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Alters the select field\u2019s appearance to indicate an error, helping users\nidentify fields that need correction."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "Show a helpful message under the select field when there\u2019s a problem. It\nexplains what\u2019s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
+                },
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Changes the select field\u2019s appearance to indicate successful input or\nvalidation."
+                },
+                "attribute": "success",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, allows the select to handle multiple selections."
+                },
+                "attribute": "multiple",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the select field.\n- If `multiple` is `false`, it's a single string.\n- If `multiple` is `true`, it's a comma-separated string of selected values."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "displayValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, displays the value element instead of the label when readonly.\nBy default, the label is displayed in readonly mode. Also it automatically\nsets the component to readonly."
+                },
+                "attribute": "display-value",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "computedDisplayValue": {},
+            "internalReadonly": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the selected value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateDisplayValueWatcher"
+            }, {
+                "propName": "displayValue",
+                "methodName": "handleDisplayValueChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleReadonlyChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldselect.js.map