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

package/dist/components/{p-a9dc0824.js.map → p-930caa42.js.map}

@@ -1 +1 @@
-{"file":"p-a9dc0824.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-930caa42.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-2854cf01.js → p-942f6619.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$1 } from './p-ca38a8a9.js';
+import { d as defineCustomElement$1 } from './p-e0cd7e3a.js';
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
 const NvMenuitemStyle0 = nvMenuitemCss;
@@ -82,4 +82,4 @@ defineCustomElement();
 
 export { NvMenuitem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-2854cf01.js.map
+//# sourceMappingURL=p-942f6619.js.map

package/dist/components/{p-2854cf01.js.map → p-942f6619.js.map}

@@ -1 +1 @@
-{"file":"p-2854cf01.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B,CAAC;AACt8B,yBAAe,aAAa;;MCoBf,UAAU;IALvB;;;;;;;QA6BW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;KAuFtC;IArDS,oBAAoB,CAAC,KAAY;;QAEvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;KACJ;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC,CAAC;YACtE,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;gBACvC,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;aACjB;SACF;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAElD,8DAAa,EAEZ,IAAI,CAAC,KAAK,IAAI,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n  * {\n    pointer-events: none;\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to render custom content for the menu item.\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Text content for the menu item. If a more custom approach is needed, use\n   * the default slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\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 icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  /**\n   * Represents the identifier or name associated with the menu item. This value\n   * will be emitted as part of the event data when the menu item is selected,\n   * enabling event handlers to identify the chosen item.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Fires when the menu item is selected (click or keypress). Will include the\n   * id and name of the menu item.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<{\n    /**\n     * The id of the menu item that was selected.\n     */\n    id?: HTMLElement['id'];\n    /**\n     * The name of the menu item that was selected.\n     */\n    name?: string;\n    /**\n     * Indicates if the menu item has a nested submenu.\n     */\n    hasSubmenu?: boolean;\n  }>;\n\n  private handleMenuItemSelect(event: Event) {\n    // If the element is disabled, stop propagation\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.menuitemSelected.emit({\n      id: this.el.id,\n      name: this.name,\n      hasSubmenu: this.hasSubmenu,\n    });\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this.handleMenuItemSelect(event);\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      const activeElement = document.activeElement as HTMLNvMenuitemElement;\n      if (\n        activeElement &&\n        activeElement.tagName === 'NV-MENUITEM' &&\n        !activeElement.hasAttribute('has-submenu')\n      ) {\n        event.preventDefault();\n        this.el.click();\n      }\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n\n        <slot></slot>\n\n        {this.label && <span data-scope=\"text\">{this.label}</span>}\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-942f6619.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B,CAAC;AACt8B,yBAAe,aAAa;;MCoBf,UAAU;IALvB;;;;;;;QA6BW,aAAQ,GAAY,KAAK,CAAC;;;;QAY1B,eAAU,GAAY,KAAK,CAAC;KAuFtC;IArDS,oBAAoB,CAAC,KAAY;;QAEvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;KACJ;IAGD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC,CAAC;YACtE,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;gBACvC,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;aACjB;SACF;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,IACvD,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAElD,8DAAa,EAEZ,IAAI,CAAC,KAAK,IAAI,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,8DAAM,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACvD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n  * {\n    pointer-events: none;\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to render custom content for the menu item.\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Text content for the menu item. If a more custom approach is needed, use\n   * the default slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\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 icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  /**\n   * Represents the identifier or name associated with the menu item. This value\n   * will be emitted as part of the event data when the menu item is selected,\n   * enabling event handlers to identify the chosen item.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Fires when the menu item is selected (click or keypress). Will include the\n   * id and name of the menu item.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<{\n    /**\n     * The id of the menu item that was selected.\n     */\n    id?: HTMLElement['id'];\n    /**\n     * The name of the menu item that was selected.\n     */\n    name?: string;\n    /**\n     * Indicates if the menu item has a nested submenu.\n     */\n    hasSubmenu?: boolean;\n  }>;\n\n  private handleMenuItemSelect(event: Event) {\n    // If the element is disabled, stop propagation\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.menuitemSelected.emit({\n      id: this.el.id,\n      name: this.name,\n      hasSubmenu: this.hasSubmenu,\n    });\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this.handleMenuItemSelect(event);\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      const activeElement = document.activeElement as HTMLNvMenuitemElement;\n      if (\n        activeElement &&\n        activeElement.tagName === 'NV-MENUITEM' &&\n        !activeElement.hasAttribute('has-submenu')\n      ) {\n        event.preventDefault();\n        this.el.click();\n      }\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n\n        <slot></slot>\n\n        {this.label && <span data-scope=\"text\">{this.label}</span>}\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-89ac047e.js → p-c59eccf1.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$3 } from './p-ca38a8a9.js';
-import { d as defineCustomElement$2 } from './p-5073bfd6.js';
+import { d as defineCustomElement$3 } from './p-e0cd7e3a.js';
+import { d as defineCustomElement$2 } from './p-8439219d.js';
 import { d as defineCustomElement$1 } from './p-fda58a76.js';
 import { v as v4 } from './p-f5ff676c.js';
 
@@ -181,4 +181,4 @@ defineCustomElement();
 
 export { NvFieldnumber as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-89ac047e.js.map
+//# sourceMappingURL=p-c59eccf1.js.map

package/dist/components/{p-89ac047e.js.map → p-c59eccf1.js.map}

@@ -1 +1 @@
-{"file":"p-89ac047e.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-field-gap);\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      .stepper {\n        display: flex;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n        > nv-iconbutton {\n          @include form-field-action();\n          border-radius: 0px;\n        }\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.valueAsNumber;\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  // prevents text selection when clicking the buttons multiple times\n  private preventSelection = (event: Event) => {\n    event.preventDefault();\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n\n            <div class=\"stepper\">\n              <nv-iconbutton\n                size=\"md\"\n                name=\"minus\"\n                emphasis=\"lower\"\n                onClick={this.handleMinus}\n                disabled={this.isMinValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"md\"\n                name=\"plus\"\n                emphasis=\"lower\"\n                onClick={this.handlePlus}\n                disabled={this.isMaxValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-c59eccf1.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-field-gap);\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      .stepper {\n        display: flex;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n        > nv-iconbutton {\n          @include form-field-action();\n          border-radius: 0px;\n        }\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.valueAsNumber;\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  // prevents text selection when clicking the buttons multiple times\n  private preventSelection = (event: Event) => {\n    event.preventDefault();\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n\n            <div class=\"stepper\">\n              <nv-iconbutton\n                size=\"md\"\n                name=\"minus\"\n                emphasis=\"lower\"\n                onClick={this.handleMinus}\n                disabled={this.isMinValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"md\"\n                name=\"plus\"\n                emphasis=\"lower\"\n                onClick={this.handlePlus}\n                disabled={this.isMaxValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-99a55bc4.js → p-d4d310dd.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$1 } from './p-ca38a8a9.js';
+import { d as defineCustomElement$1 } from './p-e0cd7e3a.js';
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
 const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
@@ -90,4 +90,4 @@ defineCustomElement();
 
 export { NvFielddropdownitem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-99a55bc4.js.map
+//# sourceMappingURL=p-d4d310dd.js.map

package/dist/components/{p-99a55bc4.js.map → p-d4d310dd.js.map}

@@ -1 +1 @@
-{"file":"p-99a55bc4.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,utCAAutC,CAAC;AACvvC,kCAAe,sBAAsB;;MCkBxB,mBAAmB;IALhC;;;;QAOU,aAAQ,GAAG,KAAK,CAAC;;;;;;QAShB,aAAQ,GAAY,KAAK,CAAC;;;;QAM1B,aAAQ,GAAY,KAAK,CAAC;;;;QAuD3B,mBAAc,GAAG;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;KAqCH;IA9DC,aAAa,CAAC,KAAoB;;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE;YAAE,OAAO;QAErC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;YAEtB,MAAA,MAAA,IAAI,CAAC,EAAE;iBACJ,OAAO,CAAC,kBAAkB,CAAC,0CAC1B,aAAa,CAAc,0BAA0B,CAAC,0CACtD,KAAK,EAAE,CAAC;SACb;KACF;;;;IAmBD,iBAAiB;;QACf,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;SAC3C;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,IAChE,8DAAQ,EAEP,CAAC,IAAI,CAAC,QAAQ,KACb,4DAAK,KAAK,EAAC,cAAc,IACvB,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CACvC,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,gEAAS,IAAI,EAAC,OAAO,iBAAa,MAAM,gBAAY,UAAU,GAAG,CAClE,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/styles/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-fielddropdownitem {\n  @include root-styles();\n\n  &[disabled]:not([disabled='false']) {\n    @include disabled-styles();\n  }\n\n  .text-wrapper {\n    @include text-wrapper-styles();\n  }\n\n  [data-scope='text'] {\n    @include text-styles();\n  }\n\n  nv-icon[data-scope='selected'] {\n    @include selected-icon-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n} from '@stencil/core';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'styles/nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n  private composed = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true })\n  readonly selected: boolean = false;\n\n  /**\n   * Value associated with the item. This is recommended and required for proper\n   * form management.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value?: string;\n\n  /**\n   * Specifies the text label for the dropdown item.\n   *\n   * When no default slot is provided, this label is rendered as the item's\n   * visible text. If the default slot is supplied, the label isn’t directly\n   * displayed but is used as the selected text (on the dropdown trigger). If\n   * no label is explicitly set, the component will automatically derive the\n   * label from the text content of the default slot.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the dropdown item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<{\n    /** The value associated with the item. */\n    label?: string;\n    /** The value associated with the item. */\n    value: string;\n  }>;\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.target !== this.el) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleSelected();\n\n      this.el\n        .closest('nv-fielddropdown')\n        ?.querySelector<HTMLElement>(\"[data-scope='focusable']\")\n        ?.focus();\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleSelected = () => {\n    if (this.disabled) return;\n\n    this.dropdownItemSelected.emit({\n      label: this.label,\n      value: this.value,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.composed = Boolean(this.el.children.length);\n    if (!this.value) {\n      const fallback = this.label ?? this.el.textContent;\n      this.value = fallback.replace(/\\W+/g, ''); // Remove non-word characters\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={'-1'} onClick={this.handleSelected}>\n        <slot />\n\n        {!this.composed && (\n          <div class=\"text-wrapper\">\n            <span data-scope=\"text\">{this.label}</span>\n          </div>\n        )}\n\n        {this.selected && (\n          <nv-icon name=\"check\" aria-hidden=\"true\" data-scope=\"selected\" />\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-d4d310dd.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,utCAAutC,CAAC;AACvvC,kCAAe,sBAAsB;;MCkBxB,mBAAmB;IALhC;;;;QAOU,aAAQ,GAAG,KAAK,CAAC;;;;;;QAShB,aAAQ,GAAY,KAAK,CAAC;;;;QAM1B,aAAQ,GAAY,KAAK,CAAC;;;;QAuD3B,mBAAc,GAAG;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;KAqCH;IA9DC,aAAa,CAAC,KAAoB;;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE;YAAE,OAAO;QAErC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;YAEtB,MAAA,MAAA,IAAI,CAAC,EAAE;iBACJ,OAAO,CAAC,kBAAkB,CAAC,0CAC1B,aAAa,CAAc,0BAA0B,CAAC,0CACtD,KAAK,EAAE,CAAC;SACb;KACF;;;;IAmBD,iBAAiB;;QACf,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;SAC3C;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,IAChE,8DAAQ,EAEP,CAAC,IAAI,CAAC,QAAQ,KACb,4DAAK,KAAK,EAAC,cAAc,IACvB,2EAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CACvC,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,gEAAS,IAAI,EAAC,OAAO,iBAAa,MAAM,gBAAY,UAAU,GAAG,CAClE,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/styles/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-fielddropdownitem {\n  @include root-styles();\n\n  &[disabled]:not([disabled='false']) {\n    @include disabled-styles();\n  }\n\n  .text-wrapper {\n    @include text-wrapper-styles();\n  }\n\n  [data-scope='text'] {\n    @include text-styles();\n  }\n\n  nv-icon[data-scope='selected'] {\n    @include selected-icon-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n} from '@stencil/core';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'styles/nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n  private composed = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true })\n  readonly selected: boolean = false;\n\n  /**\n   * Value associated with the item. This is recommended and required for proper\n   * form management.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value?: string;\n\n  /**\n   * Specifies the text label for the dropdown item.\n   *\n   * When no default slot is provided, this label is rendered as the item's\n   * visible text. If the default slot is supplied, the label isn’t directly\n   * displayed but is used as the selected text (on the dropdown trigger). If\n   * no label is explicitly set, the component will automatically derive the\n   * label from the text content of the default slot.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the dropdown item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<{\n    /** The value associated with the item. */\n    label?: string;\n    /** The value associated with the item. */\n    value: string;\n  }>;\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.target !== this.el) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleSelected();\n\n      this.el\n        .closest('nv-fielddropdown')\n        ?.querySelector<HTMLElement>(\"[data-scope='focusable']\")\n        ?.focus();\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleSelected = () => {\n    if (this.disabled) return;\n\n    this.dropdownItemSelected.emit({\n      label: this.label,\n      value: this.value,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.composed = Boolean(this.el.children.length);\n    if (!this.value) {\n      const fallback = this.label ?? this.el.textContent;\n      this.value = fallback.replace(/\\W+/g, ''); // Remove non-word characters\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={'-1'} onClick={this.handleSelected}>\n        <slot />\n\n        {!this.composed && (\n          <div class=\"text-wrapper\">\n            <span data-scope=\"text\">{this.label}</span>\n          </div>\n        )}\n\n        {this.selected && (\n          <nv-icon name=\"check\" aria-hidden=\"true\" data-scope=\"selected\" />\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}