@nova-design-system/nova-react 3.24.0 → 3.26.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 (97) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/dom.utils-CuXVGECR-8VY5SfMZ.js +177 -0
  3. package/dist/cjs/generated/components.server.js +82 -62
  4. package/dist/cjs/index-BeFrXZol.js +9699 -0
  5. package/dist/cjs/index.js +2 -1
  6. package/dist/cjs/{nv-accordion-item.entry-Bu1tAcCq.js → nv-accordion-item.entry-DtzjLTCo.js} +8 -7
  7. package/dist/cjs/{nv-accordion.entry-jWjLdX8w.js → nv-accordion.entry-DRcTfezT.js} +10 -8
  8. package/dist/cjs/{nv-alert.entry-E9ZJay_K.js → nv-alert.entry-86bfoXVx.js} +6 -4
  9. package/dist/cjs/nv-avatar.entry-mp2LJ6RA.js +68 -0
  10. package/dist/cjs/nv-badge_2.entry-BrDaHeqh.js +220 -0
  11. package/dist/cjs/nv-breadcrumb.entry-B2q7jJy2.js +49 -0
  12. package/dist/cjs/nv-breadcrumbs.entry-DKzST1uS.js +21 -0
  13. package/dist/cjs/nv-button.entry-CVgcU-bi.js +166 -0
  14. package/dist/cjs/{nv-buttongroup.entry-CuZCRsnV.js → nv-buttongroup.entry-CvuBGaGK.js} +12 -6
  15. package/dist/cjs/{nv-calendar.entry-CT3mASW6.js → nv-calendar.entry-BCcGhxzJ.js} +27 -19
  16. package/dist/cjs/{nv-col.entry--pCxkaTh.js → nv-col.entry-CzTahRVr.js} +3 -3
  17. package/dist/cjs/{nv-datagrid.entry-CGCEhO8C.js → nv-datagrid.entry-DWZxNqTE.js} +47 -184
  18. package/dist/cjs/{nv-datagridcolumn.entry-Fsqc7CT_.js → nv-datagridcolumn.entry-CzCzmdQl.js} +1 -1
  19. package/dist/cjs/{nv-dialog.entry-B6OYcZxQ.js → nv-dialog.entry-ByVD02QB.js} +19 -20
  20. package/dist/cjs/{nv-dialogfooter_2.entry-C4fP_n2-.js → nv-dialogfooter_2.entry-BmQcYJsD.js} +11 -29
  21. package/dist/cjs/{nv-drawer.entry-C5O4KvHU.js → nv-drawer.entry-C15JRJ3N.js} +19 -19
  22. package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DuDac_Os.js} +11 -29
  23. package/dist/cjs/nv-fieldcheckbox.entry-CwDOQzSW.js +179 -0
  24. package/dist/cjs/{nv-fielddate.entry-dqZDBVmm.js → nv-fielddate.entry-DKICGwc0.js} +15 -13
  25. package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-DGEK8F9p.js} +15 -14
  26. package/dist/cjs/{nv-fielddropdown.entry-BA15piWa.js → nv-fielddropdown.entry-BLS7lRzD.js} +33 -31
  27. package/dist/cjs/nv-fielddropdownitem.entry-Bbfi3A8C.js +69 -0
  28. package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-Cpy7HzlZ.js} +28 -24
  29. package/dist/cjs/nv-fieldnumber.entry-SbNb4hKr.js +189 -0
  30. package/dist/cjs/nv-fieldpassword.entry-CPsgagjY.js +167 -0
  31. package/dist/cjs/nv-fieldradio.entry-DLP-rmKU.js +105 -0
  32. package/dist/cjs/{nv-fieldselect.entry-uUIZ6hmN.js → nv-fieldselect.entry-DOOO03kM.js} +20 -12
  33. package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-CpVbxkpo.js} +33 -15
  34. package/dist/cjs/nv-fieldtext.entry-BpbG4WHv.js +163 -0
  35. package/dist/cjs/nv-fieldtextarea.entry-BA_RApYN.js +245 -0
  36. package/dist/cjs/{nv-fieldtime.entry-DlMNDTht.js → nv-fieldtime.entry-DaJfwQtC.js} +15 -9
  37. package/dist/cjs/{nv-icon.entry-CnUkRzaA.js → nv-icon.entry-DIi792yJ.js} +4 -4
  38. package/dist/cjs/nv-iconbutton_2.entry-B4xB5WtE.js +171 -0
  39. package/dist/cjs/{nv-menu.entry-Dc_FvIx7.js → nv-menu.entry-DHWhkWeB.js} +9 -13
  40. package/dist/cjs/nv-menuitem.entry-CQApuT2D.js +59 -0
  41. package/dist/cjs/nv-notification-bullet.entry-CnYVWE_Z.js +76 -0
  42. package/dist/cjs/{nv-notification.entry-C3m5p5BL.js → nv-notification.entry-DraOvzsu.js} +4 -4
  43. package/dist/cjs/nv-notificationcontainer.entry-BDo-rQLL.js +41 -0
  44. package/dist/cjs/nv-paginationtable.entry-CS7BhAVe.js +231 -0
  45. package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-DSyKCLtF.js} +105 -33
  46. package/dist/cjs/nv-row.entry-D21zN2Vr.js +22 -0
  47. package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-DpKgnjsJ.js} +10 -6
  48. package/dist/cjs/nv-sidebarcontent.entry-BWFDcui8.js +22 -0
  49. package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-BSzLq-h3.js} +4 -4
  50. package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C3DLHPSQ.js} +4 -4
  51. package/dist/cjs/nv-sidebargroup.entry-BMYLbCql.js +23 -0
  52. package/dist/cjs/{nv-sidebarheader.entry-_7ch0O3G.js → nv-sidebarheader.entry-CkUGD-Tw.js} +4 -4
  53. package/dist/cjs/{nv-sidebarlogo.entry-Ch9F-JnT.js → nv-sidebarlogo.entry-BX1-1S1v.js} +4 -4
  54. package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CPwt0Njh.js} +9 -7
  55. package/dist/cjs/nv-sidebarnavsubitem.entry-HZOTB6Tl.js +35 -0
  56. package/dist/cjs/{nv-split.entry-0HTslRAX.js → nv-split.entry-DdtzktvN.js} +10 -6
  57. package/dist/cjs/nv-stack.entry-BMLt30Nt.js +31 -0
  58. package/dist/cjs/{nv-table.entry-DH85n8Mc.js → nv-table.entry-RTiqKRKM.js} +6 -4
  59. package/dist/cjs/{nv-tableheader.entry-CKfocdxD.js → nv-tableheader.entry-Ci4qo8eY.js} +4 -4
  60. package/dist/cjs/nv-toggle.entry-s8B7-8P7.js +82 -0
  61. package/dist/cjs/nv-togglebutton.entry-CyHgU4Wl.js +66 -0
  62. package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-Bn_9DsdP.js} +13 -9
  63. package/dist/cjs/nv-tooltip.entry-D6kxXLO-.js +56 -0
  64. package/dist/components/NvDatatable/NvDatatable.js +29 -8
  65. package/dist/generated/components.js +11 -0
  66. package/dist/generated/components.server.js +81 -62
  67. package/dist/providers/NotificationProvider.js +9 -8
  68. package/dist/types/components/NvDatatable/types.d.ts +6 -0
  69. package/dist/types/generated/components.d.ts +52 -46
  70. package/dist/types/generated/components.server.d.ts +52 -46
  71. package/package.json +7 -4
  72. package/dist/cjs/index-kU2nW5aN.js +0 -40286
  73. package/dist/cjs/nv-avatar.entry-CUX7u0kR.js +0 -68
  74. package/dist/cjs/nv-badge_2.entry-bxpV5gxE.js +0 -213
  75. package/dist/cjs/nv-breadcrumb.entry-Cbbb9Qeh.js +0 -46
  76. package/dist/cjs/nv-breadcrumbs.entry-BTqnp9zO.js +0 -21
  77. package/dist/cjs/nv-button.entry-upWH19y6.js +0 -162
  78. package/dist/cjs/nv-fieldcheckbox.entry-bk7UNQny.js +0 -177
  79. package/dist/cjs/nv-fielddropdownitem.entry-DEWaf9dC.js +0 -72
  80. package/dist/cjs/nv-fieldnumber.entry-DoYORd0d.js +0 -187
  81. package/dist/cjs/nv-fieldpassword.entry-CPaLj9aD.js +0 -165
  82. package/dist/cjs/nv-fieldradio.entry-CvUmEaCa.js +0 -103
  83. package/dist/cjs/nv-fieldtext.entry-BYAJp3n_.js +0 -163
  84. package/dist/cjs/nv-fieldtextarea.entry-DU2bWYeg.js +0 -237
  85. package/dist/cjs/nv-iconbutton_2.entry-hqp4AcRq.js +0 -167
  86. package/dist/cjs/nv-menuitem.entry-DzMhx6c_.js +0 -60
  87. package/dist/cjs/nv-notification-bullet.entry-BwhHCMQF.js +0 -76
  88. package/dist/cjs/nv-notificationcontainer.entry-DTRNn7VE.js +0 -41
  89. package/dist/cjs/nv-row.entry-CdcjVGZv.js +0 -22
  90. package/dist/cjs/nv-sidebarcontent.entry-D9hpAhK8.js +0 -22
  91. package/dist/cjs/nv-sidebargroup.entry-RVqrsyIU.js +0 -23
  92. package/dist/cjs/nv-sidebarnavsubitem.entry-C0XDAzma.js +0 -35
  93. package/dist/cjs/nv-stack.entry-CqO7uTQf.js +0 -31
  94. package/dist/cjs/nv-toggle.entry-BHUl76Im.js +0 -80
  95. package/dist/cjs/nv-togglebutton.entry-D_9COjY-.js +0 -67
  96. package/dist/cjs/nv-tooltip.entry-BfViGE_U.js +0 -55
  97. /package/dist/cjs/{i18n.utils-IlwlcG9l-ku0bScip.js → i18n.utils-CR9MpYzU-ku0bScip.js} +0 -0
@@ -1,22 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- require('@stencil/react-output-target/runtime');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvSidebarcontentCss = "nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}";
9
-
10
- const NvSidebarcontent = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- }
14
- /****************************************************************************/
15
- //#region RENDER
16
- render() {
17
- return (index.h(index.Host, { key: 'c72a3de4460c4de37c2008ec4d777771d8771d32', role: "list" }, index.h("slot", { key: '8d08c073aebf079dbb9062bb183370e4dc4d9fe8' })));
18
- }
19
- };
20
- NvSidebarcontent.style = nvSidebarcontentCss;
21
-
22
- exports.nv_sidebarcontent = NvSidebarcontent;
@@ -1,23 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- require('@stencil/react-output-target/runtime');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvSidebargroupCss = "nv-sidebargroup{display:flex;flex-direction:column;gap:var(--sidebar-group-gap-y)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-title-padding-y) var(--sidebar-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}";
9
-
10
- const NvSidebargroup = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- }
14
- //#endregion PROPERTIES
15
- /****************************************************************************/
16
- //#region RENDER
17
- render() {
18
- return (index.h(index.Host, { key: '64b17f621fef826a4105dfa39fbc57013bad0abc', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '48e36725296ecc87da7d15606977fbe616dd4aa3', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '61aaf8541e9372220df24dcf9cf0b5b43e22e19b' })));
19
- }
20
- };
21
- NvSidebargroup.style = nvSidebargroupCss;
22
-
23
- exports.nv_sidebargroup = NvSidebargroup;
@@ -1,35 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- require('@stencil/react-output-target/runtime');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}";
9
-
10
- const NvSidebarnavsubitem = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /****************************************************************************/
14
- //#region PROPERTIES
15
- /**
16
- * Whether this sub-item represents the active/current page.
17
- */
18
- this.active = false;
19
- }
20
- //#endregion PROPERTIES
21
- /****************************************************************************/
22
- //#region METHODS
23
- // Note: We no longer use stopPropagation() here because it prevents React Router
24
- // (and other SPA routers) from receiving the click event due to event delegation.
25
- // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.
26
- //#endregion METHODS
27
- /****************************************************************************/
28
- //#region RENDER
29
- render() {
30
- return (index.h(index.Host, { key: '7e9b3aaf42bc7ca19cc3ceeed4afc74058ea48f2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'd865d9cff0e9632dd0ca5f97334e09ae3ad6ddf8', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '28bddb32eea17dbc3b33f2e1c3ef6744e6646cbe', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '0f58fbe30b054e42ac3f431cb8cafe0374994856' })), index.h("div", { key: '3b1b74c67b1e338e158a67dab828941f40f3a147', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '98ad3fde4a5295f6835ba6b15ac832fc0426b75b', name: "trailing" }))));
31
- }
32
- };
33
- NvSidebarnavsubitem.style = nvSidebarnavsubitemCss;
34
-
35
- exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;
@@ -1,31 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
5
- require('@stencil/react-output-target/runtime');
6
- require('react');
7
- require('react-dom');
8
-
9
- const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
10
-
11
- const NvStack = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- /****************************************************************************/
15
- //#region PROPERTIES
16
- /**
17
- * Gutter refers to the space that exists between children components inside
18
- * the stack container.
19
- */
20
- this.gutter = 2;
21
- }
22
- //#endregion PROPERTIES
23
- /****************************************************************************/
24
- //#region RENDER
25
- render() {
26
- return (index.h(index.Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
27
- }
28
- };
29
- NvStack.style = nvStackCss;
30
-
31
- exports.nv_stack = NvStack;
@@ -1,80 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
5
- var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
6
- require('@stencil/react-output-target/runtime');
7
- require('react');
8
- require('react-dom');
9
-
10
- const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
11
-
12
- const NvToggle = class {
13
- constructor(hostRef) {
14
- index.registerInstance(this, hostRef);
15
- this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
16
- /****************************************************************************/
17
- //#region PROPERTIES
18
- /**
19
- * Sets the ID for the radio button’s input element and the for attribute of
20
- * the associated label. If no ID is provided, a random one will be
21
- * automatically generated to ensure unique identification, facilitating
22
- * proper label association and accessibility.
23
- */
24
- this.inputId = v4BdYh22OP.v4();
25
- /**
26
- * Hides the label visually while still keeping it available for screen
27
- * readers.
28
- */
29
- this.hideLabel = false;
30
- /** Indicates whether the toggle is checked or not. */
31
- this.checked = false;
32
- /** Disables the toggle, preventing user interaction. */
33
- this.disabled = false;
34
- /**
35
- * Sets the toggle to read-only, preventing user changes but still allowing
36
- * focus and selection of text.
37
- */
38
- this.readonly = false;
39
- }
40
- //#endregion EVENTS
41
- /****************************************************************************/
42
- //#region WATCHERS
43
- /**
44
- * Watches for changes to the checked state and emits the new value.
45
- * @param {boolean} checked - The new value of the checked state.
46
- */
47
- onCheckedChanged(checked) {
48
- this.checkedChanged.emit(checked);
49
- }
50
- /**
51
- * Listens for the change event on the toggle input element and updates the checked state.
52
- * the checked state of the host elements.
53
- * @param {Event} event - The change event.
54
- */
55
- handleChange(event) {
56
- const target = event.target;
57
- if (target.type === 'checkbox' && target.id === this.inputId) {
58
- if (this.readonly || this.disabled) {
59
- event.preventDefault();
60
- return;
61
- }
62
- this.checked = target.checked;
63
- }
64
- }
65
- //#endregion WATCHERS
66
- /****************************************************************************/
67
- //#region RENDER
68
- render() {
69
- return (index.h(index.Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, index.h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
70
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, index.h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', name: "description" }, this.description))))));
71
- }
72
- static get formAssociated() { return true; }
73
- get el() { return index.getElement(this); }
74
- static get watchers() { return {
75
- "checked": ["onCheckedChanged"]
76
- }; }
77
- };
78
- NvToggle.style = nvToggleCss;
79
-
80
- exports.nv_toggle = NvToggle;
@@ -1,67 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- require('@stencil/react-output-target/runtime');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
9
-
10
- const NvTogglebutton = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.toggled = index.createEvent(this, "toggled", 7);
14
- /****************************************************************************/
15
- //#region PROPERTIES
16
- /**
17
- * Determines how large or small the togglebutton appears, allowing for
18
- * customization of the togglebutton's dimensions to fit different design
19
- * specifications and user needs.
20
- */
21
- this.size = 'md';
22
- /**
23
- * Prevents all interaction, rendering the toggle in a non-interactive state.
24
- */
25
- this.disabled = false;
26
- /**
27
- * Whether the button is active or not. Will not toggle automatically but
28
- * needs to be controlled externally.
29
- */
30
- this.active = false;
31
- /**
32
- * Make it more or less visually prominent to users.
33
- */
34
- this.emphasis = 'high';
35
- //#endregion PROPERTIES
36
- /****************************************************************************/
37
- //#region METHODS
38
- this.handleClick = () => {
39
- if (this.disabled)
40
- return;
41
- this.toggled.emit({
42
- value: this.value,
43
- active: this.active,
44
- });
45
- };
46
- }
47
- //#endregion METHODS
48
- /****************************************************************************/
49
- //#region LISTENERS
50
- handleKeyDown(event) {
51
- if (event.key === 'Enter' || event.key === ' ') {
52
- event.preventDefault();
53
- this.el.click();
54
- }
55
- }
56
- /* eslint-enable nova/event-bubbling */
57
- //#endregion EVENTS
58
- /****************************************************************************/
59
- //#region RENDER
60
- render() {
61
- return (index.h(index.Host, { key: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
62
- }
63
- get el() { return index.getElement(this); }
64
- };
65
- NvTogglebutton.style = nvTogglebuttonCss;
66
-
67
- exports.nv_togglebutton = NvTogglebutton;
@@ -1,55 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- require('@stencil/react-output-target/runtime');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[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 nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
9
-
10
- const NvTooltip = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.openChanged = index.createEvent(this, "openChanged", 3);
14
- /**
15
- * Decides where the tooltip shows up next to the element it’s linked to
16
- * (above, below, to the sides). If there isn’t enough room, it will adjust
17
- * it's position on the axis to fit on the screen, so users can always see it.
18
- */
19
- this.placement = 'bottom';
20
- /**
21
- * Controls how long (in milliseconds) the tooltip waits to show after you
22
- * hover over or focus on an element. If you move away before the delay is up,
23
- * the tooltip won't appear.
24
- */
25
- this.enterDelay = 0;
26
- /**
27
- * Sets the positioning strategy for the tooltip. Options include:
28
- * - `absolute`: Positions the tooltip relative to the trigger element
29
- * (default).
30
- * - `fixed`: Positions the tooltip relative to the viewport, useful when you
31
- * need the tooltip to break out of overflow hidden containers, it will not
32
- * scroll inside a scroll container due to the fixed positioning.
33
- */
34
- this.strategy = 'absolute';
35
- }
36
- //#endregion EVENTS
37
- /****************************************************************************/
38
- //#region LIFECYCLE
39
- componentWillLoad() {
40
- if (!this.triggerElement)
41
- this.triggerElement = Array.from(this.el.children).find(child => {
42
- return child.getAttribute('slot') === null;
43
- });
44
- }
45
- //#endregion LIFECYCLE
46
- /****************************************************************************/
47
- //#region RENDER
48
- render() {
49
- return (index.h(index.Host, { key: '3b0a7e6159b2e0a23af58ad0e8e3567f05373954' }, index.h("slot", { key: 'bfb982166e2f6f96c11cc745905a3c0ffd8f575e' }), index.h("nv-popover", { key: 'c14b0fa83f861ae828b14ab16cbd562dde6032ba', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: '67701f81afc4c2e36f8ab7266aee3f2e457a4755', slot: "content" }, this.message), index.h("slot", { key: 'c57c2463744e2e2afc5bbd64c4838a733a77aca9', name: "content" }))));
50
- }
51
- get el() { return index.getElement(this); }
52
- };
53
- NvTooltip.style = nvTooltipCss;
54
-
55
- exports.nv_tooltip = NvTooltip;