@nova-design-system/nova-react 3.2.0 → 3.4.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-CrgVjOZF.js} +1121 -1100
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-pxBJfmIm.js → nv-alert.entry-CW72ajnD.js} +7 -7
- package/dist/cjs/{nv-avatar.entry-CHtVctSK.js → nv-avatar.entry-D9wUCu5K.js} +7 -7
- package/dist/cjs/{nv-badge_2.entry-BO88KO1O.js → nv-badge_2.entry-CQs2Sf6G.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-7azRtyl5.js → nv-breadcrumb.entry-CGrSsjAL.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-DfZVMKpY.js → nv-breadcrumbs.entry-HStUGnwu.js} +1 -1
- package/dist/cjs/{nv-button.entry-DW9SblsY.js → nv-button.entry-BJfYc4Ow.js} +7 -7
- package/dist/cjs/{nv-calendar.entry-BeayRRor.js → nv-calendar.entry-Co8f_3E5.js} +396 -147
- package/dist/cjs/{nv-col.entry-C6oEkSbI.js → nv-col.entry-PJML3P46.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-xhQP6JJP.js → nv-datagrid.entry-Bpwt9yDb.js} +50 -17
- package/dist/cjs/{nv-datagridcolumn.entry-CjYmo4fM.js → nv-datagridcolumn.entry-Dfifeiia.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-mxETaZbc.js → nv-dialog.entry-eUEzDdrS.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-DnLg2DHy.js → nv-dialogfooter_2.entry-HQyyE6VN.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-Be9__i15.js → nv-fieldcheckbox.entry-C5AMgttR.js} +1 -1
- package/dist/cjs/nv-fielddate.entry-Dkqz-UqJ.js +303 -0
- package/dist/cjs/nv-fielddaterange.entry-D6QmyWHp.js +462 -0
- package/dist/cjs/{nv-fielddropdown.entry-BPwviyCp.js → nv-fielddropdown.entry-BpZz90ob.js} +2 -2
- package/dist/cjs/{nv-fielddropdownitem.entry-BGuUR9KP.js → nv-fielddropdownitem.entry-BbJ9SKGo.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-Lrxr1gsi.js → nv-fieldmultiselect.entry-mnYvhkj0.js} +2 -2
- package/dist/cjs/nv-fieldnumber.entry-B5ED8fCU.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-ohASip15.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-CDu8xs0p.js → nv-fieldradio.entry-BPipemAC.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-NEdv8bQK.js → nv-fieldselect.entry-BWZX6L-B.js} +7 -7
- package/dist/cjs/{nv-fieldslider.entry-51gF9XPz.js → nv-fieldslider.entry-nmE8TjBA.js} +28 -23
- package/dist/cjs/nv-fieldtext.entry-DxoznMYV.js +123 -0
- package/dist/cjs/nv-fieldtextarea.entry-BccBiMKe.js +198 -0
- package/dist/cjs/{nv-fieldtime.entry-MbaWbVtc.js → nv-fieldtime.entry-BmQ5DFbN.js} +67 -67
- package/dist/cjs/{nv-icon.entry-BSSHr-ud.js → nv-icon.entry-DE-sMmDp.js} +8 -8
- package/dist/cjs/{nv-iconbutton_2.entry-DMaO-JWz.js → nv-iconbutton_2.entry-DguqeTa3.js} +3 -3
- package/dist/cjs/{nv-menu.entry-D5_lj9XB.js → nv-menu.entry-UTPRtlti.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-fhnYI91K.js → nv-menuitem.entry-CaRqhVtk.js} +2 -2
- package/dist/cjs/{nv-popover.entry-CYqBaVbr.js → nv-popover.entry-ByFhVB2j.js} +3 -3
- package/dist/cjs/{nv-row.entry-BUheLufV.js → nv-row.entry-BIwxIl3Q.js} +2 -2
- package/dist/cjs/{nv-stack.entry-DNPce51E.js → nv-stack.entry-xDwyG0Xr.js} +2 -2
- package/dist/cjs/{nv-table.entry-DXQM8l3t.js → nv-table.entry-DCMcpbpc.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-DROQK_0c.js → nv-tablecolumn.entry-D_kTZ7Mp.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-fMzTrdte.js → nv-toggle.entry-tds7tIzF.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-yB2Ek1Cz.js → nv-tooltip.entry-PfQ2HgFG.js} +2 -2
- package/dist/generated/components.js +9 -4
- package/dist/types/generated/components.d.ts +15 -4
- package/package.json +2 -2
- 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/nv-fieldtextarea.entry-D44HbsVQ.js +0 -198
- /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-CrgVjOZF.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: 'bc6961e9cfb030f0ded61180836826bc67215432' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '98542b998a5db7572209167ccda6e143797efe02', htmlFor: this.inputId }, index.h("slot", { key: '59ee59722d9a05bc62307f12db55965b29ec5ac2', name: "label" }, this.label))), index.h("div", { key: 'dd63f77ae0110620d37d5e7d9e02baafd7384a18', class: "input-wrapper" }, index.h("slot", { key: '0c73ca84d755675012c82d0e963c619839551965', name: "before-input" }), index.h("div", { key: 'bcc8edc6ff5d2f57d1237f22de0d6b6d190ff8e3', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '6ae97f06dae32a6bf00bb73eddfe556ad2e92453', name: "leading-input" }), index.h("input", { key: '1799946e5b38ef77e3241a4ace04e37afdec98a4', 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 }), index.h("slot", { key: 'b0861939aa926e51777caa62bf01ed6a0a39dc50', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '57df54aa50deab4ad077692cc4592561b31e0d42', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'e57297c4fab2826fb50943c47983f73eb3a8f5b0', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '6096c2878876dd4324b112cf3067bfc3cf9d35f2', class: "stepper" }, index.h("nv-iconbutton", { key: '7e03c767f0f0c44f70435bfed2bae02f409ed23b', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '06a5b8af32c99bab407ce427c4d634fb0209674c', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '32dc74a736303088b40fff6b8dd53efb9c0e3832', name: "after-input" })), (this.description ||
|
|
119
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c0cb59d63dfa4a16820ddf1b3438e287a4e94aaa', class: "description" }, index.h("slot", { key: 'bcb6d46402b596401ac7f9f01fb6cfb3e4b58feb', name: "description" }, this.description))), (this.errorDescription ||
|
|
120
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '093f05eadee4cf3802be34b98907596d64febcb6', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93572b4f780e085a2be652a687e561275ebbc428', 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-CrgVjOZF.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: 'fb277f244fb9f92e09cf77463c3a59b1a7a93095' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '84227c9b8844bcb02917e6f942c206758f2378b8', htmlFor: this.inputId }, index.h("slot", { key: '36331156c6823f96b017a18a4d134b3a0467e289', name: "label" }, this.label))), index.h("div", { key: 'babca6f3bf893084259917bfec7434a189bc6a88', class: "input-wrapper" }, index.h("slot", { key: '7ff461c1b36594cde5e2934b3c4aaa3eaafbea20', name: "before-input" }), index.h("div", { key: 'ac90041750bfdcc23245c42d7e6c52ae855b4bb5', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0696566301e7fd935c0316b70b41f15cc68b2276', name: "leading-input" }), index.h("input", { key: '776db054e9b5fb46b592723fa6b0ad073e0cad93', 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: '73d827ca041e3841b5159dd829769def664a5e8b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '7920164504e0834d8e8f0b91a51e4747cbaa0bfb', 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: '4c651f834fe546cd75fc6f24ba37f35f3713c004', name: "after-input" })), (this.description ||
|
|
110
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '9db3be325ffe22ddaaaf6052d03b0eb5a8decc9f', class: "description" }, index.h("slot", { key: 'e262fafe3e0d3f1ffbf059eb80d0b0b2128f0c07', name: "description" }, this.description))), (this.errorDescription ||
|
|
111
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '28571af4f63bdf4a9d7ff558d0d672546765f188', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '9b3635bec4932601c0b265cfef7851ab48bad289', 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,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CrgVjOZF.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -87,9 +87,9 @@ const NvFieldradio = class {
|
|
|
87
87
|
/****************************************************************************/
|
|
88
88
|
//#region RENDER
|
|
89
89
|
render() {
|
|
90
|
-
return (index.h(index.Host, { key: '
|
|
91
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
92
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
90
|
+
return (index.h(index.Host, { key: '4533a498fbbf7edc20695ac8411dea11355c2bf9', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '0ba25de106a4bb4a3ccf1c5ddf82e60966e59e9f', 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: 'c090a6746068f4ab8a8989d0117ec274320918a8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '804bbd45628e20bcfce8005fd0abd6b8f5ecc677', htmlFor: this.inputId }, index.h("slot", { key: 'bfe774833365bf51bc1c1be47d960ce04cadaee3', name: "label" }, this.label))), (this.description ||
|
|
91
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '99245a0234557bb64887d6f499ffdd4a8b0a03b0', class: "description" }, index.h("slot", { key: '34bc5919f9bf80fee5a26b4d7dcbf4b2844ef202', name: "description" }, this.description))), (this.errorDescription ||
|
|
92
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c67be256e429796853146da66aebe0f8ea80a131', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '241a84a4be6028850e42e96305413e8c3298acf3', name: "error-description" }, this.errorDescription))))));
|
|
93
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CrgVjOZF.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 {
|
|
@@ -347,13 +347,13 @@ const NvFieldselect = class {
|
|
|
347
347
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
348
348
|
*/
|
|
349
349
|
render() {
|
|
350
|
-
return (index.h(index.Host, { key: '
|
|
350
|
+
return (index.h(index.Host, { key: '3614f589d16ecfe4b7153a57d079b5bde8d14e4f' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd3d222aeece0c0f99141adf9be19b3dfda5095ac', htmlFor: this.inputId }, index.h("slot", { key: 'd0deb950cdd7784878f2ee7d7e5a382c3aa67620', name: "label" }, this.label))), index.h("div", { key: '94b1ead9abf988d3a9a944f04c441054e0aeba1f', class: "select-wrapper" }, index.h("slot", { key: '5e018a64cd9556d67ecc2b9cfb48771f137c10a6', name: "before-input" }), index.h("div", { key: 'd52813fc9e534463b50da23b8a5a3e5d57aa2c3a', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'dda40c57c5be6d10a20cb11cfa8eaa8398f84d6c', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '37b22a058b25867d7c4c5c7675288f7d4a368263', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
351
351
|
? `${this.inputId}-error`
|
|
352
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
352
|
+
: `${this.inputId}-description` })), index.h("select", { key: '064eec6725beeba26cc5ded5fb21237b55d40cff', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
353
353
|
? `${this.inputId}-error`
|
|
354
|
-
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '
|
|
355
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
356
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
354
|
+
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '02e2e941e3d8efe4a1a5ef3e2cf95adcdaaa25e7', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '481df68e62c2438db29aa3591180353f140d506d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '2b7c05697786bb684f7be9aba49641d0bd4b17e2', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'ee340692540948b768ff8d7ad817879f1fa892c4', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '9d638182d2f9808d6cf454d56c70cb7e45e520ab', name: "after-input" })), (this.description ||
|
|
355
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0b5d93842494d99c7eeb5cde17bc266de14ebc79', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '011365d39b5e18fda111f257461bedab1e4ddb5e', name: "description" }, this.description))), (this.errorDescription ||
|
|
356
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '15c238fe1651bab3cfe0088837b8f58beec52e28', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: 'edd7d6187957e34646cc270dcc1485f73d634e52', name: "error-description" }, this.errorDescription)))));
|
|
357
357
|
}
|
|
358
358
|
static get formAssociated() { return true; }
|
|
359
359
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CrgVjOZF.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -187,12 +187,12 @@ const FieldInput = props => {
|
|
|
187
187
|
? 'input-container'
|
|
188
188
|
: 'input-container hidden-input';
|
|
189
189
|
return hasField ? (index.h("div", { class: containerClass },
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
index.h("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput }),
|
|
191
|
+
labelBeforeValue && (index.h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)),
|
|
192
|
+
labelAfterValue && (index.h("span", { class: "label-after", slot: "trailing-input" }, 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:90px;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 .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}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: '924819b3d8cc05d7b7448a613b833a3514c4fe46' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '079800a326daa6677bfeadbb335100ad43a6c3a6', htmlFor: this.startInputId }, index.h("slot", { key: '31c7deab4307cf05951ee3e52e69a57bed2cc4dd', name: "label" }, this.label))), index.h("div", { key: 'c3f9a721150e9e3e4396509007d17fd5878db9d2', 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: '2156dae3524cbce4390a27f8699bd2f3c5623799', class: "track-container" }, index.h("div", { key: '7d601c91d58ef7cc8cecdc6b5becf82245ada8f7', 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: '27869c72bdf64db4c7efab71bbfb0dc221bbce1c', 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: 'ff43246b18e39fca6401663e17c75774d964b232', class: "description" }, this.success && (index.h("nv-icon", { key: 'c8d0cf20d5c91e84d9529c594400886e9e5cb89c', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'fe5e79473950d01bf73ebd67628d301fe0b48573', 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: 'c02f5c9db7270a5442ab75f8532151e4d97801bc', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '56ed10394aca3dc9fdb800f44587cec47e993a8d', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '037fd3db57941a5f02cde3506112059e7f792803', name: "error-description" }, this.errorDescription)))));
|
|
643
648
|
}
|
|
644
649
|
static get formAssociated() { return true; }
|
|
645
650
|
get el() { return index.getElement(this); }
|