@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.41

package/dist/collection/components/nv-button/nv-button.js

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { ButtonSize } from "../../utils/constants";
+import { ButtonSize, ButtonType } from "../../utils/constants";
 /**
  * @slot default - Content of the button.
  * @slot leading-icon - Icon before the label.
@@ -48,29 +48,51 @@ export class NvButton {
         /**
          * Sets the button type to control its function in forms. Use 'submit' to send
          * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
+         * that doesn't interact with form submission by default.
          */
         this.type = 'button';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
         /**
-         * Handles form-related actions when the button is clicked.
-         * - Submits the form if the button type is 'submit'.
-         * - Resets the form if the button type is 'reset'.
+         * Handles button click events, managing form actions and disabled states.
+         * Prevents default behavior when button is disabled or loading, and
+         * processes form submissions/resets when appropriate.
          * @param {Event} event - The click event.
          */
-        this.handleClick = (event) => {
-            var _a, _b, _c, _d;
+        this.handleButtonClick = (event) => {
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
-            if (this.type === 'submit') {
-                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            if (this.form && this.type !== ButtonType.Button) {
+                this.processFormAction();
             }
-            if (this.type === 'reset') {
-                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+            else if (this.form) {
+                console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
+            }
+        };
+        /**
+         * Processes form-related actions by finding the associated form element
+         * and triggering the appropriate action (submit/reset) based on button type.
+         * Falls back to ElementInternals form if no explicit form ID is provided.
+         */
+        this.processFormAction = () => {
+            var _a, _b;
+            const formElement = this.form
+                ? document.getElementById(this.form)
+                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+            if (!formElement) {
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                return;
+            }
+            switch (this.type) {
+                case ButtonType.Submit:
+                    formElement.requestSubmit();
+                    break;
+                case ButtonType.Reset:
+                    formElement.reset();
+                    break;
             }
         };
     }
@@ -116,7 +138,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '76ec47961a6e4443b3d6027345f94ada45d6c13f', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (h("nv-loader", { key: '4d9f1ff4ccaf3060e65b68101a2e5672c79ad2b5', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '7a4e08881daf71fb3fb8aaa65625b767252ffb72', name: "leading-icon" }), h("slot", { key: 'a8d577da8439889ba517fc305ac75a50d3c121f0' }), h("slot", { key: '0278d86b2479950e480cc8bbd0f67438591d606f', name: "trailing-icon" })));
+        return (h(Host, { key: 'bd4fa51791ea88aeffba33f5be108807d0d31dc3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: '4a48de90f85da844af2114737751619181ddbddd', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'c48a34e20a792ff7d139488a0dc5e373f7e67c23', name: "leading-icon" }), h("slot", { key: '5d151e40abf25f0089d4980e85eabfff944d3b99' }), h("slot", { key: 'e0029a972441daa1abfee3a3bca5c62abf284586', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }
@@ -302,13 +324,32 @@ export class NvButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn\u2019t interact with form submission by default."
+                    "text": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn't interact with form submission by default."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'button'"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the form associated with the button in case the (submit) button is not a child of a form.\nMatches the native HTML button 'form' attribute behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "form",
+                "reflect": true
             }
         };
     }

package/dist/collection/components/nv-button/nv-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAkB,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAUE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAS1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,sBAAiB,GAAG,CAAC,KAAY,EAAQ,EAAE;YACjD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;gBACjD,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACrB,OAAO,CAAC,IAAI,CACV,8FAA8F,EAC9F,SAAS,EACT,IAAI,CAAC,EAAE,CACR,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEF;;;;WAIG;QACK,sBAAiB,GAAG,GAAS,EAAE;;YACrC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI;gBAC3B,CAAC,CAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAqB;gBACzD,CAAC,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC;YAEzB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,OAAO,CAAC,IAAI,CACV,wBAAwB,EACxB,YAAY,IAAI,CAAC,IAAI,IAAI,cAAc,EAAE,EACzC,iBAAiB,EACjB,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CACrB,CAAC;gBACF,OAAO;YACT,CAAC;YAED,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,KAAK,UAAU,CAAC,MAAM;oBACpB,WAAW,CAAC,aAAa,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,KAAK;oBACnB,WAAW,CAAC,KAAK,EAAE,CAAC;oBACpB,MAAM;YACV,CAAC;QACH,CAAC,CAAC;KAuEH;IArEC,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAGhB,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAGD,gBAAgB,CAAC,KAAiB;QAChC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YAC7D,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GACvC,CACd;YAED,6DAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,8DAAa;YACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.form && this.type !== ButtonType.Button) {\n      this.processFormAction();\n    } else if (this.form) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-calendar/nv-calendar.js

@@ -931,7 +931,7 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: 'fd0e3e0d88dd281cdfcc6557d822f137fe8da38e' }, h("div", { key: '04f15a9e7404b5c39dfdaa0f143b0c659a1a9cb3', class: "datepicker-root" }, h("div", { key: 'c42882624dfdb116faae2af1b3b6a1aa05192d18', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'd0b1d476b3362e9f9073f02586a77e21b4370f32', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: 'f61fb6827fcaee0920998e75f6bfb767d3cb4fc6', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '436d448bf9e5ec0aa153b3452ef9435d36957ce6' })));
+        return (h(Host, { key: '0d9b8c85ed51f8a82b8d2159b064e480cec49df6' }, h("div", { key: '558f698edfe33c50af19ac7466279185bbf5b87a', class: "datepicker-root" }, h("div", { key: '9cc0b7ad17f438afb292c729af826a00501a44c5', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '14d17b4e73525537060dea627ebfe6c3e84387ab', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '7fe8a36601d434da834bc934bafa11c3fdbd40f8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'bebf0f034ee70b5abfd99b692a60ca3b4cbe09a0' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-col/nv-col.js

@@ -22,7 +22,7 @@ export class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f9a8dd28d7675648ecb3b9cf4d1e196040f4237f', class: clsx(this.getColSize()) }, h("slot", { key: '94c16b6e2df73cb21263423d378ab5fe285a7859' })));
+        return (h(Host, { key: '416e432e3f8947b2b2040e8226da1acf03a6f965', class: clsx(this.getColSize()) }, h("slot", { key: 'e860ae915f148333f471a48705677512853c6970' })));
     }
     static get is() { return "nv-col"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-datagrid/nv-datagrid.css

@@ -1,5 +1,35 @@
+nv-datagrid {
+  display: block;
+}
+nv-datagrid .hidden {
+  display: none;
+}
 nv-datagrid table {
   border-collapse: collapse;
   border-color: inherit;
   text-indent: 0;
+  width: 100%;
+}
+nv-datagrid th {
+  text-align: left;
+  border-bottom: 1px solid var(--components-datagrid-border-header);
+  height: var(--spacing-12);
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: var(--font-size-md);
+  font-weight: 700;
+  color: var(--components-datagrid-content-header);
+}
+nv-datagrid td {
+  border-bottom: 1px solid var(--components-datagrid-border-body);
+  height: var(--spacing-12);
+  max-height: var(--spacing-14);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-md);
+  font-weight: 400;
+  color: var(--components-datagrid-content-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+nv-datagrid tbody > tr:hover {
+  background: var(--color-interaction-container-neutral-background-hover);
 }

package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js

@@ -1,39 +1,24 @@
 import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvDatagridDocs = {
     component: 'nv-datagrid',
     badge: 'beta',
-    subcomponents: [
-        'nv-datagridhead',
-        'nv-datagridbody',
-        'nv-datagridrow',
-        'nv-datagridcolumn',
-        'nv-datagriddatacell',
-        'nv-icon',
-        'nv-iconbutton',
-    ],
-    composedComponents: [
-        'nv-datagridhead',
-        'nv-datagridbody',
-        'nv-datagridrow',
-        'nv-datagridcolumn',
-        'nv-datagriddatacell',
-        'nv-icon',
-        'nv-iconbutton',
-    ],
+    subcomponents: ['nv-datagridcolumn', 'nv-iconbutton', 'nv-badge'],
+    composedComponents: ['nv-datagridcolumn'],
     stories: [
         {
             name: 'Default',
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'No Columns No Data Message',
+            name: nameof(x => x.noColumnsNoDataMessage),
             args: {
                 noColumnsNoDataMessage: 'Nothing to display.',
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'No Data Message',
+            name: nameof(x => x.noDataMessage),
             args: {
                 noDataMessage: 'No element available to display.',
                 columnsJson: `[
@@ -45,7 +30,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns Array And Empty Data',
+            name: nameof(x => x.columns),
             args: {
                 columns: [
                     { header: 'Name', accessor: 'name' },
@@ -56,7 +41,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns JSON And Empty Data',
+            name: nameof(x => x.columnsJson),
             args: {
                 columnsJson: `[
           {"header":"Name","accessor":"name"},
@@ -67,13 +52,8 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Data Array And Empty Columns',
+            name: nameof(x => x.data),
             args: {
-                columns: [
-                    { header: 'Product', accessor: 'product' },
-                    { header: 'Price', accessor: 'price' },
-                    { header: 'Quantity', accessor: 'quantity' },
-                ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
                     { name: 'Bob', age: '30', email: 'bob@mail.com' },
@@ -82,7 +62,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Data JSON And Empty Columns',
+            name: nameof(x => x.dataJson),
             args: {
                 dataJson: `[
           { "name": "Alice", "age": "25", "email": "alice@mail.com" },
@@ -92,7 +72,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns Array And Data Array',
+            name: 'ColumnsArrayAndDataArray',
             args: {
                 columns: [
                     { header: 'Name', accessor: 'name' },
@@ -107,7 +87,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns JSON And Data JSON',
+            name: 'ColumnsJSONAndDataJSON',
             args: {
                 columnsJson: `[
           {"header":"Name","accessor":"name"},
@@ -122,61 +102,29 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'Columns Decomposed And Empty Data',
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
-        },
-        {
-            name: 'Columns Decomposed And Data Array',
-            args: {
-                data: [
-                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
-                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
-        },
-        {
-            name: 'Columns Decomposed And Data JSON',
+            name: 'WithDataAndTemplate',
             args: {
                 dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com"},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com"}
         ]`,
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
-        },
-        {
-            name: 'Data Decomposed And Empty Columns',
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
-        },
-        {
-            name: 'Data Decomposed And Columns Array',
-            args: {
-                columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
         {
-            name: 'Data Decomposed And Columns JSON',
+            name: 'WithDataAndTemplateComplexData',
             args: {
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
+                dataJson: `[
+        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com", "address": {"city": "New York", "country": "USA"}, "status": {"label": "success", "color": "1", "icon": "check"}},
+        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com", "address": {"city": "Los Angeles", "country": "USA"}, "status": {"label": "warning", "color": "2", "icon": "alert-circle"}},
+        {"id":3,"name":"John Smith","age":35,"email":"john.smith@mail.com", "address": {"city": "London", "country": "UK"}, "status": {"label": "error", "color": "3", "icon": "loader"}},
+        {"id":4,"name":"Jane Smith","age":40,"email":"jane.smith@mail.com", "address": {"city": "Paris", "country": "France"}, "status": {"label": "info", "color": "5", "icon": "info-circle"}}
         ]`,
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
-        },
-        {
-            name: 'Columns Decomposed And Data Decomposed',
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))), h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, h("nv-icon", { name: "mail" }), h("a", { href: "mailto:alice@mail.com", class: "text-amber-500" }, "alice@mail.com"))), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, h("nv-iconbutton", { name: "mail" }, "bob@mail.com")))))),
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { class: "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
         {
-            name: 'Slot Before',
+            name: 'SlotBefore',
             args: {
                 columnsJson: `[
           {"header":"Name","accessor":"name"},
@@ -191,7 +139,7 @@ const NvDatagridDocs = {
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
         },
         {
-            name: 'Slot After',
+            name: 'SlotAfter',
             args: {
                 columnsJson: `[
           {"header":"Name","accessor":"name"},
@@ -206,7 +154,7 @@ const NvDatagridDocs = {
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
         },
         {
-            name: 'Slot Before And After',
+            name: 'SlotBeforeAndAfter',
             args: {
                 columnsJson: `[
           {"header":"Name","accessor":"name"},

package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-datagrid.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridDocs: NovaDocs<Components.NvDatagrid> = {\n  component: 'nv-datagrid',\n  badge: 'beta',\n  subcomponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  composedComponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        columns: [\n          { header: 'Product', accessor: 'product' },\n          { header: 'Price', accessor: 'price' },\n          { header: 'Quantity', accessor: 'quantity' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-iconbutton name=\"mail\">bob@mail.com</nv-iconbutton>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n  ],\n};\n\nexport default NvDatagridDocs;\n"]}
+{"version":3,"file":"nv-datagrid.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvDatagridDocs: NovaDocs<Components.NvDatagrid> = {\n  component: 'nv-datagrid',\n  badge: 'beta',\n  subcomponents: ['nv-datagridcolumn', 'nv-iconbutton', 'nv-badge'],\n  composedComponents: ['nv-datagridcolumn'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.noColumnsNoDataMessage),\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.noDataMessage),\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.columns),\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.columnsJson),\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.data),\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: nameof<Components.NvDatagrid>(x => x.dataJson),\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'ColumnsArrayAndDataArray',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'ColumnsJSONAndDataJSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'WithDataAndTemplate',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\"},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\"}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridcolumn accessor=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-datagridcolumn>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'WithDataAndTemplateComplexData',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\", \"address\": {\"city\": \"New York\", \"country\": \"USA\"}, \"status\": {\"label\": \"success\", \"color\": \"1\", \"icon\": \"check\"}},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\", \"address\": {\"city\": \"Los Angeles\", \"country\": \"USA\"}, \"status\": {\"label\": \"warning\", \"color\": \"2\", \"icon\": \"alert-circle\"}},\n        {\"id\":3,\"name\":\"John Smith\",\"age\":35,\"email\":\"john.smith@mail.com\", \"address\": {\"city\": \"London\", \"country\": \"UK\"}, \"status\": {\"label\": \"error\", \"color\": \"3\", \"icon\": \"loader\"}},\n        {\"id\":4,\"name\":\"Jane Smith\",\"age\":40,\"email\":\"jane.smith@mail.com\", \"address\": {\"city\": \"Paris\", \"country\": \"France\"}, \"status\": {\"label\": \"info\", \"color\": \"5\", \"icon\": \"info-circle\"}}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridcolumn accessor=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"address\" header=\"Address\">\n            <div slot=\"cell\">\n              <span>__address.city__, __address.country__</span>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"status\" header=\"Status\">\n            <div slot=\"header\">\n              <span class=\"text-md font-bold text-low\">Status</span>\n            </div>\n            <div slot=\"cell\">\n              <nv-badge color=\"__status.color__\" lead-icon=\"__status.icon__\">\n                __status.label__\n              </nv-badge>\n            </div>\n          </nv-datagridcolumn>\n\n          <nv-datagridcolumn accessor=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-datagridcolumn>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'SlotBefore',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'SlotAfter',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'SlotBeforeAndAfter',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n  ],\n};\n\nexport default NvDatagridDocs;\n"]}