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

package/dist/components/p-c7401a7d.js

@@ -0,0 +1,90 @@
+import { i as index } from './p-a271e3be.js';
+import { a as animate, g as easeOut } from './p-42ea6b74.js';
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = index(node);
+    /**
+     * Will animate the translateX property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateX property.
+     * @param {number} options.to - The ending value for the translateX property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideX = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            animate({
+                from: { x: options.from },
+                to: { x: options.to },
+                ease: easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Will animate the translateY property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateY property.
+     * @param {number} options.to - The ending value for the translateY property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideY = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            animate({
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Applies the slideX styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideX styles.
+     */
+    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
+    /**
+     * Applies the slideY styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideY styles.
+     */
+    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideReset() {
+        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
+    }
+    return {
+        slideX,
+        slideY,
+        setSlideX,
+        setSlideY,
+        setSlideReset,
+    };
+};
+
+export { useSlide as u };
+
+//# sourceMappingURL=p-c7401a7d.js.map

package/dist/components/p-c7401a7d.js.map

@@ -0,0 +1 @@
+{"file":"p-c7401a7d.js","mappings":";;;MAQM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,KAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAE9C,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;IAWhC,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B;QACE,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,OAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ,CAAC;;;;;;;;;;IAWJ,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B;QACE,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,OAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ,CAAC;;;;;;;;IASJ,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;;;;;;;;IAS1D,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;;;;;IAM1D,SAAS,aAAa;QACpB,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;KACtE;IAED,OAAO;QACL,MAAM;QACN,MAAM;QACN,SAAS;QACT,SAAS;QACT,aAAa;KACd,CAAC;AACJ;;;;","names":["styler"],"sources":["src/animations/slide.animation.ts"],"sourcesContent":["import { animate, easeOut } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type SlideOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useSlide = (\n  node: HTMLElement,\n  { duration }: SlideOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the translateX property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateX property.\n   * @param {number} options.to - The ending value for the translateX property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideX =\n    (\n      options: {\n        /** The starting percentage for the translateX property. */\n        from: number;\n        /** The ending percentage for the translateX property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { x: options.from },\n          to: { x: options.to },\n          ease: easeOut,\n          duration,\n          onUpdate(latest) {\n            nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n          },\n          onComplete() {\n            resolve();\n          },\n        });\n      });\n    };\n\n  /**\n   * Will animate the translateY property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateY property.\n   * @param {number} options.to - The ending value for the translateY property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideY =\n    (\n      options: {\n        /** The starting percentage for the translateY property. */\n        from: number;\n        /** The ending percentage for the translateY property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { y: options.from },\n          to: { y: options.to },\n          ease: easeOut,\n          duration,\n          onUpdate(latest) {\n            nodeStyler.set({ transform: `translateY(${latest.y}%)` });\n          },\n          onComplete() {\n            resolve();\n          },\n        });\n      });\n    };\n\n  /**\n   * Applies the slideX styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideX styles.\n   */\n  const setSlideX = (amount = 100) =>\n    nodeStyler.set({ transform: `translateX(${amount}%)` });\n\n  /**\n   * Applies the slideY styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideY styles.\n   */\n  const setSlideY = (amount = 100) =>\n    nodeStyler.set({ transform: `translateY(${amount}%)` });\n\n  /**\n   * Applies the slideIn styles without animating, useful when initial state\n   * is slid in.\n   */\n  function setSlideReset() {\n    nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });\n  }\n\n  return {\n    slideX,\n    slideY,\n    setSlideX,\n    setSlideY,\n    setSlideReset,\n  };\n};\n\nexport { useSlide };\n"],"version":3}

package/dist/components/{p-d4d310dd.js → p-e5c62ea8.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-e0cd7e3a.js';
+import { d as defineCustomElement$1 } from './p-5d14ba3f.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-d4d310dd.js.map
+//# sourceMappingURL=p-e5c62ea8.js.map

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

@@ -1 +1 @@
-{"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}
+{"file":"p-e5c62ea8.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}

package/dist/components/{p-60244646.js → p-ee8944f3.js}

@@ -1,6 +1,6 @@
 import { e as getRenderingRef, f as forceUpdate, p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { u as useFade } from './p-ee0df37f.js';
-import { u as useGrow } from './p-fb560fa3.js';
+import { u as useFade } from './p-a271e3be.js';
+import { u as useGrow } from './p-4697bd56.js';
 import './p-42ea6b74.js';
 import { a as addEventListeners, r as removeEventListeners } from './p-d429a343.js';
 
@@ -2381,7 +2381,7 @@ const NvPopover = /*@__PURE__*/ proxyCustomElement(class NvPopover extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
+        return (h(Host, { key: '1af6f61d4b3d87e30d2311708fcd61979170aa96' }, h("slot", { key: '113813292e083fa4b188f3e5750549a08fc8c3aa', name: "trigger" }), h("div", { key: '7687d6ae12b24ed575843f0d171d911eb0994675', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '162f1f50be23da7fadac8f76507e6d8d058fb58b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '57ecf69ef395a045cb35e7db9f380027dfceff6e', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2426,4 +2426,4 @@ defineCustomElement();
 
 export { NvPopover as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-60244646.js.map
+//# sourceMappingURL=p-ee8944f3.js.map