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

package/dist/esm/nv-datagrid.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { d as deepCopyElement, e as excludedProps } from './dom.utils-ac71e0ef.js';
-import { g as SortingPossibility } from './constants-a857c476.js';
+import { g as SortingPossibility } from './constants-d0f19e7b.js';
 
 /**
    * table-core

package/dist/esm/nv-dialog.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { a as addEventListeners, r as removeEventListeners } from './events.utils-fe1d907f.js';
 import { c as clsx } from './clsx-297c1ffe.js';
-import { b as ButtonType } from './constants-a857c476.js';
+import { b as ButtonType } from './constants-d0f19e7b.js';
 import { v as v4 } from './v4-a79185f4.js';
 
 /*!

package/dist/esm/nv-dialogfooter_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a1936cd0.js';
-import { b as ButtonType } from './constants-a857c476.js';
+import { b as ButtonType } from './constants-d0f19e7b.js';
 
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
 const NvDialogfooterStyle0 = nvDialogfooterCss;
@@ -48,10 +48,6 @@ const NvDialogfooter = class {
          * Sets the label for the primary button.
          */
         this.primaryLabel = 'Primary';
-        /**
-         * Sets the type of the primary button.
-         */
-        this.primaryButtonType = ButtonType.Button;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -82,11 +78,18 @@ const NvDialogfooter = class {
                 !node.hasAttribute('slot'));
         });
     }
+    componentDidLoad() {
+        // Set the default button type based on the form property
+        this.primaryButtonType =
+            this.primaryButtonType || this.form
+                ? ButtonType.Submit
+                : ButtonType.Button;
+    }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '313836d5d0bc1704325aa200f0ed115bf3e63e7d' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
+        return (h(Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-dialogfooter_2.entry.js.map

@@ -1 +1 @@
-{"file":"nv-dialogfooter.nv-dialogheader.entry.js","mappings":"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","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx","src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.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.\n   */\n  @Prop({ reflect: true })\n  readonly primaryButtonType: `${ButtonType}` = ButtonType.Button;\n\n  /**\n   * Sets the form for the dialog footer.\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 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  //#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","nv-dialogheader {\n  // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n  padding: var(--dialog-header-padding-top)\n    var(--dialog-header-padding-x)\n    var(--dialog-header-padding-bottom)\n    var(--dialog-header-padding-x);\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: 500;\n    padding-right: var(--spacing-7);\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n\n    /* text/sm/regular */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\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  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-dialogfooter.nv-dialogheader.entry.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;;;;;;AClMH,MAAM,iBAAiB,GAAG,usBAAusB,CAAC;AACluB,6BAAe,iBAAiB;;MCSnB,cAAc;IAL3B;;QAOU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,YAAO,GAAW,cAAc,CAAC;KA0C3C;;;;IA9BC,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;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CACtC,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","src/components/nv-dialogheader/nv-dialogheader.scss?tag=nv-dialogheader","src/components/nv-dialogheader/nv-dialogheader.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","nv-dialogheader {\n  // calc(var(--dialog-header-padding-x, 24px) + var(--dialog-dismissible-position-right, 12px) + var(--button-sm-icon-size, 16px) + var(--button-sm-icon-button-padding, 8px))\n  padding: var(--dialog-header-padding-top)\n    var(--dialog-header-padding-x)\n    var(--dialog-header-padding-bottom)\n    var(--dialog-header-padding-x);\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: 500;\n    padding-right: var(--spacing-7);\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n\n    /* text/sm/regular */\n    font-family: 'TT Norms Pro', sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}\n","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\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  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-fieldmultiselect.entry.js

@@ -124,7 +124,6 @@ const NvFieldmultiselect = class {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -142,7 +141,6 @@ const NvFieldmultiselect = class {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -351,7 +349,6 @@ const NvFieldmultiselect = class {
             try {
                 // Get visible and enabled option values from DOM
                 const visibleOptionValues = this.getVisibleEnabledOptionItems();
-                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible options - merge with existing selections
                     this.value = [...new Set([...this.value, ...visibleOptionValues])];
@@ -360,7 +357,6 @@ const NvFieldmultiselect = class {
                     // Deselect only the visible options, keep others that might be filtered out
                     this.value = this.value.filter(val => !visibleOptionValues.includes(val));
                 }
-                console.info('[SelectAll][Options] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Synchronize child components
@@ -386,7 +382,6 @@ const NvFieldmultiselect = class {
             try {
                 // Get visible and enabled items
                 const items = this.getVisibleEnabledSlotItems();
-                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible items
                     const allActiveValues = items
@@ -401,7 +396,6 @@ const NvFieldmultiselect = class {
                         .filter(value => value !== '');
                     this.value = this.value.filter(val => !visibleValues.includes(val));
                 }
-                console.info('[SelectAll][Slots] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Force synchronization with a small delay to ensure DOM is updated
@@ -424,15 +418,12 @@ const NvFieldmultiselect = class {
         this.handleSelectAllCheckboxOptionsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateOptions();
-            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllOptions(shouldSelectAll);
         };
         /**
@@ -442,15 +433,12 @@ const NvFieldmultiselect = class {
         this.handleSelectAllCheckboxSlotsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateSlots();
-            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllSlots(shouldSelectAll);
         };
         //#endregion METHODS
@@ -493,8 +481,6 @@ const NvFieldmultiselect = class {
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
-        console.info('[Watch:options] newValue:', newValue);
-        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
         // If the parent has set a value prop, use it. Otherwise, derive from checked options.
@@ -503,22 +489,18 @@ const NvFieldmultiselect = class {
             this.value = newValue
                 .filter(option => option.checked)
                 .map(option => option.value);
-            console.info('[Watch:options] updated value from checked options:', this.value);
         }
         else {
             // If value is set, ensure checked states in options match value
             newValue.forEach(option => {
                 option.checked = this.value.includes(option.value);
             });
-            console.info('[Watch:options] options checked state synced to value:', newValue);
         }
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
         // Skip processing during bulk operations
         if (this.isBulkOperation) {
-            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
             return;
         }
         // Synchronize child components when value changes programmatically
@@ -567,11 +549,9 @@ const NvFieldmultiselect = class {
     handleItemChecked(event) {
         if (this.disabled || this.readonly || this.isBulkOperation) {
             // Skip processing itemChecked events during bulk operations
-            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
-        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -584,7 +564,6 @@ const NvFieldmultiselect = class {
                 newValue.splice(valueIndex, 1);
                 hasChanged = true;
             }
-            console.info('[Event:itemChecked] newValue after update:', newValue);
             if (hasChanged) {
                 this.value = newValue;
                 this.valueChanged.emit(this.value);
@@ -618,7 +597,6 @@ const NvFieldmultiselect = class {
      * Subscribe to click outside event.
      */
     connectedCallback() {
-        console.info('[Lifecycle] connectedCallback - value:', this.value);
         // Bind once and reuse the same reference for add/remove to avoid leaks
         if (!this._boundHandleClickOutside) {
             this._boundHandleClickOutside = this.handleClickOutside.bind(this);
@@ -630,7 +608,6 @@ const NvFieldmultiselect = class {
      */
     componentWillLoad() {
         var _a;
-        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -664,7 +641,6 @@ const NvFieldmultiselect = class {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
@@ -680,7 +656,6 @@ const NvFieldmultiselect = class {
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
-        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         if (this._boundHandleClickOutside) {
             document.removeEventListener('click', this._boundHandleClickOutside);
         }
@@ -725,7 +700,6 @@ const NvFieldmultiselect = class {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        console.info('getSelectedValues:', this.value);
         return this.value;
     }
     /**
@@ -1206,12 +1180,10 @@ const NvFieldmultiselect = class {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        console.info('[syncChildComponents] value:', this.value);
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
-            console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
             // Only update if the checked state differs to avoid triggering unnecessary events
             if (item.checked !== shouldBeChecked) {
                 // Set attribute and property, but avoid triggering itemChecked during bulk
@@ -1230,7 +1202,6 @@ const NvFieldmultiselect = class {
                     item.checked = shouldBeChecked;
                 }
             }
-            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });
     }
     /**
@@ -1328,7 +1299,6 @@ const NvFieldmultiselect = class {
             .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
         // Combine with current this.value (set by code), ensuring uniqueness
         this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
-        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
     }
     /**
      * Renders description and error description sections