@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

package/dist/native/p-ed6019fe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clamp","value","min","max","Math","valueToPercent","snapToStep","step","clamped","snapped","round","generateTicks","ticks","v","push","Number","toFixed","length","snapToTicks","closestTick","minDistance","abs","tick","distance","SingleThumb","props","rawPosition","isDragging","snap","disabled","readonly","onKeyDown","labelBeforeValue","labelAfterValue","displayPosition","percent","h","class","style","left","role","undefined","tabindex","String","RangeThumb","rangeValue","rawRangePosition","activeDragThumb","leftValue","rightValue","displayLeftPosition","displayRightPosition","rawLeft","rawRight","leftPercent","rightPercent","width","TickMarks","map","label","FieldInput","range","hasField","index","inputId","onInput","name","endName","fieldValue","dataAttrs","toString","inputName","containerClass","Object","assign","id","type","nvFieldsliderCss","NvFieldsliderStyle0","NvFieldslider","constructor","hostRef","this","startInputId","uuidv4","endInputId","hideLabel","error","success","snapTicks","showTicks","fluid","internalTicks","valueInternal","rangeValueInternal","parseValue","console","onTrackInteraction","event","trackRect","currentTarget","getBoundingClientRect","percentage","clientX","newValue","leftPct","rightPct","distanceToLeft","distanceToRight","handleValueChange","registerGlobalEvents","onPointerMove","trackElement","el","querySelector","onPointerUp","removeGlobalEvents","stepMultiplier","shiftKey","singleStep","focusedThumb","target","getAttribute","idx","currentValue","key","preventDefault","handleFieldChange","input","parseFloat","isNaN","fieldIndex","updatedRange","validateValue","val","clampedValue","Array","isArray","orderedValues","validatedValues","valueChanged","emit","validatedValue","generateDisplayTicks","sort","a","b","autoTicks","document","addEventListener","removeEventListener","onValueChange","onConfigChange","onRangeChange","connectedCallback","disconnectedCallback","render","Host","htmlFor","onPointerDown","description","size","errorDescription","hidden"],"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 * 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 snapped = Math.round((clamped - min) / step) * step + min;\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","import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent, clamp } 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  /** 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    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        {String(value)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>\n  );\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent, clamp } 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  /** 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    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        {String(leftValue)}\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        {String(rightValue)}\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';\n\n/**\n * Props for the FieldInput component\n */\ninterface 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: (event: Event) => 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  // If hasField is false, only the containers are visible, not the input fields\n  const containerClass = hasField\n    ? 'input-container'\n    : 'input-container hidden-input';\n\n  return hasField ? (\n    <div class={containerClass}>\n      {labelBeforeValue && <span class=\"label-before\">{labelBeforeValue}</span>}\n      <input\n        id={inputId}\n        type=\"number\"\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={onInput}\n      />\n      {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\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    }\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 } 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.\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, 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 {Event} event - The input event\n   */\n  private handleFieldChange = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    const newValue = parseFloat(input.value);\n\n    if (isNaN(newValue)) {\n      return;\n    }\n\n    if (this.range) {\n      const fieldIndex = input.getAttribute('data-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  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()\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                  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                  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"],"mappings":"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","ignoreList":[]}

package/dist/native/p-f94d7054.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,H as i,g as o}from"./p-d0a33e64.js";import{v as l}from"./p-f5ff676c.js";const s='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[display-value]:not([display-value=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldselect[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const n=s;const a=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.computedDisplayValue="";this.internalReadonly=false;this.parsedOptions=[];this.inputId=l();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.value="";this.displayValue=false;this.autofocus=false;this.fluid=false;this.handleSelectChange=e=>{const r=e.target;let t=Array.from(r.selectedOptions).map((e=>e.value));if(!this.multiple){t=t.slice(0,1)}this.value=this.multiple?t.join(", "):t[0]||"";this.valueChanged.emit(this.value);this.setFormValue()};this.handleSelectContainerClick=()=>{if(!this.internalReadonly&&this.selectElement){this.selectElement.focus()}}}updateDisplayValueWatcher(e){this.updateDisplayValue();if(this.selectElement){const r=e.split(",").map((e=>e.trim()));const t=this.selectElement.options;if(t){Array.from(t).forEach((e=>{e.selected=this.multiple?r.includes(e.value):e.value===r[0]}));if(!this.multiple){this.selectElement.value=e}}else{this.selectElement.value=r[0]||""}}this.setFormValue()}handleDisplayValueChange(e){this.internalReadonly=e;if(this.readonly){this.internalReadonly=true}}handleReadonlyChange(e){this.internalReadonly=e;if(this.displayValue){this.internalReadonly=true}}handleOptionsChange(e){if(typeof e==="string"){try{const r=JSON.parse(e);this.parsedOptions=[...r];const t=r.find((e=>e.selected));if(t){this.value=t.value}}catch(e){console.error("Error parsing options:",e);this.parsedOptions=[]}}}updateDisplayValue(){if(this.internalReadonly&&!this.displayValue){if(this.multiple){const e=this.value.split(",").map((e=>e.trim())).map((e=>this.getLabelFromId(e)||"")).filter((e=>e!==""));this.computedDisplayValue=e.join(", ")||""}else{this.computedDisplayValue=this.getLabelFromId(this.value)||""}}else if(this.internalReadonly&&this.displayValue){this.computedDisplayValue=this.value||""}}getLabelFromId(e){this.ensureSelectElement();if(!this.selectElement){return""}const r=this.selectElement.options;if(r){const t=Array.from(r).find((r=>r.value===e));return t?t.textContent.trim()||"":""}else{return""}}setFormValue(){this.internals.setFormValue(this.value)}ensureSelectElement(){if(!this.selectElement){this.selectElement=this.el.querySelector("select")}}componentWillRender(){this.updateDisplayValue();if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}componentWillLoad(){this.internalReadonly=this.readonly;if(this.displayValue){this.internalReadonly=true}if("attachInternals"in this.el){this.internals=this.el.attachInternals()}else{this.internals={setFormValue:e=>{const r=this.el.closest("form");if(r){const t=document.createElement("input");t.type="hidden";t.name=this.name;t.value=e;r.appendChild(t)}}}}if(this.multiple&&typeof this.value!=="string"){this.value=""}if(this.options){this.handleOptionsChange(this.options)}}componentDidLoad(){this.updateDisplayValue();if(this.selectElement){if(!this.multiple){this.selectElement.value=this.value}const e=this.multiple?this.value.split(",").map((e=>e.trim())):[this.value];const r=this.selectElement.options;if(r){Array.from(r).forEach((r=>{r.selected=this.multiple?e.includes(r.value):r.value===e[0]}))}else{this.selectElement.value=e[0]||""}}this.setFormValue()}render(){return t(i,{key:"06d38dd360011d4310d1c63851dc254e8ae47411"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"a0e46209c73e704d8d0f630baace2b1ce0eaed9c",htmlFor:this.inputId},t("slot",{key:"6a43c979383647415044931d7a4e4d3a24f65921",name:"label"},this.label)),t("div",{key:"f2cee6021f85e64bd9d73d984e208903e3fda4c7",class:"select-wrapper"},t("slot",{key:"cae1c527e55c18f3e54d9c73390d6f17ccebce77",name:"before-input"}),t("div",{key:"acb5dcbea269eb7dca558942f36b05c552924cbc",class:"select-container",onClick:this.handleSelectContainerClick},t("slot",{key:"e5c2a508a1297796f2693c76338c5b5f8e3e149e",name:"leading-input"}),this.internalReadonly&&t("input",{key:"28c38079050912f7d3b744de66ed48351dd890c3",id:this.inputId+"-readonly",type:"text",value:this.computedDisplayValue,readonly:true,class:"readonly-input","aria-readonly":"true","aria-label":this.label,"aria-describedby":this.error?`${this.inputId}-error`:`${this.inputId}-description`}),t("select",{key:"c409a9e0a26797981640092eb67b949c7d8f0cff",id:this.inputId,ref:e=>this.selectElement=e,name:this.name,autofocus:this.autofocus,disabled:this.disabled,required:this.required,multiple:this.multiple,onChange:this.handleSelectChange,class:this.internalReadonly?"hidden":"","aria-label":this.label,"aria-describedby":this.error?`${this.inputId}-error`:`${this.inputId}-description`},this.parsedOptions.length>0?this.parsedOptions.map((e=>t("option",{value:e.value,selected:e.selected,disabled:e.disabled},e.label))):t("slot",null)),t("div",{key:"a2402ea8d832e5612510dce7a3f50148b4edf39f",class:"select-icons"},this.error&&t("nv-icon",{key:"e291bff25fa6f06d3b27c3aaa805b46f674e1614",name:"alert-circle",class:"validation",size:"md"}),this.success&&t("nv-icon",{key:"ce98cb12347722926677d9c3fc6f02e35a9c84e4",name:"circle-check",class:"validation",size:"md"}),!this.multiple&&t("nv-iconbutton",{key:"e7fe760a5fa84ab0548ebd736a44da04908a4c07",name:"chevron-down",size:"md",emphasis:"lower",tabindex:-1}))),t("slot",{key:"d6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23",class:"description",id:`${this.inputId}-description`},t("slot",{key:"010bbb23d2b947ed55c219ac64532f7dfd4f43cc",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"70b696ec8f8badd4e064506eeba268755c9f2c09",class:"error-description",id:`${this.inputId}-error`},t("slot",{key:"2ec5af60d2fca9a8f5baf59406a4661905aeab05",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["updateDisplayValueWatcher"],displayValue:["handleDisplayValueChange"],readonly:["handleReadonlyChange"],options:["handleOptionsChange"]}}};a.style=n;export{a as nv_fieldselect};
+//# sourceMappingURL=p-f94d7054.entry.js.map

package/dist/native/{p-49cac014.entry.js.map → p-f94d7054.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","parsedOptions","inputId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","autofocus","fluid","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","updateDisplayValueWatcher","newValue","updateDisplayValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","handleOptionsChange","parsedOpts","JSON","parse","selectedOption","find","opt","console","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","textContent","internals","el","querySelector","componentWillRender","message","description","validation","errorDescription","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","ref","onChange","length","size","emphasis","tabindex"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\n@mixin form-field-select-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n\n  &:has(select:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-select() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  height: var(--form-field-line-height);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  box-sizing: content-box;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\n@mixin form-field-multi-select() {\n  height: 100%;\n  box-sizing: border-box;\n}\n\n@mixin form-field-select-icons() {\n  position: absolute;\n  right: 0;\n  top: 0;\n  pointer-events: none;\n}\n\nnv-fieldselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[display-value]:not([display-value='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  &[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 form-field-multi-select();\n      }\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .select-wrapper {\n    @include form-field-select-wrapper();\n\n    .select-container {\n      @include form-field-select-container();\n\n      > .select-icons {\n        @include form-field-select-icons();\n        > nv-iconbutton {\n          @include form-field-action();\n        }\n      }\n\n      input {\n        @include form-field-input();\n\n        &:read-only {\n          // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n          opacity: 0.5;\n          background-color: var(\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 form-field-select();\n\n        & option {\n          font-size: var(--form-field-font-size, 16px);\n          font-style: normal;\n          font-weight: 500;\n          line-height: var(--form-field-line-height, 24px);\n        }\n\n        &.hidden {\n          display: none;\n        }\n      }\n\n      nv-icon.readonly-icon {\n        @include form-field-icon();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ 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. Can be passed as a JSON string.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Parsed options stored internally\n   */\n  @State()\n  private parsedOptions: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }> = [];\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the select field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\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()\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Parse options and update the internal state\n   * @param {string} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n\n        // Update the value if an option is pre-selected\n        const selectedOption = parsedOpts.find(opt => opt.selected);\n        if (selectedOption) {\n          this.value = selectedOption.value;\n        }\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.inputId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readonly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\n              disabled={this.disabled}\n              required={this.required}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.parsedOptions.length > 0 ? (\n                this.parsedOptions.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <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"],"mappings":"oGAAA,MAAMA,EAAmB,gkOACzB,MAAAC,EAAeD,E,MC2BFE,EAAa,MAN1B,WAAAC,CAAAC,G,qDAiCUC,KAAAC,qBAA+B,GAG/BD,KAAAE,iBAA4B,MAa5BF,KAAAG,cAiBH,GAaIH,KAAAI,QAAkBC,IAiClBL,KAAAM,SAAoB,MAQpBN,KAAAO,SAAoB,MAOpBP,KAAAQ,SAAoB,MAQ7BR,KAAAS,MAAiB,MAgBRT,KAAAU,QAAmB,MAMnBV,KAAAW,SAAoB,MAQ7BX,KAAAY,MAAgB,GAQPZ,KAAAa,aAAwB,MASxBb,KAAAc,UAAqB,MAMrBd,KAAAe,MAAiB,MA+GTf,KAAAgB,mBAAsBC,IACrC,MAAMC,EAASD,EAAME,OACrB,IAAIC,EAA2BC,MAAMC,KAAKJ,EAAOK,iBAAiBC,KAChEC,GAAUA,EAAOb,QAGnB,IAAKZ,KAAKW,SAAU,CAClBS,EAAiBA,EAAeM,MAAM,EAAG,E,CAG3C1B,KAAKY,MAAQZ,KAAKW,SACdS,EAAeO,KAAK,MACpBP,EAAe,IAAM,GACzBpB,KAAK4B,aAAaC,KAAK7B,KAAKY,OAG5BZ,KAAK8B,cAAc,EAMJ9B,KAAA+B,2BAA6B,KAC5C,IAAK/B,KAAKE,kBAAoBF,KAAKgC,cAAe,CAChDhC,KAAKgC,cAAcC,O,GA9GvB,yBAAAC,CAA0BC,GACxBnC,KAAKoC,qBAEL,GAAIpC,KAAKgC,cAAe,CACtB,MAAMZ,EAAiBe,EAASE,MAAM,KAAKb,KAAIc,GAAOA,EAAIC,SAC1D,MAAMC,EAAUxC,KAAKgC,cAAcQ,QAEnC,GAAIA,EAAS,CACXnB,MAAMC,KAAKkB,GAASC,SAAQhB,IAC1BA,EAAOiB,SAAW1C,KAAKW,SACnBS,EAAeuB,SAASlB,EAAOb,OAC/Ba,EAAOb,QAAUQ,EAAe,EAAE,IAGxC,IAAKpB,KAAKW,SAAU,CAClBX,KAAKgC,cAAcpB,MAAQuB,C,MAExB,CACLnC,KAAKgC,cAAcpB,MAAQQ,EAAe,IAAM,E,EAKpDpB,KAAK8B,c,CAQP,wBAAAc,CAAyBT,GACvBnC,KAAKE,iBAAmBiC,EAExB,GAAInC,KAAKO,SAAU,CACjBP,KAAKE,iBAAmB,I,EAS5B,oBAAA2C,CAAqBV,GACnBnC,KAAKE,iBAAmBiC,EAExB,GAAInC,KAAKa,aAAc,CACrBb,KAAKE,iBAAmB,I,EAS5B,mBAAA4C,CAAoBX,GAClB,UAAWA,IAAa,SAAU,CAChC,IACE,MAAMY,EAAaC,KAAKC,MAAMd,GAC9BnC,KAAKG,cAAgB,IAAI4C,GAGzB,MAAMG,EAAiBH,EAAWI,MAAKC,GAAOA,EAAIV,WAClD,GAAIQ,EAAgB,CAClBlD,KAAKY,MAAQsC,EAAetC,K,EAE9B,MAAOH,GACP4C,QAAQ5C,MAAM,yBAA0BA,GACxCT,KAAKG,cAAgB,E,GAoDnB,kBAAAiC,GACN,GAAIpC,KAAKE,mBAAqBF,KAAKa,aAAc,CAC/C,GAAIb,KAAKW,SAAU,CACjB,MAAM2C,EAAiBtD,KAAKY,MACzByB,MAAM,KACNb,KAAI+B,GAAOA,EAAIhB,SACff,KAAI+B,GAAOvD,KAAKwD,eAAeD,IAAQ,KACvCE,QAAOC,GAASA,IAAU,KAC7B1D,KAAKC,qBAAuBqD,EAAe3B,KAAK,OAAS,E,KACpD,CACL3B,KAAKC,qBAAuBD,KAAKwD,eAAexD,KAAKY,QAAU,E,OAE5D,GAAIZ,KAAKE,kBAAoBF,KAAKa,aAAc,CACrDb,KAAKC,qBAAuBD,KAAKY,OAAS,E,EAUtC,cAAA4C,CAAeD,GACrBvD,KAAK2D,sBACL,IAAK3D,KAAKgC,cAAe,CACvB,MAAO,E,CAIT,MAAMQ,EAAUxC,KAAKgC,cAAcQ,QAEnC,GAAIA,EAAS,CACX,MAAMf,EAASJ,MAAMC,KAAKkB,GAASW,MAAK1B,GAAUA,EAAOb,QAAU2C,IACnE,OAAO9B,EAASA,EAAOmC,YAAYrB,QAAU,GAAK,E,KAC7C,CACL,MAAO,E,EASH,YAAAT,GACN9B,KAAK6D,UAAU/B,aAAa9B,KAAKY,M,CAQ3B,mBAAA+C,GACN,IAAK3D,KAAKgC,cAAe,CACvBhC,KAAKgC,cAAgBhC,KAAK8D,GAAGC,cAAc,S,EAQ/C,mBAAAC,GACEhE,KAAKoC,qBAEL,GAAIpC,KAAKiE,QAAS,CAChBjE,KAAKkE,YAAclE,KAAKiE,O,CAG1B,GAAIjE,KAAKmE,WAAY,CACnBnE,KAAKoE,iBAAmBpE,KAAKmE,WAC7BnE,KAAKS,MAAQ,I,EAQjB,iBAAA4D,GAEErE,KAAKE,iBAAmBF,KAAKO,SAG7B,GAAIP,KAAKa,aAAc,CACrBb,KAAKE,iBAAmB,I,CAG1B,GAAI,oBAAqBF,KAAK8D,GAAI,CAChC9D,KAAK6D,UACH7D,KAAK8D,GAOLQ,iB,KACG,CAELtE,KAAK6D,UAAY,CACf/B,aAAelB,IACb,MAAM2D,EAAcvE,KAAK8D,GAAGU,QAAQ,QACpC,GAAID,EAAa,CACf,MAAME,EAAQC,SAASC,cAAc,SACrCF,EAAMG,KAAO,SACbH,EAAMI,KAAO7E,KAAK6E,KAClBJ,EAAM7D,MAAQA,EACd2D,EAAYO,YAAYL,E,IAOhC,GAAIzE,KAAKW,iBAAmBX,KAAKY,QAAU,SAAU,CACnDZ,KAAKY,MAAQ,E,CAIf,GAAIZ,KAAKwC,QAAS,CAChBxC,KAAK8C,oBAAoB9C,KAAKwC,Q,EASlC,gBAAAuC,GACE/E,KAAKoC,qBAEL,GAAIpC,KAAKgC,cAAe,CAEtB,IAAKhC,KAAKW,SAAU,CAClBX,KAAKgC,cAAcpB,MAAQZ,KAAKY,K,CAGlC,MAAMQ,EAAiBpB,KAAKW,SACxBX,KAAKY,MAAMyB,MAAM,KAAKb,KAAIwD,GAAKA,EAAEzC,SACjC,CAACvC,KAAKY,OAEV,MAAM4B,EAAUxC,KAAKgC,cAAcQ,QAEnC,GAAIA,EAAS,CACXnB,MAAMC,KAAKkB,GAASC,SAAQhB,IAC1BA,EAAOiB,SAAW1C,KAAKW,SACnBS,EAAeuB,SAASlB,EAAOb,OAC/Ba,EAAOb,QAAUQ,EAAe,EAAE,G,KAEnC,CAELpB,KAAKgC,cAAcpB,MAAQQ,EAAe,IAAM,E,EAKpDpB,KAAK8B,c,CAcP,MAAAmD,GACE,OACEC,EAACC,EAAI,CAAA5B,IAAA,6CACDvD,KAAK0D,OAAS1D,KAAK8D,GAAGC,cAAc,oBACpCmB,EAAA,SAAA3B,IAAA,2CAAO6B,QAASpF,KAAKI,SACnB8E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,SAAS7E,KAAK0D,QAI7BwB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,kBACTH,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,iBAEXK,EAAA,OAAA3B,IAAA,2CACE8B,MAAM,mBACNC,QAAStF,KAAK+B,4BAEdmD,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,kBAEV7E,KAAKE,kBACJgF,EAAA,SAAA3B,IAAA,2CACEgC,GAAIvF,KAAKI,QAAU,YACnBwE,KAAK,OACLhE,MAAOZ,KAAKC,qBACZM,SAAQ,KACR8E,MAAM,iBAAgB,gBACR,OAAM,aACRrF,KAAK0D,MAAK,mBAEpB1D,KAAKS,MACD,GAAGT,KAAKI,gBACR,GAAGJ,KAAKI,wBAKlB8E,EAAA,UAAA3B,IAAA,2CACEgC,GAAIvF,KAAKI,QACToF,IAAK1B,GAAO9D,KAAKgC,cAAgB8B,EACjCe,KAAM7E,KAAK6E,KACX/D,UAAWd,KAAKc,UAChBR,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACfG,SAAUX,KAAKW,SACf8E,SAAUzF,KAAKgB,mBACfqE,MAAOrF,KAAKE,iBAAmB,SAAW,GAAE,aAChCF,KAAK0D,MAAK,mBAEpB1D,KAAKS,MACD,GAAGT,KAAKI,gBACR,GAAGJ,KAAKI,uBAGbJ,KAAKG,cAAcuF,OAAS,EAC3B1F,KAAKG,cAAcqB,KAAIC,GACrByD,EAAA,UACEtE,MAAOa,EAAOb,MACd8B,SAAUjB,EAAOiB,SACjBpC,SAAUmB,EAAOnB,UAEhBmB,EAAOiC,SAIZwB,EAAA,cAGJA,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,gBACRrF,KAAKS,OACJyE,EAAA,WAAA3B,IAAA,2CAASsB,KAAK,eAAeQ,MAAM,aAAaM,KAAK,OAEtD3F,KAAKU,SACJwE,EAAA,WAAA3B,IAAA,2CAASsB,KAAK,eAAeQ,MAAM,aAAaM,KAAK,QAGrD3F,KAAKW,UACLuE,EAAA,iBAAA3B,IAAA,2CACEsB,KAAK,eACLc,KAAK,KACLC,SAAS,QACTC,UAAW,MAMnBX,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,kBAGX7E,KAAKkE,aACLlE,KAAK8D,GAAGC,cAAc,0BACtBmB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,cAAcE,GAAI,GAAGvF,KAAKI,uBACnC8E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,eAAe7E,KAAKkE,eAIjClE,KAAKoE,kBACLpE,KAAK8D,GAAGC,cAAc,gCACtBmB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,oBAAoBE,GAAI,GAAGvF,KAAKI,iBACzC8E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,qBAAqB7E,KAAKoE,mB","ignoreList":[]}
+{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","parsedOptions","inputId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","autofocus","fluid","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","updateDisplayValueWatcher","newValue","updateDisplayValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","handleOptionsChange","parsedOpts","JSON","parse","selectedOption","find","opt","console","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","textContent","internals","el","querySelector","componentWillRender","message","description","validation","errorDescription","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","ref","onChange","length","size","emphasis","tabindex"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\n@mixin form-field-select-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n\n  &:has(select:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-select() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  height: var(--form-field-line-height);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  box-sizing: content-box;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\n@mixin form-field-multi-select() {\n  height: 100%;\n  box-sizing: border-box;\n}\n\n@mixin form-field-select-icons() {\n  position: absolute;\n  right: 0;\n  top: 0;\n  pointer-events: none;\n}\n\nnv-fieldselect {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[display-value]:not([display-value='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  &[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 form-field-multi-select();\n      }\n    }\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .select-wrapper {\n    @include form-field-select-wrapper();\n\n    .select-container {\n      @include form-field-select-container();\n\n      > .select-icons {\n        @include form-field-select-icons();\n        > nv-iconbutton {\n          @include form-field-action();\n        }\n      }\n\n      input {\n        @include form-field-input();\n\n        &:read-only {\n          // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n          opacity: 0.5;\n          background-color: var(\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 form-field-select();\n\n        & option {\n          font-size: var(--form-field-font-size, 16px);\n          font-style: normal;\n          font-weight: 500;\n          line-height: var(--form-field-line-height, 24px);\n        }\n\n        &.hidden {\n          display: none;\n        }\n      }\n\n      nv-icon.readonly-icon {\n        @include form-field-icon();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ 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. Can be passed as a JSON string.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Parsed options stored internally\n   */\n  @State()\n  private parsedOptions: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }> = [];\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the select element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Add helpful hints or extra information under the select field. This is\n   * where you can clarify what users should choose or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Defines the name attribute of the select field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the select field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the select field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the select field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\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()\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Parse options and update the internal state\n   * @param {string} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n\n        // Update the value if an option is pre-selected\n        const selectedOption = parsedOpts.find(opt => opt.selected);\n        if (selectedOption) {\n          this.value = selectedOption.value;\n        }\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    this.updateDisplayValue(); // Ensure display value is updated before render\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n\n    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.inputId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readonly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\n              disabled={this.disabled}\n              required={this.required}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.parsedOptions.length > 0 ? (\n                this.parsedOptions.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <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"],"mappings":"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","ignoreList":[]}

package/dist/native/p-fdea17ce.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,H as t,g as i}from"./p-d0a33e64.js";import{v as n}from"./p-f5ff676c.js";const a='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtext>label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const d=a;const l=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.autofocus=false;this.fluid=false;this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()}}componentWillRender(){if(this.textInputType){this.type=this.textInputType}if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return o(t,{key:"852a919f0fcf19b0b67ddf6b0cc2762fc41c9388"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"3c99f456e76ddbc6ec21d3390aea76f849d72b88",htmlFor:this.inputId},o("slot",{key:"5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02",name:"label"},this.label)),o("div",{key:"a305c2ffb63cfd66c70d0074fc62c823cce37f8e",class:"input-wrapper"},o("slot",{key:"0efd115ea0805160dee0c4b58ad137be2aabc741",name:"before-input"}),o("div",{key:"ccaaa74adf0df1667bc971eaedb4b9883061851d",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"f81025cb44b30e185b3057527cdc2a1662f5252a",name:"leading-input"}),o("input",{key:"a8b2356d0b5372823f3da9f053d0de8e28bf8c08",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:this.type,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,autofocus:this.autofocus,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),o("slot",{key:"aa531021a4d3db52839c280cda21d06be6deaa79",name:"trailing-input"}),this.error&&o("nv-icon",{key:"fc590ef5879887b2990912b16cc247db875af237",name:"alert-circle",class:"validation",size:"md"}),this.success&&o("nv-icon",{key:"68023589dc8340647b1aa5fa07f1b9bda248049d",name:"circle-check",class:"validation",size:"md"})),o("slot",{key:"3d0a53914d87559eab76f4d0b8165ad1d7e4eccf",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"8641ee0c8638ec43d5a3da0d08ed29991cedfc6a",class:"description"},o("slot",{key:"fe4ee537f946b69ef9908f1d086046b03c777f90",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"865c34d486b86223fbbbc81f22cd3428e4110af8",hidden:!this.error,class:"error-description"},o("slot",{key:"ac80b543c58bed6db534b8f1571a70aabf811918",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return i(this)}};l.style=d;export{l as nv_fieldtext};
+//# sourceMappingURL=p-fdea17ce.entry.js.map

package/dist/native/p-fdea17ce.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","autofocus","fluid","handleInput","event","input","target","value","valueChanged","emit","handleInputContainerClick","inputElement","focus","componentWillRender","textInputType","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","pattern","autocomplete","onInput","size","hidden"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldtext {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid='false']) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  > label {\n    @include form-field-label();\n  }\n\n  > .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n      > [slot='leading-input'] {\n        @include form-field-inner-leading-slot();\n      }\n\n      input {\n        @include form-field-input();\n      }\n      \n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-gap-x);\n      }\n      > [slot='trailing-input'] {\n        @include form-field-inner-trailing-slot();\n      }\n    }\n  }\n\n  > .description {\n    @include form-field-description();\n  }\n\n  > .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot 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   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the textfield\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input after the form is submitted.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}`;\n\n  /**\n   * When used with the email input type, this prop enables the field to accept\n   * multiple email addresses. Users can enter several addresses, separating\n   * each one with a comma, allowing the form to handle multiple recipients.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\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()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the input event on the input element.\n   * Emits the inputChanged event with the new value.\n   * @param {Event} event - Event object of the input event.\n   */\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(input.value);\n  };\n\n  /**\n   * Handles focus when the input container is clicked.\n   */\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.textInputType) {\n      this.type = this.textInputType;\n    }\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              multiple={this.multiple}\n              value={this.value}\n              onInput={this.handleInput}\n            />\n\n            <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"],"mappings":"oGAAA,MAAMA,EAAiB,+rOACvB,MAAAC,EAAeD,E,MC2BFE,EAAW,MANxB,WAAAC,CAAAC,G,qDA6CWC,KAAAC,QAAkBC,IAkD3BF,KAAAG,KAAiC,OAQxBH,KAAAI,SAAoB,MAQpBJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,MAQ7BN,KAAAO,MAAiB,MAeRP,KAAAQ,QAAmB,MA0CnBR,KAAAS,SAAoB,MASpBT,KAAAU,UAAqB,MAMrBV,KAAAW,MAAiB,MAsBlBX,KAAAY,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBf,KAAKgB,MAAQF,EAAME,MACnBhB,KAAKiB,aAAaC,KAAKJ,EAAME,MAAM,EAM7BhB,KAAAmB,0BAA4B,KAClCnB,KAAKoB,aAAaC,OAAO,C,CAO3B,mBAAAC,GACE,GAAItB,KAAKuB,cAAe,CACtBvB,KAAKG,KAAOH,KAAKuB,a,CAGnB,GAAIvB,KAAKwB,QAAS,CAChBxB,KAAKyB,YAAczB,KAAKwB,O,CAG1B,GAAIxB,KAAK0B,WAAY,CACnB1B,KAAK2B,iBAAmB3B,KAAK0B,WAC7B1B,KAAKO,MAAQ,I,EAQjB,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD/B,KAAKgC,OAAShC,KAAKiC,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASnC,KAAKC,SACnB4B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASpC,KAAKgC,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAAStC,KAAKmB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIvC,KAAKC,QACTuC,IAAKC,GAAMzC,KAAKoB,aAAeqB,EAC/BC,YAAa1C,KAAK0C,YAClBN,KAAMpC,KAAKoC,KACXjC,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfuC,SAAU3C,KAAKK,SACfC,SAAUN,KAAKM,SACfsC,UAAW5C,KAAK4C,UAChBC,UAAW7C,KAAK6C,UAChBC,QAAS9C,KAAK8C,QACdpC,UAAWV,KAAKU,UAChBqC,aAAc/C,KAAK+C,aACnBtC,SAAUT,KAAKS,SACfO,MAAOhB,KAAKgB,MACZgC,QAAShD,KAAKY,cAGhBiB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,mBAEVpC,KAAKO,OACJsB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtDjD,KAAKQ,SACJqB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXpC,KAAKyB,aACLzB,KAAKiC,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAepC,KAAKyB,eAIjCzB,KAAK2B,kBACL3B,KAAKiC,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAASlD,KAAKO,MAAO8B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBpC,KAAK2B,mB","ignoreList":[]}

package/dist/types/components/nv-calendar/nv-calendar.d.ts

@@ -8,7 +8,7 @@ export declare class NvCalendar {
     /****************************************************************************/
     /**
      * First day of the week (0 = Sunday, 1 = Monday, etc.)
-     * @default 0
+     * @default 1
      */
     readonly firstDayOfWeek: number;
     /**
@@ -16,6 +16,14 @@ export declare class NvCalendar {
      * @default 1
      */
     numberOfCalendars: number;
+    /**
+     * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.
+     * Examples:
+     * - Single: "2025-03-15"
+     * - Range: "2025-03-15,2025-03-20"
+     * @default ""
+     */
+    value: string;
     /**
      * Selected date (ISO string format)
      * ex: "2025-03-15"
@@ -103,6 +111,11 @@ export declare class NvCalendar {
      * Emitted when a date range is selected
      */
     rangeDateChange: EventEmitter<HTMLNvCalendarElement['rangeValue']>;
+    /**
+     * Emitted when the unified value changes
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
     /****************************************************************************/
     /**
      * Watches the changes of the number of calendars
@@ -127,6 +140,12 @@ export declare class NvCalendar {
      * @param {string} oldValue - Old single value
      */
     onSingleValueChange(newValue: string, oldValue: string): void;
+    /**
+     * Watches the changes of the unified value prop
+     * @param {string} newValue - New value
+     * @param {string} oldValue - Old value
+     */
+    onValueChange(newValue: string, oldValue: string): void;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/
@@ -145,6 +164,11 @@ export declare class NvCalendar {
      * @returns {boolean} true if the date format is in UTC mode
      */
     private get isUTCMode();
+    /**
+     * Parses the unified value prop and synchronizes with internal state
+     * @param {string} value - Value to parse
+     */
+    private parseUnifiedValue;
     /**
      * Validates and processes a date range, warning if start is after end
      * @param {string} startDateStr - Start date in ISO string format
@@ -247,57 +271,10 @@ export declare class NvCalendar {
      */
     private applyShortcut;
     /**
-     * Method to force the complete calendar update (and fix the persistent hover problem)
+     * Method to force the complete calendar update
      * @param {Date} newDate - Date to force
      */
     private forceCalendarUpdate;
-    /**
-     * Function to reset the touch effect (Mobile fix)
-     */
-    private clearTouchState;
-    /**
-     * Handles month change with an offset
-     * @param {number} direction - Direction (-1 for previous, 1 for next)
-     * @returns {Function} Change month handler
-     */
-    private getChangeMonthHandler;
-    /**
-     * Handles month change from an event (ex: dropdown)
-     * @param {number} offset - Month offset (0 by default)
-     * @returns {Function} Change month handler
-     */
-    private getHandleMonthChange;
-    /**
-     * Handles year change from an event (ex: dropdown)
-     * @param {number} offset - Year offset (0 by default)
-     * @returns {Function} Change year handler
-     */
-    private getHandleYearChange;
-    /**
-     * Handles day click
-     * @param {Date} date - Date to handle
-     * @param {boolean} isDisabled - Whether the date is disabled
-     * @returns {Function} Day click handler
-     */
-    private getDayClickHandler;
-    /**
-     * Handles shortcut selection
-     * @param {Object} shortcut - Shortcut to handle
-     * @param {string | Date} shortcut.singleValue - Selected date value
-     * @param {Object} shortcut.rangeValue - Start and end date values
-     * @param {string | Date} shortcut.rangeValue.start - Start date value
-     * @param {string | Date} shortcut.rangeValue.end - End date value
-     * @param {string} shortcut.label - Label
-     * @returns {Function} Shortcut selection handler
-     */
-    private getShortcutHandler;
-    /**
-     * Handles week selection
-     * @param {Date[]} dates - Dates to handle
-     * @param {number} index - Calendar index
-     * @returns {Function} Week selection handler
-     */
-    private getWeekSelectionHandler;
     /**
      * Resets the current selection
      */
@@ -323,7 +300,6 @@ export declare class NvCalendar {
      * @description Renders the week numbers of the calendar
      */
     private renderWeekNumbers;
-    private renderDaysGrid;
     /**
      * Renders the calendar
      * @param {number} index - Calendar index

package/dist/types/components/nv-calendar/partials/calendar-actions.d.ts

@@ -0,0 +1,19 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Props for the CalendarActions component
+ */
+interface CalendarActionsProps {
+    /** Handler for cancel/reset action */
+    onReset: () => void;
+    /** Handler for confirm/OK action */
+    onConfirm: () => void;
+    /** Whether to show the default actions or use slot content */
+    useSlot?: boolean;
+}
+/**
+ * Renders the action buttons for the calendar (Cancel/OK)
+ * @param {CalendarActionsProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the action buttons
+ */
+export declare const CalendarActions: FunctionalComponent<CalendarActionsProps>;
+export {};

package/dist/types/components/nv-calendar/partials/calendar-grid.d.ts

@@ -0,0 +1,46 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Day data structure
+ */
+interface DayData {
+    /** Day of the month (1-31) */
+    dayOfMonth: number;
+    /** Complete date */
+    date: Date;
+    /** If the day belongs to the current month */
+    isCurrentMonth: boolean;
+    /** If the day is disabled */
+    isDisabled: boolean;
+}
+/**
+ * Props for the CalendarGrid component
+ */
+interface CalendarGridProps {
+    /** Array of day data for the month */
+    days: DayData[];
+    /** Array of localized day names */
+    dayNames: string[];
+    /** Current selection type */
+    selectionType: 'single' | 'range';
+    /** Selected date in single mode */
+    selectedDate: Date | null;
+    /** Start date in range mode */
+    startDate: Date | null;
+    /** End date in range mode */
+    endDate: Date | null;
+    /** Whether date format is in UTC mode */
+    isUTCMode: boolean;
+    /** Handler for day selection */
+    onDayClick: (date: Date) => void;
+    /** Function to check if date is in range */
+    isDateInRange: (date: Date) => boolean;
+    /** Function to check if date is today */
+    isToday: (date: Date) => boolean;
+}
+/**
+ * Renders the calendar grid with day headers and day cells
+ * @param {CalendarGridProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar grid
+ */
+export declare const CalendarGrid: FunctionalComponent<CalendarGridProps>;
+export {};