@nova-design-system/nova-webcomponents 3.0.0-beta.25 → 3.0.0-beta.28

package/dist/components/nv-tooltip.js.map

@@ -1 +1 @@
-{"file":"nv-tooltip.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,gvBAAgvB,CAAC;AACtwB,wBAAe,YAAY;;MCWdA,WAAS;;;;;yBAqBY,QAAQ;0BAQV,CAAC;;;;;IAM/B,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;YAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;SAC5C,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTooltip"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow: 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  [data-scope=\"popover\"] {\n    @include tooltip-styles();\n  }\n\n  [data-scope=\"arrow\"] {\n    @include arrow-styles();\n  }\n}\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n  private triggerElement!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === null;\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nv-tooltip.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,gvBAAgvB,CAAC;AACtwB,wBAAe,YAAY;;MCWdA,WAAS;;;;;yBAqBY,QAAQ;0BAQV,CAAC;;;;;IAM/B,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;YAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;SAC5C,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTooltip"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow: 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  [data-scope=\"popover\"] {\n    @include tooltip-styles();\n  }\n\n  [data-scope=\"arrow\"] {\n    @include arrow-styles();\n  }\n}\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n  private triggerElement!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === null;\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-76eb28db.js → p-45405075.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.js';
-import { d as defineCustomElement$1 } from './p-9be1ebd4.js';
+import { d as defineCustomElement$1 } from './p-689a7b38.js';
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;max-width:300px;width:100%;padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem.selected{background-color:var(--components-menu-contextual-item-background-selected);color:var(--components-menu-contextual-item-content-selected)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{padding-left:10px;color:var(--components-menu-contextual-item-icon-selected);align-self:center}:root{--components-menu-contextual-item-background-selected:#f5f6f7;--components-menu-contextual-item-content-selected:#171f22;--components-menu-contextual-item-icon-selected:#007f00;--components-menu-contextual-item-background-hover:#f5f6f7;--components-menu-contextual-item-content-hover:#171f22}";
 const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
@@ -49,7 +49,7 @@ const NvFielddropdownitem = /*@__PURE__*/ proxyCustomElement(class NvFielddropdo
     //#region RENDER
     render() {
         const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
-        return (h(Host, { key: '7883f469059e808bca1d6fa7f4a0bbef75681d81', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (h("slot", null)) : (h("div", { class: "flex gap-2" }, h("span", { "data-scope": "text" }, this.label), this.selected && (h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
+        return (h(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (h("slot", null)) : (h("div", { class: "flex gap-2" }, h("span", { "data-scope": "text" }, this.label), this.selected && (h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
     }
     get el() { return this; }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -81,4 +81,4 @@ defineCustomElement();
 
 export { NvFielddropdownitem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-76eb28db.js.map
+//# sourceMappingURL=p-45405075.js.map

package/dist/components/{p-76eb28db.js.map → p-45405075.js.map}

@@ -1 +1 @@
-{"file":"p-76eb28db.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,0hDAA0hD,CAAC;AAC1jD,kCAAe,sBAAsB;;MCmBxB,mBAAmB;;;;;QAwCtB,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,EAAE;oBACd,SAAS;wBACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;6BAC3B,GAAG,CAAC,IAAI,cAAI,OAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;6BACrC,MAAM,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;6BACvC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACtB;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAE/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;aACJ;SACF,CAAC;wBAlD2B,KAAK;wBAMd,KAAK;;;;;;;;;;;;IAuDjB,yBAAyB,CAAC,KAAgC;QAChE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErE,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEjC,iBAAiB,IAChB,eAAa,KAEb,WAAK,KAAK,EAAC,YAAY,IACrB,0BAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,QAAQ,KACZ,eACE,IAAI,EAAC,OAAO,iBACA,MAAM,EAClB,KAAK,EAAC,gBAAgB,GACb,CACZ,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdownitem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  max-width: 300px;\n  width: 100%;\n  padding: var(--menu-contextual-item-padding-y)\n    var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  transition: background-color 150ms ease-out, color 150ms ease-out;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  &:focus-within {\n    background-color: var(--components-menu-contextual-item-background-hover);\n    color: var(--components-menu-contextual-item-content-hover);\n  }\n\n  &.selected {\n    background-color: var(\n      --components-menu-contextual-item-background-selected\n    );\n    color: var(--components-menu-contextual-item-content-selected);\n  }\n\n  &[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n    background-color: unset;\n    color: var(--components-menu-contextual-item-content-disabled);\n  }\n\n  [data-scope='text'] {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .selection-icon {\n    padding-left: 10px;\n    color: var(--components-menu-contextual-item-icon-selected);\n    align-self: center;\n  }\n}\n\n:root {\n  --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n  --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n  --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n  --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n  --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Value associated with the item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * Label used as the value for the default layout.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      let itemValue = this.value || '';\n      if (!itemValue) {\n        itemValue =\n          Array.from(this.el.childNodes)\n            .map(node => node.textContent?.trim())\n            .filter(text => text && text.length > 0)\n            .join(' ') || '';\n      }\n\n      this.selected = !this.selected; // Toggle the selected state\n\n      this.itemSelected.emit({\n        label: this.label,\n        value: itemValue,\n        selected: this.selected,\n        disabled: this.disabled,\n      });\n    }\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Utility function to check if a string is null, empty, or contains only whitespace.\n   * @param {string | null | undefined} input - The string to check.\n   * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n   */\n  private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n    return !input || input.trim().length === 0;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n    return (\n      <Host\n        role=\"menuitem\"\n        tabindex={this.disabled ? '-1' : '0'}\n        onClick={this.handleClick}\n        class={{ selected: this.selected }}\n      >\n        {showDefaultLayout ? (\n          <slot></slot>\n        ) : (\n          <div class=\"flex gap-2\">\n            <span data-scope=\"text\">{this.label}</span>\n            {this.selected && (\n              <nv-icon\n                name=\"check\"\n                aria-hidden=\"true\"\n                class=\"selection-icon\"\n              ></nv-icon>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-45405075.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,0hDAA0hD,CAAC;AAC1jD,kCAAe,sBAAsB;;MCmBxB,mBAAmB;;;;;QAwCtB,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,EAAE;oBACd,SAAS;wBACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;6BAC3B,GAAG,CAAC,IAAI,cAAI,OAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;6BACrC,MAAM,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;6BACvC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACtB;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAE/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;aACJ;SACF,CAAC;wBAlD2B,KAAK;wBAMd,KAAK;;;;;;;;;;;;IAuDjB,yBAAyB,CAAC,KAAgC;QAChE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErE,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEjC,iBAAiB,IAChB,eAAa,KAEb,WAAK,KAAK,EAAC,YAAY,IACrB,0BAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,QAAQ,KACZ,eACE,IAAI,EAAC,OAAO,iBACA,MAAM,EAClB,KAAK,EAAC,gBAAgB,GACb,CACZ,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdownitem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  max-width: 300px;\n  width: 100%;\n  padding: var(--menu-contextual-item-padding-y)\n    var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  transition: background-color 150ms ease-out, color 150ms ease-out;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  &:focus-within {\n    background-color: var(--components-menu-contextual-item-background-hover);\n    color: var(--components-menu-contextual-item-content-hover);\n  }\n\n  &.selected {\n    background-color: var(\n      --components-menu-contextual-item-background-selected\n    );\n    color: var(--components-menu-contextual-item-content-selected);\n  }\n\n  &[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n    background-color: unset;\n    color: var(--components-menu-contextual-item-content-disabled);\n  }\n\n  [data-scope='text'] {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .selection-icon {\n    padding-left: 10px;\n    color: var(--components-menu-contextual-item-icon-selected);\n    align-self: center;\n  }\n}\n\n:root {\n  --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n  --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n  --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n  --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n  --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Value associated with the item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * Label used as the value for the default layout.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      let itemValue = this.value || '';\n      if (!itemValue) {\n        itemValue =\n          Array.from(this.el.childNodes)\n            .map(node => node.textContent?.trim())\n            .filter(text => text && text.length > 0)\n            .join(' ') || '';\n      }\n\n      this.selected = !this.selected; // Toggle the selected state\n\n      this.itemSelected.emit({\n        label: this.label,\n        value: itemValue,\n        selected: this.selected,\n        disabled: this.disabled,\n      });\n    }\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Utility function to check if a string is null, empty, or contains only whitespace.\n   * @param {string | null | undefined} input - The string to check.\n   * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n   */\n  private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n    return !input || input.trim().length === 0;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n    return (\n      <Host\n        role=\"menuitem\"\n        tabindex={this.disabled ? '-1' : '0'}\n        onClick={this.handleClick}\n        class={{ selected: this.selected }}\n      >\n        {showDefaultLayout ? (\n          <slot></slot>\n        ) : (\n          <div class=\"flex gap-2\">\n            <span data-scope=\"text\">{this.label}</span>\n            {this.selected && (\n              <nv-icon\n                name=\"check\"\n                aria-hidden=\"true\"\n                class=\"selection-icon\"\n              ></nv-icon>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-9647924f.js → p-45c63143.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$2 } from './p-9be1ebd4.js';
-import { d as defineCustomElement$1 } from './p-69cc7819.js';
+import { d as defineCustomElement$2 } from './p-689a7b38.js';
+import { d as defineCustomElement$1 } from './p-8c8cf8ea.js';
 
 const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
 const NvIconbuttonStyle0 = nvIconbuttonCss;
@@ -69,7 +69,7 @@ const NvIconbutton = /*@__PURE__*/ proxyCustomElement(class NvIconbutton extends
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '50d222f7466955415b3f14d23661cea99cac11d3', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '53956bced12f2fa88bd8a1c53edef08df06b03c6', size: this.size }), !this.loading && h("nv-icon", { key: '802248d952f0724dcb8f9e22821d270a01c52800', name: this.name, size: this.size }), h("slot", { key: '3429a4dfaa3d683a23c0b18770a8caf0bfb26726' })));
+        return (h(Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && h("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), h("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -118,4 +118,4 @@ defineCustomElement();
 
 export { NvIconbutton as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-9647924f.js.map
+//# sourceMappingURL=p-45c63143.js.map

package/dist/components/{p-9647924f.js.map → p-45c63143.js.map}

@@ -1 +1 @@
-{"file":"p-9647924f.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;;;;;;;;;;;;;;QA6Ef,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;;;;IA+B/C,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.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 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\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-45c63143.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;;;;;;;;;;;;;;QA8Ef,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;;;;IA+B/C,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.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 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\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-9be1ebd4.js → p-689a7b38.js}

@@ -53,7 +53,7 @@ const NvIcon = /*@__PURE__*/ proxyCustomElement(class NvIcon extends H {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (h(Host, { key: 'aa3f7b43ad5884ad7cde113d0628f7189d791a21', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '4b8b9ecc37fb1d420bc6c4dd03d0e190c1b7565a', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '14ebb2c282fb36c1dea48fc2fe6be4b537e0855c', href: `${this.spriteUrl}#${this.name}` }))));
+        return (h(Host, { key: '1862efaf5cb956c36b1dad264518f7eb37a10c34', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '7beb3a4697c73a42e28b8d59128cea93978ba282', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '50e901a1dc92fb8ada8489e9be15c1bf069df5e6', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
 }, [0, "nv-icon", {
@@ -84,4 +84,4 @@ defineCustomElement();
 
 export { NvIcon as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-9be1ebd4.js.map
+//# sourceMappingURL=p-689a7b38.js.map