npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.46 → 3.0.0 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (322) hide show

package/dist/components/{p-8c5a861b.js → p-c14f6b8e.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-1c45c0f2.js';
-import { d as defineCustomElement$1 } from './p-664c5a14.js';
+import { d as defineCustomElement$1 } from './p-b7b78e64.js';
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;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)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -34,7 +34,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
+        return (h(Host, { key: '8309e08944469fad76997a6dfcb8b434461aa5a3' }, h("slot", { key: 'f3da94e2f2f581f7b8c93f4b3e70de67e305508a' }), h("nv-popover", { key: 'a28c50f59f9a781afd8a8ab60260d065dcadf96d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '76f63a5f220de640f4eeada8aeba97e9ead73fc9', slot: "content" }, this.message), h("slot", { key: 'f55f71b357b23c29b40b9c022a5a1718c4c8c8fb', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvTooltipStyle0; }
@@ -66,4 +66,4 @@ defineCustomElement();
 export { NvTooltip as N, defineCustomElement as d };
-//# sourceMappingURL=p-8c5a861b.js.map
+//# sourceMappingURL=p-c14f6b8e.js.map

package/dist/components/{p-8c5a861b.js.map → p-c14f6b8e.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~8c5a861b~~.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,qwBAAqwB,CAAC;AAC3xB,wBAAe,YAAY;;MCWd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAsCjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;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":[],"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:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n 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 [data-scope='arrow'] {\n @include arrow-styles();\n }\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\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\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}
1	+ {"file":"p-c14f6b8e.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,qwBAAqwB,CAAC;AAC3xB,wBAAe,YAAY;;MCWd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAsCjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;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":[],"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:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n 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 [data-scope='arrow'] {\n @include arrow-styles();\n }\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\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\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-a9e1bf70.js → p-dc3faba3.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-1c45c0f2.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$2 } from './p-91b58443.js';
-import { d as defineCustomElement$1 } from './p-7b89fb48.js';
+import { d as defineCustomElement$2 } from './p-591730e7.js';
+import { d as defineCustomElement$1 } from './p-150daf68.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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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;
@@ -117,7 +117,7 @@ const NvIconbutton = /*@__PURE__*/ proxyCustomElement(class NvIconbutton extends
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e67f2cfb172fc315ea4d12290000cd92ff683e88', 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: '6477c82dcaa79147d03ae730d9ab2835959bcde6', size: this.size }), !this.loading && h("nv-icon", { key: '8ffecf3db1d721ff88ba3c7b4e08543e48adedd5', name: this.name, size: this.size }), h("slot", { key: 'c03cccb5aff47a9f758fc23b4e2226301d2d2fcc' })));
+        return (h(Host, { key: 'f678bd976942aa35ae36c536fdd86cd65a43263a', 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: 'b874de8701de163c1f4235c2034a13da30279191', size: this.size }), !this.loading && h("nv-icon", { key: '222ccc93e3af3dcec81308b3b90ca724ecdfa2fb', name: this.name, size: this.size }), h("slot", { key: 'c7a257f7715a9320ffe46e09b59a2d570d1f052c' })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -166,4 +166,4 @@ defineCustomElement();
 export { NvIconbutton as N, defineCustomElement as d };
-//# sourceMappingURL=p-a9e1bf70.js.map
+//# sourceMappingURL=p-dc3faba3.js.map

package/dist/components/{p-a9e1bf70.js.map → p-dc3faba3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-a9e1bf70.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,sqJAAsqJ,CAAC;AAC/rJ,2BAAe,eAAe;;MC6BjB,YAAY;IAPzB;;;;;;;;;;;QAoBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;;;;QAUhD,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;;QAOjB,WAAM,GAAY,KAAK,CAAC;;;;;;QAgBxB,SAAI,GAAoB,QAAQ,CAAC;;;;QAMjC,UAAK,GAAyB,QAAQ,CAAC;;;;;;;;;;QAYxC,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,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;KAgFH;;;;IAzEC,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;;;;IAOD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;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;KACjB;;;;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 Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n ButtonSize,\n ButtonEmphasis,\n ButtonType,\n IconButtonShape,\n} 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: `${IconButtonShape}` = '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.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 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 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}
1	+ {"file":"p-dc3faba3.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,sqJAAsqJ,CAAC;AAC/rJ,2BAAe,eAAe;;MC6BjB,YAAY;IAPzB;;;;;;;;;;;QAoBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;;;;QAUhD,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;;QAOjB,WAAM,GAAY,KAAK,CAAC;;;;;;QAgBxB,SAAI,GAAoB,QAAQ,CAAC;;;;QAMjC,UAAK,GAAyB,QAAQ,CAAC;;;;;;;;;;QAYxC,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,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;KAgFH;;;;IAzEC,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;;;;IAOD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;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;KACjB;;;;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 Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n ButtonSize,\n ButtonEmphasis,\n ButtonType,\n IconButtonShape,\n} 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: `${IconButtonShape}` = '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.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 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 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-9d6aaf76.js → p-e00cbb8a.js} RENAMED Viewed

@@ -116,13 +116,13 @@ const NvFieldcheckbox = /*@__PURE__*/ proxyCustomElement(class NvFieldcheckbox e
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1d627199f94d133d82bbef8f20de86590d9a3813', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'bca54e59576da2ec632a7ef7c5f8adb6fb3c77fb', class: "input-container" }, h("input", { key: '4f27772a35e74cc945fc4de202099866fbd8a317', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (h(Host, { key: '98f9dfdadab534193e7076f929c9820a231fecba', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '5a4d02d46b7c8c8930c24f794452180d58604ffe', class: "input-container" }, h("input", { key: 'f7a4002a5fb9800ed4036638773ac42c49d4ae0f', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), h("span", { key: 'd575209c82fe0cbb4f3136a50eb78a9db12cacc0', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'c265cb54bc4d76962203e8ee0298508e9f96bc58', name: "checked-icon" }, h("svg", { key: '03d326e69ac11bf22bc3ce43a80023f8c2ff8401', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'ae602d5613c82569f89f97d9e1b6994940f03f9c', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '9f90d9b9a63a50bd0ecd4433b390d4c03604e124', name: "indeterminate-icon" }, h("svg", { key: '7681c9b1203240f419fb7cf93644cef77f8438f6', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'c28a5d22adace616ede31baa3a4edbc8cb899f01', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '9213ad654a4c4f9576160c80195aec378559f2a0', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '73f6c22fe57659b0618216e69289a5704ac231eb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'fd70342006329609c2b0f9b501d0e2e7ad311f07', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '17fb2ed0060b24b1ef797efe34b53c94a755a1ac', class: "description" }, h("slot", { key: '96d6c1b135f716de40c1223f35a479d3c8cc6c0d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c63392b6d315d5104087561ca2abf166e190f0f7', hidden: !this.error, class: "error-description" }, h("slot", { key: '154010b1ec725f95d88bbf18a9e5d309b73affdd', name: "error-description" }, this.errorDescription))))));
+            } }), h("span", { key: '56a2547ecf96ef3f7f28054592471323497cb94f', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'af4e10bd52b42850c8348e0aed8c90a7e700d64a', name: "checked-icon" }, h("svg", { key: '105847f526c391566cef42fa35d94fbaba0e8984', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '41e221d5f3eab7a4cc88d4ed9454f198d69ec815', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '3a1f5ffdc34a1ecdc1bb7f1b5347e1f12f5f690d', name: "indeterminate-icon" }, h("svg", { key: '1b68c27172d5b6b9ba2419d278c0ac0299d7a4b7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '7b2f4e5fe1d961fad290aade639b9807446f34ba', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd472d7d8901ff7de37fe370bf5d637fc8ae6069d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c8dbda4d6f9cb757476c9a96934599171f6ea7ae', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '3c0ec17aeb856457b63981fd0e21ead69ca3af0f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'dff6c3a69496324cabcf25ae7639c98a7d908769', class: "description" }, h("slot", { key: '498c8216c9a0a537f1aa2a542b3caa688b76e55d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6c584da0ad93e7f0ad62610d760c36d77b1a6fc6', hidden: !this.error, class: "error-description" }, h("slot", { key: '93df382e666707cdde3133daae7aa66914215149', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -169,4 +169,4 @@ defineCustomElement();
 export { NvFieldcheckbox as N, defineCustomElement as d };
-//# sourceMappingURL=p-9d6aaf76.js.map
+//# sourceMappingURL=p-e00cbb8a.js.map

package/dist/components/{p-9d6aaf76.js.map → p-e00cbb8a.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-9d6aaf76.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-e00cbb8a.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--form-label-font-weight);\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n opacity: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n /\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * /\n @Prop({ reflect: true })\n readonly message?: string;\n\n /\n The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * /\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /\n When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * /\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the checkbox input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed next to the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /\n Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n /\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /\n A description that appears when there is an error related to the checkbox.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Indicates whether the checkbox is checked or not.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n /\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /\n Disables the checkbox, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /\n Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LISTENERS\n\n /\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription \|\|\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-a9f162a8.js → p-f331117c.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
 import { C as CUSTOM_DAY_NAMES, b as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './p-8348db09.js';
-import { d as defineCustomElement$4 } from './p-8674c7af.js';
-import { d as defineCustomElement$3 } from './p-91b58443.js';
-import { d as defineCustomElement$2 } from './p-a9e1bf70.js';
-import { d as defineCustomElement$1 } from './p-7b89fb48.js';
+import { d as defineCustomElement$4 } from './p-2d9ba7d3.js';
+import { d as defineCustomElement$3 } from './p-591730e7.js';
+import { d as defineCustomElement$2 } from './p-dc3faba3.js';
+import { d as defineCustomElement$1 } from './p-150daf68.js';
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -232,11 +232,11 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
     /**
      * Change the displayed month
      * @param {number} offset - Month offset (-1 for previous, 1 for next)
-     * @param {number} calendarOffset - Month offset for the calendar (0 by default)
      */
-    changeMonth(offset, calendarOffset = 0) {
+    changeMonth(offset) {
         const newDate = new Date(this.currentDate);
-        newDate.setUTCMonth(newDate.getUTCMonth() + offset + calendarOffset);
+        // Ensure we only move by one month at a time
+        newDate.setUTCMonth(newDate.getUTCMonth() + offset);
         // Add the appropriate animation class
         const containers = this.el.querySelectorAll('.calendar-grid');
         containers.forEach(container => {
@@ -394,10 +394,13 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         const firstDay = new Date(Date.UTC(year, month, 1));
         const lastDay = new Date(Date.UTC(year, month + 1, 0));
         const days = [];
-        // Calculate the offset to include the days of the previous month only for the first calendar
-        const offsetDays = offset === 0 ? (firstDay.getUTCDay() - this.firstDayOfWeek + 7) % 7 : 0;
+        // Correct calculation of offset for previous month days
+        // Use getUTCDay to stay consistent with UTC timezone
+        const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
+        // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
+        const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
         // Add the days of the previous month for the first calendar
-        if (offset === 0) {
+        if (offset === 0 && offsetDays > 0) {
             const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
             for (let i = offsetDays; i > 0; i--) {
                 const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
@@ -587,6 +590,21 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
     parseDate(dateInput) {
         if (dateInput instanceof Date)
             return dateInput;
+        // Attempt to automatically detect ISO 8601 format (generated by toISOString())
+        // The regex checks the standard ISO format: YYYY-MM-DDTHH:mm:ss.sssZ
+        if (typeof dateInput === 'string' &&
+            /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(dateInput)) {
+            try {
+                const parsedDate = new Date(dateInput);
+                if (!isNaN(parsedDate.getTime())) {
+                    return parsedDate;
+                }
+            }
+            catch (error) {
+                // If it fails, continue with other methods
+                console.error('Error parsing ISO date:', error);
+            }
+        }
         // Handling Unix Seconds ("X") formats
         if (this.dateFormat === 'X') {
             const unixSeconds = Number(dateInput);
@@ -633,6 +651,20 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         }
         return parsed.toDate();
     }
+    /**
+     * Checks if the date format is in UTC mode
+     * @returns {boolean} true if the date format is in UTC mode
+     */
+    get isUTCMode() {
+        return this.dateFormat.includes('Z');
+    }
+    /**
+     * Checks if the date format is ISO 8601
+     * @returns {boolean} true if the format is ISO 8601
+     */
+    get isISO8601Format() {
+        return this.dateFormat === 'YYYY-MM-DD[T]HH:mm:ss[Z]';
+    }
     /**
      * Formats a date to a string according to the format
      * @param {Date} date - Date to format
@@ -641,6 +673,11 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
     formatDate(date) {
         if (!date)
             return '';
+        // Special case for ISO 8601
+        if (this.isISO8601Format) {
+            // For the ISO 8601 format, use directly toISOString() which is standard
+            return date.toISOString();
+        }
         // If the format is "Ticks", convert the time to C# ticks
         if (this.dateFormat === 'Ticks') {
             const ticks = date.getTime() * 10000 + 621355968000000000;
@@ -836,11 +873,10 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
     /**
      * Handles month change with an offset
      * @param {number} direction - Direction (-1 for previous, 1 for next)
-     * @param {number} offset - Month offset (0 by default)
      * @returns {Function} Change month handler
      */
-    getChangeMonthHandler(direction, offset) {
-        return () => this.changeMonth(direction, offset);
+    getChangeMonthHandler(direction) {
+        return () => this.changeMonth(direction);
     }
     /**
      * Handles month change from an event (ex: dropdown)
@@ -902,13 +938,6 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
             return [];
         }
     }
-    /**
-     * Checks if the date format is in UTC mode
-     * @returns {boolean} true if the date format is in UTC mode
-     */
-    get isUTCMode() {
-        return this.dateFormat.includes('Z');
-    }
     /**
      * Checks if shortcuts are visible
      * @returns {boolean} true if shortcuts are visible
@@ -934,8 +963,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
      * @description Renders the header of the calendar
      */
     renderHeader(offset, index) {
-        return (h("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
-                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) }), h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset), class: "nav-right" }))));
+        return (h("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
+                Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) }), h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1), class: "nav-right" }))));
     }
     /**
      * Renders the week numbers
@@ -1028,7 +1057,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '49bdf5cc44f9e8f13b0fd61936d3b015e6105d18' }, h("div", { key: 'e1a0fcc20c7c12930df31c36751824a64fae053f', class: "datepicker-root" }, h("div", { key: '48cd6f6d92c41c748fdd05a6d932cbb634e3dfd6', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'f5d5ca631e448067cbfb04f0bcc74695b5c6fb5e', 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: 'cb1ebc42e3616b9c35d147c227a53924fd2c73c8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'e9bec2dd219502e8855c6195ebe69bff8fff0da5' })));
+        return (h(Host, { key: '89300da9f694aa926855452414e7e036f75f2de6' }, h("div", { key: '467ef9fc9d6523eec3712bf779d49fdf50c55617', class: "datepicker-root" }, h("div", { key: '990f2cb18dcad96cab0f8dfb62e6c57049475440', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'c0dedf1007cbc6a87bd591925c9994474c876afc', 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: 'ef81eaf952fbe569be7e1d3ee6cb59de0e137fe4', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'e1281217950b5cb02952a69b081d4fcce5863b4d' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1101,4 +1130,4 @@ defineCustomElement();
 export { NvCalendar as N, commonjsGlobal as c, defineCustomElement as d, getDefaultExportFromCjs as g };
-//# sourceMappingURL=p-a9f162a8.js.map
+//# sourceMappingURL=p-f331117c.js.map