@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.45

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 (81) hide show
  1. package/dist/cjs/{index-CinzsZ8D.js → index-S09Gr7Tw.js} +180 -218
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/{nv-alert.entry-BVY_rxey.js → nv-alert.entry-DH8Qd2s2.js} +1 -1
  4. package/dist/cjs/{nv-avatar.entry-pREKtiv2.js → nv-avatar.entry-B3-elLZC.js} +1 -1
  5. package/dist/cjs/{nv-badge_2.entry-wDuiCwys.js → nv-badge_2.entry-D15EDzX0.js} +2 -2
  6. package/dist/cjs/{nv-base.entry-DwtTXK_n.js → nv-base.entry-D-_RUZTX.js} +1 -1
  7. package/dist/cjs/{nv-breadcrumb.entry-B0hIeE83.js → nv-breadcrumb.entry-DG49Nj1L.js} +2 -2
  8. package/dist/cjs/{nv-breadcrumbs.entry-Cq0LsIFs.js → nv-breadcrumbs.entry-BqJO5pbN.js} +1 -1
  9. package/dist/cjs/{nv-button.entry-DaSGnB1L.js → nv-button.entry-CN9kB98T.js} +6 -4
  10. package/dist/cjs/{nv-calendar.entry-BC6NDsVl.js → nv-calendar.entry-CMEgSU64.js} +6 -6
  11. package/dist/cjs/{nv-col.entry-DNUY559i.js → nv-col.entry-wcZ9HHAb.js} +1 -1
  12. package/dist/cjs/{nv-datagrid.entry-Cp8RCSEv.js → nv-datagrid.entry-GCLeN2qT.js} +32 -5
  13. package/dist/cjs/{nv-datagridcolumn.entry-CR9_1fsZ.js → nv-datagridcolumn.entry-lgIz71UU.js} +1 -1
  14. package/dist/cjs/{nv-dialog.entry-BjTJ5FFL.js → nv-dialog.entry-DfY0TaYp.js} +17 -13
  15. package/dist/cjs/{nv-dialogfooter_2.entry-DJkKzEgO.js → nv-dialogfooter_2.entry-OByWsulH.js} +6 -6
  16. package/dist/cjs/{nv-fieldcheckbox.entry-C0DmeqXD.js → nv-fieldcheckbox.entry-Bqpe9BK3.js} +2 -2
  17. package/dist/cjs/{nv-fielddate.entry-DRX2mfZL.js → nv-fielddate.entry-DJePv6tR.js} +1 -1
  18. package/dist/cjs/{nv-fielddaterange.entry-ka3JiDvT.js → nv-fielddaterange.entry--YC750sX.js} +1 -1
  19. package/dist/cjs/{nv-fielddropdown.entry-DUAKFYgw.js → nv-fielddropdown.entry-BPlTlc_S.js} +45 -75
  20. package/dist/cjs/{nv-fielddropdownitem.entry-BsbvJERH.js → nv-fielddropdownitem.entry-zwoGySum.js} +7 -9
  21. package/dist/cjs/{nv-fieldmultiselect.entry-DFr-ZICs.js → nv-fieldmultiselect.entry-Bg_v0LUF.js} +7 -49
  22. package/dist/cjs/{nv-fieldnumber.entry-ezdDvJh_.js → nv-fieldnumber.entry-BLNaq7yr.js} +1 -1
  23. package/dist/cjs/{nv-fieldpassword.entry-D4a8SnGr.js → nv-fieldpassword.entry-iSEdS5R8.js} +1 -1
  24. package/dist/cjs/{nv-fieldradio.entry-Co7WX2vI.js → nv-fieldradio.entry-Dov4vZkh.js} +1 -1
  25. package/dist/cjs/{nv-fieldselect.entry-sTbv_flF.js → nv-fieldselect.entry-NmpesarX.js} +1 -1
  26. package/dist/cjs/{nv-fieldtext.entry-DRPCH6Sf.js → nv-fieldtext.entry-r6oQajRS.js} +1 -1
  27. package/dist/cjs/{nv-fieldtextarea.entry-BwJCUiVW.js → nv-fieldtextarea.entry-CJ2yQkfi.js} +1 -1
  28. package/dist/cjs/{nv-fieldtime.entry-uU-IET2k.js → nv-fieldtime.entry-Bxoj6N53.js} +1 -1
  29. package/dist/cjs/nv-icon.entry-CWKRt8F0.js +79 -0
  30. package/dist/cjs/{nv-iconbutton_2.entry-Dx4usGkY.js → nv-iconbutton_2.entry-CnbscpNn.js} +1 -1
  31. package/dist/cjs/{nv-menu.entry-D3qvf_0H.js → nv-menu.entry-wC7oSruP.js} +1 -1
  32. package/dist/cjs/{nv-menuitem.entry-3t6TixM7.js → nv-menuitem.entry-BVSa1vrS.js} +1 -1
  33. package/dist/cjs/{nv-popover.entry-Bv6kuTK_.js → nv-popover.entry-ChP1we3l.js} +12 -10
  34. package/dist/cjs/{nv-row.entry-BPK1Li7w.js → nv-row.entry-D6FeFpzG.js} +1 -1
  35. package/dist/cjs/{nv-stack.entry-ByaO-0TJ.js → nv-stack.entry-zjJmztkO.js} +1 -1
  36. package/dist/cjs/{nv-table.entry-C7Hd57Iq.js → nv-table.entry-CGX0jsR3.js} +2 -2
  37. package/dist/cjs/{nv-tablecolumn.entry-BDCw_45v.js → nv-tablecolumn.entry-Cwdmo_RY.js} +1 -1
  38. package/dist/cjs/{nv-toggle.entry-BTqGH_H0.js → nv-toggle.entry-BvToMkI2.js} +2 -2
  39. package/dist/cjs/{nv-tooltip.entry-BDZfrLHv.js → nv-tooltip.entry-DZ7_lB-p.js} +2 -2
  40. package/dist/generated/components.js +3 -3
  41. package/dist/types/generated/components.d.ts +3 -5
  42. package/package.json +1 -1
  43. package/dist/cjs/index-C8UfzrMI.js +0 -26405
  44. package/dist/cjs/nv-alert.entry-8esWDUyU.js +0 -173
  45. package/dist/cjs/nv-avatar.entry-CO6bt4k6.js +0 -67
  46. package/dist/cjs/nv-badge_2.entry-xfXsesV0.js +0 -195
  47. package/dist/cjs/nv-base.entry-BO-6krwg.js +0 -71
  48. package/dist/cjs/nv-breadcrumb.entry-DTwjCmMI.js +0 -45
  49. package/dist/cjs/nv-breadcrumbs.entry-jn5hRjpQ.js +0 -20
  50. package/dist/cjs/nv-button.entry-DxzA6-My.js +0 -162
  51. package/dist/cjs/nv-calendar.entry-DKz-iBnp.js +0 -1036
  52. package/dist/cjs/nv-col.entry-X7jkNThH.js +0 -37
  53. package/dist/cjs/nv-datagrid.entry-DL-Fyo4l.js +0 -3671
  54. package/dist/cjs/nv-datagridcolumn.entry-CyTG5E7M.js +0 -18
  55. package/dist/cjs/nv-dialog.entry-Do_uALC6.js +0 -784
  56. package/dist/cjs/nv-dialogfooter_2.entry-DJ8qS9q6.js +0 -134
  57. package/dist/cjs/nv-fieldcheckbox.entry-DoGQX-5D.js +0 -137
  58. package/dist/cjs/nv-fielddate.entry-D-PjbYaA.js +0 -278
  59. package/dist/cjs/nv-fielddaterange.entry-BrC5jKLp.js +0 -355
  60. package/dist/cjs/nv-fielddropdown.entry-MsUR1kVe.js +0 -391
  61. package/dist/cjs/nv-fielddropdownitem.entry-DRM-Zljt.js +0 -70
  62. package/dist/cjs/nv-fieldmultiselect.entry-Dr8FfT_W.js +0 -1060
  63. package/dist/cjs/nv-fieldnumber.entry-DZsM1vmO.js +0 -126
  64. package/dist/cjs/nv-fieldpassword.entry-Biw__M2W.js +0 -115
  65. package/dist/cjs/nv-fieldradio.entry-ZL7KgEZ7.js +0 -102
  66. package/dist/cjs/nv-fieldselect.entry-D6eRsM9T.js +0 -365
  67. package/dist/cjs/nv-fieldtext.entry-DKdxC2cG.js +0 -119
  68. package/dist/cjs/nv-fieldtextarea.entry-Dc_TGlmI.js +0 -194
  69. package/dist/cjs/nv-fieldtime.entry-CXRtpWt1.js +0 -1011
  70. package/dist/cjs/nv-icon.entry-iipuvT3D.js +0 -79
  71. package/dist/cjs/nv-icon.entry-xltjoSa2.js +0 -79
  72. package/dist/cjs/nv-iconbutton_2.entry-BsXvYbCi.js +0 -163
  73. package/dist/cjs/nv-menu.entry-DFEYw_KZ.js +0 -227
  74. package/dist/cjs/nv-menuitem.entry-BeTXOtir.js +0 -58
  75. package/dist/cjs/nv-popover.entry-Zt25YeAv.js +0 -1960
  76. package/dist/cjs/nv-row.entry-Bwzlub3i.js +0 -21
  77. package/dist/cjs/nv-stack.entry-bhess4lQ.js +0 -30
  78. package/dist/cjs/nv-table.entry-D3U4dFcw.js +0 -338
  79. package/dist/cjs/nv-tablecolumn.entry-BzwWPlLf.js +0 -18
  80. package/dist/cjs/nv-toggle.entry-DXpNGkbz.js +0 -79
  81. package/dist/cjs/nv-tooltip.entry-CvCZZV88.js +0 -44
@@ -1,126 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
- require('react');
6
-
7
- const nvFieldnumberCss = "nv-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}\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);\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: 700;\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: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\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: 500;\n line-height: var(--form-field-line-height);\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: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\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 .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}\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 align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n color: var(--components-form-text-description-error);\n}";
8
- const NvFieldnumberStyle0 = nvFieldnumberCss;
9
-
10
- const NvFieldnumber = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.valueChanged = index.createEvent(this, "valueChanged");
14
- //#endregion DEPRECATED
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
- * Define the increment value for the input field. It determines how much the
54
- * value will increase or decrease when the user clicks the stepper buttons.
55
- */
56
- this.step = 1;
57
- /**
58
- * Applies focus to the input field as soon as the component is mounted. This
59
- * is equivalent to setting the native autofocus attribute on an <input>
60
- * element.
61
- */
62
- this.autofocus = false;
63
- //#endregion WATCHERS
64
- /****************************************************************************/
65
- //#region METHODS
66
- this.handleInput = (event) => {
67
- const input = event.target;
68
- this.value = Number(input.value);
69
- };
70
- this.handleInputContainerClick = () => {
71
- this.inputElement.focus();
72
- };
73
- this.handlePlus = () => {
74
- this.inputElement.stepUp();
75
- this.value = Number(this.inputElement.value);
76
- };
77
- this.handleMinus = () => {
78
- this.inputElement.stepDown();
79
- this.value = Number(this.inputElement.value);
80
- };
81
- // prevents text selection when clicking the buttons multiple times
82
- this.preventSelection = (event) => {
83
- event.preventDefault();
84
- };
85
- this.isMinValueReached = () => {
86
- return this.min !== undefined && this.value <= this.min;
87
- };
88
- this.isMaxValueReached = () => {
89
- return this.max !== undefined && this.value >= this.max;
90
- };
91
- }
92
- //#endregion EVENTS
93
- /****************************************************************************/
94
- //#region WATCHERS
95
- watchValueHandler(newValue) {
96
- this.valueChanged.emit(newValue);
97
- }
98
- //#endregion METHODS
99
- /****************************************************************************/
100
- //#region LIFECYCLE
101
- componentWillRender() {
102
- if (this.message) {
103
- this.description = this.message;
104
- }
105
- if (this.validation) {
106
- this.errorDescription = this.validation;
107
- this.error = true;
108
- }
109
- }
110
- //#endregion LIFECYCLE
111
- /****************************************************************************/
112
- //#region RENDER
113
- render() {
114
- return (index.h(index.Host, { key: 'dfdd78ef36068cdf6316c28815c4f538a31948b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fd62123cd36c895872d8f39f53279e6b30aebbb6', htmlFor: this.inputId }, index.h("slot", { key: '1ae8e36c92499784727d5475ffba2e193d809bf6', name: "label" }, this.label))), index.h("div", { key: 'fa18e6e52926dc9f144ccc61194505509e31bb52', class: "input-wrapper" }, index.h("slot", { key: '335e98f56a3b09ad4877584a4f23f4677728bf3e', name: "before-input" }), index.h("div", { key: '0628ee3bb756af0dc17f0b0c1f7e7feca5cc0481', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '680d7c258d11bc53eb2162ff9e76399b9b773e6f', name: "leading-input" }), index.h("input", { key: '37c5e0269d38fba60f594ae6893565d65df9b573', 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: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: 'ba55c53fb229d076aa964e91bb43eb451a7d72bf', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '01801f320e78c2025858cca5f06b8d622fcc58ed', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '6f3cae85317a5d6ea3ea5695b9c8a3c876b788fd', class: "stepper" }, index.h("nv-iconbutton", { key: '8e75feeae477728964e8c291d698d8bd0b1de259', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), index.h("nv-iconbutton", { key: 'd09b83e0474cb5b8f7a7c3cc5c453833def3aa38', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), index.h("slot", { key: '16a89e311259c83645dbceab7f682c778dc8eded', name: "after-input" })), (this.description ||
115
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '58dc574b42cc4697dff78301809c24dafbcabfe2', class: "description" }, index.h("slot", { key: '6d402e360d93d464c4adf16d7974029b386fef3d', name: "description" }, this.description))), (this.errorDescription ||
116
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1a6de49980c737b206ace729a43fb25cb7420960', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a84eecf8e46571f4c0f6ed757e89477c1f77c6d2', name: "error-description" }, this.errorDescription)))));
117
- }
118
- static get formAssociated() { return true; }
119
- get el() { return index.getElement(this); }
120
- static get watchers() { return {
121
- "value": ["watchValueHandler"]
122
- }; }
123
- };
124
- NvFieldnumber.style = NvFieldnumberStyle0;
125
-
126
- exports.nv_fieldnumber = NvFieldnumber;
@@ -1,115 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
- require('react');
6
-
7
- const nvFieldpasswordCss = "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}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)}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:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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:500;line-height:var(--form-field-line-height)}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}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-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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)}";
8
- const NvFieldpasswordStyle0 = nvFieldpasswordCss;
9
-
10
- const NvFieldpassword = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.valueChanged = index.createEvent(this, "valueChanged");
14
- /****************************************************************************/
15
- //#region PROPERTIES
16
- /**
17
- * Sets the ID for the input element and the for attribute of the associated
18
- * label. If no ID is provided, a random one will be automatically generated
19
- * to ensure unique identification, facilitating proper label association and
20
- * accessibility.
21
- */
22
- this.inputId = v4A79185f4.v4();
23
- /**
24
- * The disabled prop lets you turn off the input field so that users can’t
25
- * type in it. When disabled, the field is grayed out and won’t respond to#
26
- * clicks or touches.
27
- */
28
- this.disabled = false;
29
- /**
30
- * Display the input field’s content without allowing users to change it.
31
- * Users can still click on it, select, and copy the text, but they won’t be
32
- * able to type or delete anything.
33
- */
34
- this.readonly = false;
35
- /**
36
- * Marks the input field as required, ensuring that the user must fill it out
37
- * before submitting the form.
38
- */
39
- this.required = false;
40
- /**
41
- * Alters the input field’s appearance to indicate an error, helping users
42
- * identify fields that need correction.
43
- * @validator error
44
- */
45
- this.error = false;
46
- /**
47
- * Changes the input field’s appearance to indicate successful input or
48
- * validation.
49
- */
50
- this.success = false;
51
- /**
52
- * Defines the type of the input.
53
- * @default 'text'
54
- */
55
- this.mode = 'text';
56
- /**
57
- * The autocomplete prop helps users fill out the input field faster by
58
- * suggesting entries they’ve used before, like their email or address.
59
- * You can turn it on to make forms more convenient or off to ensure users
60
- * always type in fresh data.
61
- */
62
- this.autocomplete = 'off';
63
- /**
64
- * Hide the button to show/hide the password.
65
- */
66
- this.hidePasswordIcon = false;
67
- /**
68
- * Show/hide the password programmatically.
69
- */
70
- this.showPassword = false;
71
- /**
72
- * Defines whether the password is visible or not.
73
- */
74
- this.showPasswordState = this.showPassword;
75
- /**
76
- * Applies focus to the input field as soon as the component is mounted. This
77
- * is equivalent to setting the native autofocus attribute on an <input>
78
- * element.
79
- */
80
- this.autofocus = false;
81
- //#endregion EVENTS
82
- /****************************************************************************/
83
- //#region METHODS
84
- this.handleInputContainerClick = () => {
85
- this.inputElement.focus();
86
- };
87
- this.togglePasswordVisibility = () => {
88
- this.showPasswordState = !this.showPasswordState;
89
- };
90
- this.handleInput = (event) => {
91
- const input = event.target;
92
- this.value = input.value; // Update the input value without worrying about the space
93
- this.valueChanged.emit(input.value);
94
- };
95
- }
96
- handleShowPasswordChange(newValue) {
97
- this.showPasswordState = newValue;
98
- }
99
- //#endregion METHODS
100
- /****************************************************************************/
101
- //#region RENDER
102
- render() {
103
- return (index.h(index.Host, { key: '4966851ed68fd40af1bfda3825d48d810965a8b8' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5e51513f663398fc689b64d96e726c89609195e2', htmlFor: this.inputId }, index.h("slot", { key: '7d732e85da3954067817feb0be90a1902759708d', name: "label" }, this.label))), index.h("div", { key: '7fc912a33291fc383d74c4e198537ba58c6f4222', class: "input-wrapper" }, index.h("slot", { key: 'bd4def1204de4da3af726044395bbc937c22f3a2', name: "before-input" }), index.h("div", { key: 'b48f6eadf79ba651773057ed6f6ec707102e3c62', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '97ece55b66fbd4e8be97ef5c518fc2a702a8e221', name: "leading-input" }), index.h("input", { key: '134862521f0ecea24fa4d75574b3a41f4e68a1e9', 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: '43f4ba351921343d77b814b5b2886ce3200d6f78', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: 'dd2a09734a307475581123d4fb52327a9b30e69c', 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: 'e0a2538c807d7598ca4c803b3338e9e0d294cfa6', name: "after-input" })), (this.description ||
104
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '69795b0f473093d5fe56b4b17bee03a8b7be84c6', class: "description" }, index.h("slot", { key: '2a5c580c18783088f5cdb1d6b594ee7aa898bc54', name: "description" }, this.description))), (this.errorDescription ||
105
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '828564de575b0d874c7cdf339736caecc86fa786', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ee5d527d5b31a3c8fc347b71f59501d7560fe1f2', name: "error-description" }, this.errorDescription)))));
106
- }
107
- static get formAssociated() { return true; }
108
- get el() { return index.getElement(this); }
109
- static get watchers() { return {
110
- "showPassword": ["handleShowPasswordChange"]
111
- }; }
112
- };
113
- NvFieldpassword.style = NvFieldpasswordStyle0;
114
-
115
- exports.nv_fieldpassword = NvFieldpassword;
@@ -1,102 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
5
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
6
- require('react');
7
-
8
- const nvFieldradioCss = "nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:\"\";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
9
- const NvFieldradioStyle0 = nvFieldradioCss;
10
-
11
- const NvFieldradio = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.checkedChanged = index.createEvent(this, "checkedChanged");
15
- /**
16
- * Set the label placement to before the input
17
- * @deprecated use labelPlacement instead.
18
- */
19
- this.labelBefore = false;
20
- //#endregion DEPRECATED
21
- /****************************************************************************/
22
- //#region PROPERTIES
23
- /**
24
- * Sets the ID for the radio button’s input element and the for attribute of
25
- * the associated label. If no ID is provided, a random one will be
26
- * automatically generated to ensure unique identification, facilitating
27
- * proper label association and accessibility.
28
- */
29
- this.inputId = v4A79185f4.v4();
30
- /**
31
- * Highlight the radio button with error styling. It helps users quickly
32
- * identify which option needs attention, improving their form-filling
33
- * experience by making issues more visible.
34
- * @validator error
35
- */
36
- this.error = false;
37
- /**
38
- * Controls whether the radio button is selected.
39
- */
40
- this.checked = false;
41
- /**
42
- * Disables the radio button, making it un-selectable.
43
- */
44
- this.disabled = false;
45
- /**
46
- * Applies focus to the input field as soon as the component is mounted. This
47
- * is equivalent to setting the native autofocus attribute on an <input>
48
- * element.
49
- */
50
- this.autofocus = false;
51
- }
52
- componentWillRender() {
53
- if (this.message) {
54
- this.description = this.message;
55
- }
56
- if (this.labelBefore) {
57
- this.labelPlacement = 'before';
58
- }
59
- }
60
- //#endregion EVENTS
61
- /****************************************************************************/
62
- //#region WATCHERS
63
- /**
64
- * Watches for changes to the checked state and emits the new value.
65
- * @param {boolean} checked - The new value of the checked state.
66
- */
67
- handleCheckedChange(checked) {
68
- this.checkedChanged.emit(checked);
69
- }
70
- /**
71
- * Listens for the change event on the radio button input element and controls
72
- * the checked state of the host elements.
73
- * @param {Event} event - The change event.
74
- */
75
- handleChange(event) {
76
- const target = event.target;
77
- if ((target === null || target === void 0 ? void 0 : target.type) === 'radio') {
78
- Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
79
- if (element.name === this.name) {
80
- element.checked = false;
81
- }
82
- });
83
- this.checked = target.checked;
84
- }
85
- }
86
- //#endregion WATCHERS
87
- /****************************************************************************/
88
- //#region RENDER
89
- render() {
90
- return (index.h(index.Host, { key: '04e417ca606c79a00280c1c14ae7ea69dec4e6ab', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '6fe5601b5ca59cab1362fad80191a7819568f2f4', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '4efce6c30743730f21457d33da6356bd0d9ebac7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3bb1be0f170d101c6ca29888841a3ad5efb0db24', htmlFor: this.inputId }, index.h("slot", { key: 'f1e824ce858558ab5f817d2108d13e86fa64eb15', name: "label" }, this.label))), (this.description ||
91
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '050efa495f2f6b3e477875efb58b7b2c30f09776', class: "description" }, index.h("slot", { key: 'd74ec8eb70e38702879d7483010bae0f0706c84b', name: "description" }, this.description))), (this.errorDescription ||
92
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e1cef9aceb3f0afa8b9b4bff0a1f1d7db0d674d0', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '835a8e7e3efd66d060215062ef86faf0e25c0657', name: "error-description" }, this.errorDescription))))));
93
- }
94
- static get formAssociated() { return true; }
95
- get el() { return index.getElement(this); }
96
- static get watchers() { return {
97
- "checked": ["handleCheckedChange"]
98
- }; }
99
- };
100
- NvFieldradio.style = NvFieldradioStyle0;
101
-
102
- exports.nv_fieldradio = NvFieldradio;