npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.29 → 3.0.0-beta.30 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.29 → 3.0.0-beta.30

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 (464) hide show

package/dist/esm/nv-fieldmultiselect.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nv-fieldmultiselect.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldmultiselect/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldmultiselect {\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 &[required]:not([required='false']) {\n > label {\n @include form-field-label-required();\n }\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n width: 100%;\n display: block;\n }\n\n .input-wrapper-multiselect {\n @include form-field-input-wrapper();\n width: 100%;\n }\n\n .input-container-multiselect {\n @include form-field-input-container();\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n min-height: 40px;\n input,\n p.non-filterable-text {\n @include form-field-input();\n width: 100%;\n padding-right: 2rem;\n flex-grow: 1;\n margin: 0;\n min-height: 100%;\n box-sizing: border-box;\n }\n\n .toggle-dropdown-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n }\n\n nv-icon.validation {\n @include form-field-icon();\n position: absolute;\n right: 50px;\n }\n\n &.focus-within,\n &:hover {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0px 0px 0px var(--focus-field-stroke)\n var(--nv-field-focus-box-shadow);\n }\n }\n\n .non-filterable-text {\n display: block;\n border-radius: var(--form-field-radius);\n background-color: var(--nv-field-background);\n color: var(--components-form-field-content-text);\n font-size: var(--form-field-font-size);\n font-weight: 500;\n line-height: var(--form-field-line-height);\n box-sizing: border-box;\n cursor: pointer;\n height: 100%;\n min-height: 40px;\n\n span {\n display: inline-block;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n\n hr {\n border: none;\n border-top: 1px solid var(--dropdown-divider-color, #ccc);\n margin: 0.5rem 0;\n }\n}\n\n.input-container-multiselect.focus-within,\n.input-container-multiselect:hover {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0px 0px 0px var(--focus-field-stroke)\n var(--nv-field-focus-box-shadow);\n}\n\n.no-results-message {\n text-align: center;\n padding: 10px;\n color: var(--nv-field-error-text, #999);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - The content of the list.\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\n@Component({\n tag: 'nv-fieldmultiselect',\n styleUrl: 'nv-fieldmultiselect.scss',\n shadow: false,\n})\nexport class NvFieldmultiselect {\n @Element() el: HTMLNvFieldmultiselectElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n /**\n * Timer for debouncing input events.\n * Private property preferred over @State as it:\n * - Doesn't need to trigger re-renders\n * - Is purely for internal logic\n * - Improves performance by avoiding Stencil's reactivity system\n */\n private debounceTimer: number;\n /**\n * Flag to prevent concurrent reordering operations.\n * Private property preferred over @State as it:\n * - Manages internal component logic without affecting UI\n * - Avoids unnecessary re-renders\n * - Provides better performance for rapid state changes\n * - Only needs class-level scope\n */\n private isReordering: boolean = false;\n\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 * 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 * 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 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.\n */\n @Prop({ reflect: true })\n readonly description: string;\n\n /**\n * Display temporary text inside the input field.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the maximum height of the multiselect list when open.\n */\n @Prop({ reflect: true })\n readonly maxHeight: string = '200px';\n\n /**\n * Text for the badge showing the number of selected items.\n */\n @Prop({ reflect: true })\n readonly badgeLabel: string = '';\n\n /**\n * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyresult: string = 'No results found';\n\n /**\n * Marks the input field as required.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field's appearance to indicate an error.\n */\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error.\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /**\n * Display the input field's content without allowing users to change it.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Disables the input field.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * The autocomplete prop for faster input filling.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /**\n * Enables or disables the filtering feature for the multiselect items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n /**\n * Specifies the value of the input field.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * State of the multiselect popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * Multiselect mode: 'options' (JSON data) or 'slots' (custom items).\n * This property is now reflected in the modeState.\n */\n @Prop({ reflect: true })\n readonly mode: 'options' | 'slots';\n\n /**\n * List of options available in the multiselect.\n * @description The options are passed as a JSON string.\n * @example options='[{\"label\": \"Option 1\", \"value\": \"option1\"}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'\n */\n @Prop({ reflect: true })\n readonly options?: string;\n\n /**\n * Options configuration for the multiselect items.\n */\n @State()\n parsedOptions: Array<{\n /** Label to display for the option */\n label: string;\n /** Value associated with the option */\n value: string;\n /** Whether this option is a divider */\n isDivider?: boolean;\n /** Whether this option is disabled */\n disabled?: boolean;\n /** Additional description for the option */\n description?: string;\n /** Whether this option is pre-checked */\n checked?: boolean;\n }> = [];\n\n /**\n * List of selected values in the multiselect.\n */\n @State()\n selectedValues: string[] = [];\n\n /**\n * Sorted options for display.\n */\n @State()\n sortedOptions: Array<{\n /** Label to display for the option */\n label: string;\n /** Value associated with the option */\n value: string;\n /** Whether this option is a divider */\n isDivider?: boolean;\n }> = [];\n\n /**\n * The text entered by the user for filtering multiselect items.\n */\n @State()\n filterText: string = '';\n\n /**\n * Determines whether the multiselect is filterable.\n */\n @State()\n isFilterable: boolean = this.filterable;\n\n /**\n * Delay in milliseconds before the search is triggered when typing in the filter input.\n * @default 300\n */\n @Prop({ reflect: true })\n readonly debounceDelay: number = 300;\n\n /**\n * State for the mode of the multiselect.\n * @type {'options' | 'slots'}\n * @default 'options'\n */\n @State()\n modeState: 'options' | 'slots' = 'options'; // Default value\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Subscribe to click outside event.\n */\n connectedCallback() {\n this.modeState = this.mode;\n this.handleOptionsChange(this.options);\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n // If we don't have parsed options, initialize with slot elements\n if (!this.parsedOptions || this.parsedOptions.length === 0) {\n // Wait for the slot to be available\n requestAnimationFrame(() => {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n // Initialize selectedValues with checked elements\n this.selectedValues = items\n .filter(item => item.hasAttribute('checked'))\n .map(item => item.getAttribute('value') || '');\n });\n }\n\n // Initialize the sorted options array with the parsed options for initial rendering\n this.sortedOptions = [...this.parsedOptions];\n\n // Handle pre-selection during component initialization\n this.setInitialSelection();\n\n // Apply filtering if the multiselect is filterable and there is a value\n if (this.filterable && this.value) {\n this.filterText = this.value.toLowerCase();\n this.filterItems();\n } else {\n // Reset visibility state of all dropdown items\n this.resetFilter();\n }\n\n const slot = this.el.querySelector('slot[name=\"content\"]');\n if (slot) {\n const observer = new MutationObserver(() => {\n this.reorderSlotContent();\n });\n\n observer.observe(slot, {\n childList: true,\n subtree: true,\n });\n\n this.reorderSlotContent();\n }\n }\n\n /**\n * Unsubscribe from click outside event.\n */\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n /**\n * Event emitted when an item is selected.\n */\n @Event()\n dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when the selection changes in the multiselect.\n * Emits the current list of selected values.\n */\n @Event()\n multiselectChange: EventEmitter<string[]>;\n\n /**\n * Emitted when the input loses focus.\n * @param {CustomEvent<boolean>} event - The event object containing the focus state.\n */\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n // Update the open state of popover\n this.open = event.detail;\n\n if (this.open) {\n if (this.filterText) {\n this.filterItems();\n }\n } else {\n this.reorderSlotContent();\n }\n }\n\n /**\n * Listen for the `itemChecked` event emitted by child items.\n * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.\n */\n @Listen('itemChecked')\n handleItemChecked(event: CustomEvent) {\n if (this.disabled || this.readonly) return;\n\n const { value, checked } = event.detail;\n\n if (value !== undefined && value !== null) {\n const newSelectedValues = [...this.selectedValues];\n\n if (checked && !newSelectedValues.includes(value)) {\n newSelectedValues.push(value);\n } else if (!checked) {\n const index = newSelectedValues.indexOf(value);\n if (index > -1) {\n newSelectedValues.splice(index, 1);\n }\n }\n\n this.selectedValues = newSelectedValues;\n this.multiselectChange.emit(this.selectedValues);\n }\n }\n\n /**\n * Emitted when the options change.\n * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.\n */\n @Watch('options')\n handleOptionsChange(\n newValue:\n | string\n | Array<{\n /** Label to display for the option */\n label: string;\n /** Value associated with the option */\n value: string;\n /** Whether this option is a divider */\n isDivider?: boolean;\n /** Whether this option is disabled */\n disabled?: boolean;\n /** Additional description for the option */\n description?: string;\n /** Whether this option is pre-checked */\n checked?: boolean;\n }>,\n ) {\n if (typeof newValue === 'string') {\n try {\n const parsedOpts = JSON.parse(newValue);\n\n // Process options: initialize selections, reorder items, and add dividers where needed\n this.selectedValues = parsedOpts\n .filter(option => option.checked)\n .map(option => option.value);\n\n const checkedItems = parsedOpts.filter(option =>\n this.selectedValues.includes(option.value),\n );\n const uncheckedItems = parsedOpts.filter(\n option => !this.selectedValues.includes(option.value),\n );\n\n this.parsedOptions = [\n ...checkedItems,\n ...(checkedItems.length > 0 && uncheckedItems.length > 0\n ? [{ isDivider: true, label: '', value: '' }]\n : []),\n ...uncheckedItems,\n ];\n } catch (error) {\n console.error('Error parsing options:', error);\n this.parsedOptions = [];\n }\n } else if (Array.isArray(newValue)) {\n this.selectedValues = newValue\n .filter(option => option.checked)\n .map(option => option.value);\n this.parsedOptions = [...newValue];\n } else {\n this.parsedOptions = [];\n }\n\n this.reorderSlotContent();\n }\n\n /**\n * Emitted when the value changes.\n */\n @Watch('value')\n watchValueHandler() {\n // Handle value change and update the corresponding multiselect item if it exists\n this.setInitialSelection();\n }\n\n /**\n * Emitted when the filterable property changes.\n * @param {boolean} newValue - The new value of the filterable property.\n */\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n // Add a watcher for the slot content\n @Listen('slotchange')\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n if (slot.name === 'content') {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n // Update selectedValues when slot content changes\n this.selectedValues = items\n .filter(item => item.hasAttribute('checked'))\n .map(item => item.getAttribute('value') || '');\n }\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Set the initial selection based on the current value and update the inputElement value.\n */\n private setInitialSelection() {\n const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));\n\n const selectedItem = items.find(\n item =>\n item.getAttribute('label') === this.value ||\n item.getAttribute('value') === this.value ||\n item.textContent?.trim() === this.value,\n );\n\n // Remove 'selected' from all items first to reset the state\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n // Add the `selected` attribute and `selected` class for visual styling\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n\n // Update the value and inputElement value to reflect the pre-selected item\n this.value =\n selectedItem.getAttribute('label') ||\n selectedItem.getAttribute('value') ||\n selectedItem.textContent?.trim() ||\n '';\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n }\n }\n\n /**\n * Reset the filter and make all items visible.\n */\n @Method()\n async resetFilter(): Promise<void> {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n // Reset visibility state of all dropdown items\n items.forEach(item => {\n item.style.display = '';\n });\n\n // Clean up filter-related UI elements\n const ul = this.el.querySelector('ul');\n if (ul) {\n const emptyMessage = ul.querySelector('[data-empty]');\n const divider = ul.querySelector('hr.dropdown-divider');\n if (emptyMessage) emptyMessage.remove();\n if (divider) divider.remove();\n }\n }\n\n /**\n * Returns the list of selected values.\n * @returns {string[]} The selected values.\n */\n @Method()\n async getSelectedValues(): Promise<string[]> {\n return this.selectedValues;\n }\n\n /**\n * Reorder the content of the slot.\n */\n private reorderSlotContent() {\n if (this.modeState === 'options') return;\n\n const ul = this.el.querySelector('ul');\n if (!ul) return;\n\n // First remove all existing dividers\n ul.querySelectorAll('hr.dropdown-divider').forEach(divider =>\n divider.remove(),\n );\n\n // Get all visible items (not hidden)\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n ).filter(item => item.style.display !== 'none');\n\n // Check if we have an empty message\n const hasEmptyMessage = ul.querySelector('[data-empty]');\n if (hasEmptyMessage) {\n // If we have an empty message, don't reorder\n return;\n }\n\n // Separate selected and unselected items\n const selectedItems = items.filter(item =>\n this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n const unselectedItems = items.filter(\n item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n\n // Empty the list\n while (ul.firstChild) {\n ul.removeChild(ul.firstChild);\n }\n\n // Reorder items\n selectedItems.forEach(item => ul.appendChild(item));\n\n // Add divider only if we have both selected AND unselected items\n // AND if visible items are different\n if (\n selectedItems.length > 0 &&\n unselectedItems.length > 0 &&\n items.length > 1\n ) {\n const divider = document.createElement('hr');\n divider.className = 'dropdown-divider';\n ul.appendChild(divider);\n }\n\n // Add unselected items\n unselectedItems.forEach(item => ul.appendChild(item));\n }\n\n /**\n * Reorder the content for options mode with async handling\n */\n private async reorderOptionsContent() {\n if (\n this.isReordering ||\n !this.parsedOptions ||\n this.parsedOptions.length === 0 ||\n this.modeState !== 'options'\n ) {\n return;\n }\n\n try {\n this.isReordering = true;\n\n // Update parsedOptions first\n const optionsWithoutDivider = this.parsedOptions.filter(\n opt => !opt.isDivider,\n );\n const selectedOptions = optionsWithoutDivider.filter(opt =>\n this.selectedValues.includes(opt.value),\n );\n const unselectedOptions = optionsWithoutDivider.filter(\n opt => !this.selectedValues.includes(opt.value),\n );\n\n // Update parsedOptions with new divider\n this.parsedOptions = [\n ...selectedOptions,\n ...(selectedOptions.length > 0 && unselectedOptions.length > 0\n ? [{ isDivider: true, label: '', value: '' }]\n : []),\n ...unselectedOptions,\n ];\n\n // Then update DOM\n await new Promise(resolve => requestAnimationFrame(resolve));\n\n const ul = this.el.querySelector('ul');\n if (!ul) return;\n\n // Get all items\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n // Remove all existing dividers\n ul.querySelectorAll('hr.dropdown-divider').forEach(divider =>\n divider.remove(),\n );\n\n // Separate selected and unselected items\n const selectedItems = items.filter(item =>\n this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n const unselectedItems = items.filter(\n item => !this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n\n // Empty the list\n while (ul.firstChild) {\n ul.removeChild(ul.firstChild);\n }\n\n // Reorder items\n selectedItems.forEach(item => ul.appendChild(item));\n\n // Add divider only if there are both selected AND unselected items\n if (selectedItems.length > 0 && unselectedItems.length > 0) {\n const divider = document.createElement('hr');\n divider.className = 'dropdown-divider';\n ul.appendChild(divider);\n }\n\n // Add unselected items\n unselectedItems.forEach(item => ul.appendChild(item));\n } finally {\n this.isReordering = false;\n }\n }\n\n /**\n * Filter multiselect items based on the text entered by the user.\n */\n private filterItems() {\n const ul = this.el.querySelector('ul');\n if (!ul) return;\n\n // Remove existing empty message if any\n const existingEmptyMessage = ul.querySelector('[data-empty]');\n if (existingEmptyMessage) {\n existingEmptyMessage.remove();\n }\n\n if (!this.filterText.trim()) {\n if (this.parsedOptions && this.parsedOptions.length > 0) {\n // Reset options display\n const items = Array.from(\n ul.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n items.forEach(item => {\n item.style.display = '';\n });\n } else {\n // Reset slot items display\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n items.forEach(item => {\n item.style.display = '';\n });\n }\n this.reorderSlotContent();\n return;\n }\n\n const normalizedFilter = this.normalizeText(this.filterText);\n let hasVisibleItems = false;\n\n if (this.parsedOptions && this.parsedOptions.length > 0) {\n // Filter options mode\n const items = Array.from(\n ul.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n items.forEach(item => {\n const option = this.parsedOptions.find(\n opt => opt.value === item.getAttribute('value'),\n );\n if (option && !option.isDivider) {\n const matchesFilter =\n this.normalizeText(option.label).includes(normalizedFilter) ||\n this.normalizeText(option.value).includes(normalizedFilter);\n\n item.style.display = matchesFilter ? '' : 'none';\n if (matchesFilter) hasVisibleItems = true;\n }\n });\n\n // Hide dividers if needed\n const dividers = ul.querySelectorAll('hr.dropdown-divider');\n dividers.forEach(divider => {\n (divider as HTMLElement).style.display = hasVisibleItems ? '' : 'none';\n });\n } else {\n // Filter slot items mode\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n items.forEach(item => {\n const label = item.getAttribute('label') || '';\n const value = item.getAttribute('value') || '';\n const textContent = item.textContent || '';\n\n const matchesFilter =\n this.normalizeText(label).includes(normalizedFilter) ||\n this.normalizeText(value).includes(normalizedFilter) ||\n this.normalizeText(textContent).includes(normalizedFilter);\n\n item.style.display = matchesFilter ? '' : 'none';\n if (matchesFilter) hasVisibleItems = true;\n });\n }\n\n // Add empty message if no items match the filter\n if (!hasVisibleItems) {\n const emptyMessage = document.createElement('li');\n emptyMessage.setAttribute('data-empty', 'true');\n emptyMessage.textContent = this.emptyresult;\n emptyMessage.classList.add('no-results-message');\n ul.appendChild(emptyMessage);\n }\n\n this.reorderSlotContent();\n }\n\n /**\n * Filter multiselect items in options mode.\n */\n private filterOptionsItems() {\n const ul = this.el.querySelector('ul');\n if (!ul) return;\n\n // Remove existing empty message if any\n const existingEmptyMessage = ul.querySelector('[data-empty]');\n if (existingEmptyMessage) {\n existingEmptyMessage.remove();\n }\n\n if (!this.filterText.trim()) {\n // Reset options display\n const items = Array.from(\n ul.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n items.forEach(item => {\n item.style.display = '';\n });\n this.reorderOptionsContent();\n return;\n }\n\n const normalizedFilter = this.normalizeText(this.filterText);\n let hasVisibleItems = false;\n\n // Filter options mode\n const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));\n\n items.forEach(item => {\n const option = this.parsedOptions.find(\n opt => opt.value === item.getAttribute('value'),\n );\n if (option && !option.isDivider) {\n const matchesFilter =\n this.normalizeText(option.label).includes(normalizedFilter) ||\n this.normalizeText(option.value).includes(normalizedFilter);\n\n item.style.display = matchesFilter ? '' : 'none';\n if (matchesFilter) hasVisibleItems = true;\n }\n });\n\n // Get visible items after filtering\n const visibleItems = items.filter(item => item.style.display !== 'none');\n const visibleSelectedItems = visibleItems.filter(item =>\n this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n\n // Hide divider if all visible items are either all selected or all unselected\n const divider = ul.querySelector('hr.dropdown-divider');\n if (divider) {\n const shouldShowDivider =\n visibleSelectedItems.length > 0 &&\n visibleSelectedItems.length < visibleItems.length;\n (divider as HTMLElement).style.display = shouldShowDivider ? '' : 'none';\n }\n\n // Add empty message if no items match the filter\n if (!hasVisibleItems) {\n const emptyMessage = document.createElement('li');\n emptyMessage.setAttribute('data-empty', 'true');\n emptyMessage.textContent = this.emptyresult;\n emptyMessage.classList.add('no-results-message');\n ul.appendChild(emptyMessage);\n }\n }\n\n /**\n * Filter multiselect items in slots mode\n */\n private filterSlotsItems() {\n if (this.modeState === 'options') return;\n\n const ul = this.el.querySelector('ul');\n if (!ul) return;\n\n // Remove existing empty message if any\n const existingEmptyMessage = ul.querySelector('[data-empty]');\n if (existingEmptyMessage) {\n existingEmptyMessage.remove();\n }\n\n // If filter text is empty, reset all items visibility\n if (!this.filterText.trim()) {\n this.resetFilter();\n return;\n }\n\n const normalizedFilter = this.normalizeText(this.filterText);\n let hasVisibleItems = false;\n\n // Get all items and preserve them in the DOM\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n // Instead of removing/reordering, just hide/show items\n items.forEach(item => {\n const label = item.getAttribute('label') || '';\n const value = item.getAttribute('value') || '';\n const textContent = item.textContent?.trim() || '';\n\n const matchesFilter =\n this.normalizeText(label).includes(normalizedFilter) ||\n this.normalizeText(value).includes(normalizedFilter) ||\n this.normalizeText(textContent).includes(normalizedFilter);\n\n item.style.display = matchesFilter ? '' : 'none';\n if (matchesFilter) hasVisibleItems = true;\n });\n\n // Get visible items after filtering\n const visibleItems = items.filter(item => item.style.display !== 'none');\n const visibleSelectedItems = visibleItems.filter(item =>\n this.selectedValues.includes(item.getAttribute('value') || ''),\n );\n\n // Hide divider if all visible items are either all selected or all unselected\n const divider = ul.querySelector('hr.dropdown-divider');\n if (divider) {\n const shouldShowDivider =\n visibleSelectedItems.length > 0 &&\n visibleSelectedItems.length < visibleItems.length;\n (divider as HTMLElement).style.display = shouldShowDivider ? '' : 'none';\n }\n\n // Add empty message if no items match the filter\n if (!hasVisibleItems) {\n const emptyMessage = document.createElement('li');\n emptyMessage.setAttribute('data-empty', 'true');\n emptyMessage.textContent = this.emptyresult;\n emptyMessage.classList.add('no-results-message');\n ul.appendChild(emptyMessage);\n }\n }\n\n /**\n * Handle badge close for options mode.\n */\n private handleBadgeCloseOptions = (): void => {\n this.selectedValues = [];\n this.multiselectChange.emit(this.selectedValues);\n\n // Uncheck all elements\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n items.forEach(item => {\n item.checked = false;\n item.style.display = '';\n });\n\n // Reorder options without the divider since there are no selected elements\n this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);\n\n // Reorder options without the divider since there are no selected elements\n this.reorderOptionsContent();\n };\n\n /**\n * Handle badge close for slots mode.\n */\n private handleBadgeCloseSlots = (): void => {\n this.selectedValues = [];\n this.multiselectChange.emit(this.selectedValues);\n\n // Uncheck all elements\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n );\n\n items.forEach(item => {\n item.checked = false;\n item.style.display = '';\n });\n\n // Reorder slot content\n this.reorderSlotContent();\n };\n\n /**\n * Normalizes text by removing accents and converting to lowercase\n * @param {string} text - The text to normalize\n * @returns {string} The normalized text\n *\n * @example\n * normalizeText(\"Café Latte\") => \"cafe latte\"\n *\n * @description\n * This function performs text normalization in three steps:\n * 1. Decomposes characters into their base form and combining characters (NFD)\n * 2. Removes all diacritical marks (accents, umlauts, etc.)\n * 3. Converts to lowercase and trims whitespace\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()\n * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms\n */\n private normalizeText(text: string): string {\n return text\n .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)\n .replace(/[\\u0300-\\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)\n .toLowerCase() // Convert to lowercase\n .trim(); // Remove leading and trailing whitespace\n }\n\n /**\n * Handle click outside the component.\n * @param {MouseEvent} event - The click event.\n */\n private handleClickOutside(event: MouseEvent) {\n if (\n this.el.contains(event.target as Node) ||\n (this.inputElement && this.inputElement.contains(event.target as Node))\n ) {\n return;\n }\n\n // Force le même comportement que la fermeture par iconbutton\n if (this.modeState === 'options') {\n this.handlePopoverClose();\n } else {\n this.popoverElement.hide();\n }\n }\n\n /**\n * Handle popover close\n */\n private handlePopoverClose = () => {\n this.open = false;\n this.filterText = '';\n\n if (this.modeState === 'options') {\n this.reorderOptionsContent();\n } else {\n this.reorderSlotContent();\n }\n\n // Reset filter if needed\n if (this.filterable) {\n this.resetFilter();\n }\n };\n\n /**\n * Handle keyboard events for options mode.\n * @param {KeyboardEvent} event - The keyboard event.\n */\n private handleKeyDownOptions = (event: KeyboardEvent) => {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n ) as HTMLNvFielddropdownitemcheckElement[];\n\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.handlePopoverClose();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n };\n\n /**\n * Handle input blur for options mode.\n */\n private handleInputBlurOptions = () => {\n setTimeout(() => {\n if (!this.el.contains(document.activeElement)) {\n this.handlePopoverClose();\n }\n }, 150);\n };\n\n /**\n * Handle keyboard events & arrow key navigation.\n * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.\n * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.\n * @param {KeyboardEvent} event - The keyboard event.\n */\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n // Focus on the first item if the list is not filterable\n if (!this.filterable) {\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n ) as HTMLNvFielddropdownitemcheckElement[];\n\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n this.popoverElement.hide();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n }\n\n /**\n * Updates the highlighted item in the dropdown list.\n *\n * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.\n * @param {number} index - The index of the item to highlight.\n */\n private updateHighlightedItem(\n items: (\n | HTMLNvFielddropdownitemElement\n | HTMLNvFielddropdownitemcheckElement\n )[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.setAttribute('tabindex', '0');\n (item as HTMLElement).focus();\n } else {\n item.classList.remove('highlighted');\n item.setAttribute('tabindex', '-1');\n }\n });\n }\n\n /**\n * Focus on the first item in the dropdown list.\n */\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitemcheck');\n\n if (firstItem) {\n firstItem.setAttribute('tabindex', '0');\n firstItem.classList.add('highlighted');\n firstItem.focus();\n } else {\n console.warn('No first item found to focus');\n }\n }\n\n /**\n * Handle click on the input container for options mode.\n * @param {MouseEvent} event - The click event.\n */\n private handleInputContainerClickOptions = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n this.popoverElement.show();\n\n const inputContainer = this.el.querySelector(\n '.input-container',\n ) as HTMLElement;\n if (inputContainer) {\n inputContainer.classList.add('focus-within');\n\n const removeFocusWithin = () => {\n inputContainer.classList.remove('focus-within');\n };\n\n this.popoverElement.addEventListener('hide', removeFocusWithin);\n }\n }\n };\n\n /**\n * Handle click on the input container for slots mode.\n * @param {MouseEvent} event - The click event.\n */\n private handleInputContainerClickSlots = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n this.popoverElement.show();\n\n const inputContainer = this.el.querySelector(\n '.input-container',\n ) as HTMLElement;\n if (inputContainer) {\n inputContainer.classList.add('focus-within');\n\n const removeFocusWithin = () => {\n inputContainer.classList.remove('focus-within');\n };\n\n this.popoverElement.addEventListener('hide', removeFocusWithin);\n }\n }\n };\n\n /**\n * Handle input change for options mode.\n * @param {Event} event - The input event.\n */\n private readonly handleInputOptions = (event: Event) => {\n if (!this.filterable) return;\n if (this.disabled || this.readonly) {\n return;\n }\n\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(this.value);\n\n // Clear any existing timer\n if (this.debounceTimer) {\n window.clearTimeout(this.debounceTimer);\n }\n\n // Set a new timer for filtering\n this.debounceTimer = window.setTimeout(() => {\n this.filterText = input.value.toLowerCase();\n this.filterOptionsItems();\n }, this.debounceDelay);\n };\n\n /**\n * Handle input change for slots mode\n * @param {Event} event - The input event.\n */\n private readonly handleInputSlots = (event: Event) => {\n if (!this.filterable) return;\n if (this.disabled || this.readonly) return;\n\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(this.value);\n\n // Clear any existing timer\n if (this.debounceTimer) {\n window.clearTimeout(this.debounceTimer);\n }\n\n // Set a new timer for filtering\n this.debounceTimer = window.setTimeout(() => {\n this.filterText = input.value.toLowerCase();\n this.filterSlotsItems();\n }, this.debounceDelay);\n };\n\n /**\n * Handle input focus for options mode.\n */\n private handleInputFocusOptions = () => {\n if (this.disabled || this.readonly) {\n return;\n }\n this.open = true;\n };\n\n /**\n * Handle input focus for slots mode.\n */\n private handleInputFocusSlots = () => {\n if (this.disabled || this.readonly) {\n return;\n }\n this.open = true;\n };\n\n /**\n * Handle input blur for slots mode.\n */\n private handleInputBlurSlots = () => {\n setTimeout(() => {\n if (!this.el.contains(document.activeElement)) {\n this.handlePopoverClose();\n }\n }, 150);\n };\n\n /**\n * Toggle the multiselect popover for options mode.\n */\n private togglePopoverOptions = (): void => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.open) {\n this.handlePopoverClose();\n } else {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n this.focusFirstItem();\n }\n }\n };\n\n /**\n * Toggle the multiselect popover for slots mode.\n */\n private togglePopoverSlots = (): void => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n this.open = !this.open;\n if (this.open) {\n this.popoverElement.show();\n\n if (!this.filterable) {\n this.focusFirstItem();\n }\n } else {\n this.popoverElement.hide();\n }\n };\n\n /**\n * Handle keyboard events for slots mode.\n * @param {KeyboardEvent} event - The keyboard event.\n */\n private handleKeyDownSlots = (event: KeyboardEvent) => {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n ) as HTMLNvFielddropdownitemcheckElement[];\n\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.handlePopoverClose();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n };\n\n /**\n * Watch for changes in the mode prop and update modeState accordingly\n * @param {string} newValue - The new mode value\n */\n @Watch('mode')\n handleModeChange(newValue: 'options' | 'slots') {\n this.modeState = newValue;\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n /**\n * Renders the component in options mode\n * @returns {any} The JSX for options mode\n */\n private renderOptionsMode() {\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 <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container-multiselect\">\n <slot name=\"leading-input\"></slot>\n\n <nv-badge\n slot=\"leading-input\"\n prevent-auto-close=\"true\"\n color=\"10\"\n dismissible={this.selectedValues.length > 0}\n hidden={this.selectedValues.length <= 0}\n label={`${this.selectedValues.length} ${this.badgeLabel}`}\n aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n onCloseClicked={this.handleBadgeCloseOptions}\n ></nv-badge>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInputOptions}\n onFocus={this.handleInputFocusOptions}\n onBlur={this.handleInputBlurOptions}\n onKeyDown={this.handleKeyDownOptions}\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClickOptions}\n tabIndex={0}\n onKeyDown={this.handleKeyDownOptions}\n onFocus={this.handleInputFocusOptions}\n role=\"combobox\"\n aria-expanded={this.open}\n >\n <span>{this.value || this.placeholder}</span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopoverOptions}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div\n slot=\"content\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n >\n <ul role=\"presentation\">\n {this.parsedOptions.map(option =>\n option.isDivider ? (\n <hr class=\"dropdown-divider\" />\n ) : (\n <nv-fielddropdownitemcheck\n label={option.label}\n description={option.description}\n value={option.value}\n checked={this.selectedValues.includes(option.value)}\n disabled={option.disabled}\n ></nv-fielddropdownitemcheck>\n ),\n )}\n </ul>\n </div>\n </nv-popover>\n\n {this.renderDescriptions()}\n </Host>\n );\n }\n\n /**\n * Renders the component in slots mode\n * @returns {any} The JSX for slots mode\n */\n private renderSlotsMode() {\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 <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container-multiselect\"\n onClick={this.handleInputContainerClickSlots}\n >\n <slot name=\"leading-input\">\n <p>No leading input</p>\n </slot>\n\n <nv-badge\n slot=\"leading-input\"\n prevent-auto-close=\"true\"\n color=\"10\"\n dismissible={this.selectedValues.length > 0}\n hidden={this.selectedValues.length <= 0}\n label={`${this.selectedValues.length} ${this.badgeLabel}`}\n aria-label={`Clear all ${this.selectedValues.length} ${this.badgeLabel} items`}\n onCloseClicked={this.handleBadgeCloseSlots}\n ></nv-badge>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInputSlots}\n onFocus={this.handleInputFocusSlots}\n onBlur={this.handleInputBlurSlots}\n onKeyDown={this.handleKeyDownSlots}\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClickSlots}\n tabIndex={0}\n onKeyDown={this.handleKeyDownSlots}\n onFocus={this.handleInputFocusSlots}\n role=\"combobox\"\n aria-expanded={this.open}\n >\n <span>{this.value || this.placeholder}</span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopoverSlots}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div\n slot=\"content\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n style={{ 'max-height': this.maxHeight, 'overflow-y': 'auto' }}\n >\n <slot name=\"content\"></slot>\n </div>\n </nv-popover>\n\n {this.renderDescriptions()}\n </Host>\n );\n }\n\n /**\n * Renders description and error description sections\n * @returns {any} The JSX for descriptions\n */\n private renderDescriptions() {\n return [\n (this.description || this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\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 ];\n }\n\n /**\n * Main render method that decides which mode to render\n * @returns {any} The JSX for the component\n */\n render() {\n return this.modeState === 'options'\n ? this.renderOptionsMode()\n : this.renderSlotsMode();\n }\n}\n//#endregion RENDER\n"],"version":3}

package/dist/esm/nv-fieldnumber.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { v as v4 } from './v4-a79185f4.js';
@@ -9,49 +9,6 @@ const NvFieldnumber = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Define the increment value for the input field. It determines how much the
-         * value will increase or decrease when the user clicks the stepper buttons.
-         */
-        this.step = 1;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -76,6 +33,23 @@ const NvFieldnumber = class {
         this.isMaxValueReached = () => {
             return this.max !== undefined && this.value >= this.max;
         };
+        this.message = undefined;
+        this.validation = undefined;
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.step = 1;
+        this.value = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -99,9 +73,9 @@ const NvFieldnumber = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '5d63f2dca1678d7ea971b52a40f55481eae421d6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '145560063839b6fe34e3c8431003d5f5fb5eb65d', htmlFor: this.inputId }, h("slot", { key: 'd36ca2394cf3ce62c7d5f6177480a41979d7d1cb', name: "label" }, this.label))), h("div", { key: 'c53243b5f2019033a24b22120e1bd5209c415075', class: "input-wrapper" }, h("slot", { key: 'e32e0fdd6b0e27cbb719b3d962fb6417eb2f3e1b', name: "before-input" }), h("div", { key: 'b9de75924bde8a2cd1108e34173d0f867f0bdcea', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '4d0bbdce8201370f1f62d06eabb5a2bd3b248c1f', name: "leading-input" }), h("input", { key: '0c85ade03f9ca7e6c3aca788b3a107d0807d7b70', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '5da0668775a6841bf01c662009ec7bf9048b1622', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'be8e6e9e3c5428885aed216f49f1510b0fb29201', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '84ddbc5eb7e35ea216e0c9650dcbcb865e3bd726', class: "stepper-spacer" }), h("div", { key: '9ba5a8087ef4fa46614d1c7492c80781af5c4a40', class: "stepper" }, h("nv-icon", { key: 'a3b5adffd9b7a5a266711f02ed2862e84f2a5839', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), h("nv-icon", { key: '1a37933cfeab32a057807173a3b411e23a3c93b0', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), h("slot", { key: '99c9105e0f46dfb5e56fa3949dd99264f61e7be5', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3b9df6f1e03117123b376c637840e4219ee4e45d', class: "description" }, h("slot", { key: 'deb7681e9d6fe583e418f6d25248b667c4b2fcf0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6848cf6e73924df0552ed71078d19cc1423b6d72', hidden: !this.error, class: "error-description" }, h("slot", { key: 'cf5526311207e2fca942ba84a5480cae6917060d', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'b8d099c0f8642f6b0c1bae142a4b29d93349df7b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '687f3458a59403ebf563cef230cf99dc6e086bb9', htmlFor: this.inputId }, h("slot", { key: 'ca476c5b6af39760f69d7da7bf3c4c90a7e89e6f', name: "label" }, this.label))), h("div", { key: '48ef137de9492e2403089c799f4fcea0b01d0f8f', class: "input-wrapper" }, h("slot", { key: '46342a3cc4b245bb2786c8fabc82f3090c9dbb52', name: "before-input" }), h("div", { key: 'cb57b1193cb5344d76a346fcd1942057a8e75752', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'fe2de873b80247a33bb33d902fc49b908702028c', name: "leading-input" }), h("input", { key: '3cd24c2baab2a10c53fadb0e409c73e21a64a90c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (h("nv-icon", { key: 'e82ce9ca32dd5876f401ad712c52a8203d5ee58d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '839966e065defcae2268fb08fbfc1a36366b7e32', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '7b6dd67015549b173887a545be32b4c3f05a5b34', class: "stepper-spacer" }), h("div", { key: 'd4df0c16fb8466ba97327f5537a502cec54b0c74', class: "stepper" }, h("nv-icon", { key: '9f4b2894a80c7161cfde76c8267c5a32081a4af4', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), h("nv-icon", { key: '4a6e099ab3778386feeb22d72c67b020c2016f13', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), h("slot", { key: 'd660082780a4cce2f78ec463cf68f4158f9f6b30', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e37f6ad4f0f8d63bd89ab81922e1e067e9effb82', class: "description" }, h("slot", { key: 'd1afa3730549af3796556164f98a6e8187db7324', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '171305d54a0389e450b6ae27148267e3676eee5e', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dfc8ea72d87c0ef8817ca28228e5c99a85c2fbf8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldnumber.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldnumber.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\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 container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n\n .stepper {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n align-items: center;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n\n nv-icon {\n color: var(--components-form-field-icon-default);\n height: 100%;\n\n &:first-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n }\n\n &:last-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n }\n\n &:hover {\n background: var(--color-interaction-neutral-background-hover);\n }\n }\n }\n\n .stepper-spacer {\n //2 icons both with interior and exterior padding, the default padding from the input-container and the thickness of the separator\n width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\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\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * 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 // eslint-disable-next-line @stencil-community/strict-mutable\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 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 Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n <div class=\"stepper-spacer\"></div>\n <div class=\"stepper\">\n <nv-icon\n name=\"minus\"\n size=\"md\"\n onClick={this.handleMinus}\n class={clsx({ disabled: this.isMinValueReached() })}\n />\n <nv-icon\n name=\"plus\"\n size=\"md\"\n onClick={this.handlePlus}\n class={clsx({ disabled: this.isMaxValueReached() })}\n />\n </div>\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-fieldnumber.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\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 container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n\n input {\n @include form-field-input();\n\n width: 100%;\n appearance: textfield;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n\n .stepper {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n align-items: center;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n\n nv-icon {\n color: var(--components-form-field-icon-default);\n height: 100%;\n\n &:first-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n }\n\n &:last-child {\n padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n }\n\n &:hover {\n background: var(--color-interaction-neutral-background-hover);\n }\n }\n }\n\n .stepper-spacer {\n //2 icons both with interior and exterior padding, the default padding from the input-container and the thickness of the separator\n width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n }\n\n // container query to remove .stepper and and the spacer when the container is less than 150px\n // .. this needs to be an absolute value because container queries do not accept variables\n // .. using relative width (cqw) compared to a parent container would not work\n // .. because the parent container follows the child's width\n @container field-number-input-container (width < 150px) {\n .stepper-spacer {\n display: none;\n }\n\n .stepper {\n display: none;\n }\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\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\n@Component({\n tag: 'nv-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * 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 // eslint-disable-next-line @stencil-community/strict-mutable\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 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 Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\n };\n\n //#endregion METHODS\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 <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n <div class=\"stepper-spacer\"></div>\n <div class=\"stepper\">\n <nv-icon\n name=\"minus\"\n size=\"md\"\n onClick={this.handleMinus}\n class={clsx({ disabled: this.isMinValueReached() })}\n />\n <nv-icon\n name=\"plus\"\n size=\"md\"\n onClick={this.handlePlus}\n class={clsx({ disabled: this.isMaxValueReached() })}\n />\n </div>\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/esm/nv-fieldpassword.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b6f70e4a.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
 import { v as v4 } from './v4-a79185f4.js';
 const nvFieldpasswordCss = "nv-fieldpassword{--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-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .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-fieldpassword .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-fieldpassword .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-fieldpassword .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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .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-fieldpassword .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-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}";
@@ -8,67 +8,6 @@ const NvFieldpassword = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The disabled prop lets you turn off the input field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the input field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the input field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         */
-        this.required = false;
-        /**
-         * Alters the input field’s appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the input field’s appearance to indicate successful input or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * Defines the type of the input.
-         * @default 'text'
-         */
-        this.mode = 'text';
-        /**
-         * The autocomplete prop helps users fill out the input field faster by
-         * suggesting entries they’ve used before, like their email or address.
-         * You can turn it on to make forms more convenient or off to ensure users
-         * always type in fresh data.
-         */
-        this.autocomplete = 'off';
-        /**
-         * Hide the button to show/hide the password.
-         */
-        this.hidePasswordIcon = false;
-        /**
-         * Show/hide the password programmatically.
-         */
-        this.showPassword = false;
-        /**
-         * Defines whether the password is visible or not.
-         */
-        this.showPasswordState = this.showPassword;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -91,6 +30,26 @@ const NvFieldpassword = class {
             this.value = input.value; // Update the input value without worrying about the space
             this.valueChanged.emit(input.value);
         };
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.pattern = undefined;
+        this.mode = 'text';
+        this.autocomplete = 'off';
+        this.hidePasswordIcon = false;
+        this.showPassword = false;
+        this.showPasswordState = this.showPassword;
     }
     handleShowPasswordChange(newValue) {
         this.showPasswordState = newValue;
@@ -99,9 +58,9 @@ const NvFieldpassword = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '40f6d172ebe46636a4240e010cc1dd9eb9e90e79' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dc7b47c5796cfc862e1dafbe6720fe725662dd2c', htmlFor: this.inputId }, h("slot", { key: 'a5696e12f593408bb20b92e49c0c5a6b21fef9b1', name: "label" }, this.label))), h("div", { key: 'a1856e68415b5685982e936588791d36c9188d29', class: "input-wrapper" }, h("slot", { key: 'ee701f5efbc0f7dcdbfd8d8494eb660ed9081f80', name: "before-input" }), h("div", { key: '3a2b900d7fadac36538d936cc6853fe855713f26', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'b59c93d7457f00ff7b7cb4fcd7caca927a197dc4', name: "leading-input" }), h("input", { key: '67755bdf835476b8511083ba6e35ed5eca8868e5', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'd9ffdbb9a4bd76d30c6adbb5ada4a989c6bdc092', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (h("nv-icon", { key: '40b2376b0cf815998eede9c8917f1126cda51d28', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: '6ae6f802256ac343a232bb24f7b7ec7e21ee5dd0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e08e5965bebe38262e5efd30f0ab3d3a905083ff', class: "description" }, h("slot", { key: '8554c3620920efc3dd108b5e4f0e79dddc55c845', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cf40170d0e1c8de40601b1ef2d3a8260a07cf7e9', hidden: !this.error, class: "error-description" }, h("slot", { key: 'e3b0ff01a8ffd569d2eb2c2e3a188cb6e53f0f6f', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'e33d3781acc832fe374732bc8c0164b965926439' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '27f03dc42fb2a251e669f3e807fd01eee003c2e7', htmlFor: this.inputId }, h("slot", { key: '61d826d1cea9b5035d614503fc187c484252abff', name: "label" }, this.label))), h("div", { key: 'f75cd0ec46d1c92396ff37f7122029b534e46954', class: "input-wrapper" }, h("slot", { key: 'bd54dca65be1b841ed93e534f8738bf685d495a0', name: "before-input" }), h("div", { key: '4e9a7c5aa765a110f655421bf6dad433e5327bd3', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '8a6ba620bfe1e2b716f58fd544382f2f7d2b6aa2', name: "leading-input" }), h("input", { key: '36c0f4b08067604f40cab2a807318f604786a610', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'dd8cbe23483e3fcfa9ec4b790835cca031dc1d11', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (h("nv-icon", { key: '9cccf9bdef256a36131208c40379e1a7c7109d03', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: 'ee5afcdd4ab13bbf79166f451208a62c3f868cab', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '195a795c9b498ee6e03cf2ee9ec90c545cc29085', class: "description" }, h("slot", { key: '5490e3158aeeec08e5fda0e2aaa8fdf7923b742a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '97569ae30b6a0df6a11e687aabc16edd609f4e0b', hidden: !this.error, class: "error-description" }, h("slot", { key: '144baf7c20ed3244bdce250a7eeed76a1b515b13', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldpassword.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-fieldpassword.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\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 position: relative;\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n\n position: absolute;\n right: 50px;\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 .toggle-password-icon {\n position: absolute;\n right: -1px;\n border: 0 solid transparent !important;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\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\n@Component({\n tag: 'nv-fieldpassword',\n styleUrl: 'nv-fieldpassword.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldpassword {\n @Element() el: HTMLNvFieldpasswordElement;\n private inputElement!: HTMLInputElement;\n\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 // eslint-disable-next-line @stencil-community/strict-mutable\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 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 })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the password\n * field.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly 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.\n * the rules are applied to the input value via regexes.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n Defines the type of the input.\n * @default 'text'\n /\n @Prop({ reflect: true })\n readonly mode: 'text' \| 'number' = 'text';\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}` = 'off';\n\n /\n Hide the button to show/hide the password.\n /\n @Prop({ reflect: true })\n readonly hidePasswordIcon: boolean = false;\n\n /\n Show/hide the password programmatically.\n /\n @Prop({ reflect: true })\n readonly showPassword: boolean = false;\n\n /\n Defines whether the password is visible or not.\n /\n @State()\n showPasswordState: boolean = this.showPassword;\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 private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n @Watch('showPassword')\n handleShowPasswordChange(newValue: boolean) {\n this.showPasswordState = newValue;\n }\n\n private togglePasswordVisibility = () => {\n this.showPasswordState = !this.showPasswordState;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ') {\n event.preventDefault(); // Prevent the space character from being added\n setTimeout(() => {\n this.togglePasswordVisibility();\n }, 0);\n }\n };\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value; // Update the input value without worrying about the space\n this.valueChanged.emit(input.value);\n };\n\n //#endregion METHODS\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 autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n type={this.showPasswordState ? 'text' : 'password'}\n inputMode={this.mode}\n value={this.value}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n {!this.hidePasswordIcon && (\n <nv-iconbutton\n class=\"toggle-password-icon\"\n name={this.showPasswordState ? 'eye' : 'eye-off'}\n size=\"md\"\n emphasis=\"lower\"\n onClick={this.togglePasswordVisibility}\n onKeyDown={this.handleKeyDown}\n aria-label={\n this.showPasswordState ? 'Hide password' : 'Show password'\n }\n aria-pressed={this.showPasswordState.toString()}\n />\n )}\n\n {(this.success \|\| this.error) && (\n <nv-icon\n name={this.success ? 'circle-check' : 'alert-circle'}\n class=\"validation\"\n size=\"md\"\n />\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-fieldpassword.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\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 position: relative;\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n\n position: absolute;\n right: 50px;\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 .toggle-password-icon {\n position: absolute;\n right: -1px;\n border: 0 solid transparent !important;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\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\n@Component({\n tag: 'nv-fieldpassword',\n styleUrl: 'nv-fieldpassword.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldpassword {\n @Element() el: HTMLNvFieldpasswordElement;\n private inputElement!: HTMLInputElement;\n\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 // eslint-disable-next-line @stencil-community/strict-mutable\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 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 })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the password\n * field.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly 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.\n * the rules are applied to the input value via regexes.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n Defines the type of the input.\n * @default 'text'\n /\n @Prop({ reflect: true })\n readonly mode: 'text' \| 'number' = 'text';\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}` = 'off';\n\n /\n Hide the button to show/hide the password.\n /\n @Prop({ reflect: true })\n readonly hidePasswordIcon: boolean = false;\n\n /\n Show/hide the password programmatically.\n /\n @Prop({ reflect: true })\n readonly showPassword: boolean = false;\n\n /\n Defines whether the password is visible or not.\n /\n @State()\n showPasswordState: boolean = this.showPassword;\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 private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n @Watch('showPassword')\n handleShowPasswordChange(newValue: boolean) {\n this.showPasswordState = newValue;\n }\n\n private togglePasswordVisibility = () => {\n this.showPasswordState = !this.showPasswordState;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ') {\n event.preventDefault(); // Prevent the space character from being added\n setTimeout(() => {\n this.togglePasswordVisibility();\n }, 0);\n }\n };\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value; // Update the input value without worrying about the space\n this.valueChanged.emit(input.value);\n };\n\n //#endregion METHODS\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 autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n type={this.showPasswordState ? 'text' : 'password'}\n inputMode={this.mode}\n value={this.value}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n {!this.hidePasswordIcon && (\n <nv-iconbutton\n class=\"toggle-password-icon\"\n name={this.showPasswordState ? 'eye' : 'eye-off'}\n size=\"md\"\n emphasis=\"lower\"\n onClick={this.togglePasswordVisibility}\n onKeyDown={this.handleKeyDown}\n aria-label={\n this.showPasswordState ? 'Hide password' : 'Show password'\n }\n aria-pressed={this.showPasswordState.toString()}\n />\n )}\n\n {(this.success \|\| this.error) && (\n <nv-icon\n name={this.success ? 'circle-check' : 'alert-circle'}\n class=\"validation\"\n size=\"md\"\n />\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}