@nova-design-system/nova-react 3.2.0 → 3.3.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.
- package/dist/cjs/{index-B2jv2KXv.js → index-BlWxX8x6.js} +824 -894
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-pxBJfmIm.js → nv-alert.entry-BLGSitrm.js} +7 -7
- package/dist/cjs/{nv-avatar.entry-CHtVctSK.js → nv-avatar.entry-CRcLMbEx.js} +7 -7
- package/dist/cjs/{nv-badge_2.entry-BO88KO1O.js → nv-badge_2.entry-BtDAr7_d.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-7azRtyl5.js → nv-breadcrumb.entry-PVDZoF9i.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-DfZVMKpY.js → nv-breadcrumbs.entry-BY169s5F.js} +1 -1
- package/dist/cjs/{nv-button.entry-DW9SblsY.js → nv-button.entry-BpxpxFJP.js} +7 -7
- package/dist/cjs/{nv-calendar.entry-BeayRRor.js → nv-calendar.entry-BobyjFdK.js} +376 -143
- package/dist/cjs/{nv-col.entry-C6oEkSbI.js → nv-col.entry-B4BJXJw-.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-xhQP6JJP.js → nv-datagrid.entry-D5UVDiYl.js} +6 -6
- package/dist/cjs/{nv-datagridcolumn.entry-CjYmo4fM.js → nv-datagridcolumn.entry-dmpcmCIT.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-mxETaZbc.js → nv-dialog.entry-BYovzkco.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-DnLg2DHy.js → nv-dialogfooter_2.entry-C9dhLKRM.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-Be9__i15.js → nv-fieldcheckbox.entry-BvFqY2dM.js} +1 -1
- package/dist/cjs/nv-fielddate.entry-CSpAcEXW.js +303 -0
- package/dist/cjs/nv-fielddaterange.entry-C14o96dd.js +439 -0
- package/dist/cjs/{nv-fielddropdown.entry-BPwviyCp.js → nv-fielddropdown.entry-C3VzNRhh.js} +2 -2
- package/dist/cjs/{nv-fielddropdownitem.entry-BGuUR9KP.js → nv-fielddropdownitem.entry-D4G4Ytus.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-Lrxr1gsi.js → nv-fieldmultiselect.entry-Ci43ZvzC.js} +2 -2
- package/dist/cjs/nv-fieldnumber.entry-nvUi-64H.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-C2uqwDah.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-CDu8xs0p.js → nv-fieldradio.entry-DL2GdKqO.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-NEdv8bQK.js → nv-fieldselect.entry-D4AIRE24.js} +2 -2
- package/dist/cjs/{nv-fieldslider.entry-51gF9XPz.js → nv-fieldslider.entry-BNge4J69.js} +25 -20
- package/dist/cjs/nv-fieldtext.entry-BI-fdkdX.js +123 -0
- package/dist/cjs/{nv-fieldtextarea.entry-D44HbsVQ.js → nv-fieldtextarea.entry-Ct0g9Qtb.js} +2 -2
- package/dist/cjs/{nv-fieldtime.entry-MbaWbVtc.js → nv-fieldtime.entry-CmO96Py1.js} +61 -61
- package/dist/cjs/{nv-icon.entry-BSSHr-ud.js → nv-icon.entry-TepdQ1jA.js} +7 -7
- package/dist/cjs/{nv-iconbutton_2.entry-DMaO-JWz.js → nv-iconbutton_2.entry-B7Xyut9H.js} +1 -1
- package/dist/cjs/{nv-menu.entry-D5_lj9XB.js → nv-menu.entry-DHrRi_37.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-fhnYI91K.js → nv-menuitem.entry-B_D1pSYa.js} +1 -1
- package/dist/cjs/{nv-popover.entry-CYqBaVbr.js → nv-popover.entry-DyQPEQ4I.js} +1 -1
- package/dist/cjs/{nv-row.entry-BUheLufV.js → nv-row.entry-CDTv7ikK.js} +1 -1
- package/dist/cjs/{nv-stack.entry-DNPce51E.js → nv-stack.entry-A78c6BVf.js} +1 -1
- package/dist/cjs/{nv-table.entry-DXQM8l3t.js → nv-table.entry-DkwcfdJM.js} +1 -1
- package/dist/cjs/{nv-tablecolumn.entry-DROQK_0c.js → nv-tablecolumn.entry-C8VNSpDf.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-fMzTrdte.js → nv-toggle.entry-vxSyUDKZ.js} +1 -1
- package/dist/cjs/{nv-tooltip.entry-yB2Ek1Cz.js → nv-tooltip.entry-BQKXRp4d.js} +1 -1
- package/dist/generated/components.js +7 -3
- package/dist/types/generated/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/cjs/nv-fielddate.entry-BlNily-X.js +0 -269
- package/dist/cjs/nv-fielddaterange.entry-CycpKoJd.js +0 -408
- package/dist/cjs/nv-fieldnumber.entry-B1VySoWj.js +0 -130
- package/dist/cjs/nv-fieldpassword.entry-D7Qlx7Bh.js +0 -121
- package/dist/cjs/nv-fieldtext.entry-Bug9zMgo.js +0 -123
- /package/dist/cjs/{constants-b97e736d-BzFAKCkR.js → constants-4faa1fae-BzFAKCkR.js} +0 -0
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
|
+
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
|
+
require('react');
|
|
6
|
+
|
|
7
|
+
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: 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 /* 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: \"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[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 .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 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: \"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 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: \"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
|
+
/**
|
|
64
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
65
|
+
*/
|
|
66
|
+
this.fluid = false;
|
|
67
|
+
//#endregion WATCHERS
|
|
68
|
+
/****************************************************************************/
|
|
69
|
+
//#region METHODS
|
|
70
|
+
this.handleInput = (event) => {
|
|
71
|
+
const input = event.target;
|
|
72
|
+
this.value = Number(input.value);
|
|
73
|
+
};
|
|
74
|
+
this.handleInputContainerClick = () => {
|
|
75
|
+
this.inputElement.focus();
|
|
76
|
+
};
|
|
77
|
+
this.handlePlus = () => {
|
|
78
|
+
this.inputElement.stepUp();
|
|
79
|
+
this.value = Number(this.inputElement.value);
|
|
80
|
+
};
|
|
81
|
+
this.handleMinus = () => {
|
|
82
|
+
this.inputElement.stepDown();
|
|
83
|
+
this.value = Number(this.inputElement.value);
|
|
84
|
+
};
|
|
85
|
+
// prevents text selection when clicking the buttons multiple times
|
|
86
|
+
this.preventSelection = (event) => {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
};
|
|
89
|
+
this.isMinValueReached = () => {
|
|
90
|
+
return this.min !== undefined && this.value <= this.min;
|
|
91
|
+
};
|
|
92
|
+
this.isMaxValueReached = () => {
|
|
93
|
+
return this.max !== undefined && this.value >= this.max;
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
//#endregion EVENTS
|
|
97
|
+
/****************************************************************************/
|
|
98
|
+
//#region WATCHERS
|
|
99
|
+
watchValueHandler(newValue) {
|
|
100
|
+
this.valueChanged.emit(newValue);
|
|
101
|
+
}
|
|
102
|
+
//#endregion METHODS
|
|
103
|
+
/****************************************************************************/
|
|
104
|
+
//#region LIFECYCLE
|
|
105
|
+
componentWillRender() {
|
|
106
|
+
if (this.message) {
|
|
107
|
+
this.description = this.message;
|
|
108
|
+
}
|
|
109
|
+
if (this.validation) {
|
|
110
|
+
this.errorDescription = this.validation;
|
|
111
|
+
this.error = true;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
//#endregion LIFECYCLE
|
|
115
|
+
/****************************************************************************/
|
|
116
|
+
//#region RENDER
|
|
117
|
+
render() {
|
|
118
|
+
return (index.h(index.Host, { key: 'ff097af3b023ea85fe549331219fd147aaf5d587' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fbb5a460baf515c9f41068126db0dfc80f3aba64', htmlFor: this.inputId }, index.h("slot", { key: '27963c9e2f61213b1897e117a68a2cb0d56e7d0f', name: "label" }, this.label))), index.h("div", { key: 'f1f53b27aabd76cfe478ca0de182fd0d181e1c4b', class: "input-wrapper" }, index.h("slot", { key: 'f5f0fe6e8fbaa63bb961a5216eba0d0a10ca4cf7', name: "before-input" }), index.h("div", { key: '6d615f206e6b0ed3b228c75601fd7608b1aa4869', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd4cbd09db77e7998020289b44d43be1c37c1197a', name: "leading-input" }), index.h("input", { key: 'fa8620fa422b1b96a05630da3f5bed20281b8d19', 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: '0787893a02fbebf2bec97f4285d4b396fc1a474d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'd2d244b7a2280c3b7719927d6550a28c75743a48', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: 'ebe05dafe4b7ec67dbe59d5da612f2f5e6951e3f', class: "stepper" }, index.h("nv-iconbutton", { key: '3112ee0b6f5b3982290cd1ec006653d48d3db626', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'e3cdf3ca761ebd647e13f23df44c4e18879b8913', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'c6de7aaff35002e78e5a27d5f37fe06297b3693f', name: "after-input" })), (this.description ||
|
|
119
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e2c1ea1eb866593cee0eb4218dba9665cd8a321c', class: "description" }, index.h("slot", { key: '1fd324333be676116f5d614bb2dc7448ecd7d3a1', name: "description" }, this.description))), (this.errorDescription ||
|
|
120
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'adb8565f5204849caff31758f739d732f2eb5a01', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '0f2ec09a50e98855cc3f2451c75bd6dca4a6baec', name: "error-description" }, this.errorDescription)))));
|
|
121
|
+
}
|
|
122
|
+
static get formAssociated() { return true; }
|
|
123
|
+
get el() { return index.getElement(this); }
|
|
124
|
+
static get watchers() { return {
|
|
125
|
+
"value": ["watchValueHandler"]
|
|
126
|
+
}; }
|
|
127
|
+
};
|
|
128
|
+
NvFieldnumber.style = NvFieldnumberStyle0;
|
|
129
|
+
|
|
130
|
+
exports.nv_fieldnumber = NvFieldnumber;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
|
+
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
|
+
require('react');
|
|
6
|
+
|
|
7
|
+
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: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);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:\"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 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-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:\"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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
73
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
74
|
+
* element.
|
|
75
|
+
*/
|
|
76
|
+
this.autofocus = false;
|
|
77
|
+
/**
|
|
78
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
79
|
+
*/
|
|
80
|
+
this.fluid = 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 LIFECYCLE
|
|
102
|
+
componentWillLoad() {
|
|
103
|
+
this.showPasswordState = this.showPassword;
|
|
104
|
+
}
|
|
105
|
+
//#endregion LIFECYCLE
|
|
106
|
+
/****************************************************************************/
|
|
107
|
+
//#region RENDER
|
|
108
|
+
render() {
|
|
109
|
+
return (index.h(index.Host, { key: '79c3035769b9053d53d62526b2e0d430d5f944ae' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2341f2b9ae8c5acb8ce48e15caae8a629a1c0333', htmlFor: this.inputId }, index.h("slot", { key: 'ad2301f92adf58c460d4ca76681330b133db2f33', name: "label" }, this.label))), index.h("div", { key: 'c12f8401a41c6761686b74e725dd91911eaafbb0', class: "input-wrapper" }, index.h("slot", { key: 'badd6d65663029bc3252ef0818bb1c6220d01ddf', name: "before-input" }), index.h("div", { key: '0ffb2332657f893c00fe2ca68f4bbbd622bb31f1', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'afa1daa6fab0f2a46ab46f0c99e4e4cf10d7a1fe', name: "leading-input" }), index.h("input", { key: 'cc567c4a7fe51a24a99c7a471294d7f6086d8b2d', 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: '7087d6e35b30de786f3ded46fc74dc9987af6afa', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '6fe5e3936ef42c79ed8a5b8a959a22ecbbe52fd6', 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: 'eab04665ad3394860ad30e366eaf18ae4aee445a', name: "after-input" })), (this.description ||
|
|
110
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5bc5bd055301bf5fe1b801c2091cd3307c79104f', class: "description" }, index.h("slot", { key: '133ebfcb219aaa0c5fd64e4442c1125b26c623b4', name: "description" }, this.description))), (this.errorDescription ||
|
|
111
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2a319732006d29becaa602ae16f2d8e885214931', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e6e75fe487745820b1b8d3de1ed52df8aa9652d4', name: "error-description" }, this.errorDescription)))));
|
|
112
|
+
}
|
|
113
|
+
static get formAssociated() { return true; }
|
|
114
|
+
get el() { return index.getElement(this); }
|
|
115
|
+
static get watchers() { return {
|
|
116
|
+
"showPassword": ["handleShowPasswordChange"]
|
|
117
|
+
}; }
|
|
118
|
+
};
|
|
119
|
+
NvFieldpassword.style = NvFieldpasswordStyle0;
|
|
120
|
+
|
|
121
|
+
exports.nv_fieldpassword = NvFieldpassword;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFieldselectCss = "nv-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-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);width:100
|
|
7
|
+
const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-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);width:100%;}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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
8
|
const NvFieldselectStyle0 = nvFieldselectCss;
|
|
9
9
|
|
|
10
10
|
const NvFieldselect = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -192,7 +192,7 @@ const FieldInput = props => {
|
|
|
192
192
|
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))) : (index.h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
|
|
193
193
|
};
|
|
194
194
|
|
|
195
|
-
const nvFieldsliderCss = "nv-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(16px + 0.25rem);padding:calc(16px / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:4px;background:#e5e7eb;border-radius:4px;cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:4px;background:var(--nv-field-border-focus);border-radius:4px;pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:16px;height:16px;background:#ffffff;border:2px solid var(--nv-field-border-focus);border-radius:50%;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:focus{box-shadow:0 4px 6px rgba(0, 0, 0, 0.15);outline:6px solid color-mix(in srgb, var(--nv-field-border-focus) 50%, transparent);transition:outline}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background-color:#e6f7ff}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:6px;height:6px;background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(6px + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}nv-fieldslider .slider-container .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;width:64px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .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);width:100%}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}nv-fieldslider>.error-description[hidden]{display:none}";
|
|
195
|
+
const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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;width:70px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .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);width:100%;}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}nv-fieldslider>.error-description[hidden]{display:none}";
|
|
196
196
|
const NvFieldsliderStyle0 = nvFieldsliderCss;
|
|
197
197
|
|
|
198
198
|
const NvFieldslider = class {
|
|
@@ -249,10 +249,11 @@ const NvFieldslider = class {
|
|
|
249
249
|
*/
|
|
250
250
|
this.success = false;
|
|
251
251
|
/**
|
|
252
|
-
* Numeric value of the slider as
|
|
253
|
-
*
|
|
252
|
+
* Numeric value of the slider as an array of numbers. When in single mode,
|
|
253
|
+
* the value should be a an array of one number. When in range mode, the value
|
|
254
|
+
* should be an array of two numbers.
|
|
254
255
|
*/
|
|
255
|
-
this.value =
|
|
256
|
+
this.value = [0, 0];
|
|
256
257
|
/**
|
|
257
258
|
* Defines the interval between selectable values on the slider. Controls how
|
|
258
259
|
* much the value increases or decreases with each keyboard interaction, drag
|
|
@@ -308,16 +309,20 @@ const NvFieldslider = class {
|
|
|
308
309
|
* Parses the value string into a number or array of numbers for internal use.
|
|
309
310
|
*/
|
|
310
311
|
this.parseValue = () => {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
312
|
+
if (typeof this.value === 'string') {
|
|
313
|
+
console.error('Sliders require a number or array of numbers to be passed in the value prop.');
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
if (this.range && this.value.length !== 2) {
|
|
317
|
+
console.error('Range sliders require an array of two values to be passed in the value prop.');
|
|
318
|
+
return;
|
|
314
319
|
}
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
this.rangeValueInternal[index] = this.valueInternal;
|
|
319
|
-
});
|
|
320
|
+
if (!this.range && this.value.length !== 1) {
|
|
321
|
+
console.error('Single sliders require a single value as an array to be passed in the value prop.');
|
|
322
|
+
return;
|
|
320
323
|
}
|
|
324
|
+
this.valueInternal = this.value[0];
|
|
325
|
+
this.rangeValueInternal = [this.value[0], this.value[1]];
|
|
321
326
|
};
|
|
322
327
|
/**
|
|
323
328
|
* Handles pointer events on the track.
|
|
@@ -527,8 +532,8 @@ const NvFieldslider = class {
|
|
|
527
532
|
if (validatedValues[0] !== this.rangeValueInternal[0] ||
|
|
528
533
|
validatedValues[1] !== this.rangeValueInternal[1]) {
|
|
529
534
|
this.rangeValueInternal = validatedValues;
|
|
530
|
-
this.value = this.rangeValueInternal
|
|
531
|
-
this.valueChanged.emit(this.rangeValueInternal
|
|
535
|
+
this.value = this.rangeValueInternal;
|
|
536
|
+
this.valueChanged.emit(this.rangeValueInternal);
|
|
532
537
|
}
|
|
533
538
|
}
|
|
534
539
|
}
|
|
@@ -538,8 +543,8 @@ const NvFieldslider = class {
|
|
|
538
543
|
const validatedValue = this.validateValue(newValue);
|
|
539
544
|
if (validatedValue !== this.valueInternal) {
|
|
540
545
|
this.valueInternal = validatedValue;
|
|
541
|
-
this.value =
|
|
542
|
-
this.valueChanged.emit(
|
|
546
|
+
this.value = [this.valueInternal];
|
|
547
|
+
this.valueChanged.emit([this.valueInternal]);
|
|
543
548
|
}
|
|
544
549
|
}
|
|
545
550
|
}
|
|
@@ -635,11 +640,11 @@ const NvFieldslider = class {
|
|
|
635
640
|
/****************************************************************************/
|
|
636
641
|
//#region RENDER
|
|
637
642
|
render() {
|
|
638
|
-
return (index.h(index.Host, { key: '
|
|
643
|
+
return (index.h(index.Host, { key: '5625de672648fc737a3c463241621c96e3f5678c' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c9bb829857daf1f38a07ba8d851a126b8e1014d0', htmlFor: this.startInputId }, index.h("slot", { key: '86daceb63a9467395bd576ee8e2a1fd335dab8a9', name: "label" }, this.label))), index.h("div", { key: 'a2f9fcfd6f201926d59b1542cfb6aecb9995bfe6', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'c217e21c05160391608196c689a506332cdd2c6a', class: "track-container" }, index.h("div", { key: 'eff5a66ed65ca210e66138dfcf345843e4947fe9', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: 'a1168d80e444702014631c51770f81bc66c42c7e', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
|
|
639
644
|
this.description ||
|
|
640
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
645
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f92bc3bba0d12897563532d18873ed00cd01107c', class: "description" }, this.success && (index.h("nv-icon", { key: 'bbe9253cf1a560d1e5e398cece3bdc1dc65c5edc', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: '52396d459eca326fd6e0e1587e79c5b1ab0f8e74', name: "description" }, this.description))), (this.error ||
|
|
641
646
|
this.errorDescription ||
|
|
642
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
647
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2da1fec9cf6c1c5a2f5c0aa16c18d4b45f0758d9', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '9b97a3cc6d56971b6dda8263316f83ea4e35d257', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: 'f2a96d286c53529ebee99606bee0c43f9ff21b74', name: "error-description" }, this.errorDescription)))));
|
|
643
648
|
}
|
|
644
649
|
static get formAssociated() { return true; }
|
|
645
650
|
get el() { return index.getElement(this); }
|