npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.37 → 3.0.0-beta.39 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (541) hide show

package/dist/components/nv-fieldselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldselect.js","mappings":"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","names":["NvFieldselect","uuidv4"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-select-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n\n &:has(select:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-select() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldselect {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[display-value]:not([display-value=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .select-wrapper {\n @include form-field-select-wrapper();\n\n .select-container {\n @include form-field-select-container();\n\n input {\n @include form-field-input();\n\n &:read-only {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly, rgb(0 0 0 / 10%));\n border-color: var(--nv-field-border-readonly);\n }\n }\n\n select {\n @include form-field-select();\n\n & option {\n background-color: var(--nv-field-background);\n color: var(--components-form-field-content-text, #1d1d1d);\n font-size: var(--form-field-font-size, 16px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height, 24px);\n\n &:checked {\n background-color: var(--color-orange-500);\n color: var(--color-content-high-text);\n font-size: var(--form-field-font-size, 16px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height, 24px);\n }\n }\n\n &.hidden {\n display: none;\n }\n }\n\n nv-icon.readonly-icon {\n @include form-field-icon();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldselect',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n @Element() el: HTMLNvFieldselectElement;\n private selectElement!: HTMLSelectElement;\n private internals: ElementInternals;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Select Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region STATES\n\n @State()\n private computedDisplayValue: string = '';\n\n @State()\n private internalReadonly: boolean = false;\n\n /\n * Options to display in the select. Can be passed as a JSON string.\n * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n /\n @Prop()\n readonly options?: string;\n\n /\n Parsed options stored internally\n /\n @State()\n private parsedOptions: Array<{\n /\n The label of the option\n /\n label: string;\n /\n The value of the option\n /\n value: string;\n /\n Whether the option is selected\n /\n selected?: boolean;\n /\n Whether the option is disabled\n /\n disabled?: boolean;\n }> = [];\n\n //#endregion STATES\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the select element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should choose in the\n * select field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Add helpful hints or extra information under the select field. This is\n * where you can clarify what users should choose or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Defines the name attribute of the select field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the selected data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the select field so that users can’t\n * choose something. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the select field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to change or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the select field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the select field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the select field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the select field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n When enabled, allows the select to handle multiple selections.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /\n 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.\n /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n When enabled, displays the value element instead of the label when readonly.\n * By default, the label is displayed in readonly mode. Also it automatically\n * sets the component to readonly.\n /\n @Prop({ reflect: true })\n readonly displayValue: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>; // Emit as a string\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Updates the display value when the value property changes. This watcher is\n * used to update the display value when the selected value changes. This is\n * necessary for readonly select fields to display the selected value.\n * @internal This watcher is not intended to be called outside of the component.\n * @param {string} newValue - The new value of the select field.\n /\n @Watch('value')\n updateDisplayValueWatcher(newValue: string) {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n const selectedValues = newValue.split(',').map(val => val.trim());\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n\n if (!this.multiple) {\n this.selectElement.value = newValue; // Only set when not multiple\n }\n } else {\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Update form value\n this.setFormValue();\n }\n\n /\n Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n * @param {boolean} newValue - The new value of displayValue.\n /\n @Watch('displayValue')\n handleDisplayValueChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.readonly) {\n this.internalReadonly = true;\n }\n }\n\n /\n Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n * @param {boolean} newValue - The new value of readonly.\n /\n @Watch('readonly')\n handleReadonlyChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n }\n\n /\n Parse options and update the internal state\n * @param {string} newValue - The new value of options\n /\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (typeof newValue === 'string') {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n\n // Update the value if an option is pre-selected\n const selectedOption = parsedOpts.find(opt => opt.selected);\n if (selectedOption) {\n this.value = selectedOption.value;\n }\n } catch (error) {\n console.error('Error parsing options:', error);\n this.parsedOptions = [];\n }\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the change event on the select element. This method is used to\n * update the value property when the selected options change. It is also\n * used to emit the selectChanged event when the selected value changes.\n * @param {Event} event - The change event on the select element.\n * @emits selectChanged\n /\n private readonly handleSelectChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n let selectedValues: string[] = Array.from(select.selectedOptions).map(\n option => option.value,\n );\n\n if (!this.multiple) {\n selectedValues = selectedValues.slice(0, 1);\n }\n\n this.value = this.multiple\n ? selectedValues.join(', ')\n : selectedValues[0] \|\| '';\n this.valueChanged.emit(this.value);\n\n // Update form value\n this.setFormValue();\n };\n\n /\n Handles focus when the select container is clicked.\n /\n private readonly handleSelectContainerClick = () => {\n if (!this.internalReadonly && this.selectElement) {\n this.selectElement.focus();\n }\n };\n\n /\n Updates the display value of the select field. This method is used to\n * update the display value when the selected value changes. This is necessary\n * for readonly select fields to display the selected value. This method is\n * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n * watcher.\n * @internal This method is not intended to be called outside of the component.\n /\n private updateDisplayValue(): void {\n if (this.internalReadonly && !this.displayValue) {\n if (this.multiple) {\n const selectedLabels = this.value\n .split(',')\n .map(key => key.trim())\n .map(key => this.getLabelFromId(key) \|\| '')\n .filter(label => label !== '');\n this.computedDisplayValue = selectedLabels.join(', ') \|\| '';\n } else {\n this.computedDisplayValue = this.getLabelFromId(this.value) \|\| '';\n }\n } else if (this.internalReadonly && this.displayValue) {\n this.computedDisplayValue = this.value \|\| '';\n }\n }\n\n /\n Retrieves the label from the <option> elements based on the provided key (value).\n * This method uses the id or value attribute directly from the <select> options.\n * @param {string} key - The key (value) for which to find the corresponding label.\n * @returns {string} The label if found; otherwise, an empty string.\n /\n private getLabelFromId(key: string): string {\n this.ensureSelectElement();\n if (!this.selectElement) {\n return '';\n }\n\n // Cache the option list\n const options = this.selectElement.options;\n\n if (options) {\n const option = Array.from(options).find(option => option.value === key);\n return option ? option.textContent.trim() \|\| '' : '';\n } else {\n return '';\n }\n }\n\n /\n Sets the value of the form element for form submission. This method is\n * called when the selected value changes or when the value property is set.\n * @internal This method is not intended to be called outside of the component.\n /\n private setFormValue(): void {\n this.internals.setFormValue(this.value);\n }\n\n /\n Ensures the select element is available. This method is used to ensure\n * the select element is available before attempting to access it.\n * @internal This method is not intended to be called outside of the component.\n /\n private ensureSelectElement(): void {\n if (!this.selectElement) {\n this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n this.updateDisplayValue(); // Ensure display value is updated before render\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n /\n * Lifecycle method that is called before the component is rendered. This is\n * where the internal state is set up before rendering occurs.\n /\n componentWillLoad() {\n // Set internalReadonly based on the readonly prop\n this.internalReadonly = this.readonly;\n\n // Ensure internalReadonly is true if displayValue is true during loading\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n\n if ('attachInternals' in this.el) {\n this.internals = (\n this.el as HTMLElement & {\n /\n Attach the element to the form internals.\n * @returns {ElementInternals} - The element internals object.\n /\n attachInternals: () => ElementInternals;\n }\n ).attachInternals();\n } else {\n // Fallback logic for browsers without attachInternals support\n this.internals = {\n setFormValue: (value: string) => {\n const formElement = this.el.closest('form');\n if (formElement) {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = this.name;\n input.value = value;\n formElement.appendChild(input);\n }\n },\n } as ElementInternals;\n }\n\n // Initialize value as an empty string if multiple is true\n if (this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n // Parse initial options if present\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n /\n Lifecycle method that is called after the component has been rendered.\n * This is where the display value is updated and the initial select element's\n * state is set.\n /\n componentDidLoad() {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n // Only set the value for single selection, skip for multiple\n if (!this.multiple) {\n this.selectElement.value = this.value;\n }\n\n const selectedValues = this.multiple\n ? this.value.split(',').map(v => v.trim())\n : [this.value];\n\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n } else {\n // Handle case where there are no options\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Set the initial form value\n this.setFormValue();\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDERING\n\n /\n * The render method creates the HTML structure for the component, including\n * the label, select element, and any error or description messages. It also\n * applies the appropriate CSS classes based on the readonly state and\n * displayValue prop. This method is called when the component is rendered.\n * @returns {HTMLStencilElement} The HTML element to render.\n */\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"select-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"select-container\"\n onClick={this.handleSelectContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.internalReadonly && (\n <input\n id={this.inputId + '-readonly'}\n type=\"text\"\n value={this.computedDisplayValue}\n readonly\n class=\"readonly-input\"\n aria-readonly=\"true\"\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n />\n )}\n\n <select\n id={this.inputId}\n ref={el => (this.selectElement = el)}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n multiple={this.multiple}\n onChange={this.handleSelectChange}\n class={this.internalReadonly ? 'hidden' : ''}\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n >\n {this.parsedOptions.length > 0 ? (\n this.parsedOptions.map(option => (\n <option\n value={option.value}\n selected={option.selected}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))\n ) : (\n <slot />\n )}\n </select>\n\n {this.internalReadonly && (\n <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\n )}\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\" id={`${this.inputId}-description`}>\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div class=\"error-description\" id={`${this.inputId}-error`}>\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDERING\n}\n"],"version":3}
1	+ {"file":"nv-fieldselect.js","mappings":"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","names":["NvFieldselect","uuidv4"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-select-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n\n &:has(select:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-select() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldselect {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[display-value]:not([display-value=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .select-wrapper {\n @include form-field-select-wrapper();\n\n .select-container {\n @include form-field-select-container();\n\n input {\n @include form-field-input();\n\n &:read-only {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly, rgb(0 0 0 / 10%));\n border-color: var(--nv-field-border-readonly);\n }\n }\n\n select {\n @include form-field-select();\n\n & option {\n background-color: var(--nv-field-background);\n color: var(--components-form-field-content-text, #1d1d1d);\n font-size: var(--form-field-font-size, 16px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height, 24px);\n\n &:checked {\n background-color: var(--color-orange-500);\n color: var(--color-content-high-text);\n font-size: var(--form-field-font-size, 16px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height, 24px);\n }\n }\n\n &.hidden {\n display: none;\n }\n }\n\n nv-icon.readonly-icon {\n @include form-field-icon();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldselect',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n @Element() el: HTMLNvFieldselectElement;\n private selectElement!: HTMLSelectElement;\n private internals: ElementInternals;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Select Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region STATES\n\n @State()\n private computedDisplayValue: string = '';\n\n @State()\n private internalReadonly: boolean = false;\n\n /\n * Options to display in the select. Can be passed as a JSON string.\n * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n /\n @Prop()\n readonly options?: string;\n\n /\n Parsed options stored internally\n /\n @State()\n private parsedOptions: Array<{\n /\n The label of the option\n /\n label: string;\n /\n The value of the option\n /\n value: string;\n /\n Whether the option is selected\n /\n selected?: boolean;\n /\n Whether the option is disabled\n /\n disabled?: boolean;\n }> = [];\n\n //#endregion STATES\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the select element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should choose in the\n * select field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Add helpful hints or extra information under the select field. This is\n * where you can clarify what users should choose or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Defines the name attribute of the select field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the selected data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n The disabled prop lets you turn off the select field so that users can’t\n * choose something. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the select field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to change or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the select field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the select field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the select field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the select field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n When enabled, allows the select to handle multiple selections.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /\n 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.\n /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /\n When enabled, displays the value element instead of the label when readonly.\n * By default, the label is displayed in readonly mode. Also it automatically\n * sets the component to readonly.\n /\n @Prop({ reflect: true })\n readonly displayValue: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on a <select>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>; // Emit as a string\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Updates the display value when the value property changes. This watcher is\n * used to update the display value when the selected value changes. This is\n * necessary for readonly select fields to display the selected value.\n * @internal This watcher is not intended to be called outside of the component.\n * @param {string} newValue - The new value of the select field.\n /\n @Watch('value')\n updateDisplayValueWatcher(newValue: string) {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n const selectedValues = newValue.split(',').map(val => val.trim());\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n\n if (!this.multiple) {\n this.selectElement.value = newValue; // Only set when not multiple\n }\n } else {\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Update form value\n this.setFormValue();\n }\n\n /\n Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n * @param {boolean} newValue - The new value of displayValue.\n /\n @Watch('displayValue')\n handleDisplayValueChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.readonly) {\n this.internalReadonly = true;\n }\n }\n\n /\n Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n * @param {boolean} newValue - The new value of readonly.\n /\n @Watch('readonly')\n handleReadonlyChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n }\n\n /\n Parse options and update the internal state\n * @param {string} newValue - The new value of options\n /\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (typeof newValue === 'string') {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n\n // Update the value if an option is pre-selected\n const selectedOption = parsedOpts.find(opt => opt.selected);\n if (selectedOption) {\n this.value = selectedOption.value;\n }\n } catch (error) {\n console.error('Error parsing options:', error);\n this.parsedOptions = [];\n }\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the change event on the select element. This method is used to\n * update the value property when the selected options change. It is also\n * used to emit the selectChanged event when the selected value changes.\n * @param {Event} event - The change event on the select element.\n * @emits selectChanged\n /\n private readonly handleSelectChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n let selectedValues: string[] = Array.from(select.selectedOptions).map(\n option => option.value,\n );\n\n if (!this.multiple) {\n selectedValues = selectedValues.slice(0, 1);\n }\n\n this.value = this.multiple\n ? selectedValues.join(', ')\n : selectedValues[0] \|\| '';\n this.valueChanged.emit(this.value);\n\n // Update form value\n this.setFormValue();\n };\n\n /\n Handles focus when the select container is clicked.\n /\n private readonly handleSelectContainerClick = () => {\n if (!this.internalReadonly && this.selectElement) {\n this.selectElement.focus();\n }\n };\n\n /\n Updates the display value of the select field. This method is used to\n * update the display value when the selected value changes. This is necessary\n * for readonly select fields to display the selected value. This method is\n * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n * watcher.\n * @internal This method is not intended to be called outside of the component.\n /\n private updateDisplayValue(): void {\n if (this.internalReadonly && !this.displayValue) {\n if (this.multiple) {\n const selectedLabels = this.value\n .split(',')\n .map(key => key.trim())\n .map(key => this.getLabelFromId(key) \|\| '')\n .filter(label => label !== '');\n this.computedDisplayValue = selectedLabels.join(', ') \|\| '';\n } else {\n this.computedDisplayValue = this.getLabelFromId(this.value) \|\| '';\n }\n } else if (this.internalReadonly && this.displayValue) {\n this.computedDisplayValue = this.value \|\| '';\n }\n }\n\n /\n Retrieves the label from the <option> elements based on the provided key (value).\n * This method uses the id or value attribute directly from the <select> options.\n * @param {string} key - The key (value) for which to find the corresponding label.\n * @returns {string} The label if found; otherwise, an empty string.\n /\n private getLabelFromId(key: string): string {\n this.ensureSelectElement();\n if (!this.selectElement) {\n return '';\n }\n\n // Cache the option list\n const options = this.selectElement.options;\n\n if (options) {\n const option = Array.from(options).find(option => option.value === key);\n return option ? option.textContent.trim() \|\| '' : '';\n } else {\n return '';\n }\n }\n\n /\n Sets the value of the form element for form submission. This method is\n * called when the selected value changes or when the value property is set.\n * @internal This method is not intended to be called outside of the component.\n /\n private setFormValue(): void {\n this.internals.setFormValue(this.value);\n }\n\n /\n Ensures the select element is available. This method is used to ensure\n * the select element is available before attempting to access it.\n * @internal This method is not intended to be called outside of the component.\n /\n private ensureSelectElement(): void {\n if (!this.selectElement) {\n this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n this.updateDisplayValue(); // Ensure display value is updated before render\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n /\n * Lifecycle method that is called before the component is rendered. This is\n * where the internal state is set up before rendering occurs.\n /\n componentWillLoad() {\n // Set internalReadonly based on the readonly prop\n this.internalReadonly = this.readonly;\n\n // Ensure internalReadonly is true if displayValue is true during loading\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n\n if ('attachInternals' in this.el) {\n this.internals = (\n this.el as HTMLElement & {\n /\n Attach the element to the form internals.\n * @returns {ElementInternals} - The element internals object.\n /\n attachInternals: () => ElementInternals;\n }\n ).attachInternals();\n } else {\n // Fallback logic for browsers without attachInternals support\n this.internals = {\n setFormValue: (value: string) => {\n const formElement = this.el.closest('form');\n if (formElement) {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = this.name;\n input.value = value;\n formElement.appendChild(input);\n }\n },\n } as ElementInternals;\n }\n\n // Initialize value as an empty string if multiple is true\n if (this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n // Parse initial options if present\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n /\n Lifecycle method that is called after the component has been rendered.\n * This is where the display value is updated and the initial select element's\n * state is set.\n /\n componentDidLoad() {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n // Only set the value for single selection, skip for multiple\n if (!this.multiple) {\n this.selectElement.value = this.value;\n }\n\n const selectedValues = this.multiple\n ? this.value.split(',').map(v => v.trim())\n : [this.value];\n\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n } else {\n // Handle case where there are no options\n this.selectElement.value = selectedValues[0] \|\| '';\n }\n }\n\n // Set the initial form value\n this.setFormValue();\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region RENDERING\n\n /\n * The render method creates the HTML structure for the component, including\n * the label, select element, and any error or description messages. It also\n * applies the appropriate CSS classes based on the readonly state and\n * displayValue prop. This method is called when the component is rendered.\n * @returns {HTMLStencilElement} The HTML element to render.\n */\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"select-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"select-container\"\n onClick={this.handleSelectContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.internalReadonly && (\n <input\n id={this.inputId + '-readonly'}\n type=\"text\"\n value={this.computedDisplayValue}\n readonly\n class=\"readonly-input\"\n aria-readonly=\"true\"\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n />\n )}\n\n <select\n id={this.inputId}\n ref={el => (this.selectElement = el)}\n name={this.name}\n autofocus={this.autofocus}\n disabled={this.disabled}\n required={this.required}\n multiple={this.multiple}\n onChange={this.handleSelectChange}\n class={this.internalReadonly ? 'hidden' : ''}\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n >\n {this.parsedOptions.length > 0 ? (\n this.parsedOptions.map(option => (\n <option\n value={option.value}\n selected={option.selected}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))\n ) : (\n <slot />\n )}\n </select>\n\n {this.internalReadonly && (\n <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\n )}\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\" id={`${this.inputId}-description`}>\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div class=\"error-description\" id={`${this.inputId}-error`}>\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDERING\n}\n"],"version":3}

package/dist/components/nv-fieldtext.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-77d0fedc.js';
-import { d as defineCustomElement$2 } from './p-a01bdf02.js';
+import { d as defineCustomElement$2 } from './p-5f5e2bf2.js';
 import { v as v4 } from './p-f5ff676c.js';
-const nvFieldtextCss = "nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldtextCss = "nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext .input-wrapper .input-container:focus-within,nv-fieldtext .input-wrapper .input-container:focus-within:hover,nv-fieldtext .input-wrapper .input-container:focus,nv-fieldtext .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 const NvFieldtextStyle0 = nvFieldtextCss;
 const NvFieldtext$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtext extends H {
@@ -61,6 +61,12 @@ const NvFieldtext$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtext extends
          * each one with a comma, allowing the form to handle multiple recipients.
          */
         this.multiple = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -100,9 +106,9 @@ const NvFieldtext$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtext extends
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '22f5979300679cebfff9a85a1f18604e36fd0374' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fa372b6988a1ff568e72ec3b8a2352a21dc49a16', htmlFor: this.inputId }, h("slot", { key: 'ecddd18263c8ab7f3309173d0ebbf32f3c8d1cde', name: "label" }, this.label))), h("div", { key: '0d93f2b0fdfb4ab92cb272ee1f9da62018524a3d', class: "input-wrapper" }, h("slot", { key: 'a699b48dc7b439699c36596dc9f55382262eef91', name: "before-input" }), h("div", { key: '95d6c530662c5495f505de64dd4538491a6a9b8e', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'e3febd47df3ac5dec70dc3b94e39ed6d7e16215d', name: "leading-input" }), h("input", { key: '746258b2a7f87f1e913781e2651d73e30f316006', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '314149ea256ac09298980d2b1405b23d6084030e', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'ba160abd983eaa494df96fc19d3815479aebc332', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '9f3e7aa524bb5fffbf380307638cd93169bd5912', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '532613985e992508eaa3b56e2aa8facba4db6962', class: "description" }, h("slot", { key: '5ee29888f417f7c6fce352299a01dcd81169c387', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '73d6fd4eaf67278462c19812de9355afaf037c18', hidden: !this.error, class: "error-description" }, h("slot", { key: '3ba736958ccef0a3bd32d8e1dff213a2e2a160d6', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '23efa0e56d020cce567f970f342bb0512ae3dd83' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '1ffe8dfcd0eb29232f3f4e2a39f0b18e92acced0', htmlFor: this.inputId }, h("slot", { key: '95625aebb5e3464ff2afc1d9c947db28fe7b0ddd', name: "label" }, this.label))), h("div", { key: 'a0754ba8ac030290cc354cbbc287049b890c92da', class: "input-wrapper" }, h("slot", { key: '761147017de57353a2d52bac615330b6bb09401d', name: "before-input" }), h("div", { key: '5e2bc20105f6a4587e1f39a81a04527e36b51e4e', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '96d2c58b85692f5a184b8086d048876e1b5b8c28', name: "leading-input" }), h("input", { key: '40e3d073b307dcd09c3b4f5c07f82e06aa1f6b11', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '62e3ae1bf3147ccd2869cd8d47b63bedcf3c8739', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '9fabf9beb89950a67b67b3fb98878faae431a633', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '18c99b85da3243c1cf0c58aa8e53d54fb70aae42', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec83f041aacae7255c7008fc2f842ef7423bb84a', class: "description" }, h("slot", { key: '8051ac72735b0d53dee7a1eac3fee70c87bbd6ef', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'd04500341a2a0845476d1fd2bcfdd2da1f930272', hidden: !this.error, class: "error-description" }, h("slot", { key: '3e3063574e7a8efa37150c69e1cbd44641229e20', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -128,7 +134,8 @@ const NvFieldtext$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtext extends
         "minlength": [514],
         "pattern": [513],
         "autocomplete": [513],
-        "multiple": [516]
+        "multiple": [516],
+        "autofocus": [516]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/nv-fieldtext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldtext.js","mappings":"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","names":["NvFieldtext","uuidv4"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n /\n Type of the input.\n * @deprecated use type instead.\n /\n @Prop()\n readonly textInputType: 'text' \| 'tel' \| 'email';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n /\n @Prop({ reflect: true, mutable: true })\n type: 'text' \| 'tel' \| 'email' = 'text';\n\n /\n The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Changes the input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /\n When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n /\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /\n Handles focus when the input container is clicked.\n /\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-fieldtext.js","mappings":"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","names":["NvFieldtext","uuidv4"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n /\n Type of the input.\n * @deprecated use type instead.\n /\n @Prop()\n readonly textInputType: 'text' \| 'tel' \| 'email';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n /\n @Prop({ reflect: true, mutable: true })\n type: 'text' \| 'tel' \| 'email' = 'text';\n\n /\n The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Changes the input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /\n When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n /\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n /\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /\n Handles focus when the input container is clicked.\n /\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fieldtextarea.js CHANGED Viewed

@@ -67,6 +67,12 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
          * can still be allowed if desired.
          */
         this.autosize = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on a <textarea>
+         * element.
+         */
+        this.autofocus = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -169,9 +175,9 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3ec76c8ddc56c9e438e74bff45ab3e3aeb4a891f' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7588ee9f4c4b3ca4ecfa255ad6ab56e87542b008', htmlFor: this.inputId }, h("slot", { key: '4f6c5b8d1e02a36c208904e5aa54bd4eebc78efd', name: "label" }, this.label))), h("div", { key: 'd9a2bf3f9ec4c94bbe15c1422a962eb9e84fa76c', class: "textarea-wrapper" }, h("div", { key: 'f822c353ab8ab98405201b690f420069ea3b358a', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '6d105939ceaf1ae29a899a3f5aab1bed84aaa2e7', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '13b3ad16dc84db2770d411d117f35fec9da7b4de', class: "description" }, h("slot", { key: '7b6f82a8369d09300a57ae8ff0855fc471e5c32b', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '7fbc2fc5b232b3bb3602104ecf1937fc5f32be60', hidden: !this.error, class: "error-description" }, h("slot", { key: '0d0e539ce9f6cfabfbe73709f6f58b7edeef0210', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '331d328227b95cd763286de8919e514d836bb084' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a6513b1dad621ba2d9bd1fcec79900393ec1adb7', htmlFor: this.inputId }, h("slot", { key: '8c8ce8a47093b6353ece69bae4b7203765a4fb36', name: "label" }, this.label))), h("div", { key: 'a283ef8642118b2fb0aed16b745928be4079cea6', class: "textarea-wrapper" }, h("div", { key: 'a40abe6cda9712052c0203aef387f4d4feed4832', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '67dc245ba0abefad9d1c23aad454c5bb4f72b609', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7b5676446b1152bacb9ecabbed9d807474141726', class: "description" }, h("slot", { key: 'cd59404bf0cecbc7da8a0e6d80f97b23fd28c869', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '9ccbb4d29eca26eee0118fa329cac63c552b2656', hidden: !this.error, class: "error-description" }, h("slot", { key: '5295afeb285a7479b6813c29f0097c8a81ca919a', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -200,7 +206,8 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
         "minlength": [514],
         "rows": [514],
         "resize": [513],
-        "autosize": [516]
+        "autosize": [516],
+        "autofocus": [516]
     }, undefined, {
         "rows": ["rowsChanged"],
         "autosize": ["autosizeChanged"],

package/dist/components/nv-fieldtextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldtextarea.js","mappings":"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","names":["NvFieldtextarea","uuidv4"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n // Keep ReadOnly before Disabled\n &:has(textarea:read-only) {\n // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n }\n\n &:has(textarea:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-textarea() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldtextarea {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .textarea-wrapper {\n @include form-field-textarea-wrapper();\n\n .textarea-container {\n @include form-field-textarea-container();\n\n textarea {\n @include form-field-textarea();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * textarea field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text textarea field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the textarea field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the textarea field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the textarea’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Specifies the value of the textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The disabled prop lets you turn off the textarea field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to#\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the textarea field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the textarea field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the textarea field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the textarea field’s appearance to indicate successful textarea or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Limits how many characters users can type into the textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * textarea field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n /\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /\n Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n /\n @Prop({ reflect: true })\n readonly resize: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n /\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the textarea value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n /\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /\n If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n /\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n /\n Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n /\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n /\n requestAnimationFrame(() => {\n /\n The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n /\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n });\n });\n }\n }\n\n //#endregion METHODS\n /**************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.inputId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\n />\n </div>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-fieldtextarea.js","mappings":"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","names":["NvFieldtextarea","uuidv4"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n // Keep ReadOnly before Disabled\n &:has(textarea:read-only) {\n // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n }\n\n &:has(textarea:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-textarea() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldtextarea {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .textarea-wrapper {\n @include form-field-textarea-wrapper();\n\n .textarea-container {\n @include form-field-textarea-container();\n\n textarea {\n @include form-field-textarea();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n /\n@Component({\n tag: 'nv-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n /\n @Prop()\n readonly message: string;\n\n /\n Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n /\n @Prop()\n readonly validation: string;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Lets you define the text that explains what users should enter in the text\n * textarea field. It’s a crucial element for making forms clear and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Add helpful hints or extra information under the text textarea field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n /\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /\n Display temporary text inside the textarea field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n /\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /\n Defines the name attribute of the textarea field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the textarea’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Specifies the value of the textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The disabled prop lets you turn off the textarea field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to#\n * clicks or touches.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Display the textarea field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the textarea field as required, ensuring that the user must fill it out\n * before submitting the form.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Alters the textarea field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /\n Changes the textarea field’s appearance to indicate successful textarea or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n Limits how many characters users can type into the textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * textarea field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n /\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /\n Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n /\n @Prop({ reflect: true })\n readonly resize: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n /\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on a <textarea>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the textarea value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n /\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /\n If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n /\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n /\n Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n /\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n /\n requestAnimationFrame(() => {\n /\n The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n /\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n });\n });\n }\n }\n\n //#endregion METHODS\n /**************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.inputId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n autofocus={this.autofocus}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\n />\n </div>\n </div>\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fieldtime.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-77d0fedc.js';
 import { a as startsWithIgnoreCase } from './p-a5c8eee9.js';
-import { T as TimeType } from './p-56f71851.js';
-import { d as defineCustomElement$5 } from './p-a01bdf02.js';
-import { d as defineCustomElement$4 } from './p-e431a0ad.js';
-import { d as defineCustomElement$3 } from './p-18d221e3.js';
-import { d as defineCustomElement$2 } from './p-a9a52105.js';
+import { T as TimeType } from './p-fd65c51f.js';
+import { d as defineCustomElement$5 } from './p-5f5e2bf2.js';
+import { d as defineCustomElement$4 } from './p-659a5ae4.js';
+import { d as defineCustomElement$3 } from './p-73e703a1.js';
+import { d as defineCustomElement$2 } from './p-492ad81d.js';
 import { v as v4 } from './p-f5ff676c.js';
-const nvFieldtimeCss = "nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container .toggle-time-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:auto}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container.focus-within,nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}.time-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);z-index:1000}.time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}.time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth}.time-dropdown .time-columns .time-column::-webkit-scrollbar{width:4px}.time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{border-radius:4px}.time-dropdown .time-columns .time-column:last-child{border-right:none}.time-dropdown .time-columns .time-column .time-option{padding:8px;text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;display:flex;justify-content:center;align-items:center}.time-dropdown .time-columns .time-column .time-option:hover{border-width:1px;border-style:solid;border-color:var(--color-rainbow-10-background)}.time-dropdown .time-columns .time-column .time-option:hover,.time-dropdown .time-columns .time-column .time-option:focus,.time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-custom-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}.time-dropdown .time-columns .time-column .time-option.selected{background:var(--color-rainbow-10-background);color:var(--color-rainbow-10-text)}.time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-custom-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+const nvFieldtimeCss = "nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container .toggle-time-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:auto}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container:focus-within,.input-container:focus{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}.time-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;z-index:1000}.time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}.time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth}.time-dropdown .time-columns .time-column::-webkit-scrollbar{width:4px}.time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{border-radius:4px}.time-dropdown .time-columns .time-column:last-child{border-right:none}.time-dropdown .time-columns .time-column .time-option{padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}.time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}.time-dropdown .time-columns .time-column .time-option:focus,.time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}.time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}.time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
 const NvFieldtimeStyle0 = nvFieldtimeCss;
 const NvFieldtime$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtime extends H {
@@ -79,6 +79,12 @@ const NvFieldtime$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtime extends
          * This affects how the time changes when using arrow keys or spinners.
          */
         this.step = 60000; // In secondes
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -957,30 +963,32 @@ const NvFieldtime$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtime extends
     RenderTimeOptionsColumn(type) {
         return (h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index) => (h("div", { class: {
                 'time-option': true,
-                'selected': option === this.hours,
+                'selected': (type === TimeType.Hours && option === this.hours) ||
+                    (type === TimeType.Minutes && option === this.minutes) ||
+                    (type === TimeType.Seconds && option === this.seconds),
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: '4eefb9bb8c2bfd63cc229cb9d3f5e51dbe2f5351', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8b191f1bca869f85b6186a3cfa66d8f9d886dc07', htmlFor: this.inputId }, h("slot", { key: '84438c62746d81ccf65d76a40ac62e8d445adcf0', name: "label" }, this.label))), h("nv-popover", { key: '1cc212b0ae814a50a288c195d1b7aa7b378f452a', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '1584b3842cbd13989cdd5492baa0588a8aa0015e', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '3f747181762dee542935fa5ee614a315e1aa8413', name: "before-input" }), h("div", { key: '93f2329aa6a09bad318d2a461e87d69fcff8df30', class: "input-container" }, h("slot", { key: '13d2b3f6e3868065cf982690f35996f2f652403b', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            h("input", { key: 'a15dd9dab27ed4918b81680718601d57bac56f2c', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (h(Host, { key: '35ff4b2a7eb1eb3f2503eec2216f0acf8a4087b7', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a137feb35c8ac11429c0ec5226ce02a4ad8c188f', htmlFor: this.inputId }, h("slot", { key: 'cdffe9bec4c87fabe1fd37dba0783d2d1389393d', name: "label" }, this.label))), h("nv-popover", { key: '9735238d52307520ab18519f85c7b91e29095564', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '7b15d62b4a49ad6dc1cb6f487bd9e32678aab32b', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '6d29417ed7997302d22ab883b8e16eea576a6970', name: "before-input" }), h("div", { key: '0ea68d72d9360a76dbbd9670dcc76ed40df7d817', class: "input-container" }, h("slot", { key: '145986a835cc308f6691df969411a23bca0765ab', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            h("input", { key: '62f50adf4dd6bd8a1daa795808443a73ba907910', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            h("span", { key: '0cae25476bdb8a8d70c2d0bb94bffa20e23879a7' }, ":"),
-            h("input", { key: 'bc6b4ff8a8eda66d51726d34d6aedc43e304c670', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            h("span", { key: '9b58e67ba5e138f78feebc5e84c67506c6d3a3c2' }, ":"),
+            h("input", { key: '5c2e673f5a3f34c6e1c4619e793ac0e042bdc2f2', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            h("span", { key: 'b4faefcaa20ffc346757e6a7454fa6474a5aeb97' }, ":"),
-            h("input", { key: 'd94a79e3120bad51df44cb3528ac36bb0a39783d', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            h("span", { key: '52c86d913b1d312cda254b24f22e5c0fe3f7ff3b' }, ":"),
+            h("input", { key: 'b882cb0061bcebc3c487857e2d1f4907a9c82a92', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], h("nv-iconbutton", { key: '791265d0c8ce93514a5d1972784f824723dc66b8', class: "toggle-time-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '9c19922e738549938040f36b015bb7c85b09453c', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '4669516002acd3d1936d3beec1e91950fbdca647', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '263ec0dc7d5cbe1f6360522975d74a41a2ad73a8', name: "after-input" })), h("div", { key: '7ced75636f91d7079f11ecabe31f4cc9150c6771', class: "time-dropdown", slot: "content" }, h("div", { key: '719a8d6720ca4d17a90d614a955d5449f4334e89', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], h("nv-iconbutton", { key: 'b6916d20ca835471169d2c8bc9c9506b5896d14d', class: "toggle-time-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'a40f6ca94e578c85d30fb59ea7f8719ed18b9feb', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '9e042ce055d8369d74d09f3c1fb483b69693a348', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '47ac01deec7af0b6632ed424ab772713bfc3ce50', name: "after-input" })), h("div", { key: '654b9176d6f04161a855c249f086aa6f40389977', class: "time-dropdown", slot: "content" }, h("div", { key: '422b4c774aa084fa2a8062b9b53ff37abf9c2296', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f1845d065526c7b73cd95fb66278dcff001c477b', class: "description" }, h("slot", { key: 'b4d4c050815f36cdbae73eb0ccd99a12040d5cd9', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4b5a39a8d8b6370ffe13dd0db969348e283701ae', hidden: !this.error, class: "error-description" }, h("slot", { key: 'f07ca5b51fe39ff8d7c64b674515aa0c57c04a6e', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f66ec4ddce5d506f6bf845dd77257d8c401fd9d8', class: "description" }, h("slot", { key: '454bd29d86f8f100062db5ff81bb3f31df225d72', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e170ea292e2b4b90f78dcaa82e2b9985634d7aec', hidden: !this.error, class: "error-description" }, h("slot", { key: '57a04082aaf4869e8f63db68975208e64769bc07', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -1005,6 +1013,7 @@ const NvFieldtime$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtime extends
         "step": [514],
         "max": [513],
         "min": [513],
+        "autofocus": [516],
         "hours": [32],
         "minutes": [32],
         "seconds": [32]