@nova-design-system/nova-react 3.18.0-beta.0 → 3.19.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/generated/components.server.js +4 -2
- package/dist/cjs/{index-CQAMJPJk.js → index-C12eD0Qt.js} +886 -831
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-accordion-item.entry-BQ4e6YBV.js → nv-accordion-item.entry-99OJUl7m.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-BX5L-Gh7.js → nv-accordion.entry-D8jaknF9.js} +1 -1
- package/dist/cjs/{nv-alert.entry-GY7Xn7F6.js → nv-alert.entry-D_uvQxc9.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-j-ctCQEi.js → nv-avatar.entry-B2zfDM3w.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-tuEGBPUn.js → nv-badge_2.entry-Fnq2K2Ul.js} +2 -2
- package/dist/cjs/{nv-breadcrumb.entry-DHZpC_e3.js → nv-breadcrumb.entry-CEN2iYUQ.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-2tzS_xzO.js → nv-breadcrumbs.entry-Bq8qINNk.js} +1 -1
- package/dist/cjs/{nv-button.entry-BfV4ewn0.js → nv-button.entry-CmpagMPP.js} +1 -1
- package/dist/cjs/{nv-buttongroup.entry-BBTtBLTw.js → nv-buttongroup.entry-CbTXVSWL.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-CTkbvFRZ.js → nv-calendar.entry-DNkXS4ll.js} +1 -1
- package/dist/cjs/{nv-col.entry-CsSk4Ltj.js → nv-col.entry-Dlrdqper.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-DlQRC5CG.js → nv-datagrid.entry-Z5GHfOvp.js} +1 -1
- package/dist/cjs/{nv-datagridcolumn.entry-BxSumv4Q.js → nv-datagridcolumn.entry-DvSFVguN.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BFeHCAhr.js → nv-dialog.entry-BV6QBtx2.js} +1 -1
- package/dist/cjs/{nv-dialogfooter_2.entry-CXOzxujX.js → nv-dialogfooter_2.entry-Ci1C_E-2.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-BMq7p1kc.js → nv-fieldcheckbox.entry-BD9ETFVV.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-DmMQq5bO.js → nv-fielddate.entry-C06n2Hri.js} +11 -7
- package/dist/cjs/{nv-fielddaterange.entry-BJm7_qAB.js → nv-fielddaterange.entry-DFlaA4gv.js} +12 -8
- package/dist/cjs/{nv-fielddropdown.entry-DOkzDn78.js → nv-fielddropdown.entry-ONwdJHOm.js} +194 -210
- package/dist/cjs/{nv-fielddropdownitem.entry-CVI8jUn4.js → nv-fielddropdownitem.entry-CDKQtEra.js} +8 -5
- package/dist/cjs/{nv-fieldmultiselect.entry-CWxL0xsk.js → nv-fieldmultiselect.entry-BHJC59Mw.js} +5 -1
- package/dist/cjs/{nv-fieldnumber.entry-bReRT-TF.js → nv-fieldnumber.entry-CmL1LPom.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-BprEVABM.js → nv-fieldpassword.entry-Bqbf_LJJ.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-T_uuPP7m.js → nv-fieldradio.entry-RzSCysif.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-DB9YREaD.js → nv-fieldselect.entry-COTE8Ntn.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-Bkj5p8jp.js → nv-fieldslider.entry-BVfmpUhc.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-BsUZW21W.js → nv-fieldtext.entry-DO0lmw9C.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-DtC4sL4g.js → nv-fieldtextarea.entry-CzVq8gjw.js} +4 -4
- package/dist/cjs/nv-fieldtime.entry-CRNYbeMY.js +1077 -0
- package/dist/cjs/nv-icon.entry-FoRJzCHm.js +80 -0
- package/dist/cjs/{nv-iconbutton_2.entry-DI-3_IYV.js → nv-iconbutton_2.entry-0lnnCk0B.js} +3 -3
- package/dist/cjs/{nv-menu.entry-BbqP7TZx.js → nv-menu.entry-BjXa70qP.js} +3 -3
- package/dist/cjs/{nv-menuitem.entry-BxGppIvW.js → nv-menuitem.entry-CSPwpUWz.js} +2 -2
- package/dist/cjs/{nv-notification.entry-D1gy3PSV.js → nv-notification.entry-BYHTrzUz.js} +2 -2
- package/dist/cjs/{nv-notificationcontainer.entry-MJPLFXsR.js → nv-notificationcontainer.entry-BBjrL7gt.js} +2 -2
- package/dist/cjs/{nv-popover.entry-CL28RbQ0.js → nv-popover.entry-J_M8_rLL.js} +3 -3
- package/dist/cjs/{nv-row.entry-DkCe2B9f.js → nv-row.entry-CmOypCPp.js} +2 -2
- package/dist/cjs/{nv-split.entry-BMVNZDwj.js → nv-split.entry-BqBytQZn.js} +2 -2
- package/dist/cjs/{nv-stack.entry-iH3La5O3.js → nv-stack.entry-BKPf62wy.js} +2 -2
- package/dist/cjs/{nv-table.entry-DFHkpLLG.js → nv-table.entry-DSL_jd5Y.js} +2 -2
- package/dist/cjs/{nv-toggle.entry-BM2Xdtvg.js → nv-toggle.entry-DbQQdp5m.js} +3 -3
- package/dist/cjs/{nv-togglebutton.entry-DPu3j4uH.js → nv-togglebutton.entry-DNG6SFTU.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-BBUI9mSK.js → nv-togglebuttongroup.entry-Bl43CVZN.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-CEynYna7.js → nv-tooltip.entry-CV841nfI.js} +2 -2
- package/dist/generated/components.js +2 -0
- package/dist/generated/components.server.js +4 -2
- package/dist/types/generated/components.d.ts +3 -0
- package/dist/types/generated/components.server.d.ts +3 -0
- package/package.json +1 -1
- package/dist/cjs/nv-fieldtime.entry-BW8nABK-.js +0 -1028
- package/dist/cjs/nv-icon.entry-BFTi5BIN.js +0 -80
|
@@ -1,1028 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var index = require('./index-CQAMJPJk.js');
|
|
4
|
-
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
5
|
-
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
|
-
require('react');
|
|
7
|
-
require('react-dom');
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Checks if a string starts with a given prefix, ignoring case.
|
|
11
|
-
* @param {string} str - The string to check.
|
|
12
|
-
* @param {string} prefix - The prefix to check for.
|
|
13
|
-
* @returns {boolean} - True if the string starts with the prefix, ignoring case.
|
|
14
|
-
* @example startsWithIgnoreCase('Hello, world!', 'hello') // true
|
|
15
|
-
* @example startsWithIgnoreCase('Hello, world!', 'world') // false
|
|
16
|
-
*/
|
|
17
|
-
function startsWithIgnoreCase(str, prefix) {
|
|
18
|
-
if (!str || !prefix)
|
|
19
|
-
return false;
|
|
20
|
-
return str.toLowerCase().startsWith(prefix.toLowerCase());
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
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}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)}";
|
|
24
|
-
const NvFieldtimeStyle0 = nvFieldtimeCss;
|
|
25
|
-
|
|
26
|
-
const NvFieldtime = class {
|
|
27
|
-
constructor(hostRef) {
|
|
28
|
-
index.registerInstance(this, hostRef);
|
|
29
|
-
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
30
|
-
// Input elements for hours, minutes, and seconds
|
|
31
|
-
this.inputElements = {};
|
|
32
|
-
this.inputZeroAdded = {};
|
|
33
|
-
this.typeFocused = constants69bafca2.TimeType.Hours;
|
|
34
|
-
/****************************************************************************/
|
|
35
|
-
//#region STATES
|
|
36
|
-
this.hours = '00';
|
|
37
|
-
this.minutes = '00';
|
|
38
|
-
this.seconds = '00';
|
|
39
|
-
/**
|
|
40
|
-
* Sets the ID for the input element and the for attribute of the associated
|
|
41
|
-
* label. If no ID is provided, a random one will be automatically generated
|
|
42
|
-
* to ensure unique identification, facilitating proper label association and
|
|
43
|
-
* accessibility.
|
|
44
|
-
*/
|
|
45
|
-
this.inputId = v4A79185f4.v4();
|
|
46
|
-
/**
|
|
47
|
-
* Display the input field's content without allowing users to change it.
|
|
48
|
-
* Users can still click on it, select, and copy the text, but they won't be
|
|
49
|
-
* able to type or delete anything.
|
|
50
|
-
*/
|
|
51
|
-
this.readonly = false;
|
|
52
|
-
/**
|
|
53
|
-
* The disabled prop lets you turn off the input field so that users can't
|
|
54
|
-
* interact with it. When disabled, the field is grayed out and won't respond to
|
|
55
|
-
* clicks or touches.
|
|
56
|
-
*/
|
|
57
|
-
this.disabled = false;
|
|
58
|
-
/**
|
|
59
|
-
* Marks the input field as required, ensuring that the user must fill it out
|
|
60
|
-
* before submitting the form.
|
|
61
|
-
*/
|
|
62
|
-
this.required = false;
|
|
63
|
-
/**
|
|
64
|
-
* Changes the input field’s appearance to indicate successful input or
|
|
65
|
-
* validation.
|
|
66
|
-
*/
|
|
67
|
-
this.success = false;
|
|
68
|
-
/**
|
|
69
|
-
* Alters the input field's appearance to indicate an error, helping users
|
|
70
|
-
* identify fields that need correction.
|
|
71
|
-
* @validator error
|
|
72
|
-
*/
|
|
73
|
-
this.error = false;
|
|
74
|
-
/**
|
|
75
|
-
* Specifies the time format to be used.
|
|
76
|
-
* Available formats:
|
|
77
|
-
* - HH: 24-hour format (00-23)
|
|
78
|
-
* - HH:mm: 24-hour format with minutes (00:00-23:59)
|
|
79
|
-
* - HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)
|
|
80
|
-
* - hh: 12-hour format (01-12)
|
|
81
|
-
* - hh:mm: 12-hour format with minutes (01:00-12:59)
|
|
82
|
-
* - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)
|
|
83
|
-
*/
|
|
84
|
-
this.format = 'HH:mm:ss';
|
|
85
|
-
/**
|
|
86
|
-
* State of the time picker popover.
|
|
87
|
-
*/
|
|
88
|
-
this.open = false;
|
|
89
|
-
/**
|
|
90
|
-
* The step interval in milliseconds for time increments/decrements.
|
|
91
|
-
* This affects how the time changes when using arrow keys or spinners.
|
|
92
|
-
*/
|
|
93
|
-
this.step = 60000; // In secondes
|
|
94
|
-
/**
|
|
95
|
-
* Applies focus to the input field as soon as the component is mounted. This
|
|
96
|
-
* is equivalent to setting the native autofocus attribute on an <input>
|
|
97
|
-
* element.
|
|
98
|
-
*/
|
|
99
|
-
this.autofocus = false;
|
|
100
|
-
}
|
|
101
|
-
//#endregion EVENTS
|
|
102
|
-
/****************************************************************************/
|
|
103
|
-
//#region LISTENERS
|
|
104
|
-
handleOpenChanged(event) {
|
|
105
|
-
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
106
|
-
event.stopPropagation();
|
|
107
|
-
// Update `open` based on the popover state
|
|
108
|
-
this.open = event.detail;
|
|
109
|
-
}
|
|
110
|
-
handleKeyDown(event) {
|
|
111
|
-
var _a, _b, _c, _d;
|
|
112
|
-
if (!this.open) {
|
|
113
|
-
if (event.key === 'ArrowDown') {
|
|
114
|
-
this.open = true;
|
|
115
|
-
event.preventDefault();
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
// Verify if the popover element is defined
|
|
121
|
-
if (!this.popoverElement) {
|
|
122
|
-
console.warn('nv-fieldtime -> Popover element is not defined');
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
const stringSelector = `.time-column.time-column-${this.typeFocused} div`;
|
|
126
|
-
const items = Array.from(this.el.querySelectorAll(stringSelector));
|
|
127
|
-
// Verify if there are items to navigate
|
|
128
|
-
if (items.length === 0) {
|
|
129
|
-
console.warn('nv-fieldtime -> No dropdown items found to navigate');
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
|
|
133
|
-
if (event.key === 'ArrowDown') {
|
|
134
|
-
event.preventDefault();
|
|
135
|
-
currentIndex = (currentIndex + 1) % items.length;
|
|
136
|
-
this.updateHighlightedItem(items, currentIndex);
|
|
137
|
-
}
|
|
138
|
-
else if (event.key === 'ArrowUp') {
|
|
139
|
-
event.preventDefault();
|
|
140
|
-
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
|
141
|
-
this.updateHighlightedItem(items, currentIndex);
|
|
142
|
-
}
|
|
143
|
-
else if (event.key === 'Enter' && currentIndex >= 0) {
|
|
144
|
-
event.preventDefault();
|
|
145
|
-
items[currentIndex].click();
|
|
146
|
-
if (this.typeFocused === constants69bafca2.TimeType.Hours) {
|
|
147
|
-
(_a = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
148
|
-
(_b = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
|
|
149
|
-
}
|
|
150
|
-
else if (this.typeFocused === constants69bafca2.TimeType.Minutes ||
|
|
151
|
-
this.typeFocused === constants69bafca2.TimeType.Seconds) {
|
|
152
|
-
(_c = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
153
|
-
(_d = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
else if (event.key === 'Escape') {
|
|
157
|
-
event.preventDefault();
|
|
158
|
-
if (this.inputElements[constants69bafca2.TimeType.Hours]) {
|
|
159
|
-
this.inputElements[constants69bafca2.TimeType.Hours].blur();
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
//#endregion LISTENERS
|
|
164
|
-
/****************************************************************************/
|
|
165
|
-
//#region WATCHERS
|
|
166
|
-
handleValueChange(newValue) {
|
|
167
|
-
this.valueChanged.emit(newValue);
|
|
168
|
-
}
|
|
169
|
-
handleOpenChange(newOpen) {
|
|
170
|
-
// React to external changes, e.g., highlight current time on open
|
|
171
|
-
if (newOpen) {
|
|
172
|
-
// Re-highlight columns based on current value
|
|
173
|
-
const hourSelector = `.time-column.time-column-${constants69bafca2.TimeType.Hours} div`;
|
|
174
|
-
this.updateColumnHighlight(hourSelector, this.hours);
|
|
175
|
-
const minutesSelector = `.time-column.time-column-${constants69bafca2.TimeType.Minutes} div`;
|
|
176
|
-
this.updateColumnHighlight(minutesSelector, this.minutes);
|
|
177
|
-
const secondsSelector = `.time-column.time-column-${constants69bafca2.TimeType.Seconds} div`;
|
|
178
|
-
this.updateColumnHighlight(secondsSelector, this.seconds);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
//#endregion WATCHERS
|
|
182
|
-
/****************************************************************************/
|
|
183
|
-
//#region METHODS
|
|
184
|
-
handleInputChange(e, type) {
|
|
185
|
-
const inputElement = e.target;
|
|
186
|
-
const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input
|
|
187
|
-
// Update the time value based on the type
|
|
188
|
-
switch (type) {
|
|
189
|
-
case constants69bafca2.TimeType.Hours:
|
|
190
|
-
this.handleHoursChange(inputValue, type);
|
|
191
|
-
break;
|
|
192
|
-
case constants69bafca2.TimeType.Minutes:
|
|
193
|
-
this.handleMinutesChange(inputValue, type);
|
|
194
|
-
break;
|
|
195
|
-
case constants69bafca2.TimeType.Seconds:
|
|
196
|
-
this.handleSecondsChange(inputValue, type);
|
|
197
|
-
break;
|
|
198
|
-
}
|
|
199
|
-
// Reconstruct time from inputs
|
|
200
|
-
const currentValue = this.reconstructTime();
|
|
201
|
-
this.value = currentValue;
|
|
202
|
-
}
|
|
203
|
-
handleHoursChange(inputValue, type) {
|
|
204
|
-
var _a, _b, _c, _d;
|
|
205
|
-
const isHHFormat = this.format.startsWith('HH');
|
|
206
|
-
const maxHours = isHHFormat ? 24 : 12;
|
|
207
|
-
let reputedToZero = false;
|
|
208
|
-
const maxHour = this.parseHour(this.max, this.format) ||
|
|
209
|
-
(this.format.startsWith('hh') ? '12' : '24');
|
|
210
|
-
const minHour = this.parseHour(this.min, this.format) || '00';
|
|
211
|
-
if (inputValue.length === 1) {
|
|
212
|
-
this.inputZeroAdded[type] = true;
|
|
213
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
214
|
-
if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
|
|
215
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
216
|
-
this.hours = minHour;
|
|
217
|
-
}
|
|
218
|
-
else {
|
|
219
|
-
this.hours = '00';
|
|
220
|
-
reputedToZero = true;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
else {
|
|
224
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
225
|
-
this.hours = minHour;
|
|
226
|
-
}
|
|
227
|
-
else {
|
|
228
|
-
this.hours = newInputValue;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
else if (this.inputZeroAdded[type]) {
|
|
233
|
-
this.inputZeroAdded[type] = false;
|
|
234
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
235
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
236
|
-
if (parsedNewInputValue >= maxHours) {
|
|
237
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
238
|
-
this.hours = minHour;
|
|
239
|
-
}
|
|
240
|
-
else {
|
|
241
|
-
this.hours = '00';
|
|
242
|
-
reputedToZero = true;
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
|
|
247
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
248
|
-
this.hours = minHour;
|
|
249
|
-
}
|
|
250
|
-
else {
|
|
251
|
-
this.hours = '00';
|
|
252
|
-
reputedToZero = true;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
else {
|
|
256
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
257
|
-
this.hours = minHour;
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
260
|
-
this.hours = newInputValue;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
else if (inputValue.length > 2) {
|
|
266
|
-
if (inputValue.startsWith('00')) {
|
|
267
|
-
this.inputZeroAdded[type] = true;
|
|
268
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
269
|
-
if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
|
|
270
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
271
|
-
this.hours = minHour;
|
|
272
|
-
}
|
|
273
|
-
else {
|
|
274
|
-
this.hours = '00';
|
|
275
|
-
reputedToZero = true;
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
else {
|
|
279
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
280
|
-
this.hours = minHour;
|
|
281
|
-
}
|
|
282
|
-
else {
|
|
283
|
-
this.hours = newInputValue;
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
else {
|
|
288
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
289
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
290
|
-
if (parsedNewInputValue >= maxHours) {
|
|
291
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
292
|
-
this.hours = minHour;
|
|
293
|
-
reputedToZero = true;
|
|
294
|
-
}
|
|
295
|
-
else {
|
|
296
|
-
this.hours = '00';
|
|
297
|
-
reputedToZero = true;
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
else {
|
|
301
|
-
if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
|
|
302
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
303
|
-
this.hours = minHour;
|
|
304
|
-
}
|
|
305
|
-
else {
|
|
306
|
-
this.hours = '00';
|
|
307
|
-
reputedToZero = true;
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
else {
|
|
311
|
-
if (parsedNewInputValue < parseInt(minHour, 10)) {
|
|
312
|
-
this.hours = minHour;
|
|
313
|
-
}
|
|
314
|
-
else {
|
|
315
|
-
this.hours = parsedNewInputValue.toString();
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
else {
|
|
322
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
323
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
324
|
-
if (parsedNewInputValue >= maxHours) {
|
|
325
|
-
if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
|
|
326
|
-
this.hours = minHour;
|
|
327
|
-
}
|
|
328
|
-
else {
|
|
329
|
-
this.hours = '00';
|
|
330
|
-
reputedToZero = true;
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
else {
|
|
334
|
-
if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
|
|
335
|
-
this.hours = '00';
|
|
336
|
-
reputedToZero = true;
|
|
337
|
-
}
|
|
338
|
-
else {
|
|
339
|
-
if (parsedNewInputValue < parseInt(minHour, 10)) {
|
|
340
|
-
this.hours = minHour;
|
|
341
|
-
}
|
|
342
|
-
else {
|
|
343
|
-
this.hours = parsedNewInputValue.toString();
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
if (this.hours.length === 2 &&
|
|
349
|
-
!this.inputZeroAdded[type] &&
|
|
350
|
-
!reputedToZero) {
|
|
351
|
-
(_a = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
352
|
-
(_b = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
|
|
353
|
-
}
|
|
354
|
-
else if (reputedToZero) {
|
|
355
|
-
(_c = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
356
|
-
(_d = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _d === void 0 ? void 0 : _d.select();
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
handleMinutesChange(inputValue, type) {
|
|
360
|
-
var _a, _b, _c, _d, _e, _f;
|
|
361
|
-
const maxMinutes = 60;
|
|
362
|
-
let reputedToZero = false;
|
|
363
|
-
const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
|
|
364
|
-
const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
|
|
365
|
-
if (inputValue.length === 1) {
|
|
366
|
-
this.inputZeroAdded[type] = true;
|
|
367
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
368
|
-
if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
|
|
369
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
370
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
371
|
-
}
|
|
372
|
-
else {
|
|
373
|
-
this.minutes = '00';
|
|
374
|
-
reputedToZero = true;
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
else {
|
|
378
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
379
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
380
|
-
}
|
|
381
|
-
else {
|
|
382
|
-
this.minutes = newInputValue;
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
else if (this.inputZeroAdded[type]) {
|
|
387
|
-
this.inputZeroAdded[type] = false;
|
|
388
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
389
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
390
|
-
if (parsedNewInputValue >= maxMinutes) {
|
|
391
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
392
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
393
|
-
}
|
|
394
|
-
else {
|
|
395
|
-
this.minutes = '00';
|
|
396
|
-
reputedToZero = true;
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
else {
|
|
400
|
-
if (maxMinute && parsedNewInputValue > maxMinute) {
|
|
401
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
402
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
403
|
-
}
|
|
404
|
-
else {
|
|
405
|
-
this.minutes = '00';
|
|
406
|
-
reputedToZero = true;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
else {
|
|
410
|
-
if (minMinute && parsedNewInputValue < minMinute) {
|
|
411
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
412
|
-
}
|
|
413
|
-
else {
|
|
414
|
-
this.minutes = newInputValue;
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
else if (inputValue.length > 2) {
|
|
420
|
-
if (inputValue.startsWith('00')) {
|
|
421
|
-
this.inputZeroAdded[type] = true;
|
|
422
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
423
|
-
if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
|
|
424
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
425
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
426
|
-
}
|
|
427
|
-
else {
|
|
428
|
-
this.minutes = '00';
|
|
429
|
-
reputedToZero = true;
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
else {
|
|
433
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
434
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
435
|
-
}
|
|
436
|
-
else {
|
|
437
|
-
this.minutes = newInputValue;
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
}
|
|
441
|
-
else {
|
|
442
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
443
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
444
|
-
if (parsedNewInputValue >= maxMinutes) {
|
|
445
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
446
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
447
|
-
}
|
|
448
|
-
else {
|
|
449
|
-
this.minutes = '00';
|
|
450
|
-
reputedToZero = true;
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
else {
|
|
454
|
-
if (maxMinute && parsedNewInputValue > maxMinute) {
|
|
455
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
456
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
457
|
-
}
|
|
458
|
-
else {
|
|
459
|
-
this.minutes = '00';
|
|
460
|
-
reputedToZero = true;
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
else {
|
|
464
|
-
if (minMinute && parsedNewInputValue < minMinute) {
|
|
465
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
466
|
-
}
|
|
467
|
-
else {
|
|
468
|
-
this.minutes = parsedNewInputValue.toString();
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
else {
|
|
475
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
476
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
477
|
-
if (parsedNewInputValue >= maxMinutes) {
|
|
478
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
479
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
480
|
-
}
|
|
481
|
-
else {
|
|
482
|
-
this.minutes = '00';
|
|
483
|
-
reputedToZero = true;
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
else {
|
|
487
|
-
if (maxMinute && parsedNewInputValue > maxMinute) {
|
|
488
|
-
if (minMinute && parseInt(newInputValue, 10) < minMinute) {
|
|
489
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
490
|
-
}
|
|
491
|
-
else {
|
|
492
|
-
this.minutes = '00';
|
|
493
|
-
reputedToZero = true;
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
else {
|
|
497
|
-
if (minMinute && parsedNewInputValue < minMinute) {
|
|
498
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
499
|
-
}
|
|
500
|
-
else {
|
|
501
|
-
this.minutes = parsedNewInputValue.toString();
|
|
502
|
-
}
|
|
503
|
-
}
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
if (this.minutes.length === 2 &&
|
|
507
|
-
!this.inputZeroAdded[type] &&
|
|
508
|
-
!reputedToZero) {
|
|
509
|
-
(_c = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
510
|
-
(_d = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
511
|
-
}
|
|
512
|
-
else if (reputedToZero) {
|
|
513
|
-
(_e = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _e === void 0 ? void 0 : _e.focus();
|
|
514
|
-
(_f = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _f === void 0 ? void 0 : _f.select();
|
|
515
|
-
}
|
|
516
|
-
}
|
|
517
|
-
handleSecondsChange(inputValue, type) {
|
|
518
|
-
var _a, _b, _c, _d;
|
|
519
|
-
const maxSeconds = 60;
|
|
520
|
-
let reputedToZero = false;
|
|
521
|
-
const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
|
|
522
|
-
const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
|
|
523
|
-
if (inputValue.length === 1) {
|
|
524
|
-
this.inputZeroAdded[type] = true;
|
|
525
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
526
|
-
if (maxSecond && parseInt(newInputValue, 10) > maxSecond) {
|
|
527
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
528
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
529
|
-
}
|
|
530
|
-
else {
|
|
531
|
-
this.seconds = '00';
|
|
532
|
-
reputedToZero = true;
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
else {
|
|
536
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
537
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
538
|
-
}
|
|
539
|
-
else {
|
|
540
|
-
this.seconds = newInputValue;
|
|
541
|
-
}
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
else if (this.inputZeroAdded[type]) {
|
|
545
|
-
this.inputZeroAdded[type] = false;
|
|
546
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
547
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
548
|
-
if (parsedNewInputValue >= maxSeconds) {
|
|
549
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
550
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
551
|
-
}
|
|
552
|
-
else {
|
|
553
|
-
this.seconds = '00';
|
|
554
|
-
reputedToZero = true;
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
else {
|
|
558
|
-
if (maxSecond && parsedNewInputValue > maxSecond) {
|
|
559
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
560
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
561
|
-
}
|
|
562
|
-
else {
|
|
563
|
-
this.seconds = '00';
|
|
564
|
-
reputedToZero = true;
|
|
565
|
-
}
|
|
566
|
-
}
|
|
567
|
-
else {
|
|
568
|
-
if (minSecond && parsedNewInputValue < minSecond) {
|
|
569
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
570
|
-
}
|
|
571
|
-
else {
|
|
572
|
-
this.seconds = newInputValue;
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
else if (inputValue.length > 2) {
|
|
578
|
-
const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
|
|
579
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
580
|
-
if (parsedNewInputValue >= maxSeconds) {
|
|
581
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
582
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
583
|
-
}
|
|
584
|
-
else {
|
|
585
|
-
this.seconds = '00';
|
|
586
|
-
reputedToZero = true;
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
else {
|
|
590
|
-
if (maxSecond && parsedNewInputValue > maxSecond) {
|
|
591
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
592
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
593
|
-
}
|
|
594
|
-
else {
|
|
595
|
-
this.seconds = '00';
|
|
596
|
-
reputedToZero = true;
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
else {
|
|
600
|
-
if (minSecond && parsedNewInputValue < minSecond) {
|
|
601
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
602
|
-
}
|
|
603
|
-
else {
|
|
604
|
-
this.seconds = parsedNewInputValue.toString();
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
}
|
|
609
|
-
else {
|
|
610
|
-
const newInputValue = inputValue.padStart(2, '0');
|
|
611
|
-
const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
|
|
612
|
-
if (parsedNewInputValue >= maxSeconds) {
|
|
613
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
614
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
615
|
-
}
|
|
616
|
-
else {
|
|
617
|
-
this.seconds = '00';
|
|
618
|
-
reputedToZero = true;
|
|
619
|
-
}
|
|
620
|
-
}
|
|
621
|
-
else {
|
|
622
|
-
if (maxSecond && parsedNewInputValue > maxSecond) {
|
|
623
|
-
if (minSecond && parseInt(newInputValue, 10) < minSecond) {
|
|
624
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
625
|
-
}
|
|
626
|
-
else {
|
|
627
|
-
this.seconds = '00';
|
|
628
|
-
reputedToZero = true;
|
|
629
|
-
}
|
|
630
|
-
}
|
|
631
|
-
else {
|
|
632
|
-
if (minSecond && parsedNewInputValue < minSecond) {
|
|
633
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
634
|
-
}
|
|
635
|
-
else {
|
|
636
|
-
this.seconds = parsedNewInputValue.toString();
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
}
|
|
641
|
-
if (reputedToZero) {
|
|
642
|
-
(_c = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
643
|
-
(_d = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
// Parse a continuous time string (e.g., "123456") into hours, minutes, and seconds
|
|
647
|
-
parseTime(timeString) {
|
|
648
|
-
if (!timeString) {
|
|
649
|
-
return;
|
|
650
|
-
}
|
|
651
|
-
const cleanedTime = timeString.replace(/[^0-9]/g, '').padStart(6, '0');
|
|
652
|
-
const hour = cleanedTime.slice(0, 2);
|
|
653
|
-
const minute = cleanedTime.slice(2, 4);
|
|
654
|
-
const second = cleanedTime.slice(4, 6);
|
|
655
|
-
const minHour = this.parseHour(this.min, this.format) || hour;
|
|
656
|
-
const minMinute = this.parseMinute(this.min) || minute;
|
|
657
|
-
const minSecond = this.parseSecond(this.min) || second;
|
|
658
|
-
this.hours = minHour.padStart(2, '0');
|
|
659
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
660
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
661
|
-
}
|
|
662
|
-
reconstructTime() {
|
|
663
|
-
if (this.format === 'HH' || this.format === 'hh') {
|
|
664
|
-
return this.hours;
|
|
665
|
-
}
|
|
666
|
-
else if (this.format === 'HH:mm' || this.format === 'hh:mm') {
|
|
667
|
-
return `${this.hours}:${this.minutes}`;
|
|
668
|
-
}
|
|
669
|
-
else if (this.format === 'HH:mm:ss' || this.format === 'hh:mm:ss') {
|
|
670
|
-
return `${this.hours}:${this.minutes}:${this.seconds}`;
|
|
671
|
-
}
|
|
672
|
-
else {
|
|
673
|
-
return `${this.hours}:${this.minutes}:${this.seconds}`;
|
|
674
|
-
}
|
|
675
|
-
}
|
|
676
|
-
handleFocus(type) {
|
|
677
|
-
var _a, _b, _c, _d;
|
|
678
|
-
if (this.readonly || this.disabled) {
|
|
679
|
-
return;
|
|
680
|
-
}
|
|
681
|
-
if (!this.open) {
|
|
682
|
-
this.open = true; // Force the popover to open
|
|
683
|
-
}
|
|
684
|
-
// Refocus on the input if it loses focus and is empty
|
|
685
|
-
if (((_a = this.inputElements[type]) === null || _a === void 0 ? void 0 : _a.value.length) === 0 ||
|
|
686
|
-
((_b = this.inputElements[type]) === null || _b === void 0 ? void 0 : _b.value) === '00') {
|
|
687
|
-
(_c = this.inputElements[type]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
688
|
-
(_d = this.inputElements[type]) === null || _d === void 0 ? void 0 : _d.select();
|
|
689
|
-
}
|
|
690
|
-
this.typeFocused = type;
|
|
691
|
-
}
|
|
692
|
-
HandleDropdownIconClick() {
|
|
693
|
-
var _a, _b, _c, _d, _e, _f;
|
|
694
|
-
if (this.disabled || this.readonly) {
|
|
695
|
-
return; // Do not toggle if disabled or read-only
|
|
696
|
-
}
|
|
697
|
-
if (this.open && this.inputElements[constants69bafca2.TimeType.Hours]) {
|
|
698
|
-
this.open = false; // Close the popover if it is open
|
|
699
|
-
}
|
|
700
|
-
else if (this.open && this.inputElements[constants69bafca2.TimeType.Minutes]) {
|
|
701
|
-
this.open = false; // Close the popover if it is open
|
|
702
|
-
}
|
|
703
|
-
else if (this.open && this.inputElements[constants69bafca2.TimeType.Seconds]) {
|
|
704
|
-
this.open = false; // Close the popover if it is open
|
|
705
|
-
}
|
|
706
|
-
else if (!this.open && this.inputElements[constants69bafca2.TimeType.Hours]) {
|
|
707
|
-
(_a = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
|
|
708
|
-
(_b = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
|
|
709
|
-
}
|
|
710
|
-
else if (!this.open && this.inputElements[constants69bafca2.TimeType.Minutes]) {
|
|
711
|
-
(_c = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _c === void 0 ? void 0 : _c.focus(); // Focus will open the popover
|
|
712
|
-
(_d = this.inputElements[constants69bafca2.TimeType.Minutes]) === null || _d === void 0 ? void 0 : _d.select();
|
|
713
|
-
}
|
|
714
|
-
else if (!this.open && this.inputElements[constants69bafca2.TimeType.Seconds]) {
|
|
715
|
-
(_e = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _e === void 0 ? void 0 : _e.focus(); // Focus will open the popover
|
|
716
|
-
(_f = this.inputElements[constants69bafca2.TimeType.Seconds]) === null || _f === void 0 ? void 0 : _f.select();
|
|
717
|
-
}
|
|
718
|
-
else {
|
|
719
|
-
console.warn('nv-fieldtime -> No input elements found to focus or to blur');
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
|
-
updateHighlightedItem(items, index) {
|
|
723
|
-
items.forEach((item, i) => {
|
|
724
|
-
if (i === index) {
|
|
725
|
-
item.classList.add('highlighted');
|
|
726
|
-
item.setAttribute('tabindex', '0');
|
|
727
|
-
item.focus(); // Forcer le focus ici
|
|
728
|
-
item.scrollIntoView({ block: 'nearest' });
|
|
729
|
-
}
|
|
730
|
-
else {
|
|
731
|
-
item.classList.remove('highlighted');
|
|
732
|
-
item.setAttribute('tabindex', '-1');
|
|
733
|
-
}
|
|
734
|
-
});
|
|
735
|
-
}
|
|
736
|
-
handleTimeOptionClick(event, type) {
|
|
737
|
-
const option = parseInt(event.target.textContent || '0', 10);
|
|
738
|
-
if (type === constants69bafca2.TimeType.Hours) {
|
|
739
|
-
this.hours = option.toString().padStart(2, '0');
|
|
740
|
-
}
|
|
741
|
-
else if (type === constants69bafca2.TimeType.Minutes) {
|
|
742
|
-
this.minutes = option.toString().padStart(2, '0');
|
|
743
|
-
}
|
|
744
|
-
else if (type === constants69bafca2.TimeType.Seconds) {
|
|
745
|
-
this.seconds = option.toString().padStart(2, '0');
|
|
746
|
-
}
|
|
747
|
-
const reconstructTime = this.reconstructTime();
|
|
748
|
-
this.value = reconstructTime;
|
|
749
|
-
}
|
|
750
|
-
handleInputBlur() {
|
|
751
|
-
// Use a delay to check if the focus is still within the popover
|
|
752
|
-
setTimeout(() => {
|
|
753
|
-
if (!this.el.contains(document.activeElement)) {
|
|
754
|
-
if (this.open) {
|
|
755
|
-
this.open = false; // Close the popover if the focus is outside the component
|
|
756
|
-
}
|
|
757
|
-
}
|
|
758
|
-
}, 150);
|
|
759
|
-
}
|
|
760
|
-
handleClickOutside(event) {
|
|
761
|
-
const target = event.target;
|
|
762
|
-
// Check if the click is inside the component or any of the input elements
|
|
763
|
-
if (this.el.contains(target) ||
|
|
764
|
-
Object.values(this.inputElements).some(input => input.contains(target))) {
|
|
765
|
-
return;
|
|
766
|
-
}
|
|
767
|
-
if (this.open) {
|
|
768
|
-
this.open = false; // Close the popover if the click is outside
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
handleScroll(e, type) {
|
|
772
|
-
const target = e.target;
|
|
773
|
-
const scrollTop = target.scrollTop;
|
|
774
|
-
const containerHeight = target.clientHeight;
|
|
775
|
-
const scrollHeight = target.scrollHeight;
|
|
776
|
-
// Define the height of each item, this could be dynamic if the height varies
|
|
777
|
-
const itemHeight = 40; // Consider making this configurable or dynamic
|
|
778
|
-
const options = this.generateTimeOptions(type); // Generates the list of time options
|
|
779
|
-
const singleSetHeight = options.length * itemHeight;
|
|
780
|
-
// Check if the scroll is near the bottom or top and reset to the first set
|
|
781
|
-
if (scrollTop + containerHeight >= scrollHeight - itemHeight ||
|
|
782
|
-
scrollTop <= 0) {
|
|
783
|
-
target.scrollTop = singleSetHeight; // Reset to the first set from the bottom
|
|
784
|
-
}
|
|
785
|
-
}
|
|
786
|
-
generateTimeOptions(type) {
|
|
787
|
-
// Convert the step in seconds
|
|
788
|
-
const stepInSeconds = this.step / 1000;
|
|
789
|
-
// Handle edge case for zero step
|
|
790
|
-
if (stepInSeconds === 0) {
|
|
791
|
-
return ['00']; // Just return the default value
|
|
792
|
-
}
|
|
793
|
-
// Generate the time options based on the type
|
|
794
|
-
switch (type) {
|
|
795
|
-
case constants69bafca2.TimeType.Hours:
|
|
796
|
-
return this.generateHourOptions(stepInSeconds);
|
|
797
|
-
case constants69bafca2.TimeType.Minutes:
|
|
798
|
-
return this.generateMinuteOptions(stepInSeconds);
|
|
799
|
-
case constants69bafca2.TimeType.Seconds:
|
|
800
|
-
return this.generateSecondOptions(stepInSeconds);
|
|
801
|
-
default:
|
|
802
|
-
return [];
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
generateHourOptions(stepInSeconds) {
|
|
806
|
-
const hourStep = Math.max(1, Math.floor(stepInSeconds / 3600)); // Prevent step < 1
|
|
807
|
-
const maxHour = this.parseHour(this.max, this.format) ||
|
|
808
|
-
(this.format.startsWith('hh') ? '12' : '24');
|
|
809
|
-
const minHour = this.parseHour(this.min, this.format) || '00';
|
|
810
|
-
const maxHourValue = parseInt(maxHour, 10);
|
|
811
|
-
const minHourValue = parseInt(minHour, 10);
|
|
812
|
-
const values = [];
|
|
813
|
-
for (let i = minHourValue; i < maxHourValue; i += hourStep) {
|
|
814
|
-
values.push(i.toString().padStart(2, '0'));
|
|
815
|
-
}
|
|
816
|
-
return values;
|
|
817
|
-
}
|
|
818
|
-
parseHour(value, format) {
|
|
819
|
-
if (!value)
|
|
820
|
-
return null;
|
|
821
|
-
const [hourStr] = value.split(':');
|
|
822
|
-
const hour = parseInt(hourStr, 10);
|
|
823
|
-
if (isNaN(hour))
|
|
824
|
-
return null;
|
|
825
|
-
if (format.startsWith('hh'))
|
|
826
|
-
return hour > 0 && hour <= 12 ? hourStr.padStart(2, '0') : null;
|
|
827
|
-
return hour >= 0 && hour <= 24 ? hourStr.padStart(2, '0') : null;
|
|
828
|
-
}
|
|
829
|
-
generateMinuteOptions(stepInSeconds) {
|
|
830
|
-
var _a, _b;
|
|
831
|
-
const minuteStep = Math.max(1, Math.floor((stepInSeconds % 3600) / 60)); // Ensure step >= 1
|
|
832
|
-
const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
|
|
833
|
-
const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
|
|
834
|
-
if (minMinute === 0 && maxMinute === 0)
|
|
835
|
-
return ['00']; // Handle edge case for zero seconds
|
|
836
|
-
const values = [];
|
|
837
|
-
for (let i = minMinute; i <= maxMinute; i += minuteStep) {
|
|
838
|
-
values.push(i.toString().padStart(2, '0'));
|
|
839
|
-
}
|
|
840
|
-
return values;
|
|
841
|
-
}
|
|
842
|
-
parseMinute(value) {
|
|
843
|
-
if (!value)
|
|
844
|
-
return null;
|
|
845
|
-
const parts = value.split(':');
|
|
846
|
-
if (parts.length < 2)
|
|
847
|
-
return null; // Expect at least "hh:mm"
|
|
848
|
-
const minute = parseInt(parts[1], 10);
|
|
849
|
-
return isNaN(minute) || minute < 0 || minute >= 60 ? null : minute;
|
|
850
|
-
}
|
|
851
|
-
generateSecondOptions(stepInSeconds) {
|
|
852
|
-
var _a, _b;
|
|
853
|
-
const secondStep = Math.max(1, stepInSeconds % 60); // Ensure step >= 1
|
|
854
|
-
const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
|
|
855
|
-
const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
|
|
856
|
-
if (minSecond === 0 && maxSecond === 0)
|
|
857
|
-
return ['00']; // Handle edge case for zero seconds
|
|
858
|
-
const values = [];
|
|
859
|
-
for (let i = minSecond; i <= maxSecond; i += secondStep) {
|
|
860
|
-
values.push(i.toString().padStart(2, '0'));
|
|
861
|
-
}
|
|
862
|
-
return values;
|
|
863
|
-
}
|
|
864
|
-
parseSecond(value) {
|
|
865
|
-
if (!value)
|
|
866
|
-
return null;
|
|
867
|
-
const parts = value.split(':');
|
|
868
|
-
if (parts.length < 3)
|
|
869
|
-
return null; // Expect "hh:mm:ss" or "HH:mm:ss"
|
|
870
|
-
const second = parseInt(parts[2], 10);
|
|
871
|
-
return isNaN(second) || second < 0 || second >= 60 ? null : second;
|
|
872
|
-
}
|
|
873
|
-
generateInfiniteTimeOptions(type) {
|
|
874
|
-
const options = this.generateTimeOptions(type);
|
|
875
|
-
const totalOptions = options.length;
|
|
876
|
-
// Dynamically calculate repetitions based on a target number of items (e.g., 300 items)
|
|
877
|
-
const repetitions = Math.ceil(300 / totalOptions);
|
|
878
|
-
return Array(repetitions).fill(options).flat();
|
|
879
|
-
}
|
|
880
|
-
getCurrentTime() {
|
|
881
|
-
const currentTime = new Date();
|
|
882
|
-
return currentTime.toLocaleTimeString(); // Returns the time in the locale's format
|
|
883
|
-
}
|
|
884
|
-
updateColumnHighlight(selector, value) {
|
|
885
|
-
const items = Array.from(this.el.querySelectorAll(selector));
|
|
886
|
-
const index = items.findIndex(x => x.textContent === value);
|
|
887
|
-
this.updateHighlightedItem(items, index);
|
|
888
|
-
}
|
|
889
|
-
handleHostClick(event) {
|
|
890
|
-
var _a, _b;
|
|
891
|
-
if (this.disabled || this.readonly) {
|
|
892
|
-
return;
|
|
893
|
-
}
|
|
894
|
-
const targetElement = event.target;
|
|
895
|
-
// Check if the click target or its ancestors are inside an nv-iconbutton element
|
|
896
|
-
if (targetElement.closest('nv-iconbutton')) {
|
|
897
|
-
return; // Handle icon button click separately
|
|
898
|
-
}
|
|
899
|
-
if (!this.open) {
|
|
900
|
-
if (this.inputElements) {
|
|
901
|
-
(_a = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
902
|
-
(_b = this.inputElements[constants69bafca2.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
|
|
903
|
-
}
|
|
904
|
-
event.preventDefault();
|
|
905
|
-
}
|
|
906
|
-
}
|
|
907
|
-
//#endregion METHODS
|
|
908
|
-
/****************************************************************************/
|
|
909
|
-
//#region LIFECYCLE
|
|
910
|
-
componentWillLoad() {
|
|
911
|
-
document.addEventListener('click', this.handleClickOutside.bind(this));
|
|
912
|
-
// If an initial value is passed, parse it
|
|
913
|
-
if (this.value) {
|
|
914
|
-
this.parseTime(this.value);
|
|
915
|
-
}
|
|
916
|
-
else {
|
|
917
|
-
const minHour = this.parseHour(this.min, this.format) || '00';
|
|
918
|
-
const minMinute = this.parseMinute(this.min) || 0;
|
|
919
|
-
const minSecond = this.parseSecond(this.min) || 0;
|
|
920
|
-
this.hours = minHour.padStart(2, '0');
|
|
921
|
-
this.minutes = minMinute.toString().padStart(2, '0');
|
|
922
|
-
this.seconds = minSecond.toString().padStart(2, '0');
|
|
923
|
-
}
|
|
924
|
-
}
|
|
925
|
-
connectedCallback() {
|
|
926
|
-
document.addEventListener('click', this.handleClickOutside.bind(this));
|
|
927
|
-
}
|
|
928
|
-
disconnectedCallback() {
|
|
929
|
-
document.removeEventListener('click', this.handleClickOutside.bind(this));
|
|
930
|
-
}
|
|
931
|
-
componentDidLoad() {
|
|
932
|
-
if (!this.value) {
|
|
933
|
-
const currentTime = this.getCurrentTime();
|
|
934
|
-
// Split time into components
|
|
935
|
-
// eslint-disable-next-line prefer-const
|
|
936
|
-
let [hour, minute, secondAmPm] = currentTime.split(':');
|
|
937
|
-
let second, amPm;
|
|
938
|
-
// Check if AM/PM is present and split accordingly
|
|
939
|
-
if (secondAmPm.includes(' ')) {
|
|
940
|
-
[second, amPm] = secondAmPm.split(' ');
|
|
941
|
-
}
|
|
942
|
-
else {
|
|
943
|
-
second = secondAmPm;
|
|
944
|
-
}
|
|
945
|
-
// Parse hour as integer for calculations
|
|
946
|
-
let parsedHour = parseInt(hour, 10);
|
|
947
|
-
// Convert hour to 24-hour format based on AM/PM (if present)
|
|
948
|
-
if (amPm) {
|
|
949
|
-
if (amPm === 'PM' && parsedHour < 12) {
|
|
950
|
-
parsedHour += 12; // Convert PM to 24-hour
|
|
951
|
-
}
|
|
952
|
-
else if (amPm === 'AM' && parsedHour === 12) {
|
|
953
|
-
parsedHour = 0; // Midnight in 24-hour format
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
// Adjust for 12-hour format if necessary
|
|
957
|
-
if (this.format.startsWith('hh')) {
|
|
958
|
-
if (parsedHour === 0) {
|
|
959
|
-
hour = '12'; // Midnight in 12-hour format
|
|
960
|
-
}
|
|
961
|
-
else if (parsedHour > 12) {
|
|
962
|
-
hour = (parsedHour - 12).toString(); // Convert 24-hour to 12-hour
|
|
963
|
-
}
|
|
964
|
-
else {
|
|
965
|
-
hour = parsedHour.toString();
|
|
966
|
-
}
|
|
967
|
-
}
|
|
968
|
-
else {
|
|
969
|
-
hour = parsedHour.toString(); // Use 24-hour format directly
|
|
970
|
-
}
|
|
971
|
-
// Pad hour, minute, and second to ensure two digits
|
|
972
|
-
hour = hour.padStart(2, '0');
|
|
973
|
-
minute = minute.padStart(2, '0');
|
|
974
|
-
second = second.padStart(2, '0');
|
|
975
|
-
// Update highlighted items for hours
|
|
976
|
-
const hourSelector = `.time-column.time-column-hours div`;
|
|
977
|
-
this.updateColumnHighlight(hourSelector, hour);
|
|
978
|
-
// Update highlighted items for minutes
|
|
979
|
-
const minuteSelector = `.time-column.time-column-minutes div`;
|
|
980
|
-
this.updateColumnHighlight(minuteSelector, minute);
|
|
981
|
-
// Update highlighted items for seconds
|
|
982
|
-
const secondSelector = `.time-column.time-column-seconds div`;
|
|
983
|
-
this.updateColumnHighlight(secondSelector, second);
|
|
984
|
-
}
|
|
985
|
-
}
|
|
986
|
-
//#endregion LIFECYCLE
|
|
987
|
-
/****************************************************************************/
|
|
988
|
-
//#region RENDER
|
|
989
|
-
RenderTimeOptionsColumn(type) {
|
|
990
|
-
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: {
|
|
991
|
-
'time-option': true,
|
|
992
|
-
'selected': (type === constants69bafca2.TimeType.Hours && option === this.hours) ||
|
|
993
|
-
(type === constants69bafca2.TimeType.Minutes && option === this.minutes) ||
|
|
994
|
-
(type === constants69bafca2.TimeType.Seconds && option === this.seconds),
|
|
995
|
-
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
996
|
-
}
|
|
997
|
-
render() {
|
|
998
|
-
return (index.h(index.Host, { key: 'ef5f12cdbd62c18033f57ff176775b5ee62ebb85', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '64e20904debf287e69e5717f2d28ac4a700b7f15', htmlFor: this.inputId }, index.h("slot", { key: 'e0644a80e23854ca06baf8b52b00649a0e6f1ed9', name: "label" }, this.label))), index.h("nv-popover", { key: '98d71eeb73ce93c16c488e80f79bbe269a44ddc3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '9a7d256f3c64aed3314338c8306540d92dddaad0', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'ac0e04737b86e4767e4c249ee95e4b69a41ea387', name: "before-input" }), index.h("div", { key: '1f04ff2f539048eb00500b2fbbeaf86ce1698065', class: "input-container" }, index.h("slot", { key: '60ee3a49ea9ca9509224c57dc64f3ccab7f89312', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
|
|
999
|
-
index.h("input", { key: 'cb8a979ce6e4d83074e0c9046bbf3a60821e5262', ref: el => (this.inputElements[constants69bafca2.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants69bafca2.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants69bafca2.TimeType.Hours), name: this.name
|
|
1000
|
-
? `${constants69bafca2.TimeType.Hours}-${this.name}`
|
|
1001
|
-
: constants69bafca2.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
1002
|
-
], this.format.includes('mm') && [
|
|
1003
|
-
index.h("span", { key: '74f9604ffd54e0c0bbd88996e32fdcb08f2c3645' }, ":"),
|
|
1004
|
-
index.h("input", { key: '52f9b637bba804cac6fadff06e8b077bb2f5748a', ref: el => (this.inputElements[constants69bafca2.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants69bafca2.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants69bafca2.TimeType.Minutes), name: this.name
|
|
1005
|
-
? `${constants69bafca2.TimeType.Minutes}-${this.name}`
|
|
1006
|
-
: constants69bafca2.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
1007
|
-
], this.format.includes('ss') && [
|
|
1008
|
-
index.h("span", { key: '878bc9ce7557e9cf9471803a86956a9184d0ccb5' }, ":"),
|
|
1009
|
-
index.h("input", { key: 'b074d4d3ef80f66e7dbe051b6bc53f151661f409', ref: el => (this.inputElements[constants69bafca2.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants69bafca2.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants69bafca2.TimeType.Seconds), name: this.name
|
|
1010
|
-
? `${constants69bafca2.TimeType.Seconds}-${this.name}`
|
|
1011
|
-
: constants69bafca2.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
1012
|
-
], index.h("nv-iconbutton", { key: '3f5d78116ee60d1874a4629d9cf36a06d52b7df4', 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: '4b2356cf95131af213a4e98feede16fc8c4963db', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: 'f9b0e61037049a36ac900d1af9ecc71b211ebd88', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '6177abde559c57f2b0586368ead1a61d7b543838', name: "after-input" })), index.h("div", { key: 'f6d5205a5011411550179f9337143163cb547fb1', class: "time-dropdown", slot: "content" }, index.h("div", { key: '9f0b3e1423bef197b269c5b11ce744cabc2bd6c4', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
|
|
1013
|
-
this.RenderTimeOptionsColumn(constants69bafca2.TimeType.Hours), this.format.includes('mm') &&
|
|
1014
|
-
this.RenderTimeOptionsColumn(constants69bafca2.TimeType.Minutes), this.format.includes('ss') &&
|
|
1015
|
-
this.RenderTimeOptionsColumn(constants69bafca2.TimeType.Seconds)))), (this.description ||
|
|
1016
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '1076ded73b32ff9afbd0f02184febcc82f8d839e', class: "description" }, index.h("slot", { key: '479d09b299d0e380533a6cd689ce7f03aa92ea8e', name: "description" }, this.description))), (this.errorDescription ||
|
|
1017
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5615246dbd797c300be357be37d3b9d0aee56e31', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '6568ea3f9e0bdf85dd280c645956f8e0bb592e35', name: "error-description" }, this.errorDescription)))));
|
|
1018
|
-
}
|
|
1019
|
-
static get formAssociated() { return true; }
|
|
1020
|
-
get el() { return index.getElement(this); }
|
|
1021
|
-
static get watchers() { return {
|
|
1022
|
-
"value": ["handleValueChange"],
|
|
1023
|
-
"open": ["handleOpenChange"]
|
|
1024
|
-
}; }
|
|
1025
|
-
};
|
|
1026
|
-
NvFieldtime.style = NvFieldtimeStyle0;
|
|
1027
|
-
|
|
1028
|
-
exports.nv_fieldtime = NvFieldtime;
|