@nova-design-system/nova-react 3.21.1-beta.0 → 3.23.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 (85) hide show
  1. package/dist/cjs/_commonjsHelpers-B85MJLTf-CFO10eej.js +7 -0
  2. package/dist/cjs/{collapse.animation-6e0b08df-AHWzNGm_.js → collapse.animation-DZDm0vSK-C2TOIhIK.js} +3 -3
  3. package/dist/cjs/{fade.animation-9b939939-DV--bM4S.js → fade.animation-DcRL9lcm-DAZeHoKN.js} +75 -75
  4. package/dist/cjs/generated/components.server.js +163 -60
  5. package/dist/cjs/{grow.animation-24ad5cf8-LUp_ITEx.js → grow.animation-CvHGHBL4-DDIEYBK-.js} +5 -5
  6. package/dist/cjs/i18n.utils-DOZbXX2L-BizoXo6c.js +2498 -0
  7. package/dist/cjs/{index-CEKdYnmK.js → index-CtjeeUI-.js} +10298 -6029
  8. package/dist/cjs/index.js +2 -1
  9. package/dist/cjs/inputmask-CSo292ul-DlvupPk6.js +3758 -0
  10. package/dist/cjs/{nv-accordion-item.entry-zvp8yDql.js → nv-accordion-item.entry-B_l0-ux0.js} +11 -10
  11. package/dist/cjs/{nv-accordion.entry-D6gckOF4.js → nv-accordion.entry-BX8_YuZF.js} +8 -5
  12. package/dist/cjs/{nv-alert.entry-Df8-nQ-R.js → nv-alert.entry-DCWYR0OK.js} +22 -22
  13. package/dist/cjs/{nv-avatar.entry-ZOnVWP9L.js → nv-avatar.entry-C_xZD3Lp.js} +11 -11
  14. package/dist/cjs/{nv-badge_2.entry-DgiVv_Yf.js → nv-badge_2.entry-JjqANStV.js} +24 -24
  15. package/dist/cjs/{nv-breadcrumb.entry-IqtE1JL0.js → nv-breadcrumb.entry-DQZDn6cm.js} +5 -5
  16. package/dist/cjs/{nv-breadcrumbs.entry-Be6dz7zI.js → nv-breadcrumbs.entry-Bz0GjhY_.js} +3 -3
  17. package/dist/cjs/{nv-button.entry-CmswF3Si.js → nv-button.entry-Br1DH9Vj.js} +9 -9
  18. package/dist/cjs/{nv-buttongroup.entry-Cfe6rFSs.js → nv-buttongroup.entry-BZaTKN_n.js} +3 -3
  19. package/dist/cjs/{nv-calendar.entry-q83sS_dN.js → nv-calendar.entry-D9ESuu7C.js} +105 -79
  20. package/dist/cjs/{nv-col.entry-Cu-Qi1bi.js → nv-col.entry-CfgPMMxS.js} +5 -5
  21. package/dist/cjs/{nv-datagrid.entry-Cx7SvD5S.js → nv-datagrid.entry-DcB5q2oC.js} +14 -14
  22. package/dist/cjs/{nv-datagridcolumn.entry-B_uXKFLg.js → nv-datagridcolumn.entry-BhKOzXA6.js} +2 -1
  23. package/dist/cjs/{nv-dialog.entry-J6Xwi6z1.js → nv-dialog.entry-O47Eol_7.js} +23 -23
  24. package/dist/cjs/{nv-dialogfooter_2.entry-DOlhqDTh.js → nv-dialogfooter_2.entry-Dn16bI8a.js} +10 -11
  25. package/dist/cjs/nv-fieldcheckbox.entry-Bx6ArV_b.js +177 -0
  26. package/dist/cjs/{nv-fielddate.entry-xWi3GpLl.js → nv-fielddate.entry-B4P0U8QG.js} +86 -40
  27. package/dist/cjs/{nv-fielddaterange.entry-BwFtpw9X.js → nv-fielddaterange.entry-BORwYJ-k.js} +150 -101
  28. package/dist/cjs/nv-fielddropdown.entry-DzBAIynY.js +687 -0
  29. package/dist/cjs/{nv-fielddropdownitem.entry-DjyFlVXw.js → nv-fielddropdownitem.entry-C_17isWd.js} +6 -5
  30. package/dist/cjs/{nv-fieldmultiselect.entry-BtLTG7nM.js → nv-fieldmultiselect.entry-DiqRreWh.js} +347 -232
  31. package/dist/cjs/nv-fieldnumber.entry-C9O4UPp3.js +187 -0
  32. package/dist/cjs/nv-fieldpassword.entry-BfVJNT0A.js +165 -0
  33. package/dist/cjs/{nv-fieldradio.entry-2hb1Ur40.js → nv-fieldradio.entry-CG22oETM.js} +10 -10
  34. package/dist/cjs/{nv-fieldselect.entry-D-eYQpAv.js → nv-fieldselect.entry-BPQEtrv2.js} +52 -13
  35. package/dist/cjs/{nv-fieldslider.entry-BGle1RZR.js → nv-fieldslider.entry-CozmnUfN.js} +16 -31
  36. package/dist/cjs/nv-fieldtext.entry-BD-z01ru.js +163 -0
  37. package/dist/cjs/{nv-fieldtextarea.entry-Z32-s901.js → nv-fieldtextarea.entry-7UrKWDHg.js} +51 -12
  38. package/dist/cjs/{nv-fieldtime.entry-CDFGdfFL.js → nv-fieldtime.entry-DakOlLiO.js} +109 -57
  39. package/dist/cjs/{nv-icon.entry-BDq7DKRt.js → nv-icon.entry-Db00kB2u.js} +11 -11
  40. package/dist/cjs/{nv-iconbutton_2.entry-DdgEkFLK.js → nv-iconbutton_2.entry-CaKCa8NT.js} +7 -8
  41. package/dist/cjs/{nv-menu.entry-iob0Kve8.js → nv-menu.entry-CK2HdmBt.js} +16 -29
  42. package/dist/cjs/{nv-menuitem.entry-C989Ui60.js → nv-menuitem.entry-mKMqCAdz.js} +6 -5
  43. package/dist/cjs/nv-notification-bullet.entry-DtbjtFxs.js +77 -0
  44. package/dist/cjs/{nv-notification.entry-BxvJMKxH.js → nv-notification.entry-CLb0gNu3.js} +39 -39
  45. package/dist/cjs/{nv-notificationcontainer.entry-CxGCIb96.js → nv-notificationcontainer.entry-Cijivlm6.js} +3 -3
  46. package/dist/cjs/{nv-popover.entry-1KsO_KQm.js → nv-popover.entry-mLdLSp6n.js} +49 -45
  47. package/dist/cjs/{nv-row.entry-PBLq_BzJ.js → nv-row.entry-C2C94fcv.js} +3 -3
  48. package/dist/cjs/{nv-sidebar.entry-CjLbvLqw.js → nv-sidebar.entry-inDVNJ4s.js} +13 -13
  49. package/dist/cjs/{nv-sidebarcontent.entry-Cv76IH4W.js → nv-sidebarcontent.entry-DxoljE15.js} +3 -3
  50. package/dist/cjs/{nv-sidebardivider.entry-DYPJ_k73.js → nv-sidebardivider.entry-D_yern0R.js} +4 -4
  51. package/dist/cjs/{nv-sidebarfooter.entry-mGcMBRmv.js → nv-sidebarfooter.entry-Rkkn9TB_.js} +3 -3
  52. package/dist/cjs/{nv-sidebargroup.entry-DtwFliHZ.js → nv-sidebargroup.entry-C1p9qqxr.js} +4 -4
  53. package/dist/cjs/{nv-sidebarheader.entry-BdOYIXCA.js → nv-sidebarheader.entry-CYpD_4pI.js} +3 -3
  54. package/dist/cjs/{nv-sidebarlogo.entry-Da0kGsfw.js → nv-sidebarlogo.entry-BgK03M1v.js} +3 -3
  55. package/dist/cjs/{nv-sidebarnavitem.entry-D5xLfpwn.js → nv-sidebarnavitem.entry-DglvcCOD.js} +4 -4
  56. package/dist/cjs/nv-sidebarnavsubitem.entry-Dt1jKmC-.js +35 -0
  57. package/dist/cjs/{nv-split.entry-y66NBf88.js → nv-split.entry-mzg2F66T.js} +6 -6
  58. package/dist/cjs/{nv-stack.entry-CXjpkpbW.js → nv-stack.entry-nnvjTrBy.js} +5 -5
  59. package/dist/cjs/{nv-table.entry-quaVnLru.js → nv-table.entry-DkbNgxtI.js} +3 -3
  60. package/dist/cjs/{nv-tableheader.entry-DTBE2XQO.js → nv-tableheader.entry-CRVFTQA-.js} +6 -6
  61. package/dist/cjs/{nv-toggle.entry-CxUwF0pb.js → nv-toggle.entry-oC9TVkr1.js} +9 -9
  62. package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js +67 -0
  63. package/dist/cjs/{nv-togglebuttongroup.entry-UbrE8y7a.js → nv-togglebuttongroup.entry-BYXX5ejg.js} +8 -5
  64. package/dist/cjs/{nv-tooltip.entry-Dq2bkV33.js → nv-tooltip.entry-OJGxfJEh.js} +5 -5
  65. package/dist/cjs/{style-value-types.es-f5d10b79-D0QCM8OB.js → style-value-types.es-xlgmw4x8-B1vLqX9m.js} +6 -3
  66. package/dist/cjs/{v4-a79185f4-2n0dOd_Y.js → v4-BdYh22OP-C1vaJ4yP.js} +1 -1
  67. package/dist/components/NvDatatable/NvDatatable.js +77 -4
  68. package/dist/generated/components.server.js +144 -60
  69. package/dist/providers/NotificationProvider.js +3 -4
  70. package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
  71. package/dist/types/components/NvDatatable/types.d.ts +17 -1
  72. package/package.json +2 -2
  73. package/dist/cjs/_commonjsHelpers-1789f0cf-BJu3ubxk.js +0 -10
  74. package/dist/cjs/inputmask-edcad3c1-B9Omti4z.js +0 -3749
  75. package/dist/cjs/nv-fieldcheckbox.entry-C23dGGX7.js +0 -138
  76. package/dist/cjs/nv-fielddropdown.entry-mnl7mSaK.js +0 -392
  77. package/dist/cjs/nv-fieldnumber.entry-C00Hg70B.js +0 -148
  78. package/dist/cjs/nv-fieldpassword.entry-BLg8tCN0.js +0 -122
  79. package/dist/cjs/nv-fieldtext.entry-Djg8cqOa.js +0 -124
  80. package/dist/cjs/nv-notification-bullet.entry-J8OkAZtU.js +0 -77
  81. package/dist/cjs/nv-sidebarnavsubitem.entry-CkeJfHH4.js +0 -35
  82. package/dist/cjs/nv-togglebutton.entry-w-WEAmE6.js +0 -56
  83. /package/dist/cjs/{clsx-297c1ffe-BtxeOLZW.js → clsx-ChV9xqsO-BtxeOLZW.js} +0 -0
  84. /package/dist/cjs/{constants-69bafca2-DpB_ghPF.js → constants-BReL3Lsa-DpB_ghPF.js} +0 -0
  85. /package/dist/cjs/{timeline.animation-79215cd4-KteJaZPb.js → timeline.animation-CgHCo_Ho-KteJaZPb.js} +0 -0
@@ -1,148 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvFieldnumberCss = "/* TODO: integrate this logic in the proper structure */\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {\n background: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {\n border-color: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {\n background: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {\n border-color: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider[error] .slider-container .track-container .track .track-range {\n background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb {\n border-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:hover {\n border-color: var(--components-slider-track-filled-error);\n outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n outline-offset: calc(var(--focus-outline-offset) * 1);\n background-color: var(--components-slider-handler-background-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:focus {\n border-color: var(--components-slider-track-filled-error);\n outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n outline-offset: calc(var(--focus-outline-offset) * 1);\n background-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {\n background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {\n border-color: var(--components-slider-track-filled-error);\n}\n\nnv-fieldnumber {\n --nv-field-border-default: var(--components-form-field-border-default);\n --nv-field-border-hover: var(--components-form-field-border-hover);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--components-form-field-border-default);\n --nv-field-border-readonly: var(--components-form-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-brand);\n --nv-field-background: var(--components-form-field-background-default);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--form-gap-y);\n box-sizing: border-box;\n max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n --nv-field-border-default: var(--components-form-field-border-readonly);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n --nv-field-border-default: var(--components-form-field-border-error);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n --nv-field-border-default: var(--components-form-field-border-success);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n content: \"*\";\n color: var(--components-form-text-required);\n font-weight: var(--font-weight-high-emphasis);\n}\nnv-fieldnumber label {\n display: flex;\n align-items: center;\n gap: var(--form-label-gap);\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default, 1);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n padding: var(--form-field-padding-y) var(--form-field-padding-x);\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\n line-height: var(--form-field-line-height);\n width: 100%;\n /* Hide Edge built-in password reveal and clear icons */\n width: 100%;\n appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: var(--font-weight-low-emphasis);\n line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n color: var(--nv-field-border-default);\n margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:last-of-type {\n border-top-right-radius: var(--form-field-radius);\n border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n display: flex;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:last-of-type {\n border-top-right-radius: var(--form-field-radius);\n border-bottom-right-radius: var(--form-field-radius);\n}\n@container field-number-input-container (width < 150px) {\n nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n display: none;\n }\n nv-fieldnumber .input-wrapper .input-container .stepper {\n display: none;\n }\n}\nnv-fieldnumber .description {\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: var(--spacing-1);\n color: var(--components-form-text-description-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n display: flex;\n align-items: center;\n align-self: stretch;\n gap: var(--spacing-1);\n color: var(--components-form-text-description-default);\n font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n color: var(--components-form-text-description-error);\n}";
9
- const NvFieldnumberStyle0 = nvFieldnumberCss;
10
-
11
- const NvFieldnumber = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.valueChanged = index.createEvent(this, "valueChanged");
15
- //#endregion DEPRECATED
16
- /****************************************************************************/
17
- //#region PROPERTIES
18
- /**
19
- * Sets the ID for the input element and the for attribute of the associated
20
- * label. If no ID is provided, a random one will be automatically generated
21
- * to ensure unique identification, facilitating proper label association and
22
- * accessibility.
23
- */
24
- this.inputId = v4A79185f4.v4();
25
- /**
26
- * The disabled prop lets you turn off the input field so that users can’t
27
- * type in it. When disabled, the field is grayed out and won’t respond to#
28
- * clicks or touches.
29
- */
30
- this.disabled = false;
31
- /**
32
- * Display the input field’s content without allowing users to change it.
33
- * Users can still click on it, select, and copy the text, but they won’t be
34
- * able to type or delete anything.
35
- */
36
- this.readonly = false;
37
- /**
38
- * Marks the input field as required, ensuring that the user must fill it out
39
- * before submitting the form.
40
- */
41
- this.required = false;
42
- /**
43
- * Alters the input field’s appearance to indicate an error, helping users
44
- * identify fields that need correction.
45
- * @validator error
46
- */
47
- this.error = false;
48
- /**
49
- * Changes the input field’s appearance to indicate successful input or
50
- * validation.
51
- */
52
- this.success = false;
53
- /**
54
- * Define the increment value for the input field. It determines how much the
55
- * value will increase or decrease when the user clicks the stepper buttons.
56
- */
57
- this.step = 1;
58
- /**
59
- * Applies focus to the input field as soon as the component is mounted. This
60
- * is equivalent to setting the native autofocus attribute on an <input>
61
- * element.
62
- */
63
- this.autofocus = false;
64
- /**
65
- * Allows the field to stretch and fill the entire width of its container.
66
- */
67
- this.fluid = false;
68
- //#endregion WATCHERS
69
- /****************************************************************************/
70
- //#region METHODS
71
- this.handleInput = (event) => {
72
- const input = event.target;
73
- if (input.value === '') {
74
- this.value = null;
75
- return;
76
- }
77
- const nextValue = input.valueAsNumber;
78
- if (Number.isNaN(nextValue)) {
79
- return;
80
- }
81
- this.value = nextValue;
82
- };
83
- this.handleInputContainerClick = () => {
84
- this.inputElement.focus();
85
- };
86
- this.handlePlus = () => {
87
- this.inputElement.stepUp();
88
- this.value = Number(this.inputElement.value);
89
- };
90
- this.handleMinus = () => {
91
- this.inputElement.stepDown();
92
- this.value = Number(this.inputElement.value);
93
- };
94
- // prevents text selection when clicking the buttons multiple times
95
- this.preventSelection = (event) => {
96
- event.preventDefault();
97
- };
98
- this.isMinValueReached = () => {
99
- return (this.min !== undefined &&
100
- typeof this.value === 'number' &&
101
- this.value <= this.min);
102
- };
103
- this.isMaxValueReached = () => {
104
- return (this.max !== undefined &&
105
- typeof this.value === 'number' &&
106
- this.value >= this.max);
107
- };
108
- }
109
- //#endregion EVENTS
110
- /****************************************************************************/
111
- //#region WATCHERS
112
- watchValueHandler(newValue) {
113
- const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
114
- if (this.lastEmittedValue === normalized) {
115
- return;
116
- }
117
- this.lastEmittedValue = normalized;
118
- this.valueChanged.emit(normalized);
119
- }
120
- //#endregion METHODS
121
- /****************************************************************************/
122
- //#region LIFECYCLE
123
- componentWillRender() {
124
- if (this.message) {
125
- this.description = this.message;
126
- }
127
- if (this.validation) {
128
- this.errorDescription = this.validation;
129
- this.error = true;
130
- }
131
- }
132
- //#endregion LIFECYCLE
133
- /****************************************************************************/
134
- //#region RENDER
135
- render() {
136
- return (index.h(index.Host, { key: '3afce74f50fe43ac056458d04951d17ddddfeabb' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '57b43fe9c0385d1f2f649a559fc1cf5e99441c75', htmlFor: this.inputId }, index.h("slot", { key: 'dbc3019bc04f370571cca5ef33d67ed22e3c4a6e', name: "label" }, this.label))), index.h("div", { key: 'facbb2b93e2057ec061c7a9c612fb09ee5c7687d', class: "input-wrapper" }, index.h("slot", { key: '0fb079215345c8aa91c5718aaf977f9716c19712', name: "before-input" }), index.h("div", { key: '348402a3a6b4e65d2a2fbf1baa35740fbbb243b6', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '942c7a43a36da7fd4f89826c4e721077987287f6', name: "leading-input" }), index.h("input", { key: 'b8edf56607b26003781bae1eacbc40561917073d', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: 'bc53377f72c4e1c9363c0e6c32c9d9c0ff18cee2', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '74b9e40d6687c8af506a3fcd365889fb98476050', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '9ce0589197135d2baae625e2e34f589077e8a1ea', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '4c04cb39da4f61a66f94044494cf1f02f8175e11', class: "stepper" }, index.h("nv-iconbutton", { key: 'bd5e034e94e16ea10bd56e23498e648e67ba72eb', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'b398efb51f9e6e297a6368424b3ceddf5f2a93a5', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'fbd610d0e620b253b92cd74791a3bbc02aec2e21', name: "after-input" })), (this.description ||
137
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '46740b8b00f374f16559aa7a3310142c7ae5e74c', class: "description" }, index.h("slot", { key: 'ed9c74990d0fbf42f46bf8bb9172ef8b84112ecc', name: "description" }, this.description))), (this.errorDescription ||
138
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'cc9c5076c31cffc91f23db0e14eb4fde1072ecd2', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'aa4953c2c12cb7c7605086d72d435507d11b93c7', name: "error-description" }, this.errorDescription)))));
139
- }
140
- static get formAssociated() { return true; }
141
- get el() { return index.getElement(this); }
142
- static get watchers() { return {
143
- "value": ["watchValueHandler"]
144
- }; }
145
- };
146
- NvFieldnumber.style = NvFieldnumberStyle0;
147
-
148
- exports.nv_fieldnumber = NvFieldnumber;
@@ -1,122 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvFieldpasswordCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
9
- const NvFieldpasswordStyle0 = nvFieldpasswordCss;
10
-
11
- const NvFieldpassword = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.valueChanged = index.createEvent(this, "valueChanged");
15
- /****************************************************************************/
16
- //#region PROPERTIES
17
- /**
18
- * Sets the ID for the input element and the for attribute of the associated
19
- * label. If no ID is provided, a random one will be automatically generated
20
- * to ensure unique identification, facilitating proper label association and
21
- * accessibility.
22
- */
23
- this.inputId = v4A79185f4.v4();
24
- /**
25
- * The disabled prop lets you turn off the input field so that users can’t
26
- * type in it. When disabled, the field is grayed out and won’t respond to#
27
- * clicks or touches.
28
- */
29
- this.disabled = false;
30
- /**
31
- * Display the input field’s content without allowing users to change it.
32
- * Users can still click on it, select, and copy the text, but they won’t be
33
- * able to type or delete anything.
34
- */
35
- this.readonly = false;
36
- /**
37
- * Marks the input field as required, ensuring that the user must fill it out
38
- * before submitting the form.
39
- */
40
- this.required = false;
41
- /**
42
- * Alters the input field’s appearance to indicate an error, helping users
43
- * identify fields that need correction.
44
- * @validator error
45
- */
46
- this.error = false;
47
- /**
48
- * Changes the input field’s appearance to indicate successful input or
49
- * validation.
50
- */
51
- this.success = false;
52
- /**
53
- * Defines the type of the input.
54
- * @default 'text'
55
- */
56
- this.mode = 'text';
57
- /**
58
- * The autocomplete prop helps users fill out the input field faster by
59
- * suggesting entries they’ve used before, like their email or address.
60
- * You can turn it on to make forms more convenient or off to ensure users
61
- * always type in fresh data.
62
- */
63
- this.autocomplete = 'off';
64
- /**
65
- * Hide the button to show/hide the password.
66
- */
67
- this.hidePasswordIcon = false;
68
- /**
69
- * Show/hide the password programmatically.
70
- */
71
- this.showPassword = false;
72
- /**
73
- * Applies focus to the input field as soon as the component is mounted. This
74
- * is equivalent to setting the native autofocus attribute on an <input>
75
- * element.
76
- */
77
- this.autofocus = false;
78
- /**
79
- * Allows the field to stretch and fill the entire width of its container.
80
- */
81
- this.fluid = false;
82
- //#endregion EVENTS
83
- /****************************************************************************/
84
- //#region METHODS
85
- this.handleInputContainerClick = () => {
86
- this.inputElement.focus();
87
- };
88
- this.togglePasswordVisibility = () => {
89
- this.showPasswordState = !this.showPasswordState;
90
- };
91
- this.handleInput = (event) => {
92
- const input = event.target;
93
- this.value = input.value; // Update the input value without worrying about the space
94
- this.valueChanged.emit(input.value);
95
- };
96
- }
97
- handleShowPasswordChange(newValue) {
98
- this.showPasswordState = newValue;
99
- }
100
- //#endregion METHODS
101
- /****************************************************************************/
102
- //#region LIFECYCLE
103
- componentWillLoad() {
104
- this.showPasswordState = this.showPassword;
105
- }
106
- //#endregion LIFECYCLE
107
- /****************************************************************************/
108
- //#region RENDER
109
- render() {
110
- return (index.h(index.Host, { key: '6fa2fc189b9bda9a8b47258c6d9cb99660337ca6' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a64902154abd0cc8b6530652f3b4559a8f27213b', htmlFor: this.inputId }, index.h("slot", { key: 'cd0f5ce29714942ece0f8182975611d8bd9510bf', name: "label" }, this.label))), index.h("div", { key: '5dbc7fbf9dac95299a396ad4edca17473f314e60', class: "input-wrapper" }, index.h("slot", { key: '329e418fab60ee3095cac5d8a57fe99c5d1080a7', name: "before-input" }), index.h("div", { key: 'f719794bd432e5d0d69e6bc21e6c8e142d1d41c9', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'abc7a9f5cddd7dcec3b6a56edecde0ba618bfa4b', name: "leading-input" }), index.h("input", { key: '4e6b9f05c7d71c2f496d8550c6442a65947fe546', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '1d54f3a52cf2824661538abd0e9ed7bf6b56acb8', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '6e0e6f11feb4a2b6d3e6690cfb10b3ac61b3e362', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '8791f51ca77c07eb0086c4dcee11a3988700c894', name: "after-input" })), (this.description ||
111
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '090713c53a32fb09222bdf8777df7e734e2d2487', class: "description" }, index.h("slot", { key: '28e4b9d15e49654d521c294988ff4b6b2ffd89af', name: "description" }, this.description))), (this.errorDescription ||
112
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '25faf9d05d3d1625cf16c488dc14838af551d849', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '6d7d76d881a2a1238d96c4c09a4a9f86d3128c74', name: "error-description" }, this.errorDescription)))));
113
- }
114
- static get formAssociated() { return true; }
115
- get el() { return index.getElement(this); }
116
- static get watchers() { return {
117
- "showPassword": ["handleShowPasswordChange"]
118
- }; }
119
- };
120
- NvFieldpassword.style = NvFieldpasswordStyle0;
121
-
122
- exports.nv_fieldpassword = NvFieldpassword;
@@ -1,124 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvFieldtextCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtext>label{display:flex;align-items:center;gap:var(--form-label-gap);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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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;line-height:var(--form-description-line-height)}nv-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
9
- const NvFieldtextStyle0 = nvFieldtextCss;
10
-
11
- const NvFieldtext = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.valueChanged = index.createEvent(this, "valueChanged");
15
- //#endregion DEPRECATED
16
- /****************************************************************************/
17
- //#region PROPERTIES
18
- /**
19
- * Sets the ID for the input element and the for attribute of the associated
20
- * label. If no ID is provided, a random one will be automatically generated
21
- * to ensure unique identification, facilitating proper label association and
22
- * accessibility.
23
- */
24
- this.inputId = v4A79185f4.v4();
25
- /**
26
- * The type prop lets you specify what kind of information the input field
27
- * should accept. Choose 'text' for general words or sentences, 'tel' for
28
- * phone numbers, or 'email' for email addresses. This makes sure users get
29
- * the right keyboard and validation for what they need to enter.
30
- */
31
- this.type = 'text';
32
- /**
33
- * The disabled prop lets you turn off the input field so that users can’t
34
- * type in it. When disabled, the field is grayed out and won’t respond to
35
- * clicks or touches.
36
- */
37
- this.disabled = false;
38
- /**
39
- * Display the input field’s content without allowing users to change it.
40
- * Users can still click on it, select, and copy the text, but they won’t be
41
- * able to type or delete anything.
42
- */
43
- this.readonly = false;
44
- /**
45
- * Marks the input field as required, ensuring that the user must fill it out
46
- * before submitting the form.
47
- */
48
- this.required = false;
49
- /**
50
- * Alters the input field’s appearance to indicate an error, helping users
51
- * identify fields that need correction.
52
- * @validator error
53
- */
54
- this.error = false;
55
- /**
56
- * Changes the input field’s appearance to indicate successful input or
57
- * validation.
58
- */
59
- this.success = false;
60
- /**
61
- * When used with the email input type, this prop enables the field to accept
62
- * multiple email addresses. Users can enter several addresses, separating
63
- * each one with a comma, allowing the form to handle multiple recipients.
64
- */
65
- this.multiple = false;
66
- /**
67
- * Applies focus to the input field as soon as the component is mounted. This
68
- * is equivalent to setting the native autofocus attribute on an <input>
69
- * element.
70
- */
71
- this.autofocus = false;
72
- /**
73
- * Allows the field to stretch and fill the entire width of its container.
74
- */
75
- this.fluid = false;
76
- //#endregion EVENTS
77
- /****************************************************************************/
78
- //#region METHODS
79
- /**
80
- * Handles the input event on the input element.
81
- * Emits the inputChanged event with the new value.
82
- * @param {Event} event - Event object of the input event.
83
- */
84
- this.handleInput = (event) => {
85
- const input = event.target;
86
- this.value = input.value;
87
- this.valueChanged.emit(input.value);
88
- };
89
- /**
90
- * Handles focus when the input container is clicked.
91
- */
92
- this.handleInputContainerClick = () => {
93
- this.inputElement.focus();
94
- };
95
- }
96
- //#endregion METHODS
97
- /****************************************************************************/
98
- //#region LIFECYCLE
99
- componentWillRender() {
100
- if (this.textInputType) {
101
- this.type = this.textInputType;
102
- }
103
- if (this.message) {
104
- this.description = this.message;
105
- }
106
- if (this.validation) {
107
- this.errorDescription = this.validation;
108
- this.error = true;
109
- }
110
- }
111
- //#endregion LIFECYCLE
112
- /****************************************************************************/
113
- //#region RENDER
114
- render() {
115
- return (index.h(index.Host, { key: '0446a4e7617f7a0dd1d617411f13f7ed9ab457e7' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3fa66b23875eac14db7a52deb0fb8134cda4747b', htmlFor: this.inputId }, index.h("slot", { key: 'd2d145a273fe7790f6551a4f42564c438c659cbf', name: "label" }, this.label))), index.h("div", { key: 'b6ca6d9125460402ac1cfc0ed5f57b6db3214edf', class: "input-wrapper" }, index.h("slot", { key: '33331c013dd5d981136518045a8a460c3ab96070', name: "before-input" }), index.h("div", { key: '405dc274db9b87fd82f50ecf8653414deb7b1206', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4b85c02e7c7f7f655c76cac3997d7b4377c9d4b4', name: "leading-input" }), index.h("input", { key: 'f6e083e97ab21e487bb28190a008469ffa282048', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '019627575fed51776eeb964dafe85c9a0e2e8efe', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '0a2952a550e1a3cdc54a97968d8746914ce492d8', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '874f24d0c3522b8d6a2f65069b68d04dba8fae61', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '38f43d5e912df5adaf8587b8efb9d44cccadec50', name: "after-input" })), (this.description ||
116
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c681d56939dc0068fc12842699e74f87d9446fe7', class: "description" }, index.h("slot", { key: '6b2f715fb44a46efbc3cfb98709173804472499e', name: "description" }, this.description))), (this.errorDescription ||
117
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f5354afc7bfacec7f7ff58e331e9011bb43da399', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e127f81bf4a9205c94a461fd1555c07783b489a3', name: "error-description" }, this.errorDescription)))));
118
- }
119
- static get formAssociated() { return true; }
120
- get el() { return index.getElement(this); }
121
- };
122
- NvFieldtext.style = NvFieldtextStyle0;
123
-
124
- exports.nv_fieldtext = NvFieldtext;
@@ -1,77 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- require('react');
5
- require('react-dom');
6
-
7
- const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;position:relative;}nv-notification-bullet .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-primary-notification-bullet-size);max-width:var(--sidebar-primary-notification-bullet-size);min-height:var(--sidebar-primary-notification-bullet-size);max-height:var(--sidebar-primary-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-primary-notification-bullet-font-size);font-weight:var(--sidebar-primary-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-error-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{min-width:var(--sidebar-primary-notification-bullet-size-reduced);max-width:var(--sidebar-primary-notification-bullet-size-reduced);min-height:var(--sidebar-primary-notification-bullet-size-reduced);max-height:var(--sidebar-primary-notification-bullet-size-reduced);padding:0;font-size:0;}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}";
8
- const NvNotificationBulletStyle0 = nvNotificationBulletCss;
9
-
10
- const NvNotificationBullet = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * Determines the size of the notification bullet.
15
- * - default: Normal size with text visible
16
- * - reduced: Smaller size, text hidden (just a dot)
17
- */
18
- this.size = 'default';
19
- /**
20
- * Allows to add a border to add contrast on background.
21
- */
22
- this.contrastingBorder = false;
23
- }
24
- //#endregion PROPERTIES
25
- /****************************************************************************/
26
- //#region METHODS
27
- getIntention() {
28
- if (this.intention) {
29
- return this.intention;
30
- }
31
- // Inherit from parent nv-sidebar
32
- const sidebar = this.el.closest('nv-sidebar');
33
- if (sidebar) {
34
- const sidebarIntention = sidebar.getAttribute('notification-intention');
35
- if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
36
- return sidebarIntention;
37
- }
38
- }
39
- return 'brand'; // Default fallback
40
- }
41
- getEmphasis() {
42
- if (this.emphasis) {
43
- return this.emphasis;
44
- }
45
- // Inherit from parent nv-sidebar
46
- const sidebar = this.el.closest('nv-sidebar');
47
- if (sidebar) {
48
- const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
49
- if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
50
- return sidebarEmphasis;
51
- }
52
- }
53
- return 'high'; // Default fallback
54
- }
55
- //#region RENDER
56
- render() {
57
- var _a;
58
- const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
59
- const displayText = displayCount > 99 ? '99+' : String(displayCount);
60
- if (displayCount <= 0) {
61
- return null;
62
- }
63
- const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
64
- const intention = this.getIntention();
65
- const emphasis = this.getEmphasis();
66
- const intentionClass = `nv-notification-bullet-${intention}`;
67
- const emphasisClass = `nv-notification-bullet-${emphasis}`;
68
- const borderClass = this.contrastingBorder
69
- ? 'nv-notification-bullet-with-border'
70
- : '';
71
- return (index.h(index.Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, index.h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
72
- }
73
- get el() { return index.getElement(this); }
74
- };
75
- NvNotificationBullet.style = NvNotificationBulletStyle0;
76
-
77
- exports.nv_notification_bullet = NvNotificationBullet;
@@ -1,35 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- require('react');
5
- require('react-dom');
6
-
7
- const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--list-dropdown-sub-item-padding-left);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-primary-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-orange-600);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}";
8
- const NvSidebarnavsubitemStyle0 = nvSidebarnavsubitemCss;
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: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), index.h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
31
- }
32
- };
33
- NvSidebarnavsubitem.style = NvSidebarnavsubitemStyle0;
34
-
35
- exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;
@@ -1,56 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CEKdYnmK.js');
4
- require('react');
5
- require('react-dom');
6
-
7
- 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);padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}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);padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}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);padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}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);padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}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)}";
8
- const NvTogglebuttonStyle0 = nvTogglebuttonCss;
9
-
10
- const NvTogglebutton = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.toggled = index.createEvent(this, "toggled");
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 EVENTS
48
- /****************************************************************************/
49
- //#region RENDER
50
- render() {
51
- return (index.h(index.Host, { key: '35199476bd724fe4a6b4dde51b7822bed5c374ff', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '864cf0f2550b66b0b34c4f779086d4b4847732e6' })));
52
- }
53
- };
54
- NvTogglebutton.style = NvTogglebuttonStyle0;
55
-
56
- exports.nv_togglebutton = NvTogglebutton;