@nova-design-system/nova-webcomponents 3.24.0 → 3.25.0

package/dist/cjs/nv-fieldradio.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nv-fieldradio.entry.cjs.js","sources":["src/components/nv-fieldradio/styles/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@use './mixins' as *;\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'styles/nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop({ reflect: true })\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\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 radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event({ bubbles: false })\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["uuidv4","h","Host","clsx"],"mappings":"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"}

package/dist/cjs/nv-fieldselect.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nv-fieldselect.entry.cjs.js","sources":["src/components/nv-fieldselect/styles/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@use '../../../styles/form-field' as forms;\n@use './mixins' as *;\n\nnv-fieldselect {\n  @include forms.form-field-variables();\n  @include forms.form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include forms.form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include forms.form-field-readonly-variables();\n  }\n\n  &[display-value]:not([display-value='false']) {\n    @include forms.form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include forms.form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include forms.form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label,\n  &[aria-required=\"true\"] label {\n    @include forms.form-field-label-required();\n  }\n\n  &[multiple]:not([multiple='false']) {\n    .select-wrapper > .select-container {\n      > .select-icons {\n        top: var(--form-field-padding-y);\n        right: var(--form-field-padding-x);\n      }\n      > select {\n        @include multi-select();\n        background-color: var(--color-level-05-background);\n        border-radius: var(--form-field-radius);\n      }\n    }\n  }\n\n  label {\n    @include forms.form-field-label();\n  }\n\n  .select-wrapper {\n    @include select-wrapper();\n\n    .select-container {\n      @include select-container();\n\n      > .select-icons {\n        @include select-icons();\n        > nv-iconbutton {\n          @include forms.form-field-action();\n        }\n      }\n\n      input {\n        @include forms.form-field-input();\n\n        &:read-only {\n          // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n          opacity: 0.5;\n          background-color: var(\n            --components-form-field-background-readonly,\n            rgb(0 0 0 / 10%)\n          );\n          border-color: var(--nv-field-border-readonly);\n        }\n      }\n\n      select {\n        @include select();\n\n        & option {\n          font-size: var(--form-field-font-size, 16px);\n          font-style: normal;\n          font-weight: var(--font-weight-medium-emphasis);\n          line-height: var(--form-field-line-height, 24px);\n          background-color: var(--color-level-05-background);\n          color: var(--components-form-field-content-text);\n        }\n\n        &.hidden {\n          display: none;\n        }\n      }\n\n      nv-icon.readonly-icon {\n        @include forms.form-field-icon();\n      }\n\n      nv-icon.validation {\n        @include forms.form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include forms.form-field-description();\n  }\n\n  .error-description {\n    @include forms.form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  /**\n   * Options to display in the select.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: false })\n  readonly options?: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }>;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the select field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: boolean = false;\n\n  /**\n   * Alters the select field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected value changes.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Handle options change and update the internal state\n   * @param {typeof this.options} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n\n    // Update the value if an option is pre-selected\n    const selectedOption = newValue.find(opt => opt.selected);\n    if (selectedOption) {\n      this.value = selectedOption.value;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.inputId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readonly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\n              disabled={this.disabled}\n              required={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.options && this.options.length > 0 ? (\n                this.options.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <div class=\"select-icons\">\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\n              {!this.multiple && (\n                <nv-iconbutton\n                  name=\"chevron-down\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabindex={-1}\n                />\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\" id={`${this.inputId}-description`}>\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" id={`${this.inputId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"],"names":["uuidv4","h","Host"],"mappings":"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"}

package/dist/cjs/nv-fieldslider.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nv-fieldslider.entry.cjs.js","sources":["src/components/nv-fieldslider/nv-fieldslider.utils.ts","src/components/nv-fieldslider/partials/single-thumb.tsx","src/components/nv-fieldslider/partials/range-thumb.tsx","src/components/nv-fieldslider/partials/tick-marks.tsx","src/components/nv-fieldslider/partials/field-input.tsx","src/components/nv-fieldslider/styles/nv-fieldslider.scss?tag=nv-fieldslider","src/components/nv-fieldslider/nv-fieldslider.tsx"],"sourcesContent":["/**\n * Utility functions for nv-fieldslider.\n */\n\n/**\n * Gets the number of decimal places in a number.\n * @param {number} num - The number to check\n * @returns {number} The number of decimal places\n */\nexport function getDecimalPlaces(num: number): number {\n  if (Number.isInteger(num)) return 0;\n  const str = num.toString();\n  const decimalPart = str.split('.')[1];\n  return decimalPart ? decimalPart.length : 0;\n}\n\n/**\n * Clamp a value between min and max.\n * @param {number} value - The value to clamp\n * @param {number} min - The minimum boundary\n * @param {number} max - The maximum boundary\n * @returns {number} The clamped value\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, value));\n}\n\n/**\n * Calculate the percentage position of a value within a range.\n * @param {number} value - The value to convert to percentage\n * @param {number} min - The minimum value of the range\n * @param {number} max - The maximum value of the range\n * @returns {number} The percentage (0-100)\n */\nexport function valueToPercent(\n  value: number,\n  min: number,\n  max: number,\n): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\n/**\n * Snap a value to the nearest step.\n * @param {number} value - The value to snap\n * @param {number} min - The minimum boundary\n * @param {number} max - The maximum boundary\n * @param {number} step - The step size\n * @returns {number} The snapped value\n */\nexport function snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = clamp(value, min, max);\n  const decimalPlaces = getDecimalPlaces(step);\n\n  // To avoid floating point issues in calculations, we can work with integers\n  // by multiplying all values by a power of 10 based on decimal places\n  if (decimalPlaces > 0) {\n    const multiplier = Math.pow(10, decimalPlaces);\n\n    // Convert to integer-based calculation\n    const scaledValue = Math.round((clamped - min) * multiplier);\n    const scaledStep = Math.round(step * multiplier);\n\n    // Round to nearest step using integer math\n    const roundedSteps = Math.round(scaledValue / scaledStep);\n\n    // Calculate snapped value and scale back down\n    const scaledSnapped = roundedSteps * scaledStep;\n    const snapped = min + scaledSnapped / multiplier;\n\n    // Format to correct decimal places to ensure precision\n    return clamp(parseFloat(snapped.toFixed(decimalPlaces)), min, max);\n  }\n\n  // For integer steps, use the original method\n  const stepsFromMin = (clamped - min) / step;\n  const roundedSteps = Math.round(stepsFromMin);\n  const snapped = min + roundedSteps * step;\n\n  return clamp(snapped, min, max);\n}\n\n/**\n * Generate tick values for the slider.\n * @param {number} min - The minimum value\n * @param {number} max - The maximum value\n * @param {number} step - The step size\n * @returns {number[]} Array of tick values\n */\nexport function generateTicks(\n  min: number,\n  max: number,\n  step: number,\n): number[] {\n  const ticks: number[] = [];\n  for (let v = min; v <= max; v += step) {\n    ticks.push(Number(v.toFixed(10))); // avoid floating point issues\n  }\n  if (ticks[ticks.length - 1] !== max) {\n    ticks.push(max);\n  }\n  return ticks;\n}\n\n/**\n * Snap a value to the nearest tick mark.\n * @param {number} value - The value to snap\n * @param {object[]} ticks - Array of tick objects\n * @returns {number} The value of the closest tick\n */\nexport function snapToTicks(\n  value: number,\n  ticks: {\n    /** The value of the tick */\n    value: number;\n  }[],\n) {\n  if (!ticks || ticks.length === 0) return value;\n\n  // Find the closest tick\n  let closestTick = ticks[0].value;\n  let minDistance = Math.abs(value - closestTick);\n\n  for (const tick of ticks) {\n    const distance = Math.abs(value - tick.value);\n    if (distance < minDistance) {\n      minDistance = distance;\n      closestTick = tick.value;\n    }\n  }\n\n  return closestTick;\n}\n\n/**\n * Format a numeric value for display, preserving trailing zeros based on step precision\n * @param {number} value - The value to format\n * @param {number} step - The step size that determines decimal precision\n * @returns {string} Formatted value string with appropriate decimal places\n */\nexport function formatValueForDisplay(value: number, step: number): string {\n  const decimalPlaces = getDecimalPlaces(step);\n  if (decimalPlaces > 0) {\n    return value.toFixed(decimalPlaces);\n  }\n  return String(value);\n}\n","import { FunctionalComponent, h } from '@stencil/core';\nimport {\n  valueToPercent,\n  clamp,\n  formatValueForDisplay,\n} from '../nv-fieldslider.utils';\n\n/**\n * Props for the SingleThumb component\n */\ninterface SingleThumbProps {\n  /** Current value of the slider */\n  value: number;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size of the slider */\n  step: number;\n  /** Raw position during dragging */\n  rawPosition: number;\n  /** Whether the thumb is currently being dragged */\n  isDragging: boolean;\n  /** Whether the thumb should visually snap to steps */\n  snap: boolean;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Key down event handler */\n  onKeyDown: (event: KeyboardEvent) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n}\n\n/**\n * Renders single thumb in standard mode.\n * @param {SingleThumbProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the thumb\n */\nexport const SingleThumb: FunctionalComponent<SingleThumbProps> = props => {\n  const {\n    value,\n    min,\n    max,\n    step,\n    rawPosition,\n    isDragging,\n    snap,\n    disabled,\n    readonly,\n    onKeyDown,\n    labelBeforeValue,\n    labelAfterValue,\n  } = props;\n\n  // Use raw position for visual display during dragging, but the snapped value otherwise\n  let displayPosition = value;\n  if (isDragging && !snap) {\n    displayPosition = clamp(rawPosition, min, max);\n  }\n\n  const percent = valueToPercent(displayPosition, min, max);\n\n  return (\n    <div\n      class=\"thumb\"\n      style={{ left: `${percent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {formatValueForDisplay(value, step)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>\n  );\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport {\n  valueToPercent,\n  clamp,\n  formatValueForDisplay,\n} from '../nv-fieldslider.utils';\n\n/**\n * Props for the RangeThumb component\n */\ninterface RangeThumbProps {\n  /** Range values [left, right] */\n  rangeValue: number[];\n  /** Raw positions during dragging [left, right] */\n  rawRangePosition: [number, number];\n  /** Currently active thumb while dragging */\n  activeDragThumb: 'left' | 'right' | 'single';\n  /** Whether the thumb is currently being dragged */\n  isDragging: boolean;\n  /** Whether the thumb should visually snap to steps */\n  snap: boolean;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size of the slider */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Key down event handler */\n  onKeyDown: (event: KeyboardEvent) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n}\n\n/**\n * Renders dual thumbs in range mode.\n * @param {RangeThumbProps} props - Component properties\n * @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs\n */\nexport const RangeThumb: FunctionalComponent<RangeThumbProps> = props => {\n  const {\n    rangeValue,\n    rawRangePosition,\n    activeDragThumb,\n    isDragging,\n    snap,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onKeyDown,\n    labelBeforeValue,\n    labelAfterValue,\n  } = props;\n\n  const [leftValue, rightValue] = rangeValue;\n\n  // Use raw positions for visual display during dragging, but the snapped values otherwise\n  let displayLeftPosition = leftValue;\n  let displayRightPosition = rightValue;\n\n  if (isDragging && !snap) {\n    const [rawLeft, rawRight] = rawRangePosition;\n    if (activeDragThumb === 'left') {\n      displayLeftPosition = clamp(rawLeft, min, Math.min(rightValue, max));\n    } else if (activeDragThumb === 'right') {\n      displayRightPosition = clamp(rawRight, Math.max(leftValue, min), max);\n    }\n  }\n\n  const leftPercent = valueToPercent(displayLeftPosition, min, max);\n  const rightPercent = valueToPercent(displayRightPosition, min, max);\n\n  return [\n    <div\n      class=\"track-range\"\n      style={{\n        left: `${leftPercent}%`,\n        width: `${rightPercent - leftPercent}%`,\n      }}\n    />,\n    <div\n      class=\"thumb thumb-left\"\n      style={{ left: `${leftPercent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={leftValue} // Always use the snapped value for ARIA\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      data-thumb=\"left\"\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {formatValueForDisplay(leftValue, step)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>,\n    <div\n      class=\"thumb thumb-right\"\n      style={{ left: `${rightPercent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={rightValue} // Always use the snapped value for ARIA\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      data-thumb=\"right\"\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {formatValueForDisplay(rightValue, step)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>,\n  ];\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent } from '../nv-fieldslider.utils';\n\n/**\n * Represents a tick mark on the slider\n */\ninterface Tick {\n  /** The numeric value of the tick */\n  value: number;\n  /** Optional label for the tick */\n  label?: string;\n}\n\n/**\n * Props for the TickMarks component\n */\ninterface TickMarksProps {\n  /** Array of tick definitions */\n  ticks: Tick[];\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n}\n\n/**\n * Renders tick marks along the slider track.\n * @param {TickMarksProps} props - Component properties\n * @returns {JSX.Element | null} JSX element representing the tick marks or null if no ticks\n */\nexport const TickMarks: FunctionalComponent<TickMarksProps> = props => {\n  const { ticks, min, max } = props;\n\n  if (ticks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div class=\"track-ticks\">\n      {ticks.map(tick => {\n        const percent = valueToPercent(tick.value, min, max);\n        return (\n          <div class=\"track-tick\" style={{ left: `${percent}%` }}>\n            {tick.label && <div class=\"tick-label\">{tick.label}</div>}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * Props for the FieldInput component\n */\nexport interface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (details: {\n    /** Parsed value */\n    value: number | null;\n    /** Index (0 or 1) for range mode, ignored in single mode */\n    index?: number;\n  }) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  const handleValueChanged = (\n    event: CustomEvent<HTMLNvFieldnumberElementEventMap['valueChanged']>,\n  ): void => {\n    event.stopPropagation();\n    const newValue = event.detail;\n\n    // Accept null as a valid value (when field is cleared)\n    // Only reject NaN numbers\n    if (typeof newValue === 'number' && Number.isNaN(newValue)) {\n      return;\n    }\n\n    onInput({\n      value: newValue,\n      index,\n    });\n  };\n\n  return hasField ? (\n    <div class={clsx(!hasField && 'hidden-input')}>\n      <nv-fieldnumber\n        id={inputId}\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={e => e.stopPropagation()}\n        onValueChanged={handleValueChanged}\n      >\n        {labelBeforeValue && (\n          <span class=\"label-before\" slot=\"leading-input\">\n            {labelBeforeValue}\n          </span>\n        )}\n        {labelAfterValue && (\n          <span class=\"label-after\" slot=\"trailing-input\">\n            {labelAfterValue}\n          </span>\n        )}\n      </nv-fieldnumber>\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n","@use \"./mixins\" as *;\n\nnv-fieldslider {\n  @include form-field-variables();\n  @include form-field-root();\n\n  .slider-container {\n    @include slider-container-styles();\n\n    .track-container {\n      @include track-container-styles();\n\n      .track {\n        @include track-styles();\n        .track-range {\n          @include track-range-styles();\n        }\n        .thumb {\n          @include thumb-styles();\n          .thumb-tooltip {\n            @include thumb-tooltip-styles();\n          }\n          &:hover, &:active, &:focus {\n            .thumb-tooltip {\n              opacity: 1;\n            }\n          }\n        }\n      }\n\n      .track-ticks {\n        @include track-ticks-styles();\n        .track-tick {\n          @include track-tick-styles();\n          .tick-label {\n            @include tick-label-styles();\n          }\n        }\n      }\n    }\n\n    .input-container {\n      @include form-field-input-container();\n      @include input-container-styles();\n      input {\n        @include form-field-input();\n      }\n      .label-before {\n        @include input-label-before-styles();\n      }\n      .label-after {\n        @include input-label-after-styles();\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\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  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n    .track,\n    .thumb {\n      cursor: default;\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-icon.validation {\n    @include form-field-icon();\n  }\n\n  &[hide-label]:not([hide-label=\"false\"]) label {\n    @include form-field-hide-label();\n  }\n\n  &[has-field]:not([has-field=\"false\"]) {\n    .thumb-tooltip {\n      display: none;\n    }\n  }\n\n  > .description {\n    @include form-field-description();\n  }\n\n  > .error-description {\n    @include form-field-error-description();\n    &[hidden] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  clamp,\n  valueToPercent,\n  snapToStep,\n  generateTicks,\n  snapToTicks,\n} from './nv-fieldslider.utils';\n\nimport { SingleThumb } from './partials/single-thumb';\nimport { RangeThumb } from './partials/range-thumb';\nimport { TickMarks } from './partials/tick-marks';\nimport { FieldInput, type FieldInputProps } from './partials/field-input';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldslider',\n  styleUrl: 'styles/nv-fieldslider.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldslider {\n  @Element() el: HTMLNvFieldsliderElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the start input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly startInputId: string = uuidv4();\n\n  /**\n   * Sets the ID for the end input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly endInputId: string = uuidv4();\n\n  /**\n   * Provides a textual description of the slider's function, helping users\n   * understand what the control adjusts. It also supports accessibility by\n   * serving as the accessible name for the component.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Keeps the interface clean by removing visible labels, but still announces\n   * the label to screen readers so users relying on assistive tech aren't left\n   * guessing.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * Add helpful hints or extra information under the slider. This is where you\n   * can clarify what users should enter or provide additional instructions,\n   * making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Enables an optional numeric input field alongside the slider, allowing\n   * users to type a value directly instead of—or in addition to—using the\n   * slider handle. The field accepts numeric values in the format based on\n   * client-side local settings.\n   */\n  @Prop({ reflect: true })\n  readonly hasField: boolean = false;\n\n  /**\n   * Allows the slider to display two thumbs, enabling users to select a\n   * continuous range between a minimum and maximum value. Ideal for use cases\n   * like filtering by price or time.\n   */\n  @Prop({ reflect: true })\n  readonly range: boolean = false;\n\n  /**\n   * Disables user interaction with the slider and its associated input fields.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Makes the slider and input non-editable while keeping them focusable and\n   * included in form submissions.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Alters the slider'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 slider.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Changes the slider's appearance to indicate successful input or validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Numeric value of the slider as an array of numbers. When in single mode,\n   * the value should be a an array of one number. When in range mode, the value\n   * should be an array of two numbers.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number[] = [0];\n\n  /**\n   * Defines the interval between selectable values on the slider. Controls how\n   * much the value increases or decreases with each keyboard interaction, drag\n   * movement, or direct input.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * Controls whether the slider handle should visually snap to step values\n   * during dragging. When false, the handle can be positioned at any point\n   * along the track while dragging, but the actual value will still snap to the\n   * nearest step value. When true, the handle will visually snap to the nearest\n   * step value during dragging.\n   */\n  @Prop({ reflect: true })\n  readonly snap: boolean = false;\n\n  /**\n   * When true and custom ticks are provided, the slider will snap to the nearest\n   * tick value during dragging, instead of using the step value. This is useful\n   * when you have custom ticks at specific values that don't align with regular step intervals.\n   */\n  @Prop({ reflect: true })\n  readonly snapTicks: boolean = false;\n\n  /**\n   * Name attribute for the form input element. Required for form submission.\n   * For range sliders, this will be used for the start value input and add -end\n   * to the end input name.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Name attribute for the end value input when using range mode.\n   * If not provided, the name attribute will be used with '-end' appended.\n   */\n  @Prop({ reflect: true })\n  readonly endName: string;\n\n  /**\n   * Defines the minimum allowed value for the slider. The thumb cannot move\n   * below this value, and manual input is also constrained accordingly.\n   */\n  @Prop({ reflect: true })\n  readonly min: number = 0;\n\n  /**\n   * Defines the maximum allowed value for the slider. The thumb cannot move\n   * above this value, and manual input is also constrained accordingly.\n   */\n  @Prop({ reflect: true })\n  readonly max: number = 100;\n\n  /**\n   * Controls the visibility of tick marks on the slider. When enabled, all\n   * visual ticks that indicate step points along the track are shown. If custom\n   * ticks are provided, they are always shown regardless of this setting.\n   */\n  @Prop({ reflect: true })\n  readonly showTicks: boolean = false;\n\n  /**\n   * Allows you to specify custom tick marks at specific values along the\n   * slider. Each tick can optionally display a label to provide additional\n   * context or guidance for users.\n   */\n  @Prop({ reflect: false })\n  readonly ticks: {\n    /** The numeric value of the tick */\n    value: number;\n    /** The label of the tick */\n    label?: string;\n  }[];\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Use this to automatically show a label, like \"~\" for approximate values,\n   * before the slider's value in the tooltip or input, giving users quick\n   * context about the number.\n   */\n  @Prop({ reflect: true })\n  readonly labelBeforeValue: string;\n\n  /**\n   * Use this to automatically show a label, like \"$\" or \"kg,\" after the value\n   * on the slider's tooltip or input, helping users better understand the\n   * number.\n   */\n  @Prop({ reflect: true })\n  readonly labelAfterValue: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  isDragging = false;\n\n  @State()\n  activeDragThumb: 'left' | 'right' | 'single' = 'single';\n\n  @State()\n  internalTicks: typeof this.ticks = [];\n\n  // These track the raw slider positions for visual display\n  @State()\n  rawPosition = 0;\n\n  @State()\n  rawRangePosition: [number, number] = [0, 0];\n\n  @State()\n  valueInternal: number = 0;\n\n  @State()\n  rangeValueInternal: [number, number] = [0, 0];\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Ensures value is valid and within bounds.\n   * @param {number} val - The value to validate\n   * @returns {number} The validated and snapped value\n   */\n  private validateValue(val: number): number {\n    // First ensure the value is within bounds\n    const clampedValue = clamp(val, this.min, this.max);\n\n    // If snapTicks is true and we have custom ticks, snap to the nearest tick\n    if (this.snapTicks && this.internalTicks && this.internalTicks.length > 0) {\n      return snapToTicks(clampedValue, this.internalTicks);\n    }\n\n    // Otherwise snap to step values\n    return snapToStep(clampedValue, this.min, this.max, this.step);\n  }\n\n  /**\n   * Parses the value string into a number or array of numbers for internal use.\n   */\n  private parseValue = (): void => {\n    if (typeof this.value === 'string') {\n      console.error(\n        'Sliders require a number or array of numbers to be passed in the value prop.',\n      );\n      return;\n    }\n    if (this.range && this.value.length !== 2) {\n      console.error(\n        'Range sliders require an array of two values to be passed in the value prop.',\n      );\n      return;\n    }\n\n    if (!this.range && this.value.length !== 1) {\n      console.error(\n        'Single sliders require a single value as an array to be passed in the value prop.',\n      );\n      return;\n    }\n    this.valueInternal = this.value[0];\n    this.rangeValueInternal = [this.value[0], this.value[1]];\n  };\n\n  /**\n   * Handles value changes from slider interaction.\n   * @param {number | number[]} newValue - The new value or range values\n   */\n  private handleValueChange(newValue: number | number[]): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.range) {\n      // Handle range values\n      if (Array.isArray(newValue) && newValue.length === 2) {\n        // Ensure values are in order (left ≤ right)\n        const orderedValues = [\n          Math.min(newValue[0], newValue[1]),\n          Math.max(newValue[0], newValue[1]),\n        ];\n\n        // Snap to steps and clamp\n        const validatedValues: [number, number] = [\n          this.validateValue(orderedValues[0]),\n          this.validateValue(orderedValues[1]),\n        ];\n\n        if (\n          validatedValues[0] !== this.rangeValueInternal[0] ||\n          validatedValues[1] !== this.rangeValueInternal[1]\n        ) {\n          this.rangeValueInternal = validatedValues;\n          this.value = this.rangeValueInternal;\n          this.valueChanged.emit(this.rangeValueInternal);\n        }\n      }\n    } else {\n      // Handle single value\n      if (typeof newValue === 'number') {\n        const validatedValue = this.validateValue(newValue);\n\n        if (validatedValue !== this.valueInternal) {\n          this.valueInternal = validatedValue;\n          this.value = [this.valueInternal];\n          this.valueChanged.emit([this.valueInternal]);\n        }\n      }\n    }\n  }\n\n  /**\n   * Generates the ticks to display based on props and state.\n   */\n  private generateDisplayTicks(): void {\n    // If custom ticks are provided, always use them regardless of showTicks setting\n    if (this.ticks && this.ticks.length > 0) {\n      this.internalTicks = [...this.ticks].sort((a, b) => a.value - b.value);\n      return;\n    }\n\n    // If showTicks is false and there are no custom ticks, hide all ticks\n    if (!this.showTicks) {\n      this.internalTicks = [];\n      return;\n    }\n\n    // Generate all ticks at each step point\n    const autoTicks = generateTicks(this.min, this.max, this.step);\n    this.internalTicks = autoTicks.map(value => ({ value }));\n  }\n\n  /**\n   * Handles pointer events on the track.\n   * @param {PointerEvent} event - The pointer event\n   */\n  private onTrackInteraction = (event: PointerEvent): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const trackRect = (\n      event.currentTarget as HTMLElement\n    ).getBoundingClientRect();\n    const percentage = clamp(\n      ((event.clientX - trackRect.left) / trackRect.width) * 100,\n      0,\n      100,\n    );\n\n    const newValue = this.min + (percentage / 100) * (this.max - this.min);\n\n    // Store raw position for visual display\n    this.rawPosition = newValue;\n\n    if (this.range) {\n      // In range mode, determine which thumb to move based on proximity\n      const leftPct = valueToPercent(\n        this.rangeValueInternal[0],\n        this.min,\n        this.max,\n      );\n      const rightPct = valueToPercent(\n        this.rangeValueInternal[1],\n        this.min,\n        this.max,\n      );\n\n      const distanceToLeft = Math.abs(percentage - leftPct);\n      const distanceToRight = Math.abs(percentage - rightPct);\n\n      if (distanceToLeft <= distanceToRight) {\n        this.activeDragThumb = 'left';\n        this.rawRangePosition = [newValue, this.rawRangePosition[1]];\n        this.handleValueChange([newValue, this.rangeValueInternal[1]]);\n      } else {\n        this.activeDragThumb = 'right';\n        this.rawRangePosition = [this.rawRangePosition[0], newValue];\n        this.handleValueChange([this.rangeValueInternal[0], newValue]);\n      }\n    } else {\n      this.activeDragThumb = 'single';\n      this.rawPosition = newValue;\n      this.handleValueChange(newValue);\n    }\n\n    this.isDragging = true;\n    this.registerGlobalEvents();\n  };\n\n  /**\n   * Handles pointer move events during drag.\n   * @param {PointerEvent} event - The pointer event\n   */\n  private onPointerMove = (event: PointerEvent): void => {\n    if (!this.isDragging || this.disabled || this.readonly) {\n      return;\n    }\n\n    const trackElement = this.el.querySelector('.track') as HTMLElement;\n    if (!trackElement) return;\n\n    const trackRect = trackElement.getBoundingClientRect();\n    const percentage = clamp(\n      ((event.clientX - trackRect.left) / trackRect.width) * 100,\n      0,\n      100,\n    );\n\n    const newValue = this.min + (percentage / 100) * (this.max - this.min);\n\n    // Update visual position\n    if (this.range) {\n      if (this.activeDragThumb === 'left') {\n        this.rawRangePosition = [newValue, this.rawRangePosition[1]];\n        this.handleValueChange([newValue, this.rangeValueInternal[1]]);\n      } else {\n        this.rawRangePosition = [this.rawRangePosition[0], newValue];\n        this.handleValueChange([this.rangeValueInternal[0], newValue]);\n      }\n    } else {\n      this.rawPosition = newValue;\n      this.handleValueChange(newValue);\n    }\n  };\n\n  /**\n   * Handles the end of a drag operation.\n   */\n  private onPointerUp = (): void => {\n    this.isDragging = false;\n    this.removeGlobalEvents();\n  };\n\n  /**\n   * Registers global events for tracking pointer movement.\n   */\n  private registerGlobalEvents(): void {\n    document.addEventListener('pointermove', this.onPointerMove);\n    document.addEventListener('pointerup', this.onPointerUp);\n    document.addEventListener('pointercancel', this.onPointerUp);\n  }\n\n  /**\n   * Removes global events when tracking ends.\n   */\n  private removeGlobalEvents(): void {\n    document.removeEventListener('pointermove', this.onPointerMove);\n    document.removeEventListener('pointerup', this.onPointerUp);\n    document.removeEventListener('pointercancel', this.onPointerUp);\n  }\n\n  /**\n   * Handles keydown events for keyboard accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    let newValue: number | number[];\n    const stepMultiplier = event.shiftKey ? 10 : 1;\n    const singleStep = this.step * stepMultiplier;\n\n    if (this.range) {\n      const focusedThumb = (event.target as HTMLElement).getAttribute(\n        'data-thumb',\n      );\n      const idx = focusedThumb === 'left' ? 0 : 1;\n      const currentValue = [...this.rangeValueInternal];\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          currentValue[idx] += singleStep;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          currentValue[idx] -= singleStep;\n          break;\n        case 'Home':\n          currentValue[idx] = this.min;\n          break;\n        case 'End':\n          currentValue[idx] = this.max;\n          break;\n        case 'PageUp':\n          currentValue[idx] += singleStep * 10;\n          break;\n        case 'PageDown':\n          currentValue[idx] -= singleStep * 10;\n          break;\n        default:\n          return;\n      }\n\n      newValue = currentValue;\n    } else {\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          newValue = this.valueInternal + singleStep;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          newValue = this.valueInternal - singleStep;\n          break;\n        case 'Home':\n          newValue = this.min;\n          break;\n        case 'End':\n          newValue = this.max;\n          break;\n        case 'PageUp':\n          newValue = this.valueInternal + singleStep * 10;\n          break;\n        case 'PageDown':\n          newValue = this.valueInternal - singleStep * 10;\n          break;\n        default:\n          return;\n      }\n    }\n\n    event.preventDefault();\n    this.handleValueChange(newValue);\n  };\n\n  /**\n   * Handles field input value changes.\n   * @param {FieldInputProps['onInput']} details - The parsed value and index\n   */\n  private handleFieldChange: FieldInputProps['onInput'] = (details): void => {\n    const newValue = details.value;\n\n    if (isNaN(newValue)) {\n      return;\n    }\n\n    if (this.range) {\n      const fieldIndex = details.index === 0 ? 0 : 1;\n      const updatedRange = [...this.rangeValueInternal];\n      updatedRange[fieldIndex] = newValue;\n      this.handleValueChange(updatedRange);\n    } else {\n      this.handleValueChange(newValue);\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChange() {\n    this.parseValue();\n  }\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('ticks')\n  @Watch('showTicks')\n  @Watch('snap')\n  @Watch('snapTicks')\n  onConfigChange() {\n    this.generateDisplayTicks();\n\n    if (this.range) {\n      this.handleValueChange(this.rangeValueInternal);\n    } else {\n      this.handleValueChange(this.valueInternal);\n    }\n  }\n\n  @Watch('range')\n  onRangeChange(newValue: boolean) {\n    if (newValue) {\n      // Switching to range mode\n      this.rangeValueInternal = [this.min, this.valueInternal];\n    } else {\n      // Switching to single mode, take the higher value\n      this.valueInternal = this.rangeValueInternal[1];\n    }\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  connectedCallback() {\n    this.parseValue();\n    this.generateDisplayTicks();\n\n    // Initialize values and make sure they're valid\n    if (this.range) {\n      if (\n        !Array.isArray(this.rangeValueInternal) ||\n        this.rangeValueInternal.length !== 2\n      ) {\n        this.rangeValueInternal = [this.min, this.max];\n      }\n      this.handleValueChange(this.rangeValueInternal);\n      // Initialize raw range position to match actual values\n      this.rawRangePosition = [\n        this.rangeValueInternal[0],\n        this.rangeValueInternal[1],\n      ];\n    } else {\n      this.handleValueChange(this.valueInternal);\n      // Initialize raw position to match actual value\n      this.rawPosition = this.valueInternal;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize value array based on range mode when props are available\n    if (this.value.length === 1 && this.range) {\n      // If range mode but only one value provided, duplicate it\n      this.value = [this.value[0], this.value[0]];\n    } else if (this.value.length === 2 && !this.range) {\n      // If single mode but two values provided, take the first\n      this.value = [this.value[0]];\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeGlobalEvents();\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the slider values change.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<number[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.startInputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"slider-container\">\n          {/* First input (always render for the start value, but may be hidden) */}\n          {this.range ? (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              index={0}\n              inputId={this.startInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n              endName={this.endName}\n            />\n          ) : null}\n\n          <div class=\"track-container\">\n            <div class=\"track\" onPointerDown={this.onTrackInteraction}>\n              {this.range ? (\n                <RangeThumb\n                  rangeValue={this.rangeValueInternal}\n                  rawRangePosition={this.rawRangePosition}\n                  activeDragThumb={this.activeDragThumb}\n                  isDragging={this.isDragging}\n                  snap={this.snap}\n                  min={this.min}\n                  max={this.max}\n                  step={this.step}\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  onKeyDown={this.onKeyDown}\n                  labelBeforeValue={this.labelBeforeValue}\n                  labelAfterValue={this.labelAfterValue}\n                />\n              ) : (\n                <SingleThumb\n                  value={this.valueInternal}\n                  min={this.min}\n                  max={this.max}\n                  step={this.step}\n                  rawPosition={this.rawPosition}\n                  isDragging={this.isDragging}\n                  snap={this.snap}\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  onKeyDown={this.onKeyDown}\n                  labelBeforeValue={this.labelBeforeValue}\n                  labelAfterValue={this.labelAfterValue}\n                />\n              )}\n            </div>\n\n            <TickMarks\n              ticks={this.internalTicks}\n              min={this.min}\n              max={this.max}\n            />\n          </div>\n\n          {/* Second input (for range mode, or for single value if not already rendered) */}\n          {this.range ? (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              index={1}\n              inputId={this.endInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n              endName={this.endName}\n            />\n          ) : (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              inputId={this.startInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n            />\n          )}\n        </div>\n\n        {(this.success ||\n          this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.error ||\n          this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" hidden={!this.error}>\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"names":["h","index","clsx","uuidv4","Host"],"mappings":"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"}

package/dist/cjs/nv-fieldtext.entry.cjs.js.map

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

package/dist/cjs/nv-fieldtextarea.entry.cjs.js.map

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