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

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

@@ -1 +0,0 @@
-{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NvFielddropdown","constructor","hostRef","this","inputId","uuidv4","open","autocomplete","required","error","readonly","disabled","emptyResult","filterable","autofocus","fluid","filterText","selectedValues","Set","handleInputContainerClick","event","target","tagName","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInput","input","value","toLowerCase","filterItems","handleInputFocus","togglePopover","getSelectedLabel","_a","options","length","matchingItem","find","option","_c","_b","label","items","Array","from","querySelectorAll","item","selectedLabel","_f","_d","_e","textContent","trim","clearFilter","inputElement","focus","handleDropdownItemSelected","forEach","removeAttribute","setAttribute","detail","handleOpenChanged","stopPropagation","watchValueHandler","newValue","valueChanged","emit","handleOptionsChange","defaultValue","selected","updateSelectedItem","handleBlur","relatedTarget","Node","contains","setTimeout","handleKeyDown","key","preventDefault","currentIndex","findIndex","updateHighlightedItem","getFilterText","existingEmptyItem","hasVisibleItems","shouldShow","includes","emptyItem","document","createElement","appendChild","resetFilter","style","display","index","i","scrollIntoView","block","itemLabel","getAttribute","itemValue","itemText","componentWillLoad","componentDidLoad","render","h","Host","role","toString","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onKeyDown","tabIndex","size","emphasis","map","description","errorDescription","hidden"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@import '../../../styles/form-field';\n\nnv-fielddropdown {\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  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  &[hidden]:not([hidden='false']) label {\n    display: none;\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    @include form-field-popover();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    @include input-wrapper-styles();\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    @include input-container-styles();\n\n    input[type=\"search\"]::-webkit-search-decoration,\n    input[type=\"search\"]::-webkit-search-cancel-button,\n    input[type=\"search\"]::-webkit-search-results-button,\n    input[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance:none;\n    }\n\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n    }\n\n    > nv-iconbutton {\n      @include form-field-action();\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n    }\n  }\n\n  .non-filterable-text {\n    @include non-filterable-text-styles();\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  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'styles/nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFielddropdown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly 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   * The placeholder is displayed only when the filterable option is enabled.\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   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they've used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * 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   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   * 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   * 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   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyResult: string = 'No results found';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true })\n  readonly filterable: boolean = false;\n\n  /**\n   * List of options used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   *  \"selected\": true,\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\",\n   * }]\n   */\n  @Prop({ reflect: false })\n  readonly options?: {\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }[];\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 STATE\n\n  /** The text entered by the user for filtering dropdown items. */\n  @State()\n  filterText: string = '';\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  //#endregion STATE\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  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<\n    HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n  >;\n\n  @Listen('dropdownItemSelected')\n  handleDropdownItemSelected(\n    event: CustomEvent<\n      HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n    >,\n  ) {\n    if (this.disabled || this.readonly) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n      } else {\n        item.setAttribute('selected', 'true');\n      }\n    });\n\n    this.clearFilter();\n    this.value = event.detail.value;\n    this.open = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Stop propagation to prevent the event from affecting parent components like dialogs\n    event.stopPropagation();\n\n    // Update `open` based on the popover state\n    this.open = event.detail;\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: typeof this.value) {\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n    if (!this.value) {\n      const defaultValue = newValue.find(option => option.selected);\n      this.value = defaultValue?.value ?? '';\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur(event: FocusEvent) {\n    const target = event.relatedTarget;\n    if (!(target instanceof Node) || !this.el.contains(target)) {\n      this.open = false;\n\n      if (this.inputElement) {\n        this.filterText = '';\n        this.inputElement.value = this.getSelectedLabel();\n        setTimeout(() => {\n          this.filterItems();\n        }, 200);\n      }\n    }\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.el) return;\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitem:not([disabled]):not([hidden])',\n      ),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.open = true;\n    this.filterText = input.value.toLowerCase();\n    this.filterItems();\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      if (shouldShow) item.removeAttribute('hidden');\n      else item.setAttribute('hidden', '');\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitem');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyResult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /** Reset the filter and make all items visible. */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = true;\n  };\n\n  private togglePopover = () => {\n    if (this.disabled || this.readonly) return;\n    this.open = !this.open;\n  };\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.focus();\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n      }\n    });\n  }\n\n  private getSelectedLabel = (): string => {\n    if (!this.value) return '';\n\n    if (this.options?.length > 1) {\n      const matchingItem = this.options.find(\n        option => option.value === this.value,\n      );\n      return matchingItem?.label ?? matchingItem?.value ?? this.value;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => item.value === this.value);\n\n    const selectedLabel = matchingItem\n      ? matchingItem.label ??\n        matchingItem.textContent?.trim() ??\n        matchingItem.value\n      : '';\n\n    return selectedLabel;\n  };\n\n  private clearFilter = () => {\n    if (!this.filterable) return;\n\n    this.filterText = '';\n    this.inputElement.value = this.getSelectedLabel();\n    this.inputElement.focus();\n    this.filterItems();\n  };\n\n  private updateSelectedItem(value: string) {\n    if (!value) return;\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    items.forEach(item => {\n      if (item === matchingItem) {\n        item.setAttribute('selected', '');\n      } else {\n        item.removeAttribute('selected');\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.resetFilter();\n\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n    if (this.inputElement) {\n      this.inputElement.value = this.getSelectedLabel();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"combobox\"\n        aria-expanded={this.open.toString()}\n        aria-haspopup=\"listbox\"\n        aria-label={this.label}\n      >\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.filterable || this.disabled || this.readonly ? (\n                <input\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.getSelectedLabel()}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onClick={this.handleInputFocus}\n                  onKeyDown={this.handleKeyDown}\n                />\n              ) : (\n                <p\n                  data-scope=\"focusable\"\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={this.disabled ? -1 : 0}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.handleInputFocus}\n                >\n                  {this.getSelectedLabel() || this.value || this.placeholder}\n                </p>\n              )}\n\n              {this.filterable && this.filterText && this.open && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  class=\"clear-button\"\n                  onClick={this.clearFilter}\n                  aria-label=\"Clear input\"\n                />\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            {this.options?.length > 0 ? (\n              <ul>\n                {this.options.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))}\n              </ul>\n            ) : (\n              <slot name=\"content\"></slot>\n            )}\n          </div>\n        </nv-popover>\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  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as a,a as t,g as o}from"./p-ab002252.js";import{c as i}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const l='nv-fieldtextarea{--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-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-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-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const d=l;const s=class{constructor(a){e(this,a);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.rows=3;this.resize="vertical";this.autosize=false;this.autofocus=false;this.fluid=false;this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}handleValueChange(){if(this.autosize){this.adjustTextareaHeight()}}adjustTextareaHeight(){if(this.textareaElement&&this.autosize){requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);const r=parseFloat(e.lineHeight);const a=parseFloat(e.paddingTop);const t=parseFloat(e.paddingBottom);const o=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const n=r*this.rows+a+t+o+i;this.textareaElement.style.minHeight=`${n}px`;this.textareaElement.style.height=this.textareaElement.scrollHeight+"px"}))}))}}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}componentDidLoad(){if(this.autosize){this.adjustTextareaHeight()}}render(){return a(t,{key:"26197bbab1a4b4571fdb55c8191e6b7879d58504"},(this.label||this.el.querySelector('[slot="label"]'))&&a("label",{key:"f3f9465b6917b669cd2f8a363bbe719259bda4c4",htmlFor:this.inputId},a("slot",{key:"81cda2c75f3dbaeace4c0a713083ba1d71738334",name:"label"},this.label)),a("div",{key:"7c8ce38e9ae3b5524205017add5470ba46cecc20",class:"textarea-wrapper"},a("div",{key:"c32da51694a84c55c092838a62801b4e57ab12ac",class:"textarea-container",onClick:this.handleTextareaContainerClick},a("textarea",{key:"1b3d130b68595c7f49097494e98848e5523ba34d",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,autofocus:this.autofocus,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.resize==="none"&&"resize-none",this.resize==="vertical"&&"resize-y",this.resize==="horizontal"&&"resize-x",this.resize==="both"&&"resize")}))),(this.description||this.el.querySelector('[slot="description"]'))&&a("div",{key:"ed32145e5c6eb3b5c481835e578c264f24e7a576",class:"description"},a("slot",{key:"9ca5a874ff2bb5deb377ce8d5fb91235ec754ab0",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&a("div",{key:"e858235ef7f47e0849757a718617ebc2877f4ac7",hidden:!this.error,class:"error-description"},a("slot",{key:"91e053ef76274532046acad6db63e40787a3059f",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"],value:["handleValueChange"]}}};s.style=d;export{s as nv_fieldtextarea};
-//# sourceMappingURL=p-fc97f071.entry.js.map