@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,68 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
5
- var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
6
- require('@stencil/react-output-target/runtime');
7
- require('react');
8
- require('react-dom');
9
-
10
- const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
11
-
12
- const NvAvatar = class {
13
- constructor(hostRef) {
14
- index.registerInstance(this, hostRef);
15
- /**
16
- * Define the size of the avatar. You can use t-shirt sizes.
17
- */
18
- this.size = 'md';
19
- /**
20
- * You can apply different colors on the Avatar.
21
- * Use a string number between 1 and 10.
22
- */
23
- this.color = '1';
24
- }
25
- componentWillRender() {
26
- if (this.xsmall) {
27
- this.size = constantsBReL3Lsa.SemanticSizes.ExtraSmall;
28
- }
29
- if (this.small) {
30
- this.size = constantsBReL3Lsa.SemanticSizes.Small;
31
- }
32
- if (this.medium) {
33
- this.size = constantsBReL3Lsa.SemanticSizes.Medium;
34
- }
35
- if (this.large) {
36
- this.size = constantsBReL3Lsa.SemanticSizes.Large;
37
- }
38
- if (this.xlarge) {
39
- this.size = constantsBReL3Lsa.SemanticSizes.ExtraLarge;
40
- }
41
- if (this.text) {
42
- this.initials = this.text;
43
- }
44
- if (this.url) {
45
- this.src = this.url;
46
- }
47
- }
48
- //#endregion PROPERTIES
49
- /****************************************************************************/
50
- //#region METHODS
51
- /**
52
- * Makes sure the initials are trimmed to 2 letters.
53
- * @param {string} initials - The initials to be trimmed.
54
- * @returns {string} The trimmed initials.
55
- */
56
- trimInitials(initials) {
57
- return initials.trim().substring(0, 2);
58
- }
59
- //#endregion METHODS
60
- /****************************************************************************/
61
- //#region RENDER
62
- render() {
63
- return (index.h(index.Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsxChV9xqsO.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
64
- }
65
- };
66
- NvAvatar.style = nvAvatarCss;
67
-
68
- exports.nv_avatar = NvAvatar;
@@ -1,213 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
5
- var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
6
- var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
7
- require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
8
- var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
9
- require('@stencil/react-output-target/runtime');
10
- require('react');
11
- require('react-dom');
12
-
13
- const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.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-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
14
-
15
- const NvBadge = class {
16
- constructor(hostRef) {
17
- index.registerInstance(this, hostRef);
18
- this.closeClicked = index.createEvent(this, "closeClicked", 3);
19
- this.hiddenChanged = index.createEvent(this, "hiddenChanged", 3);
20
- this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete", 3);
21
- /****************************************************************************/
22
- //#region DEPRECATED
23
- /**
24
- * Whether the badge is dismissible.
25
- * @deprecated use dismissible instead.
26
- */
27
- this.dismissal = false;
28
- //#endregion DEPRECATED
29
- /****************************************************************************/
30
- //#region PROPERTIES
31
- /**
32
- * The color of the badge.
33
- * deprecated Use status values or named colors instead.
34
- * Use a string between 1 to 10
35
- * or one of the status values: error, information, neutral, success, warning
36
- * or one of the color names: amber, orange, turquoise, crimson, lime
37
- */
38
- this.color = '1';
39
- /**
40
- * Main content of the badge.
41
- */
42
- this.label = null;
43
- /**
44
- * The lead icon of the badge.
45
- */
46
- this.leadIcon = null;
47
- /**
48
- * Whether the badge is dismissible.
49
- */
50
- this.dismissible = false;
51
- /**
52
- * Controls the visibility of the badge. Will animate with fade and collapse.
53
- */
54
- this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
55
- /**
56
- * When true, the alert does not automatically close upon dismissing.
57
- * Useful for externally controlled component behavior.
58
- */
59
- this.preventAutoClose = false;
60
- /**
61
- * When true, the badge will only display an icon without label.
62
- * The label will be visually hidden but still accessible for screen readers.
63
- */
64
- this.isIconOnly = false;
65
- //#endregion LIFECYCLE
66
- /****************************************************************************/
67
- //#region METHODS
68
- /**
69
- * Handles the close button click.
70
- */
71
- this.handleClose = () => {
72
- if (!this.preventAutoClose) {
73
- this.hidden = true;
74
- }
75
- this.closeClicked.emit();
76
- };
77
- }
78
- //#endregion EVENTS
79
- /****************************************************************************/
80
- //#region WATCHERS
81
- /**
82
- * Handles the dismissal prop change.
83
- * @param {boolean} dismissal - The new dismissal value.
84
- */
85
- handleDismissalChange(dismissal) {
86
- this.dismissible = dismissal;
87
- }
88
- /**
89
- * Handles the icon prop change.
90
- * @param {string} icon - The new icon value.
91
- */
92
- handleIconChange(icon) {
93
- this.leadIcon = icon;
94
- }
95
- /**
96
- * Handles the hidden prop change.
97
- * @param {boolean} hidden - The new hidden value.
98
- */
99
- async handleHiddenChange(hidden) {
100
- this.hiddenChanged.emit(hidden);
101
- if (this._isHidden === true)
102
- this._isHidden = hidden;
103
- const { fadeIn, fadeOut } = fade_animationDcRL9lcm.useFade(this.el, { duration: 150 });
104
- const { collapse, expand } = collapse_animationDZDm0vSK.useCollapse(this.el, { duration: 150 });
105
- if (hidden === true)
106
- await timeline_animationCgHCo_Ho.timeline(fadeOut, collapse).start();
107
- if (hidden === false)
108
- await timeline_animationCgHCo_Ho.timeline(expand, fadeIn).start();
109
- this.hiddenChangedComplete.emit(hidden);
110
- if (this._isHidden === false)
111
- this._isHidden = hidden;
112
- }
113
- //#endregion WATCHERS
114
- /****************************************************************************/
115
- //#region LIFECYCLE
116
- /**
117
- * Component will load.
118
- */
119
- componentWillLoad() {
120
- if (this.dismissal) {
121
- this.dismissible = this.dismissal;
122
- }
123
- if (this.icon != null && this.icon != '') {
124
- this.leadIcon = this.icon;
125
- }
126
- if (this.hidden) {
127
- this._isHidden = true;
128
- const { setCollapsed } = collapse_animationDZDm0vSK.useCollapse(this.el);
129
- const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.el);
130
- setCollapsed();
131
- setFadeOut();
132
- }
133
- }
134
- //#endregion METHODS
135
- /****************************************************************************/
136
- //#region RENDER
137
- render() {
138
- return (index.h(index.Host, { key: 'e47c85f80669870b4cd825fa29ebee7610751728', class: clsxChV9xqsO.clsx(`badge-${this.color}`, {
139
- 'has-close': this.dismissible,
140
- 'with-gap': this.dismissible || this.label,
141
- 'visually-hidden': this._isHidden,
142
- 'is-icon-only': this.isIconOnly,
143
- }) }, index.h("slot", { key: '63909cdcb1edc9e685d1b60534d72ed3dd700d05', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: 'ca443b29509145863f0fc4a8f814c57669342d15', name: this.leadIcon, size: "sm" })), index.h("span", { key: 'fbae90db0aa23cf0d204b14002ca702ad3731b51', class: clsxChV9xqsO.clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, index.h("slot", { key: '93e818db9d012176d407b19097c7513d7d462053' })), this.dismissible && (index.h("button", { key: 'c48984564102d04914a967aa3f9a29defae62455', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: '849a32c60019a99909e0383ad593fc1daf00dc59', name: "x", size: "sm" })))));
144
- }
145
- get el() { return index.getElement(this); }
146
- static get watchers() { return {
147
- "dismissal": ["handleDismissalChange"],
148
- "icon": ["handleIconChange"],
149
- "hidden": ["handleHiddenChange"]
150
- }; }
151
- };
152
- NvBadge.style = nvBadgeCss;
153
-
154
- const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
155
-
156
- const NvFielddropdownitemcheck = class {
157
- constructor(hostRef) {
158
- index.registerInstance(this, hostRef);
159
- this.itemChecked = index.createEvent(this, "itemChecked", 7);
160
- /****************************************************************************/
161
- //#region PROPERTIES
162
- /**
163
- * Indicates whether the checkbox is selected.
164
- */
165
- this.checked = false;
166
- /**
167
- * Disables the item, preventing any user interaction.
168
- */
169
- this.disabled = false;
170
- /* eslint-enable nova/event-bubbling */
171
- //#endregion EVENTS
172
- /****************************************************************************/
173
- //#region METHODS
174
- /**
175
- * when the child <nv-fieldcheckbox> change its `checked` state,
176
- * update `this.checked` and emit `itemChecked`.
177
- * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
178
- */
179
- this.onFieldcheckboxChanged = (event) => {
180
- if (this.disabled)
181
- return;
182
- // NvFieldcheckbox has emitted checkedChanged
183
- this.checked = event.detail; // get the new state
184
- this.itemChecked.emit({
185
- value: this.value,
186
- checked: this.checked,
187
- group: this.group,
188
- });
189
- };
190
- /** Make sure the checkbox is checked when clicked anywhere in the item. */
191
- this.handleClick = () => {
192
- if (this.disabled)
193
- return;
194
- if (this.el.querySelector('input').checked) {
195
- this.checked = false;
196
- }
197
- else {
198
- this.checked = true;
199
- }
200
- };
201
- }
202
- //#endregion METHODS
203
- /****************************************************************************/
204
- //#region RENDER
205
- render() {
206
- return (index.h(index.Host, { key: '97827418a246f09cfda685f15b661359d0812d8c', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: 'e656cf4d9e7f2e7f08ded1a8d42e4d5703f5d184', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: 'cfd59f0f0fc834d3fb29a39637f65c92ffba15b8' }), index.h("slot", { key: 'ae5daefbb1952ebb19d3dd3d8b7c36667dcac79e', name: "main" }), index.h("slot", { key: '30ab019b447024c3feab154a67779de5b8dc16a2', name: "label" }), index.h("slot", { key: '2cf42ee653cc99ab9e925ede1da74694bfa57106', name: "description" }))));
207
- }
208
- get el() { return index.getElement(this); }
209
- };
210
- NvFielddropdownitemcheck.style = nvFielddropdownitemcheckCss;
211
-
212
- exports.nv_badge = NvBadge;
213
- exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;
@@ -1,46 +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 nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-sm)}nv-breadcrumb.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-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
10
-
11
- const NvBreadcrumb = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- /****************************************************************************/
15
- //#region PROPERTIES
16
- /**
17
- * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
18
- * in a dropdown. Use default for a single item. When passing multiple items
19
- * as collapsed, make sure to wrap you links in list tags
20
- */
21
- this.type = 'default';
22
- }
23
- //#endregion PROPERTIES
24
- /****************************************************************************/
25
- //#region LIFECYCLE
26
- componentDidLoad() {
27
- // Force a re-render to pass the popoverTrigger ref to the popovers
28
- if (this.type === 'collapsed')
29
- index.forceUpdate(this);
30
- }
31
- componentWillLoad() {
32
- if (this.type === 'default' && this.tooltip) {
33
- this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
34
- }
35
- }
36
- //#endregion LIFECYCLE
37
- /****************************************************************************/
38
- //#region RENDER
39
- render() {
40
- return (index.h(index.Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsxChV9xqsO.clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (index.h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (index.h("slot", null)), this.tooltip && (index.h("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (index.h("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, index.h("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, index.h("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), index.h("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
41
- }
42
- get el() { return index.getElement(this); }
43
- };
44
- NvBreadcrumb.style = nvBreadcrumbCss;
45
-
46
- exports.nv_breadcrumb = NvBreadcrumb;
@@ -1,21 +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 nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
9
-
10
- const NvBreadcrumbs = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- }
14
- //#region RENDER
15
- render() {
16
- return (index.h(index.Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, index.h("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, index.h("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
17
- }
18
- };
19
- NvBreadcrumbs.style = nvBreadcrumbsCss;
20
-
21
- exports.nv_breadcrumbs = NvBreadcrumbs;
@@ -1,162 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-kU2nW5aN.js');
4
- var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
5
- require('@stencil/react-output-target/runtime');
6
- require('react');
7
- require('react-dom');
8
-
9
- const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[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-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[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-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[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-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[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-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[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-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[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-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]: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-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[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-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][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-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]: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-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[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-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
10
-
11
- const NvButton = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- if (hostRef.$hostElement$["s-ei"]) {
15
- this.internals = hostRef.$hostElement$["s-ei"];
16
- }
17
- else {
18
- this.internals = hostRef.$hostElement$.attachInternals();
19
- hostRef.$hostElement$["s-ei"] = this.internals;
20
- }
21
- /****************************************************************************/
22
- //#region PROPERTIES
23
- /**
24
- * Determines how large or small the button appears, allowing for
25
- * customization of the button's dimensions to fit different design
26
- * specifications and user needs.
27
- */
28
- this.size = 'md';
29
- /**
30
- * Adjusts the button's emphasis to make it more or less visually prominent
31
- * to users. Use this to draw attention to important actions or reduce focus
32
- * on less critical ones
33
- */
34
- this.emphasis = 'high';
35
- /**
36
- * Use this prop to highlight the button when it represents the current page
37
- * or active selection. This helps users understand their navigation context.
38
- */
39
- this.active = false;
40
- /**
41
- * Applies styling that visually indicates the button represents a dangerous
42
- * action.
43
- */
44
- this.danger = false;
45
- /**
46
- * Set this to true to show a spinner on the button, letting users know that
47
- * their action is being processed. It helps improve user experience by
48
- * indicating ongoing activities.
49
- */
50
- this.loading = false;
51
- /**
52
- * Disables the button, preventing user interaction.
53
- */
54
- this.disabled = false;
55
- /**
56
- * Allows the button to stretch and fill the entire width of its container.
57
- */
58
- this.fluid = false;
59
- /**
60
- * Sets the button type to control its function in forms. Use 'submit' to send
61
- * form data, 'reset' to clear the form, or 'button' for a standard button
62
- * that doesn't interact with form submission by default.
63
- */
64
- this.type = 'button';
65
- /**
66
- * Use this to make the button skip-able when users navigate with the keyboard.
67
- * The button remains clickable but won’t be reached via the Tab key.
68
- */
69
- this.disableTabindex = false;
70
- //#endregion PROPERTIES
71
- /****************************************************************************/
72
- //#region METHODS
73
- /**
74
- * Handles button click events, managing form actions and disabled states.
75
- * Prevents default behavior when button is disabled or loading, and
76
- * processes form submissions/resets when appropriate.
77
- * @param {Event} event - The click event.
78
- */
79
- this.handleButtonClick = (event) => {
80
- if (this.loading || this.disabled) {
81
- event.preventDefault();
82
- return;
83
- }
84
- if (this.type !== constantsBReL3Lsa.ButtonType.Button &&
85
- (this.form || this.internals?.form)) {
86
- this.processFormAction();
87
- }
88
- else if (this.form && this.type === constantsBReL3Lsa.ButtonType.Button) {
89
- console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
90
- }
91
- };
92
- /**
93
- * Processes form-related actions by finding the associated form element
94
- * and triggering the appropriate action (submit/reset) based on button type.
95
- * Falls back to ElementInternals form if no explicit form ID is provided.
96
- */
97
- this.processFormAction = () => {
98
- const formElement = this.form
99
- ? document.getElementById(this.form)
100
- : this.internals?.form;
101
- if (!formElement) {
102
- console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
103
- return;
104
- }
105
- switch (this.type) {
106
- case constantsBReL3Lsa.ButtonType.Submit:
107
- formElement.requestSubmit();
108
- break;
109
- case constantsBReL3Lsa.ButtonType.Reset:
110
- formElement.reset();
111
- break;
112
- }
113
- };
114
- }
115
- //#endregion METHODS
116
- /****************************************************************************/
117
- //#region EVENTS
118
- handleKeyDown(event) {
119
- if (event.key === 'Enter' || event.key === ' ') {
120
- event.preventDefault();
121
- this.el.click();
122
- }
123
- }
124
- //#endregion EVENTS
125
- /****************************************************************************/
126
- //#region WATCHERS
127
- handleLoadingChange(loading) {
128
- this.loading = loading;
129
- this.disabled = loading;
130
- }
131
- handleDisabledChange(disabled) {
132
- if (this.loading) {
133
- this.disabled = this.loading;
134
- }
135
- else {
136
- this.disabled = disabled;
137
- }
138
- }
139
- //#endregion WATCHERS
140
- /****************************************************************************/
141
- //#region LIFECYCLE
142
- componentWillLoad() {
143
- if (this.loading) {
144
- this.disabled = this.loading;
145
- }
146
- }
147
- //#endregion LIFECYCLE
148
- /****************************************************************************/
149
- //#region RENDER
150
- render() {
151
- return (index.h(index.Host, { key: '785b6127926d695ddaaff1a1f740102abd5132bb', role: "button", tabindex: this.disableTabindex ? -1 : 0, onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: 'b361e4ac45cc1612723d6a67f866b8cdce3c4abc', size: this.size === constantsBReL3Lsa.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: 'b23c877bd95ae0a02c89c83e4e3d5f0178d646a5', name: "leading-icon" }), index.h("slot", { key: '7c95b1f28a64e7bb5ca02abf2190dfda62d1c758' }), index.h("slot", { key: 'f1cd34ea21393b78bc2f5140364d47b9e70f505c', name: "trailing-icon" })));
152
- }
153
- static get formAssociated() { return true; }
154
- get el() { return index.getElement(this); }
155
- static get watchers() { return {
156
- "loading": ["handleLoadingChange"],
157
- "disabled": ["handleDisabledChange"]
158
- }; }
159
- };
160
- NvButton.style = nvButtonCss;
161
-
162
- exports.nv_button = NvButton;