@nova-design-system/nova-react 3.4.0 → 3.6.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/{timeline.animation-1b88f052-B8-vCVrY.js → collapse.animation-16e3af45-CChx_tQJ.js} +4 -25
- package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js +68 -0
- package/dist/cjs/{index-CrgVjOZF.js → index-E_eTmclZ.js} +3380 -2813
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/nv-accordion-item.entry-B9iMQoRk.js +178 -0
- package/dist/cjs/nv-accordion.entry-2oOEkDVq.js +191 -0
- package/dist/cjs/{nv-alert.entry-CW72ajnD.js → nv-alert.entry-CJcHACkm.js} +10 -8
- package/dist/cjs/{nv-avatar.entry-D9wUCu5K.js → nv-avatar.entry-COkIaFDp.js} +2 -2
- package/dist/cjs/{nv-badge_2.entry-CQs2Sf6G.js → nv-badge_2.entry-CQHT-nck.js} +14 -12
- package/dist/cjs/{nv-breadcrumb.entry-CGrSsjAL.js → nv-breadcrumb.entry-DElOQJUD.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-HStUGnwu.js → nv-breadcrumbs.entry-CDfxiMbp.js} +2 -2
- package/dist/cjs/{nv-button.entry-BJfYc4Ow.js → nv-button.entry-CTJT4SzB.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-Co8f_3E5.js → nv-calendar.entry-BU2OBf6g.js} +60 -51
- package/dist/cjs/{nv-col.entry-PJML3P46.js → nv-col.entry-Bsz14pxY.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-Bpwt9yDb.js → nv-datagrid.entry-2DyB7G5f.js} +3 -3
- package/dist/cjs/{nv-datagridcolumn.entry-Dfifeiia.js → nv-datagridcolumn.entry-DquF2Cc1.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-eUEzDdrS.js → nv-dialog.entry-QzImh4AV.js} +20 -7
- package/dist/cjs/{nv-dialogfooter_2.entry-HQyyE6VN.js → nv-dialogfooter_2.entry-MikGtnGi.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-C5AMgttR.js → nv-fieldcheckbox.entry-DKhH58rn.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-Dkqz-UqJ.js → nv-fielddate.entry-Dj_oMJ2a.js} +101 -36
- package/dist/cjs/{nv-fielddaterange.entry-D6QmyWHp.js → nv-fielddaterange.entry-CWwH83ug.js} +7 -7
- package/dist/cjs/{nv-fielddropdown.entry-BpZz90ob.js → nv-fielddropdown.entry-CPD-1tGj.js} +4 -4
- package/dist/cjs/{nv-fielddropdownitem.entry-BbJ9SKGo.js → nv-fielddropdownitem.entry-CM5Fogll.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-mnYvhkj0.js → nv-fieldmultiselect.entry-DodoLrhv.js} +86 -101
- package/dist/cjs/{nv-fieldnumber.entry-B5ED8fCU.js → nv-fieldnumber.entry-063nS6p_.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-ohASip15.js → nv-fieldpassword.entry-CreA_Yx8.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-BPipemAC.js → nv-fieldradio.entry-Y8YSlQbK.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-BWZX6L-B.js → nv-fieldselect.entry-B1X8kT8-.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-nmE8TjBA.js → nv-fieldslider.entry-CJlQWgFy.js} +54 -10
- package/dist/cjs/{nv-fieldtext.entry-DxoznMYV.js → nv-fieldtext.entry-Cib7Q9Wi.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-BccBiMKe.js → nv-fieldtextarea.entry-QYIEAbAM.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-BmQ5DFbN.js → nv-fieldtime.entry-D6jX_bbE.js} +10 -10
- package/dist/cjs/nv-icon.entry-DyYPxO1l.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-DguqeTa3.js → nv-iconbutton_2.entry-BDpYysUa.js} +3 -3
- package/dist/cjs/{nv-menu.entry-UTPRtlti.js → nv-menu.entry-EY6i9-lW.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-CaRqhVtk.js → nv-menuitem.entry-D3_V7wz6.js} +2 -2
- package/dist/cjs/{nv-popover.entry-ByFhVB2j.js → nv-popover.entry-VI0JSWEK.js} +9 -8
- package/dist/cjs/{nv-row.entry-BIwxIl3Q.js → nv-row.entry-Da5sYAGY.js} +2 -2
- package/dist/cjs/{nv-stack.entry-xDwyG0Xr.js → nv-stack.entry-CQ8A3wKB.js} +2 -2
- package/dist/cjs/{nv-table.entry-DCMcpbpc.js → nv-table.entry-DkALs4J_.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-D_kTZ7Mp.js → nv-tablecolumn.entry-C_9y9_Tk.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-tds7tIzF.js → nv-toggle.entry-CPvuKc2f.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-PfQ2HgFG.js → nv-tooltip.entry-dvTSw6dq.js} +4 -3
- package/dist/cjs/{fade.animation-2a077983-aKN0EDTo.js → stylefire.es-74da334a-y0piPjlz.js} +0 -64
- package/dist/cjs/timeline.animation-adf35ecb-CE6Dsdxr.js +23 -0
- package/dist/generated/components.js +18 -2
- package/dist/generated/components.server.js +721 -0
- package/dist/types/generated/components.d.ts +56 -43
- package/dist/types/generated/components.server.d.ts +229 -0
- package/package.json +2 -2
- package/dist/cjs/nv-icon.entry-DE-sMmDp.js +0 -79
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-E_eTmclZ.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Utility functions for nv-fieldslider.
|
|
9
9
|
*/
|
|
10
|
+
/**
|
|
11
|
+
* Gets the number of decimal places in a number.
|
|
12
|
+
* @param {number} num - The number to check
|
|
13
|
+
* @returns {number} The number of decimal places
|
|
14
|
+
*/
|
|
15
|
+
function getDecimalPlaces(num) {
|
|
16
|
+
if (Number.isInteger(num))
|
|
17
|
+
return 0;
|
|
18
|
+
const str = num.toString();
|
|
19
|
+
const decimalPart = str.split('.')[1];
|
|
20
|
+
return decimalPart ? decimalPart.length : 0;
|
|
21
|
+
}
|
|
10
22
|
/**
|
|
11
23
|
* Clamp a value between min and max.
|
|
12
24
|
* @param {number} value - The value to clamp
|
|
@@ -39,7 +51,26 @@ function valueToPercent(value, min, max) {
|
|
|
39
51
|
*/
|
|
40
52
|
function snapToStep(value, min, max, step) {
|
|
41
53
|
const clamped = clamp(value, min, max);
|
|
42
|
-
const
|
|
54
|
+
const decimalPlaces = getDecimalPlaces(step);
|
|
55
|
+
// To avoid floating point issues in calculations, we can work with integers
|
|
56
|
+
// by multiplying all values by a power of 10 based on decimal places
|
|
57
|
+
if (decimalPlaces > 0) {
|
|
58
|
+
const multiplier = Math.pow(10, decimalPlaces);
|
|
59
|
+
// Convert to integer-based calculation
|
|
60
|
+
const scaledValue = Math.round((clamped - min) * multiplier);
|
|
61
|
+
const scaledStep = Math.round(step * multiplier);
|
|
62
|
+
// Round to nearest step using integer math
|
|
63
|
+
const roundedSteps = Math.round(scaledValue / scaledStep);
|
|
64
|
+
// Calculate snapped value and scale back down
|
|
65
|
+
const scaledSnapped = roundedSteps * scaledStep;
|
|
66
|
+
const snapped = min + scaledSnapped / multiplier;
|
|
67
|
+
// Format to correct decimal places to ensure precision
|
|
68
|
+
return clamp(parseFloat(snapped.toFixed(decimalPlaces)), min, max);
|
|
69
|
+
}
|
|
70
|
+
// For integer steps, use the original method
|
|
71
|
+
const stepsFromMin = (clamped - min) / step;
|
|
72
|
+
const roundedSteps = Math.round(stepsFromMin);
|
|
73
|
+
const snapped = min + roundedSteps * step;
|
|
43
74
|
return clamp(snapped, min, max);
|
|
44
75
|
}
|
|
45
76
|
/**
|
|
@@ -80,6 +111,19 @@ function snapToTicks(value, ticks) {
|
|
|
80
111
|
}
|
|
81
112
|
return closestTick;
|
|
82
113
|
}
|
|
114
|
+
/**
|
|
115
|
+
* Format a numeric value for display, preserving trailing zeros based on step precision
|
|
116
|
+
* @param {number} value - The value to format
|
|
117
|
+
* @param {number} step - The step size that determines decimal precision
|
|
118
|
+
* @returns {string} Formatted value string with appropriate decimal places
|
|
119
|
+
*/
|
|
120
|
+
function formatValueForDisplay(value, step) {
|
|
121
|
+
const decimalPlaces = getDecimalPlaces(step);
|
|
122
|
+
if (decimalPlaces > 0) {
|
|
123
|
+
return value.toFixed(decimalPlaces);
|
|
124
|
+
}
|
|
125
|
+
return String(value);
|
|
126
|
+
}
|
|
83
127
|
|
|
84
128
|
/**
|
|
85
129
|
* Renders single thumb in standard mode.
|
|
@@ -87,7 +131,7 @@ function snapToTicks(value, ticks) {
|
|
|
87
131
|
* @returns {JSX.Element} JSX element representing the thumb
|
|
88
132
|
*/
|
|
89
133
|
const SingleThumb = props => {
|
|
90
|
-
const { value, min, max, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
|
|
134
|
+
const { value, min, max, step, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
|
|
91
135
|
// Use raw position for visual display during dragging, but the snapped value otherwise
|
|
92
136
|
let displayPosition = value;
|
|
93
137
|
if (isDragging && !snap) {
|
|
@@ -97,7 +141,7 @@ const SingleThumb = props => {
|
|
|
97
141
|
return (index.h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
98
142
|
index.h("div", { class: "thumb-tooltip" },
|
|
99
143
|
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
100
|
-
|
|
144
|
+
formatValueForDisplay(value, step),
|
|
101
145
|
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))));
|
|
102
146
|
};
|
|
103
147
|
|
|
@@ -107,7 +151,7 @@ const SingleThumb = props => {
|
|
|
107
151
|
* @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs
|
|
108
152
|
*/
|
|
109
153
|
const RangeThumb = props => {
|
|
110
|
-
const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
|
|
154
|
+
const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, step, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
|
|
111
155
|
const [leftValue, rightValue] = rangeValue;
|
|
112
156
|
// Use raw positions for visual display during dragging, but the snapped values otherwise
|
|
113
157
|
let displayLeftPosition = leftValue;
|
|
@@ -131,12 +175,12 @@ const RangeThumb = props => {
|
|
|
131
175
|
index.h("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
132
176
|
index.h("div", { class: "thumb-tooltip" },
|
|
133
177
|
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
134
|
-
|
|
178
|
+
formatValueForDisplay(leftValue, step),
|
|
135
179
|
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
136
180
|
index.h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
137
181
|
index.h("div", { class: "thumb-tooltip" },
|
|
138
182
|
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
139
|
-
|
|
183
|
+
formatValueForDisplay(rightValue, step),
|
|
140
184
|
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
141
185
|
];
|
|
142
186
|
};
|
|
@@ -640,11 +684,11 @@ const NvFieldslider = class {
|
|
|
640
684
|
/****************************************************************************/
|
|
641
685
|
//#region RENDER
|
|
642
686
|
render() {
|
|
643
|
-
return (index.h(index.Host, { key: '
|
|
687
|
+
return (index.h(index.Host, { key: '5bb5a06e9742f87d098da76260ee269ef4ea06d5' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'dd6e12d6c6379e07c4f9964984b3458a71ce6e6f', htmlFor: this.startInputId }, index.h("slot", { key: '6229200586d90f4f21604d411f473e6df66527c4', name: "label" }, this.label))), index.h("div", { key: '44f60b538c83d9074a5d06b5a39c1e62e5aa5c55', 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: '4ec60f07b203b6836649a709027fdace39468c41', class: "track-container" }, index.h("div", { key: '4fcc799c962bf17e582fa5daf51a9c986d2d5901', 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, step: this.step, 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, step: this.step, 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: '95b75deb4c7d0142f575af39fafe7b913c315ed5', 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 ||
|
|
644
688
|
this.description ||
|
|
645
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
689
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '4b86941f66df96014d4710e6f1f79523a4f332f3', class: "description" }, this.success && (index.h("nv-icon", { key: 'b53792e0fe60354cdfb2e34dbf54fd87df10050c', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: '149788e0ce96516b812370b247ddd59de555bf90', name: "description" }, this.description))), (this.error ||
|
|
646
690
|
this.errorDescription ||
|
|
647
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
691
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '11814ba28092b2ded30f6b15362b0eb9e67c20a0', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '86b555aa52f4295932d80947737116c3f6c0ce99', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '334739920eb67abc49b2bdb942d0a2f65a925460', name: "error-description" }, this.errorDescription)))));
|
|
648
692
|
}
|
|
649
693
|
static get formAssociated() { return true; }
|
|
650
694
|
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-E_eTmclZ.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -111,9 +111,9 @@ const NvFieldtext = class {
|
|
|
111
111
|
/****************************************************************************/
|
|
112
112
|
//#region RENDER
|
|
113
113
|
render() {
|
|
114
|
-
return (index.h(index.Host, { key: '
|
|
115
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
116
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
114
|
+
return (index.h(index.Host, { key: 'aa009c45d11efe9fef7ae0acfb701e25db7d3004' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '90aedd9dc50b1485b76e4bb6df2f5ea017eee9f4', htmlFor: this.inputId }, index.h("slot", { key: '3d7c37806fd01f1bb4c1d1d67372ce257d1b382d', name: "label" }, this.label))), index.h("div", { key: 'd399c53383708363c986c8f02f0f0a3b48bb4c39', class: "input-wrapper" }, index.h("slot", { key: '19b8cb3165c3ff0523c257ad0fc53f0df7413685', name: "before-input" }), index.h("div", { key: '3564795cf1775f2113c9a35d1865f84358be3144', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'b9b0b3b44f8474ba4f0c46552bb9c3a83fa0d7d2', name: "leading-input" }), index.h("input", { key: '39687f0583e734b03262aac593ab50ffad7957fd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '0faf9e99190d1d7e4295a454d2b89a31c728a38f', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'fe4646f13b1fba38883f1e03ea6c1ba274c9aa47', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '1e51b8182acc3b049ad608ddefd8c1631efbef94', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '65bf5da97918592f3d8ebc63d134ddc4723188a1', name: "after-input" })), (this.description ||
|
|
115
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c3f771bc7f641612baead1d82f8bcf8d8586a152', class: "description" }, index.h("slot", { key: '27df5104927ce680472aff0054e4ae5c3a9727c6', name: "description" }, this.description))), (this.errorDescription ||
|
|
116
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8126a6159a24b68a9fa7f017aa289269f63035d4', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'd7cebdf0101cbed1d898c2bcc73581387ddb23b9', name: "error-description" }, this.errorDescription)))));
|
|
117
117
|
}
|
|
118
118
|
static get formAssociated() { return true; }
|
|
119
119
|
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-E_eTmclZ.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -181,9 +181,9 @@ const NvFieldtextarea = class {
|
|
|
181
181
|
/****************************************************************************/
|
|
182
182
|
//#region RENDER
|
|
183
183
|
render() {
|
|
184
|
-
return (index.h(index.Host, { key: '
|
|
185
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
186
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
184
|
+
return (index.h(index.Host, { key: 'a0e5cd4a7cf3dbfc928a08518b9ea031ae995e0a' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'bb327648d74c5340f7069afd5d3afd8cfbe816e8', htmlFor: this.inputId }, index.h("slot", { key: '778cd6b79f71b4751e08b754f127da9460c104f0', name: "label" }, this.label))), index.h("div", { key: '21e2126f2115b1de134e4d2acfa3a9b7eba713c0', class: "textarea-wrapper" }, index.h("div", { key: '12b431b44cc6c8402a4af3fc5180ef95464571c4', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: 'dbb7bf5fc51aa93993eb485b8650837e892747ed', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx297c1ffe.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
|
|
185
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'd4758f3b173c84d5b7785c790832f794fae21504', class: "description" }, index.h("slot", { key: 'def8fe57e0dd229fc31ba5372663b9053ef6a3d0', name: "description" }, this.description))), (this.errorDescription ||
|
|
186
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5f6f6bce639a3690cd51d208be62bacdf5779f10', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e0d185195a4c18d2a3627c554c4ce70a52db77d7', name: "error-description" }, this.errorDescription)))));
|
|
187
187
|
}
|
|
188
188
|
static get formAssociated() { return true; }
|
|
189
189
|
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-E_eTmclZ.js');
|
|
4
4
|
var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -982,26 +982,26 @@ const NvFieldtime = class {
|
|
|
982
982
|
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
983
983
|
}
|
|
984
984
|
render() {
|
|
985
|
-
return (index.h(index.Host, { key: '
|
|
986
|
-
index.h("input", { key: '
|
|
985
|
+
return (index.h(index.Host, { key: '9779298ba2b38f3987af0cfa03250f0e9a99b9f8', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e2a9108cbc9d28d14aad58dc2e857e54ae39f09f', htmlFor: this.inputId }, index.h("slot", { key: '94e26cbf12ac61bc32de87a32a91eca65da6461c', name: "label" }, this.label))), index.h("nv-popover", { key: '9d3b59e19a11a7cdebfc03eef6278f87f6f440e4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '2651f57c27384c367d29543f390ace075a08225f', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '2df5c90ff04b28ab426929729e94948aa6491b2a', name: "before-input" }), index.h("div", { key: 'bb490ebb175df4e579f0add8113e28dd7c29e866', class: "input-container" }, index.h("slot", { key: 'b09f37a743d0b3dc12a8de0d39641571e9d7090b', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
|
|
986
|
+
index.h("input", { key: 'bd97f546da7231ad6ae40799a797da2368e89213', ref: el => (this.inputElements[constants4faa1fae.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants4faa1fae.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants4faa1fae.TimeType.Hours), name: this.name
|
|
987
987
|
? `${constants4faa1fae.TimeType.Hours}-${this.name}`
|
|
988
988
|
: constants4faa1fae.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
989
989
|
], this.format.includes('mm') && [
|
|
990
|
-
index.h("span", { key: '
|
|
991
|
-
index.h("input", { key: '
|
|
990
|
+
index.h("span", { key: 'd1e8a8938b214717f178d462976afd91f582eb50' }, ":"),
|
|
991
|
+
index.h("input", { key: '720445f3892535abd7d81fdbf38f7941a66a01a5', ref: el => (this.inputElements[constants4faa1fae.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants4faa1fae.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants4faa1fae.TimeType.Minutes), name: this.name
|
|
992
992
|
? `${constants4faa1fae.TimeType.Minutes}-${this.name}`
|
|
993
993
|
: constants4faa1fae.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
994
994
|
], this.format.includes('ss') && [
|
|
995
|
-
index.h("span", { key: '
|
|
996
|
-
index.h("input", { key: '
|
|
995
|
+
index.h("span", { key: 'e8b19bdd054f792a48df56a2ad884d9ec3f96dc0' }, ":"),
|
|
996
|
+
index.h("input", { key: 'd2020d37b004a15912791d804daeeee2aadadb70', ref: el => (this.inputElements[constants4faa1fae.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants4faa1fae.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants4faa1fae.TimeType.Seconds), name: this.name
|
|
997
997
|
? `${constants4faa1fae.TimeType.Seconds}-${this.name}`
|
|
998
998
|
: constants4faa1fae.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
999
|
-
], index.h("nv-iconbutton", { key: '
|
|
999
|
+
], index.h("nv-iconbutton", { key: '96e3cbee01387385f1ed16bd5e7a1b639fae592f', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '6ef9a8a535914394e7a8a9e82f55e9ac82655161', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: 'ab1313914251a15de716d60a4f60afe91c949d7a', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: 'cf346d219445fc595419e834302d03d30a5dcf97', name: "after-input" })), index.h("div", { key: '8cfe562d283109f305db84b843c68ad1535fed6b', class: "time-dropdown", slot: "content" }, index.h("div", { key: '9690c5733e3fcd0ae22743e4c572d9a5ff2d1bff', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
|
|
1000
1000
|
this.RenderTimeOptionsColumn(constants4faa1fae.TimeType.Hours), this.format.includes('mm') &&
|
|
1001
1001
|
this.RenderTimeOptionsColumn(constants4faa1fae.TimeType.Minutes), this.format.includes('ss') &&
|
|
1002
1002
|
this.RenderTimeOptionsColumn(constants4faa1fae.TimeType.Seconds)))), (this.description ||
|
|
1003
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
1004
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
1003
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6671a07feeac69f2d9374dd25b00c6d7a7258bbd', class: "description" }, index.h("slot", { key: '2ebc81fa182462a44a62d075c187b94bfe16ad96', name: "description" }, this.description))), (this.errorDescription ||
|
|
1004
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f1815ed7f65eaf25fd69d56de613c01be842d147', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '028896c0e9bffa83f2429a77e1dfaace6f8a07d8', name: "error-description" }, this.errorDescription)))));
|
|
1005
1005
|
}
|
|
1006
1006
|
static get formAssociated() { return true; }
|
|
1007
1007
|
get el() { return index.getElement(this); }
|