@nova-design-system/nova-react 3.22.0 → 3.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/_commonjsHelpers-B85MJLTf-CFO10eej.js +7 -0
- package/dist/cjs/{collapse.animation-6e0b08df-AHWzNGm_.js → collapse.animation-DZDm0vSK-C2TOIhIK.js} +3 -3
- package/dist/cjs/{fade.animation-9b939939-DV--bM4S.js → fade.animation-DcRL9lcm-DAZeHoKN.js} +75 -75
- package/dist/cjs/generated/components.server.js +245 -50
- package/dist/cjs/{grow.animation-24ad5cf8-LUp_ITEx.js → grow.animation-CvHGHBL4-DDIEYBK-.js} +5 -5
- package/dist/cjs/i18n.utils-DOZbXX2L-BizoXo6c.js +2498 -0
- package/dist/cjs/{index-WPRkQD3O.js → index-CtjeeUI-.js} +12063 -7049
- package/dist/cjs/index.js +12 -1
- package/dist/cjs/inputmask-CSo292ul-DlvupPk6.js +3758 -0
- package/dist/cjs/{nv-accordion-item.entry-BuTvA6w9.js → nv-accordion-item.entry-B_l0-ux0.js} +11 -10
- package/dist/cjs/{nv-accordion.entry-Dtsfw6He.js → nv-accordion.entry-BX8_YuZF.js} +8 -5
- package/dist/cjs/{nv-alert.entry-TIdfdU7Y.js → nv-alert.entry-DCWYR0OK.js} +22 -22
- package/dist/cjs/{nv-avatar.entry-CaxrhPuw.js → nv-avatar.entry-C_xZD3Lp.js} +11 -11
- package/dist/cjs/{nv-badge_2.entry-CfYvTZxX.js → nv-badge_2.entry-JjqANStV.js} +24 -24
- package/dist/cjs/{nv-breadcrumb.entry-BCZ4MmfD.js → nv-breadcrumb.entry-DQZDn6cm.js} +5 -5
- package/dist/cjs/{nv-breadcrumbs.entry-DwzCE7F6.js → nv-breadcrumbs.entry-Bz0GjhY_.js} +3 -3
- package/dist/cjs/{nv-button.entry-Cr_86bcZ.js → nv-button.entry-Br1DH9Vj.js} +9 -9
- package/dist/cjs/{nv-buttongroup.entry-CWjRoHY1.js → nv-buttongroup.entry-BZaTKN_n.js} +3 -3
- package/dist/cjs/{nv-calendar.entry-CXfwNt6G.js → nv-calendar.entry-D9ESuu7C.js} +105 -79
- package/dist/cjs/{nv-col.entry-CJLDS3LY.js → nv-col.entry-CfgPMMxS.js} +5 -5
- package/dist/cjs/{nv-datagrid.entry-Cns8XSud.js → nv-datagrid.entry-DcB5q2oC.js} +14 -14
- package/dist/cjs/{nv-datagridcolumn.entry-CFFAipHF.js → nv-datagridcolumn.entry-BhKOzXA6.js} +2 -1
- package/dist/cjs/{nv-dialog.entry-CDSK9pUH.js → nv-dialog.entry-O47Eol_7.js} +23 -23
- package/dist/cjs/{nv-dialogfooter_2.entry-To_dGUn4.js → nv-dialogfooter_2.entry-Dn16bI8a.js} +10 -11
- package/dist/cjs/nv-fieldcheckbox.entry-Bx6ArV_b.js +177 -0
- package/dist/cjs/{nv-fielddate.entry-C3pXtMHL.js → nv-fielddate.entry-B4P0U8QG.js} +86 -40
- package/dist/cjs/{nv-fielddaterange.entry-CjVVPEK_.js → nv-fielddaterange.entry-BORwYJ-k.js} +150 -101
- package/dist/cjs/nv-fielddropdown.entry-DzBAIynY.js +687 -0
- package/dist/cjs/{nv-fielddropdownitem.entry-Dah-PaE8.js → nv-fielddropdownitem.entry-C_17isWd.js} +6 -5
- package/dist/cjs/{nv-fieldmultiselect.entry-BMLjhqoJ.js → nv-fieldmultiselect.entry-DiqRreWh.js} +347 -232
- package/dist/cjs/nv-fieldnumber.entry-C9O4UPp3.js +187 -0
- package/dist/cjs/nv-fieldpassword.entry-BfVJNT0A.js +165 -0
- package/dist/cjs/{nv-fieldradio.entry-X_2VT1Dj.js → nv-fieldradio.entry-CG22oETM.js} +10 -10
- package/dist/cjs/{nv-fieldselect.entry-pSp-2rNn.js → nv-fieldselect.entry-BPQEtrv2.js} +52 -13
- package/dist/cjs/{nv-fieldslider.entry-pZf7zzLU.js → nv-fieldslider.entry-CozmnUfN.js} +16 -31
- package/dist/cjs/nv-fieldtext.entry-BD-z01ru.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-t3Ixxi23.js → nv-fieldtextarea.entry-7UrKWDHg.js} +51 -12
- package/dist/cjs/{nv-fieldtime.entry-DY7D5_6K.js → nv-fieldtime.entry-DakOlLiO.js} +109 -57
- package/dist/cjs/{nv-icon.entry-6oYPSf4c.js → nv-icon.entry-Db00kB2u.js} +11 -11
- package/dist/cjs/{nv-iconbutton_2.entry-ChULGovr.js → nv-iconbutton_2.entry-CaKCa8NT.js} +7 -8
- package/dist/cjs/{nv-menu.entry-sd0tatWq.js → nv-menu.entry-CK2HdmBt.js} +16 -29
- package/dist/cjs/{nv-menuitem.entry-CCOqR7UF.js → nv-menuitem.entry-mKMqCAdz.js} +6 -5
- package/dist/cjs/nv-notification-bullet.entry-DtbjtFxs.js +77 -0
- package/dist/cjs/{nv-notification.entry-Cc3zE3yY.js → nv-notification.entry-CLb0gNu3.js} +39 -39
- package/dist/cjs/{nv-notificationcontainer.entry-DV4D6oOH.js → nv-notificationcontainer.entry-Cijivlm6.js} +3 -3
- package/dist/cjs/{nv-popover.entry-DQSwI2jT.js → nv-popover.entry-mLdLSp6n.js} +49 -45
- package/dist/cjs/{nv-row.entry-UUuMSAY5.js → nv-row.entry-C2C94fcv.js} +3 -3
- package/dist/cjs/nv-sidebar.entry-inDVNJ4s.js +177 -0
- package/dist/cjs/nv-sidebarcontent.entry-DxoljE15.js +22 -0
- package/dist/cjs/nv-sidebardivider.entry-D_yern0R.js +22 -0
- package/dist/cjs/nv-sidebarfooter.entry-Rkkn9TB_.js +22 -0
- package/dist/cjs/nv-sidebargroup.entry-C1p9qqxr.js +23 -0
- package/dist/cjs/nv-sidebarheader.entry-CYpD_4pI.js +22 -0
- package/dist/cjs/nv-sidebarlogo.entry-BgK03M1v.js +32 -0
- package/dist/cjs/nv-sidebarnavitem.entry-DglvcCOD.js +297 -0
- package/dist/cjs/nv-sidebarnavsubitem.entry-Dt1jKmC-.js +35 -0
- package/dist/cjs/{nv-split.entry-CYP2bTTM.js → nv-split.entry-mzg2F66T.js} +6 -6
- package/dist/cjs/{nv-stack.entry-D35-75Vw.js → nv-stack.entry-nnvjTrBy.js} +5 -5
- package/dist/cjs/{nv-table.entry-DevWJBnL.js → nv-table.entry-DkbNgxtI.js} +4 -4
- package/dist/cjs/{nv-tableheader.entry-Hs7nUSOC.js → nv-tableheader.entry-CRVFTQA-.js} +6 -6
- package/dist/cjs/{nv-toggle.entry-Eje9d--6.js → nv-toggle.entry-oC9TVkr1.js} +9 -9
- package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js +67 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-CWN_Ucry.js → nv-togglebuttongroup.entry-BYXX5ejg.js} +8 -5
- package/dist/cjs/{nv-tooltip.entry-BGkKDEFg.js → nv-tooltip.entry-OJGxfJEh.js} +5 -5
- package/dist/cjs/{style-value-types.es-f5d10b79-D0QCM8OB.js → style-value-types.es-xlgmw4x8-B1vLqX9m.js} +6 -3
- package/dist/cjs/{v4-a79185f4-2n0dOd_Y.js → v4-BdYh22OP-C1vaJ4yP.js} +1 -1
- package/dist/generated/components.js +80 -0
- package/dist/generated/components.server.js +216 -50
- package/dist/providers/NotificationProvider.js +3 -4
- package/dist/types/generated/components.d.ts +32 -0
- package/dist/types/generated/components.server.d.ts +32 -0
- package/package.json +2 -2
- package/dist/cjs/_commonjsHelpers-1789f0cf-BJu3ubxk.js +0 -10
- package/dist/cjs/inputmask-edcad3c1-B9Omti4z.js +0 -3749
- package/dist/cjs/nv-fieldcheckbox.entry-fdonR07Z.js +0 -138
- package/dist/cjs/nv-fielddropdown.entry-C9mXuNNj.js +0 -392
- package/dist/cjs/nv-fieldnumber.entry-DBdJviXu.js +0 -148
- package/dist/cjs/nv-fieldpassword.entry-Cim_usSM.js +0 -122
- package/dist/cjs/nv-fieldtext.entry-DlI_ExaV.js +0 -124
- package/dist/cjs/nv-togglebutton.entry-LGI7pIeK.js +0 -56
- /package/dist/cjs/{clsx-297c1ffe-BtxeOLZW.js → clsx-ChV9xqsO-BtxeOLZW.js} +0 -0
- /package/dist/cjs/{constants-69bafca2-DpB_ghPF.js → constants-BReL3Lsa-DpB_ghPF.js} +0 -0
- /package/dist/cjs/{timeline.animation-79215cd4-KteJaZPb.js → timeline.animation-CgHCo_Ho-KteJaZPb.js} +0 -0
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var index = require('./index-CtjeeUI-.js');
|
|
4
|
+
var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
|
|
5
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
|
+
require('@stencil/react-output-target/runtime');
|
|
6
7
|
require('react');
|
|
7
8
|
require('react-dom');
|
|
8
9
|
|
|
@@ -12,37 +13,37 @@ require('react-dom');
|
|
|
12
13
|
const FORMAT_CONFIGS = {
|
|
13
14
|
'HH': {
|
|
14
15
|
pattern: /^([0-1]?[0-9]|2[0-3])$/,
|
|
15
|
-
parts: [
|
|
16
|
+
parts: [constantsBReL3Lsa.TimeType.Hours],
|
|
16
17
|
defaultValue: '00',
|
|
17
18
|
maxLength: 2,
|
|
18
19
|
},
|
|
19
20
|
'HH:mm': {
|
|
20
21
|
pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/,
|
|
21
|
-
parts: [
|
|
22
|
+
parts: [constantsBReL3Lsa.TimeType.Hours, constantsBReL3Lsa.TimeType.Minutes],
|
|
22
23
|
defaultValue: '00:00',
|
|
23
24
|
maxLength: 5,
|
|
24
25
|
},
|
|
25
26
|
'HH:mm:ss': {
|
|
26
27
|
pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/,
|
|
27
|
-
parts: [
|
|
28
|
+
parts: [constantsBReL3Lsa.TimeType.Hours, constantsBReL3Lsa.TimeType.Minutes, constantsBReL3Lsa.TimeType.Seconds],
|
|
28
29
|
defaultValue: '00:00:00',
|
|
29
30
|
maxLength: 8,
|
|
30
31
|
},
|
|
31
32
|
'hh': {
|
|
32
33
|
pattern: /^(0?[1-9]|1[0-2])$/,
|
|
33
|
-
parts: [
|
|
34
|
+
parts: [constantsBReL3Lsa.TimeType.Hours],
|
|
34
35
|
defaultValue: '01',
|
|
35
36
|
maxLength: 2,
|
|
36
37
|
},
|
|
37
38
|
'hh:mm': {
|
|
38
39
|
pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9])$/,
|
|
39
|
-
parts: [
|
|
40
|
+
parts: [constantsBReL3Lsa.TimeType.Hours, constantsBReL3Lsa.TimeType.Minutes],
|
|
40
41
|
defaultValue: '01:00',
|
|
41
42
|
maxLength: 5,
|
|
42
43
|
},
|
|
43
44
|
'hh:mm:ss': {
|
|
44
45
|
pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9]):([0-5]?[0-9])$/,
|
|
45
|
-
parts: [
|
|
46
|
+
parts: [constantsBReL3Lsa.TimeType.Hours, constantsBReL3Lsa.TimeType.Minutes, constantsBReL3Lsa.TimeType.Seconds],
|
|
46
47
|
defaultValue: '01:00:00',
|
|
47
48
|
maxLength: 8,
|
|
48
49
|
},
|
|
@@ -56,7 +57,7 @@ function getVisibleTimeTypes(format) {
|
|
|
56
57
|
const config = FORMAT_CONFIGS[format];
|
|
57
58
|
if (!config) {
|
|
58
59
|
// Fallback for unknown formats
|
|
59
|
-
return [
|
|
60
|
+
return [constantsBReL3Lsa.TimeType.Hours, constantsBReL3Lsa.TimeType.Minutes, constantsBReL3Lsa.TimeType.Seconds];
|
|
60
61
|
}
|
|
61
62
|
return config.parts;
|
|
62
63
|
}
|
|
@@ -137,7 +138,7 @@ function parseValueByFormat(value, format) {
|
|
|
137
138
|
}
|
|
138
139
|
if (parts.length >= 2 &&
|
|
139
140
|
parts[1] &&
|
|
140
|
-
config.parts.includes(
|
|
141
|
+
config.parts.includes(constantsBReL3Lsa.TimeType.Minutes)) {
|
|
141
142
|
const minutes = parseInt(parts[1], 10);
|
|
142
143
|
if (!isNaN(minutes) && minutes >= 0 && minutes <= 59) {
|
|
143
144
|
result.minutes = minutes.toString().padStart(2, '0');
|
|
@@ -145,7 +146,7 @@ function parseValueByFormat(value, format) {
|
|
|
145
146
|
}
|
|
146
147
|
if (parts.length >= 3 &&
|
|
147
148
|
parts[2] &&
|
|
148
|
-
config.parts.includes(
|
|
149
|
+
config.parts.includes(constantsBReL3Lsa.TimeType.Seconds)) {
|
|
149
150
|
const seconds = parseInt(parts[2], 10);
|
|
150
151
|
if (!isNaN(seconds) && seconds >= 0 && seconds <= 59) {
|
|
151
152
|
result.seconds = seconds.toString().padStart(2, '0');
|
|
@@ -189,7 +190,7 @@ function extractRelevantComponents(components, format) {
|
|
|
189
190
|
minutes: '00',
|
|
190
191
|
seconds: '00',
|
|
191
192
|
};
|
|
192
|
-
if (config.parts.includes(
|
|
193
|
+
if (config.parts.includes(constantsBReL3Lsa.TimeType.Hours)) {
|
|
193
194
|
// Validate hours for the target format
|
|
194
195
|
const hours = parseInt(components.hours, 10);
|
|
195
196
|
if (format.startsWith('hh')) {
|
|
@@ -207,10 +208,10 @@ function extractRelevantComponents(components, format) {
|
|
|
207
208
|
// If invalid, keep the default '00'
|
|
208
209
|
}
|
|
209
210
|
}
|
|
210
|
-
if (config.parts.includes(
|
|
211
|
+
if (config.parts.includes(constantsBReL3Lsa.TimeType.Minutes)) {
|
|
211
212
|
result.minutes = components.minutes;
|
|
212
213
|
}
|
|
213
|
-
if (config.parts.includes(
|
|
214
|
+
if (config.parts.includes(constantsBReL3Lsa.TimeType.Seconds)) {
|
|
214
215
|
result.seconds = components.seconds;
|
|
215
216
|
}
|
|
216
217
|
return result;
|
|
@@ -241,17 +242,16 @@ function reconstructTimeByFormat(components, format) {
|
|
|
241
242
|
}
|
|
242
243
|
}
|
|
243
244
|
|
|
244
|
-
const nvFieldtimeCss = "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-fieldtime{--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-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block;z-index:9999}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .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;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
|
|
245
|
-
const NvFieldtimeStyle0 = nvFieldtimeCss;
|
|
245
|
+
const nvFieldtimeCss = "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-fieldtime{--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-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after,nv-fieldtime[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime nv-popover{z-index:9999}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input{}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input{width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldtime .input-container>nv-iconbutton{margin-left:auto}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column{max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
|
|
246
246
|
|
|
247
247
|
const NvFieldtime = class {
|
|
248
248
|
constructor(hostRef) {
|
|
249
249
|
index.registerInstance(this, hostRef);
|
|
250
|
-
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
250
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
251
251
|
// Input elements for hours, minutes, and seconds
|
|
252
252
|
this.inputElements = {};
|
|
253
253
|
this.inputZeroAdded = {};
|
|
254
|
-
this.typeFocused =
|
|
254
|
+
this.typeFocused = constantsBReL3Lsa.TimeType.Hours;
|
|
255
255
|
/****************************************************************************/
|
|
256
256
|
//#region STATES
|
|
257
257
|
this.hours = '00';
|
|
@@ -263,7 +263,7 @@ const NvFieldtime = class {
|
|
|
263
263
|
* to ensure unique identification, facilitating proper label association and
|
|
264
264
|
* accessibility.
|
|
265
265
|
*/
|
|
266
|
-
this.inputId =
|
|
266
|
+
this.inputId = v4BdYh22OP.v4();
|
|
267
267
|
/**
|
|
268
268
|
* Display the input field's content without allowing users to change it.
|
|
269
269
|
* Users can still click on it, select, and copy the text, but they won't be
|
|
@@ -279,8 +279,18 @@ const NvFieldtime = class {
|
|
|
279
279
|
/**
|
|
280
280
|
* Marks the input field as required, ensuring that the user must fill it out
|
|
281
281
|
* before submitting the form.
|
|
282
|
+
* @note This uses the native HTML `required` attribute, which triggers browser validation.
|
|
282
283
|
*/
|
|
283
284
|
this.required = false;
|
|
285
|
+
/**
|
|
286
|
+
* Marks the input field as required for accessibility purposes without triggering
|
|
287
|
+
* native HTML validation. Use this when implementing custom validation logic.
|
|
288
|
+
* @note When set, this uses `aria-required` instead of the native `required` attribute.
|
|
289
|
+
* This allows developers to implement custom validation while maintaining accessibility.
|
|
290
|
+
* @note If this prop is not explicitly set, the component will check for the HTML attribute
|
|
291
|
+
* 'aria-required' directly to determine if it should be applied.
|
|
292
|
+
*/
|
|
293
|
+
this.ariaRequiredAttr = false;
|
|
284
294
|
/**
|
|
285
295
|
* Changes the input field’s appearance to indicate successful input or
|
|
286
296
|
* validation.
|
|
@@ -326,12 +336,6 @@ const NvFieldtime = class {
|
|
|
326
336
|
//#endregion EVENTS
|
|
327
337
|
/****************************************************************************/
|
|
328
338
|
//#region LISTENERS
|
|
329
|
-
handleOpenChanged(event) {
|
|
330
|
-
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
331
|
-
event.stopPropagation();
|
|
332
|
-
// Update `open` based on the popover state
|
|
333
|
-
this.open = event.detail;
|
|
334
|
-
}
|
|
335
339
|
handleKeyDown(event) {
|
|
336
340
|
var _a, _b;
|
|
337
341
|
if (!this.open) {
|
|
@@ -410,11 +414,11 @@ const NvFieldtime = class {
|
|
|
410
414
|
// React to external changes, e.g., highlight current time on open
|
|
411
415
|
if (newOpen) {
|
|
412
416
|
// Re-highlight columns based on current value
|
|
413
|
-
const hourSelector = `.time-column.time-column-${
|
|
417
|
+
const hourSelector = `.time-column.time-column-${constantsBReL3Lsa.TimeType.Hours} div`;
|
|
414
418
|
this.updateColumnHighlight(hourSelector, this.hours);
|
|
415
|
-
const minutesSelector = `.time-column.time-column-${
|
|
419
|
+
const minutesSelector = `.time-column.time-column-${constantsBReL3Lsa.TimeType.Minutes} div`;
|
|
416
420
|
this.updateColumnHighlight(minutesSelector, this.minutes);
|
|
417
|
-
const secondsSelector = `.time-column.time-column-${
|
|
421
|
+
const secondsSelector = `.time-column.time-column-${constantsBReL3Lsa.TimeType.Seconds} div`;
|
|
418
422
|
this.updateColumnHighlight(secondsSelector, this.seconds);
|
|
419
423
|
}
|
|
420
424
|
}
|
|
@@ -450,13 +454,13 @@ const NvFieldtime = class {
|
|
|
450
454
|
}
|
|
451
455
|
// Update the time value based on the type
|
|
452
456
|
switch (type) {
|
|
453
|
-
case
|
|
457
|
+
case constantsBReL3Lsa.TimeType.Hours:
|
|
454
458
|
this.handleHoursChange(inputValue, type);
|
|
455
459
|
break;
|
|
456
|
-
case
|
|
460
|
+
case constantsBReL3Lsa.TimeType.Minutes:
|
|
457
461
|
this.handleMinutesChange(inputValue, type);
|
|
458
462
|
break;
|
|
459
|
-
case
|
|
463
|
+
case constantsBReL3Lsa.TimeType.Seconds:
|
|
460
464
|
this.handleSecondsChange(inputValue, type);
|
|
461
465
|
break;
|
|
462
466
|
}
|
|
@@ -523,7 +527,7 @@ const NvFieldtime = class {
|
|
|
523
527
|
// Auto-navigation to next field when input is complete
|
|
524
528
|
if (this.hours.length >= 1 && !this.inputZeroAdded[type]) {
|
|
525
529
|
const visibleTypes = getVisibleTimeTypes(this.format);
|
|
526
|
-
const currentTypeIndex = visibleTypes.indexOf(
|
|
530
|
+
const currentTypeIndex = visibleTypes.indexOf(constantsBReL3Lsa.TimeType.Hours);
|
|
527
531
|
const nextTypeIndex = currentTypeIndex + 1;
|
|
528
532
|
if (nextTypeIndex < visibleTypes.length) {
|
|
529
533
|
const nextType = visibleTypes[nextTypeIndex];
|
|
@@ -589,7 +593,7 @@ const NvFieldtime = class {
|
|
|
589
593
|
// Auto-navigation to next field when input is complete
|
|
590
594
|
if (this.minutes.length >= 1 && !this.inputZeroAdded[type]) {
|
|
591
595
|
const visibleTypes = getVisibleTimeTypes(this.format);
|
|
592
|
-
const currentTypeIndex = visibleTypes.indexOf(
|
|
596
|
+
const currentTypeIndex = visibleTypes.indexOf(constantsBReL3Lsa.TimeType.Minutes);
|
|
593
597
|
const nextTypeIndex = currentTypeIndex + 1;
|
|
594
598
|
if (nextTypeIndex < visibleTypes.length) {
|
|
595
599
|
const nextType = visibleTypes[nextTypeIndex];
|
|
@@ -733,13 +737,13 @@ const NvFieldtime = class {
|
|
|
733
737
|
const option = parseInt(event.target.textContent || '0', 10);
|
|
734
738
|
// Update the time component directly without constraint validation
|
|
735
739
|
// Dropdown options are already filtered by constraints during generation
|
|
736
|
-
if (type ===
|
|
740
|
+
if (type === constantsBReL3Lsa.TimeType.Hours) {
|
|
737
741
|
this.hours = option.toString().padStart(2, '0');
|
|
738
742
|
}
|
|
739
|
-
else if (type ===
|
|
743
|
+
else if (type === constantsBReL3Lsa.TimeType.Minutes) {
|
|
740
744
|
this.minutes = option.toString().padStart(2, '0');
|
|
741
745
|
}
|
|
742
|
-
else if (type ===
|
|
746
|
+
else if (type === constantsBReL3Lsa.TimeType.Seconds) {
|
|
743
747
|
this.seconds = option.toString().padStart(2, '0');
|
|
744
748
|
}
|
|
745
749
|
// Reconstruct time in the correct format and update value
|
|
@@ -791,11 +795,11 @@ const NvFieldtime = class {
|
|
|
791
795
|
}
|
|
792
796
|
// Generate the time options based on the type
|
|
793
797
|
switch (type) {
|
|
794
|
-
case
|
|
798
|
+
case constantsBReL3Lsa.TimeType.Hours:
|
|
795
799
|
return this.generateHourOptions(stepInSeconds);
|
|
796
|
-
case
|
|
800
|
+
case constantsBReL3Lsa.TimeType.Minutes:
|
|
797
801
|
return this.generateMinuteOptions(stepInSeconds);
|
|
798
|
-
case
|
|
802
|
+
case constantsBReL3Lsa.TimeType.Seconds:
|
|
799
803
|
return this.generateSecondOptions(stepInSeconds);
|
|
800
804
|
default:
|
|
801
805
|
return [];
|
|
@@ -932,6 +936,9 @@ const NvFieldtime = class {
|
|
|
932
936
|
event.preventDefault();
|
|
933
937
|
}
|
|
934
938
|
}
|
|
939
|
+
handleOpenChanged(event) {
|
|
940
|
+
this.open = event.detail;
|
|
941
|
+
}
|
|
935
942
|
//#endregion METHODS
|
|
936
943
|
/****************************************************************************/
|
|
937
944
|
//#region LIFECYCLE
|
|
@@ -978,6 +985,47 @@ const NvFieldtime = class {
|
|
|
978
985
|
//#endregion LIFECYCLE
|
|
979
986
|
/****************************************************************************/
|
|
980
987
|
//#region RENDER
|
|
988
|
+
/**
|
|
989
|
+
* Calculates aria-required and native required values based on props and attributes
|
|
990
|
+
* @returns {object} Object with ariaRequiredValue and useNativeRequired
|
|
991
|
+
*/
|
|
992
|
+
getRequiredAttributes() {
|
|
993
|
+
// Check aria-required from multiple sources:
|
|
994
|
+
// 1. JavaScript prop (most reliable)
|
|
995
|
+
// 2. HTML attribute 'aria-required' (direct HTML)
|
|
996
|
+
// 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)
|
|
997
|
+
// Check aria-required from multiple sources:
|
|
998
|
+
// 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
|
|
999
|
+
// 2. JavaScript prop (when prop is explicitly set via JavaScript)
|
|
1000
|
+
// We use hasAttribute to determine if the attribute was explicitly set by the user,
|
|
1001
|
+
// since the prop now defaults to false (to maintain Blazor compatibility)
|
|
1002
|
+
const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
|
|
1003
|
+
this.el.hasAttribute('aria-required-attr');
|
|
1004
|
+
const ariaRequiredFromAttr = hasAriaRequiredAttr
|
|
1005
|
+
? this.el.getAttribute('aria-required') ||
|
|
1006
|
+
this.el.getAttribute('aria-required-attr')
|
|
1007
|
+
: null;
|
|
1008
|
+
// Use aria-required if the attribute was explicitly set
|
|
1009
|
+
// With reflect: true, setting the prop will also set the attribute
|
|
1010
|
+
const useAriaRequired = hasAriaRequiredAttr;
|
|
1011
|
+
// Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
|
|
1012
|
+
// If attribute doesn't exist, the prop was never set and we don't use aria-required
|
|
1013
|
+
const ariaRequiredAttrValue = hasAriaRequiredAttr
|
|
1014
|
+
? ariaRequiredFromAttr
|
|
1015
|
+
: null;
|
|
1016
|
+
// Determine which attributes to use
|
|
1017
|
+
// If aria-required HTML attribute is present, use it (convert string to boolean)
|
|
1018
|
+
// If required is set and aria-required is not "false", use native required
|
|
1019
|
+
// If aria-required is "false", don't use native required even if required is set
|
|
1020
|
+
const ariaRequiredValue = useAriaRequired
|
|
1021
|
+
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
1022
|
+
: undefined;
|
|
1023
|
+
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
1024
|
+
return {
|
|
1025
|
+
ariaRequiredValue,
|
|
1026
|
+
useNativeRequired,
|
|
1027
|
+
};
|
|
1028
|
+
}
|
|
981
1029
|
/**
|
|
982
1030
|
* Renders input fields based on the current format
|
|
983
1031
|
* Only shows fields that are relevant to the selected format
|
|
@@ -1004,11 +1052,11 @@ const NvFieldtime = class {
|
|
|
1004
1052
|
renderTimeInputField(type) {
|
|
1005
1053
|
const getValue = () => {
|
|
1006
1054
|
switch (type) {
|
|
1007
|
-
case
|
|
1055
|
+
case constantsBReL3Lsa.TimeType.Hours:
|
|
1008
1056
|
return this.hours;
|
|
1009
|
-
case
|
|
1057
|
+
case constantsBReL3Lsa.TimeType.Minutes:
|
|
1010
1058
|
return this.minutes;
|
|
1011
|
-
case
|
|
1059
|
+
case constantsBReL3Lsa.TimeType.Seconds:
|
|
1012
1060
|
return this.seconds;
|
|
1013
1061
|
default:
|
|
1014
1062
|
return '00';
|
|
@@ -1016,11 +1064,11 @@ const NvFieldtime = class {
|
|
|
1016
1064
|
};
|
|
1017
1065
|
const getPlaceholder = () => {
|
|
1018
1066
|
switch (type) {
|
|
1019
|
-
case
|
|
1067
|
+
case constantsBReL3Lsa.TimeType.Hours:
|
|
1020
1068
|
return this.format.includes('hh') ? 'hh' : 'HH';
|
|
1021
|
-
case
|
|
1069
|
+
case constantsBReL3Lsa.TimeType.Minutes:
|
|
1022
1070
|
return 'mm';
|
|
1023
|
-
case
|
|
1071
|
+
case constantsBReL3Lsa.TimeType.Seconds:
|
|
1024
1072
|
return 'ss';
|
|
1025
1073
|
default:
|
|
1026
1074
|
return '';
|
|
@@ -1028,11 +1076,11 @@ const NvFieldtime = class {
|
|
|
1028
1076
|
};
|
|
1029
1077
|
const getId = () => {
|
|
1030
1078
|
switch (type) {
|
|
1031
|
-
case
|
|
1079
|
+
case constantsBReL3Lsa.TimeType.Hours:
|
|
1032
1080
|
return this.inputId;
|
|
1033
|
-
case
|
|
1081
|
+
case constantsBReL3Lsa.TimeType.Minutes:
|
|
1034
1082
|
return `${this.inputId}-minutes`;
|
|
1035
|
-
case
|
|
1083
|
+
case constantsBReL3Lsa.TimeType.Seconds:
|
|
1036
1084
|
return `${this.inputId}-seconds`;
|
|
1037
1085
|
default:
|
|
1038
1086
|
return this.inputId;
|
|
@@ -1040,7 +1088,11 @@ const NvFieldtime = class {
|
|
|
1040
1088
|
};
|
|
1041
1089
|
// Remove min/max constraints from input elements to allow native stepper behavior
|
|
1042
1090
|
// Constraints are only applied to dropdown options, not input steppers
|
|
1043
|
-
return (index.h("input", { ref: el => (this.inputElements[type] = el), type: "number", autofocus: this.autofocus && type === getVisibleTimeTypes(this.format)[0], class: "time-input", pattern: "[0-9]*", maxlength: "3", value: getValue(), onInput: e => this.handleInputChange(e, type), placeholder: getPlaceholder(), inputMode: "numeric", onFocus: () => this.handleFocus(type), name: this.name ? `${type}-${this.name}` : type, id: getId(), readonly: this.readonly, disabled: this.disabled, required: this.
|
|
1091
|
+
return (index.h("input", Object.assign({ ref: el => (this.inputElements[type] = el), type: "number", autofocus: this.autofocus && type === getVisibleTimeTypes(this.format)[0], class: "time-input", pattern: "[0-9]*", maxlength: "3", value: getValue(), onInput: e => this.handleInputChange(e, type), placeholder: getPlaceholder(), inputMode: "numeric", onFocus: () => this.handleFocus(type), name: this.name ? `${type}-${this.name}` : type, id: getId(), readonly: this.readonly, disabled: this.disabled, required: this.getRequiredAttributes().useNativeRequired
|
|
1092
|
+
? this.required
|
|
1093
|
+
: undefined }, (this.getRequiredAttributes().ariaRequiredValue !== undefined && {
|
|
1094
|
+
'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
|
|
1095
|
+
}), { onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() })));
|
|
1044
1096
|
}
|
|
1045
1097
|
/**
|
|
1046
1098
|
* Renders dropdown columns based on the current format
|
|
@@ -1054,15 +1106,15 @@ const NvFieldtime = class {
|
|
|
1054
1106
|
RenderTimeOptionsColumn(type) {
|
|
1055
1107
|
return (index.h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index$1) => (index.h("div", { class: {
|
|
1056
1108
|
'time-option': true,
|
|
1057
|
-
'selected': (type ===
|
|
1058
|
-
(type ===
|
|
1059
|
-
(type ===
|
|
1109
|
+
'selected': (type === constantsBReL3Lsa.TimeType.Hours && option === this.hours) ||
|
|
1110
|
+
(type === constantsBReL3Lsa.TimeType.Minutes && option === this.minutes) ||
|
|
1111
|
+
(type === constantsBReL3Lsa.TimeType.Seconds && option === this.seconds),
|
|
1060
1112
|
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
1061
1113
|
}
|
|
1062
1114
|
render() {
|
|
1063
|
-
return (index.h(index.Host, { key: '
|
|
1064
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
1065
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
1115
|
+
return (index.h(index.Host, { key: '04306e30d631f8d3f87f13cc4ea2b7122d03b21b', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3508543a3c689ce6db828d065c741c505c3c19ff', htmlFor: this.inputId }, index.h("slot", { key: '3ff5d281c755263365f6bc7de4bc71faa568a8a5', name: "label" }, this.label))), index.h("nv-popover", { key: '13f0a73cd22882f2f46803d591a11b822fd588dd', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, index.h("div", { key: '43795c7f1bb3184d7d9c6336d6346eb1319c7a43', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '5e1ab0236585f3b4d399ed37bfa39c984a10f164', name: "before-input" }), index.h("div", { key: 'c891d3e9de705c020da2af1c4b2bc4c7f9301533', class: "input-container" }, index.h("slot", { key: '97b5768bac85ca701b028235c4fe2e0630b1d9f6', name: "leading-input" }), this.renderTimeInputFields(), index.h("nv-iconbutton", { key: '034dc1f211459292c4ad63f65a5c1b6a7585306e', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '2ed7cbacce3086068c6501ebc3fb4da458582a01', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '529d8b6a9e0f0a29786a1b0f5afc621c08f2a94b', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '0b805e12dedf7bfd1f92bee632c2c9ca4d3d4951', name: "after-input" })), index.h("div", { key: '658cf205b234a1a802b0a36d2c07ad1ee7730c38', class: "time-dropdown", slot: "content" }, index.h("div", { key: 'f87b6b12004d100a0a109f7b93c9be0a01a69a9f', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
|
|
1116
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'd733ca3ed3361dacb0e5654b3be5bf56aafc9afd', class: "description" }, index.h("slot", { key: 'b487727f07900c7759e7739516fe3610116f77b8', name: "description" }, this.description))), (this.errorDescription ||
|
|
1117
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5dbad695497c12fed1c8c3930dacb7a9a1bffa00', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f35c4b0afa87a18810a229f16d3c48936c66a47f', name: "error-description" }, this.errorDescription)))));
|
|
1066
1118
|
}
|
|
1067
1119
|
static get formAssociated() { return true; }
|
|
1068
1120
|
get el() { return index.getElement(this); }
|
|
@@ -1072,6 +1124,6 @@ const NvFieldtime = class {
|
|
|
1072
1124
|
"format": ["handleFormatChange"]
|
|
1073
1125
|
}; }
|
|
1074
1126
|
};
|
|
1075
|
-
NvFieldtime.style =
|
|
1127
|
+
NvFieldtime.style = nvFieldtimeCss;
|
|
1076
1128
|
|
|
1077
1129
|
exports.nv_fieldtime = NvFieldtime;
|