@nova-design-system/nova-webcomponents 3.14.0 → 3.16.0

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

@@ -0,0 +1,2 @@
+import{r as o,h as t,H as e,g as n}from"./p-3060df80.js";import{c as r}from"./p-8a1a6e56.js";const i="nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";const a=i;const s=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var t,e,n,r;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(e=(t=this.internals)===null||t===void 0?void 0:t.form)===null||e===void 0?void 0:e.requestSubmit()}if(this.type==="reset"){(r=(n=this.internals)===null||n===void 0?void 0:n.form)===null||r===void 0?void 0:r.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"21aa46431d8a9f64cfc6fba04a04b72de31c74a4",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:r("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&t("nv-loader",{key:"c2df9292a9c49f178e6e160dedeac3fe99776322",size:this.size}),!this.loading&&t("nv-icon",{key:"b7053d9e3a71a1464b41b021f41fe36c6591f114",name:this.name,size:this.size}),t("slot",{key:"70e8576ea565651df7dca6221cfed4160f86f025"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};s.style=a;const l='@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:" ";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:" ";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:" ";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:" ";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:" ";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:" ";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:" ";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:" ";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:" ";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:" ";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}';const d=l;const c=class{constructor(t){o(this,t);this.size="md"}render(){return t(e,{key:"932c76ef978e21bdab5a3502daadcdd7ecd05af4",class:r(this.size&&`size-${this.size}`,this.color&&`color-${this.color}`)})}};c.style=d;export{s as nv_iconbutton,c as nv_loader};
+//# sourceMappingURL=p-ce97ce24.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","handleKeyDown","key","el","click","handleTouchStart","touches","length","componentWillLoad","render","h","Host","role","tabindex","undefined","class","clsx","onClick","name","nvLoaderCss","NvLoaderStyle0","NvLoader","color"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,6uJACxB,MAAAC,EAAeD,E,MC6BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EASpB,aAAAiB,CAAcZ,GACZ,GAAIA,EAAMa,MAAQ,SAAWb,EAAMa,MAAQ,IAAK,CAC9Cb,EAAMC,iBACNV,KAAKuB,GAAGC,O,EAKZ,gBAAAC,CAAiBhB,GACf,GAAIA,EAAMiB,QAAQC,OAAS,EAAG,OAC9BlB,EAAMC,iBACNV,KAAKuB,GAAGC,O,CAOV,iBAAAI,GACE,GAAI5B,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHU,KAAK,SACL1B,KAAMN,KAAKM,KACX2B,SAAS,IACT7B,SAAUJ,KAAKI,SAAW,KAAO8B,UACjCC,MAAOC,EACL,OACA,QAAQpC,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhB8B,QAASrC,KAAKQ,aAEbR,KAAKG,SAAW2B,EAAA,aAAAR,IAAA,2CAAWrB,KAAMD,KAAKC,QAErCD,KAAKG,SAAW2B,EAAA,WAAAR,IAAA,2CAASgB,KAAMtC,KAAKsC,KAAMrC,KAAMD,KAAKC,OAEvD6B,EAAA,QAAAR,IAAA,6C,6KClMR,MAAMiB,EAAc,wmHACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MALrB,WAAA3C,CAAAC,G,UAeWC,KAAAC,KAA2B,I,CAepC,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHa,MAAOC,EACLpC,KAAKC,MAAQ,QAAQD,KAAKC,OAC1BD,KAAK0C,OAAS,SAAS1C,KAAK0C,U","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as c,H as i,g as n}from"./p-3060df80.js";import{c as t}from"./p-8a1a6e56.js";import{v as r}from"./p-f5ff676c.js";const a="nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;text-align:left;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";const d=a;const l=class{constructor(c){e(this,c);this.checkedChanged=o(this,"checkedChanged",7);this.labelBefore=false;this.inputId=r();this.hideLabel=false;this.error=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.readonly=false;this.required=false;this.autofocus=false}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}if(this.indeterminate){this.indeterminate=false}this.checked=o.checked}}onCheckedChanged(e){this.checkedChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return c(i,{key:"62195333f84808381f19ca4017916380d20d493f",class:t(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},c("div",{key:"65f02aee06eacecf83c5297d87130bbe9f85b19c",class:"input-container"},c("input",{key:"c3e8fcb41c835f0eba254f9e77de749b7dc6349e",type:"checkbox",id:this.inputId,name:this.name,autofocus:this.autofocus,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly&&!this.required,required:this.required,indeterminate:this.indeterminate,ref:e=>{if(e){e.indeterminate=this.indeterminate}}}),c("span",{key:"439a8c467373d734293012514cdb22c419b534ae",class:"icon"},this.checked&&!this.indeterminate&&c("slot",{key:"335a92ed1431fe96af3c7c6fac2f4245c0d4caaa",name:"checked-icon"},c("svg",{key:"67d97efca27a97c7db77d9f8c182a21fbd21d13c",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"9cb6730b00813e8d4fe6fa14549de6f2a41ea068",d:"M11.6667 3.5L5.25004 9.91667L2.33337 7","stroke-linecap":"round","stroke-linejoin":"round"}))),this.indeterminate&&c("slot",{key:"e47b17269156f72ddaf7af1ecc818ae5b6b8c0d3",name:"indeterminate-icon"},c("svg",{key:"4748acc27a70e74f9228cdb6e41eae4b1ae82559",class:"indeterminate-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"40748b36b277c1ed6ea8fc8f82f4cd687b2f6e3a",d:"M2.9165 7H11.0832","stroke-linecap":"round","stroke-linejoin":"round"}))))),c("slot",{key:"0fa9e559cefb8169c20b171fcbb6c1786fd6b3ae"}),c("div",{key:"44eef633025d1a7606979d4d8374c2a04081f45c",class:"text-container"},c("slot",{key:"b43251a02b15431f5399c3bced485b89741e069e",name:"main"},(this.label||this.el.querySelector('[slot="label"]'))&&c("label",{key:"7781451a357961ce1606b18c590baa344df4ff95",htmlFor:this.inputId,class:t(this.hideLabel&&"visually-hidden")},c("slot",{key:"b420ad1dbdc05a5c57d0b45e62176866ec0527ca",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&c("div",{key:"67715bef879e0778b58648b83135edefdbdba53d",class:"description"},c("slot",{key:"b1d4d21e83130e19e94efa915abd6661c027bbce",name:"description"},this.description))),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&c("div",{key:"157df3faf2cadb4014ba8475c99cf68d86da9f63",hidden:!this.error,class:"error-description"},c("slot",{key:"42aa95b2332618120d846fa481a1b30b7edeccca",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};l.style=d;export{l as nv_fieldcheckbox};
+//# sourceMappingURL=p-d0db5e72.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  text-align: left;\n  color: var(--components-form-text-label-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n      &.visually-hidden {\n        @include utils.visually-hidden();\n      }\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\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 checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    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        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <slot></slot>\n\n        <div class=\"text-container\">\n          <slot name=\"main\">\n            {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n              <label\n                htmlFor={this.inputId}\n                class={clsx(this.hideLabel && 'visually-hidden')}\n              >\n                <slot name=\"label\">{this.label}</slot>\n              </label>\n            )}\n\n            {(this.description ||\n              this.el.querySelector('[slot=\"description\"]')) && (\n              <div class=\"description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            )}\n          </slot>\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as o,h as t,H as e,g as n}from"./p-3060df80.js";import{b as s,B as r}from"./p-51602221.js";const a="nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";const i=a;const u=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.active=false;this.danger=false;this.loading=false;this.disabled=false;this.fluid=false;this.type="button";this.handleButtonClick=o=>{var t;if(this.loading||this.disabled){o.preventDefault();return}if(this.type!==s.Button&&(this.form||((t=this.internals)===null||t===void 0?void 0:t.form))){this.processFormAction()}else if(this.form&&this.type===s.Button){console.warn("Button has a form id but is not of type submit or reset so no form action will be processed.",`Button:`,this.el)}};this.processFormAction=()=>{var o,t;const e=this.form?document.getElementById(this.form):(o=this.internals)===null||o===void 0?void 0:o.form;if(!e){console.warn("No form element found.",`Form ID: ${this.form||"Not provided"}`,`Internals form:`,(t=this.internals)===null||t===void 0?void 0:t.form);return}switch(this.type){case s.Submit:e.requestSubmit();break;case s.Reset:e.reset();break}}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"54c0b3351f4d8a180058a03e61a562882fb98498",role:"button",tabindex:"0",onClick:this.handleButtonClick},this.loading&&t("nv-loader",{key:"21315e4af4111bcf47c67e65a9a58a1d7121a43e",size:this.size===r.Large?"sm":"xs"}),t("slot",{key:"f37683ddaa2c11c5b7accfc99429c930f5a3dcf6",name:"leading-icon"}),t("slot",{key:"d17ebe7505d9027c6c58f930a8ea9b097561cead"}),t("slot",{key:"2cd6c9756cc7540417041adf5830b734291b2ab5",name:"trailing-icon"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};u.style=i;export{u as nv_button};
+//# sourceMappingURL=p-d45ee8e5.entry.js.map

package/dist/native/{p-52b8c872.entry.js.map → p-d45ee8e5.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvButtonCss","NvButtonStyle0","NvButton","constructor","hostRef","this","size","emphasis","active","danger","loading","disabled","fluid","type","handleButtonClick","event","preventDefault","ButtonType","Button","form","_a","internals","processFormAction","console","warn","el","formElement","document","getElementById","_b","Submit","requestSubmit","Reset","reset","handleKeyDown","key","click","handleTouchStart","touches","length","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","role","tabindex","onClick","ButtonSize","Large","name"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,w1TACpB,MAAAC,EAAeD,E,MCuBFE,EAAQ,MANrB,WAAAC,CAAAC,G,0KAmBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAOhCF,KAAAG,OAAkB,MAOlBH,KAAAI,OAAkB,MAQ3BJ,KAAAK,QAAmB,MAMnBL,KAAAM,SAAoB,MAMXN,KAAAO,MAAiB,MAQjBP,KAAAQ,KAAwB,SAmBzBR,KAAAS,kBAAqBC,I,MAC3B,GAAIV,KAAKK,SAAWL,KAAKM,SAAU,CACjCI,EAAMC,iBACN,M,CAGF,GACEX,KAAKQ,OAASI,EAAWC,SACxBb,KAAKc,QAAQC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,OAC9B,CACAd,KAAKiB,mB,MACA,GAAIjB,KAAKc,MAAQd,KAAKQ,OAASI,EAAWC,OAAQ,CACvDK,QAAQC,KACN,+FACA,UACAnB,KAAKoB,G,GAUHpB,KAAAiB,kBAAoB,K,QAC1B,MAAMI,EAAcrB,KAAKc,KACpBQ,SAASC,eAAevB,KAAKc,OAC9BC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,KAEpB,IAAKO,EAAa,CAChBH,QAAQC,KACN,yBACA,YAAYnB,KAAKc,MAAQ,iBACzB,mBACAU,EAAAxB,KAAKgB,aAAS,MAAAQ,SAAA,SAAAA,EAAEV,MAElB,M,CAGF,OAAQd,KAAKQ,MACX,KAAKI,EAAWa,OACdJ,EAAYK,gBACZ,MACF,KAAKd,EAAWe,MACdN,EAAYO,QACZ,M,EASN,aAAAC,CAAcnB,GACZ,GAAIA,EAAMoB,MAAQ,SAAWpB,EAAMoB,MAAQ,IAAK,CAC9CpB,EAAMC,iBACNX,KAAKoB,GAAGW,O,EAKZ,gBAAAC,CAAiBtB,GACf,GAAIA,EAAMuB,QAAQC,OAAS,EAAG,OAC9BxB,EAAMC,iBACNX,KAAKoB,GAAGW,O,CAQV,mBAAAI,CAAoB9B,GAClBL,KAAKK,QAAUA,EACfL,KAAKM,SAAWD,C,CAIlB,oBAAA+B,CAAqB9B,GACnB,GAAIN,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,KAChB,CACLL,KAAKM,SAAWA,C,EAQpB,iBAAA+B,GACE,GAAIrC,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,EAQzB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,2CAACW,KAAK,SAASC,SAAS,IAAIC,QAAS3C,KAAKS,mBAC5CT,KAAKK,SACJkC,EAAA,aAAAT,IAAA,2CACE7B,KAAMD,KAAKC,OAAS2C,EAAWC,MAAQ,KAAO,OAIlDN,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,iBACXP,EAAA,QAAAT,IAAA,6CACAS,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,kB","ignoreList":[]}
+{"version":3,"names":["nvButtonCss","NvButtonStyle0","NvButton","constructor","hostRef","this","size","emphasis","active","danger","loading","disabled","fluid","type","handleButtonClick","event","preventDefault","ButtonType","Button","form","_a","internals","processFormAction","console","warn","el","formElement","document","getElementById","_b","Submit","requestSubmit","Reset","reset","handleKeyDown","key","click","handleTouchStart","touches","length","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","role","tabindex","onClick","ButtonSize","Large","name"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,i4TACpB,MAAAC,EAAeD,E,MCuBFE,EAAQ,MANrB,WAAAC,CAAAC,G,0KAmBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAOhCF,KAAAG,OAAkB,MAOlBH,KAAAI,OAAkB,MAQ3BJ,KAAAK,QAAmB,MAMnBL,KAAAM,SAAoB,MAMXN,KAAAO,MAAiB,MAQjBP,KAAAQ,KAAwB,SAmBzBR,KAAAS,kBAAqBC,I,MAC3B,GAAIV,KAAKK,SAAWL,KAAKM,SAAU,CACjCI,EAAMC,iBACN,M,CAGF,GACEX,KAAKQ,OAASI,EAAWC,SACxBb,KAAKc,QAAQC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,OAC9B,CACAd,KAAKiB,mB,MACA,GAAIjB,KAAKc,MAAQd,KAAKQ,OAASI,EAAWC,OAAQ,CACvDK,QAAQC,KACN,+FACA,UACAnB,KAAKoB,G,GAUHpB,KAAAiB,kBAAoB,K,QAC1B,MAAMI,EAAcrB,KAAKc,KACpBQ,SAASC,eAAevB,KAAKc,OAC9BC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,KAEpB,IAAKO,EAAa,CAChBH,QAAQC,KACN,yBACA,YAAYnB,KAAKc,MAAQ,iBACzB,mBACAU,EAAAxB,KAAKgB,aAAS,MAAAQ,SAAA,SAAAA,EAAEV,MAElB,M,CAGF,OAAQd,KAAKQ,MACX,KAAKI,EAAWa,OACdJ,EAAYK,gBACZ,MACF,KAAKd,EAAWe,MACdN,EAAYO,QACZ,M,EASN,aAAAC,CAAcnB,GACZ,GAAIA,EAAMoB,MAAQ,SAAWpB,EAAMoB,MAAQ,IAAK,CAC9CpB,EAAMC,iBACNX,KAAKoB,GAAGW,O,EAKZ,gBAAAC,CAAiBtB,GACf,GAAIA,EAAMuB,QAAQC,OAAS,EAAG,OAC9BxB,EAAMC,iBACNX,KAAKoB,GAAGW,O,CAQV,mBAAAI,CAAoB9B,GAClBL,KAAKK,QAAUA,EACfL,KAAKM,SAAWD,C,CAIlB,oBAAA+B,CAAqB9B,GACnB,GAAIN,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,KAChB,CACLL,KAAKM,SAAWA,C,EAQpB,iBAAA+B,GACE,GAAIrC,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,EAQzB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,2CAACW,KAAK,SAASC,SAAS,IAAIC,QAAS3C,KAAKS,mBAC5CT,KAAKK,SACJkC,EAAA,aAAAT,IAAA,2CACE7B,KAAMD,KAAKC,OAAS2C,EAAWC,MAAQ,KAAO,OAIlDN,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,iBACXP,EAAA,QAAAT,IAAA,6CACAS,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,kB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,H as i,g as n}from"./p-3060df80.js";import{I as a}from"./p-53aa81dd.js";import{v as o}from"./p-f5ff676c.js";import"./p-0462f723.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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .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-fielddaterange .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-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%;z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}';const d=s;const l=class{constructor(r){e(this,r);this.dateRangeChange=t(this,"dateRangeChange",7);this.valueChanged=t(this,"valueChanged",7);this.popoverId=o();this.startInputId=o();this.endInputId=o();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.autofocus=false;this.value="";this.startValue="";this.endValue="";this.open=false;this.firstDayOfWeek=1;this.numberOfCalendars=2;this.min="";this.max="";this.locale="en-BE";this.dateFormat="YYYY-MM-DD";this.shortcutsPlacement="bottom";this.showActions=false;this.fluid=false;this.parseUnifiedValue=e=>{if(!e){this.startValue="";this.endValue="";return}const t=e.split(",").map((e=>e.trim())).filter(Boolean);if(t.length>=2){this.startValue=t[0];this.endValue=t[1]}};this.handleClickOutside=e=>{if(this.open&&this.el&&!this.el.contains(e.target)){this.open=false}};this.handleStartInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const t=e.target;this.startValue=t.value;if(this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${t.value},${this.endValue}`;if(this.calendarElement.value!==e){this.calendarElement.value=e}setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),100)}};this.handleEndInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const t=e.target;this.endValue=t.value;if(this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${this.startValue},${t.value}`;if(this.calendarElement.value!==e){this.calendarElement.value=e}setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),100)}};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}if(this.calendarElement){this.calendarElement.removeAttribute("data-prevent-navigation")}this.open=true;setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),300)};this.toggleCalendar=e=>{if(this.readonly||this.disabled){return}e.stopPropagation();this.open=!this.open}}convertToInputmaskFormat(e){if(!e){return"dd/mm/yyyy"}const t={"YYYY-MM-DD":"yyyy-mm-dd","DD/MM/YYYY":"dd/mm/yyyy","MM/DD/YYYY":"mm/dd/yyyy","DD.MM.YYYY":"dd.mm.yyyy",YYYYMMDD:"yyyymmdd"};return t[e]||"dd/mm/yyyy"}async clear(){this.startValue="";this.endValue="";this.value="";const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{e.value="";if(e.inputmask){e.inputmask.remove()}}));this.valueChanged.emit("");this.dateRangeChange.emit({start:"",end:""});this.open=false;if(this.calendarElement){this.calendarElement.clear()}}updateMask(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{var t,r;(r=(t=e.inputmask)===null||t===void 0?void 0:t.remove)===null||r===void 0?void 0:r.call(t);const i=new a({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:this.convertToInputmaskFormat(this.dateFormat),clearIncomplete:false,showMaskOnHover:false,showMaskOnFocus:true,clearMaskOnLostFocus:!this.open,postValidation:true,oncleared:e=>{const t=e.target;if(t.id===this.startInputId){this.startValue=""}if(t.id===this.endInputId){this.endValue=""}},oncomplete:e=>{const t=e.target;if(t.id===this.startInputId){this.startValue=t.value}else if(t.id===this.endInputId){this.endValue=t.value}const r=`${this.startValue},${this.endValue}`;if(this.startValue&&this.endValue&&this.value!==r){this.value=r;this.valueChanged.emit(this.value);this.dateRangeChange.emit({start:this.startValue,end:this.endValue})}}});i.mask(e)}))}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.parseUnifiedValue(this.value)}}componentDidLoad(){this.updateMask();const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{if(e.name===this.startName&&this.startValue){requestAnimationFrame((()=>{e.value=this.startValue;const t=new CustomEvent("input",{bubbles:true});e.dispatchEvent(t)}))}else if(e.name===this.endName&&this.endValue){requestAnimationFrame((()=>{e.value=this.endValue;const t=new CustomEvent("input",{bubbles:true});e.dispatchEvent(t)}))}}))}componentDidRender(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{const t=e.name===this.startName?this.startValue:this.endName?this.endValue:"";if(t){requestAnimationFrame((()=>{e.value=t;e.setAttribute("value",t)}))}}))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}handleRangeDateChange(e){e.stopPropagation();const{start:t,end:r}=e.detail||{};if(t&&r){this.startValue=t;this.endValue=r;const e=`${t},${r}`;if(this.value!==e){this.value=e;this.valueChanged.emit(this.value)}this.dateRangeChange.emit({start:this.startValue,end:this.endValue});if(!this.showActions){this.open=false}}}handleCalendarValueChanged(e){if(e.target===this.el){return}e.stopPropagation();const t=e.detail||"";if(t!==this.value){this.value=t;this.valueChanged.emit(t);this.parseUnifiedValue(t);this.dateRangeChange.emit({start:this.startValue,end:this.endValue})}}handleClosePopover(){this.open=false}handleApplyDateRange(){this.open=false}handleDateReset(e){const t=e.type==="singleDateChange"&&e.detail==="";const r=e.type==="rangeDateChange"&&e.detail&&e.detail.start===""&&e.detail.end==="";if(t||r){this.startValue="";this.endValue="";this.value="";this.valueChanged.emit("");const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{e.value=""}));this.dateRangeChange.emit({start:"",end:""})}}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fielddaterange -> Popover element is not defined");return}}handleValueChange(e){this.parseUnifiedValue(e)}onOpenChanged(e){this.updateMask();if(this.contentRef){if(e){this.contentRef.style.transition="none";this.contentRef.style.maxHeight="0px";requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)";this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px"}))}else{this.contentRef.style.transition="none";this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px";requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)";this.contentRef.style.maxHeight="0px"}))}}}render(){return r(i,{key:"59ecd9fc59245a97bbbeac742552b350708a1528"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&r("label",{key:"5b0def9db7f90f9828bc8c08b728784e393c109a",htmlFor:this.startInputId},r("slot",{key:"2b6abe7f34951838636b38cd9bb1a0ed75d6dfbe",name:"label"},this.label)),r("nv-popover",{key:"5407e344f94f1a168e146df52ea04dc857c95aab",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",strategy:"fixed",open:this.open},r("div",{key:"c34e8ae161ae52bf26686eb4ef3c0f522538f97c",slot:"trigger",class:"input-wrapper"},r("slot",{key:"dee7a416efa8608661edfdbfb6607ab325d20778",name:"before-input"}),r("div",{key:"b1612645dadbb20c131ec1db6ea790cf03db8645",class:"input-container"},r("slot",{key:"2c978351dc56c751b775641e91d12ac8b0e7a9c5",name:"leading-input"}),r("div",{key:"c8a69b1174c5ed62aeb7408c20ecc614ea735e72",class:"range-inputs"},r("input",{key:"534ef1aebfbb47b2bd9627d1d25701b3b9b50b59",id:this.startInputId,type:"text",placeholder:this.startPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.startName,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,value:this.startValue,onInput:this.handleStartInput,onFocus:this.handleFocus,"data-scope":"date-range"}),r("div",{key:"36d35e60c3aadc7c8252f14dd7d2565e3be8ecde",class:"range-separator"}),r("input",{key:"e068562f20e2ba20b85b196c1257bf5d9d37c522",id:this.endInputId,type:"text",placeholder:this.endPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.endName,disabled:this.disabled,readOnly:this.readonly,required:this.required,value:this.endValue,onInput:this.handleEndInput,onFocus:this.handleFocus,"data-scope":"date-range"})),this.error&&r("nv-icon",{key:"4eb8a4a4e7c6f26d2d182166935df39c7bce8bc4",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"796a276976661bb8506a14e6e05156b672950368",name:"circle-check",class:"validation",size:"md"}),r("nv-iconbutton",{key:"9f4115cb1e9ce79f430c1674a2bf39abed781b8b",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar",onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),r("slot",{key:"12f19584c116d915c8c292f1e851fd149535991d",name:"after-input"})),r("div",{key:"ddfa1ee0a53cdd7dd613abfe657321bddcd12e7c",slot:"content"},r("nv-calendar",{key:"618e19c1c53a9c97ed6b857368efdef03e8eee32",ref:e=>this.calendarElement=e,dateFormat:this.dateFormat,value:this.value,firstDayOfWeek:this.firstDayOfWeek,numberOfCalendars:this.numberOfCalendars,min:this.min,max:this.max,locale:this.locale,shortcutsPlacement:this.shortcutsPlacement,showActions:this.showActions,shortcuts:this.shortcuts,showWeekNumbers:this.showWeekNumbers,disabledDates:this.disabledDates,selectionType:"range","data-prevent-navigation":"true"}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&r("div",{key:"87d197b39117083736b0b6f7737072a2c95e7119",class:"description"},r("slot",{key:"5ee232c12b57e5ce07de09b1bc2968d0bc91ec9d",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"f4dd844d8c628a33dd7f59e0c9de3f50154ea00e",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?r("slot",{name:"error-description"}):this.errorDescription),r("slot",{key:"af49f08db15166ca7724b5dd08e18bdc06f0ace0"}))}get el(){return n(this)}static get watchers(){return{value:["handleValueChange"],open:["onOpenChanged"]}}};l.style=d;export{l as nv_fielddaterange};
+//# sourceMappingURL=p-d7f444fb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddaterangeCss","NvFielddaterangeStyle0","NvFielddaterange","constructor","hostRef","this","popoverId","uuidv4","startInputId","endInputId","disabled","readonly","required","error","success","autofocus","value","startValue","endValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","fluid","parseUnifiedValue","values","split","map","v","trim","filter","Boolean","length","handleClickOutside","event","el","contains","target","handleStartInput","preventDefault","input","calendarElement","removeAttribute","currentValue","setTimeout","setAttribute","handleEndInput","handleFocus","blur","toggleCalendar","stopPropagation","convertToInputmaskFormat","format","formatMap","YYYYMMDD","clear","inputs","querySelectorAll","forEach","inputmask","remove","valueChanged","emit","dateRangeChange","start","end","updateMask","_b","_a","call","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","postValidation","oncleared","e","id","oncomplete","newValue","mask","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","name","startName","requestAnimationFrame","CustomEvent","bubbles","dispatchEvent","endName","componentDidRender","disconnectedCallback","removeEventListener","handleRangeDateChange","detail","handleCalendarValueChanged","handleClosePopover","handleApplyDateRange","handleDateReset","isResetSingle","type","isResetRange","handleKeyDown","key","popoverElement","console","warn","handleValueChange","onOpenChanged","contentRef","style","transition","maxHeight","scrollHeight","render","h","Host","label","querySelector","htmlFor","ref","triggerMode","placement","strategy","slot","class","startPlaceholder","readOnly","onInput","onFocus","endPlaceholder","size","emphasis","onClick","tabIndex","shortcuts","showWeekNumbers","disabledDates","selectionType","description","errorDescription","hidden"],"sources":["src/components/nv-fielddaterange/styles/nv-fielddaterange.scss?tag=nv-fielddaterange","src/components/nv-fielddaterange/nv-fielddaterange.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n@import './mixins';\n\nnv-fielddaterange {\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  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n      z-index: 2;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n\n      &:focus-within,\n      &:focus-within:hover,\n      &:focus,\n      &:focus:hover {\n        box-shadow: none;\n        border-color: var(--nv-field-border-default);\n      }\n\n      input {\n        @include form-field-input();\n        width: 100%;\n        &:focus-within,\n        &:focus-within:hover,\n        &:focus,\n        &:focus:hover {\n          outline: var(--focus-outline-stroke) solid var(--nv-field-border-focus);\n          outline-offset: 0px;\n          & ~ .range-separator {\n            background-color: transparent;\n          }\n        }\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\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  .range-inputs {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    width: 100%;\n    z-index: 1;\n\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      padding: 0;\n      font-size: var(--form-field-font-size);\n      color: var(--components-form-field-content-text);\n      background: transparent;\n      min-width: 0; // to avoid overflow\n\n      &::placeholder {\n        color: var(--components-form-field-content-placeholder);\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        color: var(--components-form-field-content-text);\n        background-color: var(--components-form-field-background-disabled);\n      }\n    }\n\n    .range-separator {\n      @include range-separator();\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Extends HTMLInputElement to include the inputmask property.\n */\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n  /**\n   * The inputmask instance that provides masking functionality.\n   */\n  inputmask?: {\n    /**\n     * Removes the inputmask instance.\n     */\n    remove: () => void;\n  };\n}\n\n/**\n * @slot default - Child content of the component.\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-fielddaterange',\n  styleUrl: 'styles/nv-fielddaterange.scss',\n  shadow: false,\n})\nexport class NvFielddaterange {\n  @Element() el!: HTMLNvFielddaterangeElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private calendarElement!: HTMLNvCalendarElement;\n  private popoverId: string = uuidv4();\n  private contentRef?: HTMLDivElement;\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   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the start input field.\n   */\n  @Prop({ reflect: true })\n  readonly startPlaceholder: string;\n\n  /**\n   * Placeholder for the end input field.\n   */\n  @Prop({ reflect: true })\n  readonly endPlaceholder: string;\n\n  /**\n   * Name attribute for the start input.\n   */\n  @Prop({ reflect: true })\n  readonly startName: string;\n\n  /**\n   * Name attribute for the end input.\n   */\n  @Prop({ reflect: true })\n  readonly endName: string;\n\n  /**\n   * Disables both input fields.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets both input fields as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks both input fields as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the start input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the date range (in string format).\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * The current value of the start date in string format.\n   */\n  @State()\n  startValue: string = '';\n\n  /**\n   * The current value of the end date in string format.\n   */\n  @State()\n  endValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 2\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 2;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n  /**\n   * Show week numbers\n   */\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean;\n\n  /**\n   * Disabled dates ISO string array\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: Array<string>;\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 METHODS\n\n  /**\n   * Parses the unified value prop and synchronizes with internal state\n   * @param {string} value - Value to parse\n   */\n  private parseUnifiedValue = (value: string): void => {\n    if (!value) {\n      // Reset all selections\n      this.startValue = '';\n      this.endValue = '';\n      return;\n    }\n\n    const values = value\n      .split(',')\n      .map(v => v.trim())\n      .filter(Boolean);\n\n    if (values.length >= 2) {\n      this.startValue = values[0];\n      this.endValue = values[1];\n    }\n  };\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format to convert\n   * @returns {string} The converted format for Inputmask\n   */\n  private convertToInputmaskFormat(format: string): string {\n    // If the format is not specified, use the default format YYYY-MM-DD\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    const formatMap = {\n      'YYYY-MM-DD': 'yyyy-mm-dd',\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'DD.MM.YYYY': 'dd.mm.yyyy',\n      'YYYYMMDD': 'yyyymmdd',\n    };\n\n    return formatMap[format] || 'dd/mm/yyyy';\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The mouse event\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles the input event on the start input element.\n   * Updates internal state and calendar navigation without emitting events.\n   * @param {Event} event - The input event\n   */\n  private handleStartInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n\n    // Always update startValue to keep state in sync\n    this.startValue = input.value;\n\n    // Update calendar value for navigation (without triggering events)\n    if (this.calendarElement && input.value) {\n      // Temporarily enable navigation for keyboard input\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n\n      // Update calendar's rangeValue to allow navigation\n      const currentValue = `${input.value},${this.endValue}`;\n      if (this.calendarElement.value !== currentValue) {\n        this.calendarElement.value = currentValue;\n      }\n\n      // Restore navigation prevention after update\n      setTimeout(() => {\n        if (this.calendarElement) {\n          this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n        }\n      }, 100);\n    }\n  };\n\n  /**\n   * Handles the input event on the end input element.\n   * Updates internal state and calendar navigation without emitting events.\n   * @param {Event} event - The input event\n   */\n  private handleEndInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n\n    // Always update endValue to keep state in sync\n    this.endValue = input.value;\n\n    // Update calendar value for navigation (without triggering events)\n    if (this.calendarElement && input.value) {\n      // Temporarily enable navigation for keyboard input\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n\n      // Update calendar's rangeValue to allow navigation\n      const currentValue = `${this.startValue},${input.value}`;\n      if (this.calendarElement.value !== currentValue) {\n        this.calendarElement.value = currentValue;\n      }\n\n      // Restore navigation prevention after update\n      setTimeout(() => {\n        if (this.calendarElement) {\n          this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n        }\n      }, 100);\n    }\n  };\n\n  /**\n   * Handles focus events on the input elements.\n   * @param {FocusEvent} event - The focus event\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n\n    // Enable navigation on focus\n    if (this.calendarElement) {\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n    }\n\n    this.open = true;\n\n    // Restore navigation prevention after opening\n    setTimeout(() => {\n      if (this.calendarElement) {\n        this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n      }\n    }, 300);\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   * @param {MouseEvent} event - The click event.\n   */\n  private toggleCalendar = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    // Stop propagation to prevent closing parent dialogs\n    event.stopPropagation();\n    this.open = !this.open;\n  };\n\n  /**\n   * Clears the current selection and resets the date range field to its initial state.\n   * This method can be called programmatically to reset the field.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    // Reset internal state\n    this.startValue = '';\n    this.endValue = '';\n    this.value = '';\n\n    // Reset both input elements\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      input.value = '';\n      // Remove input mask if exists\n      if ((input as HTMLInputElementWithInputmask).inputmask) {\n        (input as HTMLInputElementWithInputmask).inputmask.remove();\n      }\n    });\n\n    // Emit events to notify about the change\n    this.valueChanged.emit('');\n    this.dateRangeChange.emit({ start: '', end: '' });\n\n    // Close the popover if open\n    this.open = false;\n\n    // Clear the calendar if it exists\n    if (this.calendarElement) {\n      this.calendarElement.clear();\n    }\n  }\n\n  private updateMask() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      (input as HTMLInputElementWithInputmask).inputmask?.remove?.();\n\n      const inputMask = new Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: this.convertToInputmaskFormat(this.dateFormat),\n        clearIncomplete: false,\n        showMaskOnHover: false,\n        showMaskOnFocus: true,\n        clearMaskOnLostFocus: !this.open,\n        postValidation: true,\n        oncleared: (e: CustomEvent) => {\n          const input = e.target as HTMLInputElement;\n          if (input.id === this.startInputId) {\n            this.startValue = '';\n          }\n          if (input.id === this.endInputId) {\n            this.endValue = '';\n          }\n        },\n        oncomplete: (e: CustomEvent) => {\n          const input = e.target as HTMLInputElement;\n\n          // Update the corresponding state based on which input completed\n          if (input.id === this.startInputId) {\n            this.startValue = input.value;\n          } else if (input.id === this.endInputId) {\n            this.endValue = input.value;\n          }\n\n          // Update unified value\n          const newValue = `${this.startValue},${this.endValue}`;\n\n          // Only emit if both dates are filled and value changed\n          if (this.startValue && this.endValue && this.value !== newValue) {\n            this.value = newValue;\n            this.valueChanged.emit(this.value);\n\n            // Legacy support (deprecated)\n            this.dateRangeChange.emit({\n              start: this.startValue,\n              end: this.endValue,\n            });\n          }\n        },\n      });\n      inputMask.mask(input);\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      // Use the unified parsing method\n      this.parseUnifiedValue(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.updateMask();\n\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      // Set the value after applying the mask\n      if (input.name === this.startName && this.startValue) {\n        requestAnimationFrame(() => {\n          input.value = this.startValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      } else if (input.name === this.endName && this.endValue) {\n        requestAnimationFrame(() => {\n          input.value = this.endValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      }\n    });\n  }\n\n  componentDidRender() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      const value =\n        input.name === this.startName\n          ? this.startValue\n          : this.endName\n          ? this.endValue\n          : '';\n      if (value) {\n        // Make sure the value is defined both as a property and attribute\n        requestAnimationFrame(() => {\n          input.value = value;\n          input.setAttribute('value', value);\n        });\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the date range changes.\n   */\n  @Event()\n  dateRangeChange: EventEmitter<\n    HTMLNvCalendarElementEventMap['rangeDateChange']\n  >;\n\n  /**\n   * Emitted when the unified value changes\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Handles the range date selection event from nv-calendar.\n   * Stops propagation to prevent duplicate events with handleCalendarValueChanged.\n   * @param {CustomEvent<DateRange>} event - The custom event\n   */\n  @Listen('rangeDateChange')\n  handleRangeDateChange(\n    event: CustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>,\n  ) {\n    // Stop propagation to prevent this from being handled by handleCalendarValueChanged\n    event.stopPropagation();\n\n    const { start, end } = event.detail || {};\n\n    // Check that both dates are defined\n    if (start && end) {\n      this.startValue = start;\n      this.endValue = end;\n\n      // Update unified value prop (like nv-calendar)\n      const newValue = `${start},${end}`;\n      if (this.value !== newValue) {\n        this.value = newValue;\n        this.valueChanged.emit(this.value);\n      }\n\n      // Legacy support (deprecated)\n      this.dateRangeChange.emit({\n        start: this.startValue,\n        end: this.endValue,\n      });\n\n      if (!this.showActions) {\n        this.open = false;\n      }\n    }\n  }\n\n  /**\n   * Handles the unified value change event from nv-calendar\n   * Note: This might not be called if rangeDateChange stops propagation first.\n   * @param {CustomEvent<string>} event - The custom event\n   */\n  @Listen('valueChanged')\n  handleCalendarValueChanged(event: CustomEvent<string>) {\n    // Only handle events from the calendar, not from self\n    if (event.target === this.el) {\n      return;\n    }\n\n    // Stop propagation to prevent parent components from receiving calendar events\n    event.stopPropagation();\n\n    const newValue = event.detail || '';\n\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.valueChanged.emit(newValue);\n\n      // Parse and update internal state\n      this.parseUnifiedValue(newValue);\n\n      // Legacy support - emit dateRangeChange\n      this.dateRangeChange.emit({\n        start: this.startValue,\n        end: this.endValue,\n      });\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('applyDateRange')\n  handleApplyDateRange() {\n    this.open = false;\n  }\n\n  /**\n   * Handles the reset event from the calendar's cancel button\n   * @param {CustomEvent} event - The event emitted by the calendar\n   */\n  @Listen('singleDateChange')\n  @Listen('rangeDateChange')\n  handleDateReset(event: CustomEvent) {\n    const isResetSingle =\n      event.type === 'singleDateChange' && event.detail === '';\n    const isResetRange =\n      event.type === 'rangeDateChange' &&\n      event.detail &&\n      event.detail.start === '' &&\n      event.detail.end === '';\n\n    if (isResetSingle || isResetRange) {\n      this.startValue = '';\n      this.endValue = '';\n\n      // Update unified value prop\n      this.value = '';\n      this.valueChanged.emit('');\n\n      const inputs = this.el.querySelectorAll('.input-wrapper input');\n      inputs.forEach((input: HTMLInputElement) => {\n        input.value = '';\n      });\n\n      // Legacy support (deprecated)\n      this.dateRangeChange.emit({ start: '', end: '' });\n    }\n  }\n\n  /**\n   * Handles keyboard events.\n   * @param {KeyboardEvent} event - The keyboard event\n   */\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    if (!this.popoverElement) {\n      console.warn('nv-fielddaterange -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    // Use the unified parsing method instead of JSON.parse\n    this.parseUnifiedValue(newValue);\n  }\n\n  @Watch('open')\n  onOpenChanged(newValue: boolean) {\n    this.updateMask();\n    if (this.contentRef) {\n      if (newValue) {\n        this.contentRef.style.transition = 'none';\n        this.contentRef.style.maxHeight = '0px';\n        void this.contentRef.offsetHeight;\n        requestAnimationFrame(() => {\n          this.contentRef.style.transition =\n            'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';\n          this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';\n        });\n      } else {\n        this.contentRef.style.transition = 'none';\n        this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';\n        void this.contentRef.offsetHeight;\n        requestAnimationFrame(() => {\n          this.contentRef.style.transition =\n            'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';\n          this.contentRef.style.maxHeight = '0px';\n        });\n      }\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.startInputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          strategy=\"fixed\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container\">\n              <slot name=\"leading-input\"></slot>\n\n              <div class=\"range-inputs\">\n                <input\n                  id={this.startInputId}\n                  type=\"text\"\n                  placeholder={\n                    this.startPlaceholder ||\n                    this.convertToInputmaskFormat(this.dateFormat)\n                  }\n                  name={this.startName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  autofocus={this.autofocus}\n                  value={this.startValue}\n                  onInput={this.handleStartInput}\n                  onFocus={this.handleFocus}\n                  data-scope=\"date-range\"\n                />\n\n                <div class=\"range-separator\"></div>\n\n                <input\n                  id={this.endInputId}\n                  type=\"text\"\n                  placeholder={\n                    this.endPlaceholder ||\n                    this.convertToInputmaskFormat(this.dateFormat)\n                  }\n                  name={this.endName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  value={this.endValue}\n                  onInput={this.handleEndInput}\n                  onFocus={this.handleFocus}\n                  data-scope=\"date-range\"\n                />\n              </div>\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\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\"\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              ref={el => (this.calendarElement = el as HTMLNvCalendarElement)}\n              dateFormat={this.dateFormat}\n              value={this.value}\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n              selectionType=\"range\"\n              data-prevent-navigation=\"true\"\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\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            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as r,H as i,g as t}from"./p-3060df80.js";import{v as n}from"./p-f5ff676c.js";const d='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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .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;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .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-fielddropdown .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-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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 l=d;const a=class{constructor(r){e(this,r);this.valueChanged=o(this,"valueChanged",7);this.dropdownItemSelected=o(this,"dropdownItemSelected",7);this.inputId=n();this.autocomplete="off";this.required=false;this.readonly=false;this.disabled=false;this.error=false;this.maxHeight="";this.open=false;this.emptyResult="No results found";this.filterable=false;this.debounceDelay=300;this.autofocus=false;this.fluid=false;this.filterText="";this.selectedValues=new Set;this.handleInputContainerClick=e=>{if(this.disabled||this.readonly){return}const o=e.target;if(o.tagName==="P"||o.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const o=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",o)}}};this.handleInput=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const o=e.target;this.open=true;if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterText=o.value.toLowerCase();this.filterItems()}),this.debounceDelay)};this.handleInputFocus=()=>{if(this.disabled||this.readonly)return;this.open=true};this.togglePopover=()=>{if(this.disabled||this.readonly)return;this.open=!this.open};this.getSelectedLabel=()=>{var e,o,r,i,t,n;if(!this.value)return"";if(((e=this.options)===null||e===void 0?void 0:e.length)>1){const e=this.options.find((e=>e.value===this.value));return(r=(o=e===null||e===void 0?void 0:e.label)!==null&&o!==void 0?o:e===null||e===void 0?void 0:e.value)!==null&&r!==void 0?r:this.value}const d=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const l=d.find((e=>e.value===this.value));const a=l?(n=(i=l.label)!==null&&i!==void 0?i:(t=l.textContent)===null||t===void 0?void 0:t.trim())!==null&&n!==void 0?n:l.value:"";return a};this.clearFilter=()=>{if(!this.filterable)return;this.filterText="";this.inputElement.value=this.getSelectedLabel();this.inputElement.focus();this.filterItems()};this.handleBlurInput=e=>{var o;const r=e.relatedTarget;if(!this.el.contains(r)&&!((o=this.popoverElement)===null||o===void 0?void 0:o.contains(r))){this.open=false;if(this.filterable){this.clearFilter()}}}}handleOptionsChange(e){var o;if(!e)return;if(!this.value){const r=e.find((e=>e.selected));this.value=(o=r===null||r===void 0?void 0:r.value)!==null&&o!==void 0?o:"";this.updateSelectedItem(this.value)}}watchValueHandler(e){this.valueChanged.emit(e)}handleOpenChange(e){if(e&&this.filterable){this.filterItems()}else if(!e){this.clearFilter()}}handleOpenChanged(e){e.stopPropagation();if(e.target===this.popoverElement){this.open=e.detail}if(!e.detail&&this.filterable){this.clearFilter()}}handleDropdownItemSelected(e){if(this.disabled||this.readonly)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((o=>{if(o!==e.target){o.removeAttribute("selected")}else{o.setAttribute("selected","true")}}));this.clearFilter();this.value=e.detail.value;this.open=false}handleBlur(e){const o=e.relatedTarget;if(!(o instanceof Node)||!this.el.contains(o)){this.open=false;if(this.inputElement){this.filterText="";this.inputElement.value=this.getSelectedLabel();setTimeout((()=>{this.filterItems()}),200)}}}handleKeyDown(e){if(!this.el)return;if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem:not([disabled]):not([hidden])"));let r=o.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();r=(r+1)%o.length;this.updateHighlightedItem(o,r)}else if(e.key==="ArrowUp"){e.preventDefault();r=(r-1+o.length)%o.length;this.updateHighlightedItem(o,r)}else if(e.key==="Escape"){e.preventDefault();this.open=false}}componentWillLoad(){this.resetFilter();if(this.filterable&&this.filterText){this.filterItems()}if(this.options){this.handleOptionsChange(this.options)}}componentDidLoad(){if(this.value){this.updateSelectedItem(this.value)}if(this.inputElement){this.inputElement.value=this.getSelectedLabel()}}async getFilterText(){return this.filterText}filterItems(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const r=this.el.querySelector("nv-fielddropdownitem[data-empty]");if(r){r.remove()}let i=false;o.forEach((e=>{var o,r;const t=((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase())||"";const n=((r=e.value)===null||r===void 0?void 0:r.toLowerCase())||"";const d=n.includes(this.filterText)||t.includes(this.filterText);if(d)e.removeAttribute("hidden");else e.setAttribute("hidden","");if(d){i=true}}));if(!i){const o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-empty","true");o.setAttribute("disabled","true");o.textContent=this.emptyResult;(e=this.el.querySelector('ul[slot="content"]'))===null||e===void 0?void 0:e.appendChild(o)}}resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));e.forEach((e=>{e.style.display=""}))}updateHighlightedItem(e,o){e.forEach(((e,r)=>{if(r===o){e.classList.add("highlighted");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted")}}))}updateSelectedItem(e){if(!e)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const r=o.find((o=>{var r;const i=o.getAttribute("label");const t=o.getAttribute("value");const n=(r=o.textContent)===null||r===void 0?void 0:r.trim();return i===e||t===e||n===e}));o.forEach((e=>{if(e===r){e.setAttribute("selected","")}else{e.removeAttribute("selected")}}))}render(){var e;return r(i,{key:"1d5a87b2a5e9d9ca0be659ba5706b1db068d1d2d",role:"combobox","aria-expanded":this.open.toString(),"aria-haspopup":"listbox","aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"b07ca241c89f45292e479de79de618c6444a9c42",htmlFor:this.inputId},r("slot",{key:"0dd6ac2799e187e7233a5a5651ef18d59e4507e8",name:"label"},this.label)),r("nv-popover",{key:"b06d107776724937816dc4b98a035b282ed6c1f3",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},r("div",{key:"ab755801a0f2a732ea895e04d6c3a85261422f17",class:"input-wrapper",slot:"trigger"},r("slot",{key:"b78c41d4064cf067d69fa20ae583c1be29d1f620",name:"before-input"}),r("div",{key:"b46f6440660056ff71b9debf503f15ca7046ca02",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"36069ce529fba771c9339a3cb6c9c5c838f441c4",name:"leading-input"}),this.filterable||this.disabled||this.readonly?r("input",{"data-scope":"focusable",id:this.inputId,type:"search",ref:e=>this.inputElement=e,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.getSelectedLabel(),required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput,onFocus:this.handleInputFocus,onClick:this.handleInputFocus,onKeyDown:this.handleKeyDown,onBlur:this.handleBlurInput}):r("p",{"data-scope":"focusable",id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClick,tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocus,onBlur:this.handleBlurInput},this.getSelectedLabel()||this.value||this.placeholder),this.filterable&&this.filterText&&this.open&&r("nv-iconbutton",{key:"36f76135c0e3e1e6750c95116aae6ddd397eec1f",name:"x",size:"md",emphasis:"lower",class:"clear-button",onClick:this.clearFilter,"aria-label":"Clear input"}),this.error&&r("nv-icon",{key:"bd73c43ffae11897359adfae69572ee490f0f5c2",name:"alert-circle",class:"validation",size:"md"}),r("nv-iconbutton",{key:"a0f237814e9f58aa9e4d72e73a1747248911ade8","data-scope":"toggle-dropdown",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown",onClick:this.togglePopover,tabIndex:this.disabled?-1:0})),r("slot",{key:"66d2b27cfcf7ef97df493accaa333e0694234344",name:"after-input"})),r("div",{key:"de6d7e18d676788cf0c7bfebd25f22b5cd2067ce",slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},((e=this.options)===null||e===void 0?void 0:e.length)>0?r("ul",null,this.options.map((e=>r("nv-fielddropdownitem",{label:e.label,value:e.value,disabled:e.disabled,selected:e.value===this.value})))):r("slot",{name:"content"}))),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"ea889c8ecdcfad160010374541b73f548322a0ad",class:"description"},r("slot",{key:"b69f67d3a03bf1839edd912ea369cfd87395ae51",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"6ecd397cb41aab81173992c90e42f593f1227730",hidden:!this.error,class:"error-description"},r("slot",{key:"3dff83b119d3cbbf2d00bc8641882326d08f939d",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return t(this)}static get watchers(){return{options:["handleOptionsChange"],value:["watchValueHandler"],open:["handleOpenChange"]}}};a.style=l;export{a as nv_fielddropdown};
+//# sourceMappingURL=p-d878e90a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NvFielddropdown","constructor","hostRef","this","inputId","uuidv4","autocomplete","required","readonly","disabled","error","maxHeight","open","emptyResult","filterable","debounceDelay","autofocus","fluid","filterText","selectedValues","Set","handleInputContainerClick","event","target","tagName","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInput","input","debounceTimer","window","clearTimeout","setTimeout","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","handleBlurInput","relatedTarget","contains","handleOptionsChange","newValue","defaultValue","selected","updateSelectedItem","watchValueHandler","valueChanged","emit","handleOpenChange","newOpen","handleOpenChanged","stopPropagation","detail","handleDropdownItemSelected","forEach","removeAttribute","setAttribute","handleBlur","Node","handleKeyDown","key","preventDefault","currentIndex","findIndex","updateHighlightedItem","componentWillLoad","resetFilter","componentDidLoad","getFilterText","existingEmptyItem","hasVisibleItems","shouldShow","includes","emptyItem","document","createElement","appendChild","style","display","index","i","scrollIntoView","block","itemLabel","getAttribute","itemValue","itemText","render","h","Host","role","toString","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onKeyDown","onBlur","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@import '../../../styles/scrollbar';\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    div[slot='content'] {\n      @include scrollbar();\n      max-height: calc(90vh - var(--list-dropdown-padding) * 2);\n      overflow-y: auto;\n      position: relative;\n    }\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';\n\nimport { v4 as uuidv4 } from 'uuid';\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   * Timer for debouncing input events.\n   * Private property preferred over @State as it:\n   * - Doesn't need to trigger re-renders\n   * - Is purely for internal logic\n   * - Improves performance by avoiding Stencil's reactivity system\n   */\n  private debounceTimer: number;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input's data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and\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   * 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   * 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   * 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   * Defines the maximum height of the multiselect list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '';\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: 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   * Delay in milliseconds before the search is triggered when typing in the filter input.\n   * @default 300\n   */\n  @Prop({ reflect: true })\n  readonly debounceDelay: number = 300;\n\n  /**\n   * 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  /**\n   * The text entered by the user for filtering dropdown items.\n   */\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  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    if (!newValue) return;\n\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  @Watch('value')\n  watchValueHandler(newValue: typeof this.value) {\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('open')\n  handleOpenChange(newOpen: boolean) {\n    // React to external changes, e.g., clear filter or refilter on open\n    if (newOpen && this.filterable) {\n      this.filterItems(); // Ensure items are filtered if filterText exists\n    } else if (!newOpen) {\n      this.clearFilter(); // Clear on external close\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('openChanged')\n  handleOpenChanged(\n    event: CustomEvent<HTMLNvPopoverElementEventMap['openChanged']>,\n  ) {\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    if (event.target === this.popoverElement) {\n      this.open = event.detail;\n    }\n\n    if (!event.detail && this.filterable) {\n      this.clearFilter();\n    }\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('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 LISTENERS\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 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\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterText = input.value.toLowerCase();\n      this.filterItems();\n    }, this.debounceDelay);\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  private handleBlurInput = (event: FocusEvent) => {\n    const relatedTarget = event.relatedTarget as Node | null;\n    if (\n      !this.el.contains(relatedTarget) &&\n      !this.popoverElement?.contains(relatedTarget)\n    ) {\n      this.open = false;\n      if (this.filterable) {\n        this.clearFilter(); // Resets input to selected label, clears filterText\n      }\n    }\n  };\n\n  //#endregion METHODS\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                  onBlur={this.handleBlurInput}\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                  onBlur={this.handleBlurInput}\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                onClick={this.togglePopover}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            slot=\"content\"\n            style={this.maxHeight ? { maxHeight: this.maxHeight } : {}}\n          >\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\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}